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編集が求められるからちょっと手間がかかる。

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

コメント

最近の投稿

コドリンガの悪魔の害虫と呼ばれる農業破壊の脅威

人気の投稿

細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス

宜保愛子は本物の霊能力者だと考えられる三つの真実

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

アドセンスのGDPRに日本でも対応しなくてはならない場合がある

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

日本人がジャニーズ事務所で行われた性加害よりも恐れていること

沖雅也の涅槃への自殺と双極性障害

玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ

Imgurで画像URLと埋め込みコードを取得する方法

Googleの誕生祝いでプロフィールアイコンに風船と紙吹雪が飛んで来た