Contempoのページリスト（先頭）ガジェットにスマホでもっと見る…を表示する条件

些細な日常のページリスト（先頭）ガジェットはスマホでもっと見る…が表示されている。些細な日常のスマホのトップページのページリスト（先頭）ガジェットのもっと見る…の表示

Bloggerの公式テーマのContempoを使ってレイアウトでページリスト（先頭）ガジェットを設定して項目が多い場合にスマホで画面の横一列に入り切らず、省略してもっと見る…のボタンが表示されるようになっている。ところがカスタマイズによってデザインが反映しなくなってしまうと分かった。調べるとBloggerのバグなのか、テーマのカスタマイズの上級者向けの本文の文字サイズを15px以下に変えると上手く行かないようなんだ。もう一つデザインで、ページリスト（先頭）ガジェットにホーム／トップページを設定した場合にContempoテーマの現行のVersion 1.3.0（HTML編集の冒頭の「templateVersion」で確認可能）では太めの下線が入るけれども消えてしまう。どうすればスマホでもっと見る…やホームの下線というデフォルトのデザインが反映するかは本文の文字サイズを15px以上にしておくと良いみたいなんだ。しかしそれだとテンプレートのカスタマイズが制限されるから両立できる方法はないかと探してみると一つの条件が見付かったからデザインが崩れた些細な日常では喜ばしく取り入れた。本文の文字サイズが15px未満でのソースコードの修正点.tabs .overflow-button a,.tabs li a{ color:$(tabs.color); font:$(tabs.font); line-height:$(body.text.font.size * 1.2) }BloggerのHTML編集で、CSSの「.tabs .overflow-button a,.tabs li a」の指定先の「line-height」の「1.2」の数字を適切に変えると上手く行く。変数の$が付いている「body.text.font.size」がテンプレートの本文の文字サイズに置き換えられる。本文の文字サイズが15px以上だと大丈夫なのは「1.2」が追加された16.2pxが行間の「line-height」の値としてコンピューターで計算されてデフォルトのデザインが反映するみたいなので、ソースコードの変数の中身の「(body.text.font.size * 1.2)」を「16.2px」以上に置き換えると大丈夫で、またはテンプレートで設定したい文字サイズの数字と合わせて16.2px以上になるように「1.2」を書き換えても大丈夫なんだ。本文の文字サイズが14.95pxでのサンプルのソースコード.tabs .overflow-button a,.tabs li a{ color:$(tabs.color); font:$(tabs.font); line-height:$(body.text.font.size * 1.25) }テンプレートで設定したい本文の文字サイズか15px未満ならばデフォルトのデザインが反映する下限の15pxまで足りない分量を「1.2」に足して行くと良い。例えば14.95pxだと0.05pxが足りないからそれをline-heightの$の「1.2」に足して「1.25」に書き換えると上手く行くんだ。Bloggerのページリスト（先頭）ガジェットはContempoと同時期に発表された公式テーマで使えるけれども他のSohoとEmporioとNotableでは特に問題はないようで、項目の多い場合のもっと見る…などのスマホで省略したデザインはContempoにかぎって注意が必要だった。本文の文字サイズをデフォルトのままで変更しなければ何もしなくて良いけれどもカスタマイズで15px未満に変更したら崩れたデザインを修正するにはHTML編集が求められるからちょっと手間がかかる。

コメント