smartyのforeachでループ回数を取得する方法
https://illbenet.jp/view/57
smartyのforeachで配列を繰り返して表示する方法
https://illbenet.jp/view/56
smartyのin_arrayで配列の中の値の有無を調べる方法
https://illbenet.jp/view/61
smarty アサインの仕方
https://www.smarty.net/docs/ja/language.function.assign.tpl
ある場合trueに入れる
$arrRelativeCat 関連カテゴリ全部
$array 関連カテゴリ1つ
$data 関連カテゴリ1つの全部のカテゴリ（で.category_idで中身取る）<!–{$data.category_id}–>
$data（1つのカテゴリ）にこのカテゴリIDがあったらtrue
trueだったらあり
https://fuuno.net/web02/copy/copy.html
https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard
https://qiita.com/ponsuke0531/items/0fdeeb7f9dcd9385278d
The post コピーボタン first appeared on risalog.]]>ポップアップ画面の中央
https://www.pazru.net/js/window/4.html
ポップアップまとめ
https://www.it-swarm.jp.net/ja/javascript/%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%82%92%E7%94%BB%E9%9D%A2%E3%81%AE%E4%B8%AD%E5%A4%AE%E3%81%AB%E9%85%8D%E7%BD%AE%E3%81%97%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F/970750105/
var y = window.outerHeight / 2 + window.screenY – ( h / 2)
var x = window.outerWidth / 2 + window.screenX – ( w / 2)
【まとめ記事】
・ページの画像をまるごとWebP変換してPageSpeed Insightsスコアを今すぐ改善するチュートリアル
https://blog.ideamans.com/2019/02/webppagespeed-insights.html
・WebP対応をしたらサイトが軽くなったので、最も対応しやすい方法を解説します
https://irokoto.co.jp/blog/20200527/post-8#4_WebPShop
・次世代フォーマット WebP を使ってみよう！
https://www.ones-quest.co.jp/labo/webp02.php
【htaccessまとめ】
・WebPと従来の画像を正しく振り分ける.htaccessファイル
https://blog.ideamans.com/2019/02/webphtaccess.html
・.htaccessによるWebPの選択的レスポンスとその問題点と改善案
https://qiita.com/miyanaga/items/6570c3c9ae8e15dbb57c
【その他】
・decoding=”async”
https://qiita.com/hibikikudo/items/853aafe32ad7900712c8
・Chrome圧縮拡張機能
緑色：不可逆圧縮
紫色：可逆圧縮
赤色：アルファチャンネルなど拡張を含む画像
.parent {
margin: 10px -10px -10px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.child {
align-self: center;
flex-basis: calc(50% - 10px);
max-width: calc(50% - 10px);
margin: 5px;
font-size: 0;
}
}
.parent {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}.child {
margin: 5px; //子要素同士の間の幅10pxの場合
}.child {
flex-basis: calc(50% - 10px); //1行に2個表示の場合
flex-basis: calc(33.33% - 10px); //1行に3個表示の場合
flex-basis: calc(25% - 10px); //1行に4個表示の場合
}
子要素のmargin分、幅が狭くなるので、親要素にマイナスmarginを指定。
両端とbottomはマイナス、topはプラス。
.parent {
margin: 10px -10px -10px; //top left/right bottom
}justify-content: space-between;を指定＋子要素にmarginなしだと、最後の行の要素が端に寄る。
clearfixのcssが設定されているときに、divにafter要素が追加されていると、子要素の並びにafter要素が入るため。
justify-content: flex-start;を指定＋子要素にmargin設定＋flex-basisでcalcで指定する幅からmargin分引くと寄らない。
flexboxのjustify-contentでspace-betweenをすると、余った要素が両端によってしまうのを直したい
子要素に画像があり画像の下に余分な空白ができる場合、font-size: 0を指定すると消える。
.child {
font-size: 0;
}flexショートハンド（まとめて指定）のcalcはIEで効かないため、使用しない。flex-basisで指定。
.child {
flex: 0 1 calc(50% - 10px); //IEで崩れる
flex-basis: calc(50% - 10px); //IEでも崩れない
}flexboxのバグに立ち向かう（flexboxバグまとめ）
IEでカラム落ちするので、max-widthも同時に指定する。
IEではpaddingを指定しているとき、box-sizing: border-boxが効かない。
.child {
flex-basis: 340px;
max-width: 340px;
}IE11でflex-basisの値にbox-sizing: border-boxが効かないバグ
The post Flexbox CSS コードまとめ first appeared on risalog.]]><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jTruncSubstr.js"></script>
<script type="text/javascript">
$().ready(function() {
$('.comment').jTruncSubstr({
length: 200,//表示させる文字数
minTrail: 0,//省略文字の最低文字数
moreText: "続きを読む",//非表示部分を表示するリンクの文字列
lessText: "閉じる",//表示した後、再び非表示にするリンクの文字列
ellipsisText: "...",//続きがあることを表示するための文字列
moreAni: "fast",//表示時のアニメーション速度
lessAni: "fast"//非表示時のアニメーション速度
});
});
</script>
<style>
.comment .truncate_more_link {
text-decoration: underline;
color: #1242b2;
}
</style>
<p class="comment">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>https://developers.google.com/speed/libraries/#jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>http://semooh.jp/jglycy/jquery-plugins/jtruncsubstrからjsファイルをダウンロードしてサーバーにアップ。
<script src="js/jTruncSubstr.js"></script><script type="text/javascript">
$().ready(function() {
$('.comment').jTruncSubstr({
length: 200,//表示させる文字数
minTrail: 0,//省略文字の最低文字数
moreText: "続きを読む",//非表示部分を表示するリンクの文字列
lessText: "閉じる",//表示した後、再び非表示にするリンクの文字列
ellipsisText: "...",//続きがあることを表示するための文字列
moreAni: "fast",//表示時のアニメーション速度
lessAni: "fast"//非表示時のアニメーション速度
});
});
</script>
<p class="comment">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
開閉リンクのクラス名：truncate_more_link
<style>
.comment .truncate_more_link {
text-decoration: underline;
color: #1242b2;
}
</style>PC（幅1000px）：文字数210文字で3行分。
SP（幅355px）：95文字で4行分。
jTruncSubstr
アコーディオン表示の「続きを読む」が簡単に実装できるjQueryプラグイン『jTruncSubstr』