どうも。
昨日は午後から大荒れの天気でしたが、今朝は晴れていましたね。
春はこんなものかと思いながら、なんとなく熱帯の気候に近くなってきているのでは？
さて、今回はサイドバーガジェットを少し変更してみたいと思います。
Vaster2の標準では次の様に表示されます。
トップページの記事一覧同様、やはり長いタイトルとスニペットによって高さが変動しています。
コチラも同様にタイトルの表示行数に制限を設けたいと思います。
どうやらサムネイルの高さとタイトル4行分の高さが同じ位なので、タイトルは4行までに制限して、その下のスニペットの表示はしなくても良いかと。
正確にデザインするのであれば、画像のサイズに合わせて各ブロックのサイズを計算すればピッタリとした表示になります。
画像の高さが72pxなので、それ以内な収めます。
cssを編集するので、Bloggerの左側メニュー＞＞テーマ＞＞HTMLの編集と進み、CSS内の.popular-post ul li a を探して以下を変更、追加します。
（PC では、HTML 編集画面内にカーソルを置き、ctrl + fで検索する文言を入力する事で探せます。）
heightを指定して表示行数を指定したいのですが、インライン要素であるタグaでは、heightを使う事が出来ません。
display: block;とする事でブロック要素に変換します。
リンクも文字列では無く領域のクリックとなります。
フォントサイズに対して上下1pxづつ間隔を取ります。
4行分の高さ=16px ☓ 4行=64px
overflow: hidden ;
height で指定した 64px を超える分は表示しません。
今回はスニペットの表示は無としました。
スニペットの表示はCSSを触らなくとも、Bloggerで設定出来るので簡単です。
Bloggerの左側メニュー＞＞レイアウト＞＞sidebar-section＞＞人気記事の編集と進み、
今回、スニペットを外した理由は見栄え以外にマイクロソフト系のブラウザで表示行数の指定が機能していない（対応していない）現象がある為です。
トップページの記事一覧にも使われている為、マイクロソフト系のブラウザで見るとスニペットが長くなっています。
この辺をどうするか悩んでいる所です。
昨日は午後から大荒れの天気でしたが、今朝は晴れていましたね。
春はこんなものかと思いながら、なんとなく熱帯の気候に近くなってきているのでは？
さて、今回はサイドバーガジェットを少し変更してみたいと思います。
Vaster2 サイドバー人気記事の一部変更 タイトルの行数制御
サイドバーに表示されるウィジェットに'人気の記事'を設けていますが、コチラのタイトルとスニペットの表示について少し変更をします。Vaster2の標準では次の様に表示されます。
コチラも同様にタイトルの表示行数に制限を設けたいと思います。
どうやらサムネイルの高さとタイトル4行分の高さが同じ位なので、タイトルは4行までに制限して、その下のスニペットの表示はしなくても良いかと。
正確にデザインするのであれば、画像のサイズに合わせて各ブロックのサイズを計算すればピッタリとした表示になります。
画像の高さが72pxなので、それ以内な収めます。
.popular-post ul li aを編集
先ずタイトルの行数を編集します。cssを編集するので、Bloggerの左側メニュー＞＞テーマ＞＞HTMLの編集と進み、CSS内の.popular-post ul li a を探して以下を変更、追加します。
（PC では、HTML 編集画面内にカーソルを置き、ctrl + fで検索する文言を入力する事で探せます。）
.popular-post ul li a {
display: block; <====追加
font-size: 15px; <====変更
color:$(popular.color);
font-weight: 500; <====変更
line-height: 18px ; <====追加
height: 64px; <====追加
overflow: hidden; <====追加
}
変更点の詳細display: block; <====追加
font-size: 15px; <====変更
color:$(popular.color);
font-weight: 500; <====変更
line-height: 18px ; <====追加
height: 64px; <====追加
overflow: hidden; <====追加
}
display: block ;
タグaをブロック要素に変えますheightを指定して表示行数を指定したいのですが、インライン要素であるタグaでは、heightを使う事が出来ません。
display: block;とする事でブロック要素に変換します。
リンクも文字列では無く領域のクリックとなります。
font-size 14px ;
14pxに変更。少し小さくしました。font-weight: 500 ;
太さも変更。line-height:16px ;
1行の高さ。フォントサイズに対して上下1pxづつ間隔を取ります。
height : 64px ;
タイトルの高さ領域を指定。4行分の高さ=16px ☓ 4行=64px
overflow: hidden ;
height で指定した 64px を超える分は表示しません。
今回はスニペットの表示は無としました。
スニペットの表示はCSSを触らなくとも、Bloggerで設定出来るので簡単です。
Bloggerの左側メニュー＞＞レイアウト＞＞sidebar-section＞＞人気記事の編集と進み、
抜粋のチェックを外します。
これで、人気記事のデザインを少しだけですが、調整する事が出来ます。
これで、人気記事のデザインを少しだけですが、調整する事が出来ます。
トップページの記事一覧にも使われている為、マイクロソフト系のブラウザで見るとスニペットが長くなっています。
この辺をどうするか悩んでいる所です。
