【Simplicity】ブログカードの本文抜粋を消すCSSの書き方。サイドバーのみの設定も可

Simplicityで使えるブログカード機能は見た目が少しリッチになる感じが好きです。

でも、たとえばサイドバーにブログカード形式で記事リンクを設置する場合、元々の設定のままだと「この本文抜粋(記事詳細)の記述は邪魔だな」と感じる場合もあります。人によっては記事内で表示するブログカードでも「タイトル表示のみにしたい」と思うかもしれませんね。

ということで、今回私はサイドバーで表示するブログカードの本文抜粋部分を非表示にするカスタマイズをしてみましたので、似たようなことをしたい場合は参考にしてみてください。

ブログカードの抜粋を消すためのCSS

やることとしては、抜粋部分の表示に使われているclassを指定して“表示しない”と設定してやるだけです。

なので基本的なCSSとしては次のようになります。

ブログ内のすべてのブログカードに設定を反映する場合

.blog-card-excerpt {
    display:none;
}

上記をそのまま子テーマのstyle.cssに追記してやれば、ブログ内で表示されているブログカードすべてに一律で「抜粋部分の非表示」が適用されます。

サイドバーのブログカードだけに適用したい場合

今回の私のようにサイドバーに表示するブログカードだけ抜粋部分を非表示にしたいという場合。

その場合は<div id=”sidebar”>という要素の、その中にあるブログカードだけに設定を反映するよう指定してやります。

#sidebar .blog-card-excerpt {
    display:none;
}

上記を子テーマのスタイルシートに追記してやればOKです。

抜粋を消したブログカードの高さを整える

今回私はサイドバーのブログカードだけに抜粋を消す設定をしたわけですが、それだけだと、抜粋を消した分だけヘンな余白が生まれてしまい、美しくありませんでした。

なので同じことをしたい人向けにその後にさらに追記したCSSも併せて紹介しておきます。

#sidebar img.blog-card-thumb-image{
  margin-bottom: 0px;
}

.blog-card{
  min-height: 100px;
}

上記を子テーマのスタイルシートに一緒に追記しました。

2点、指示を追加したわけですが、1つ目は「サムネイル画像の下の余白」についてです。デフォルト設定では20pxの余白を取るよう指定されていたので、それを0pxに上書き。これはサイドバーに表示するブログカードにのみ適用。

2つ目は「ブログカードの縦の幅」について。デフォルト設定では145pxだかに指定されていたのですが、抜粋を非表示にした場合は明らかに縦幅が無駄に長過ぎる&記事内でももしもっと薄くブログカード表示できるところがあったら薄くスタイリッシュに表示してくれていいと思ったので、サイドバーに限定せずに全体設定として100pxに設定しました。

このブログのサイドバーにあるブログカードの事例

この記事を見ている内は恐らくサイドバーにブログカードは表示されていないはずです。(今後何か表示するかもしれませんが)

なのでこのブログのサイドバーのブログカードの表示例を見てみたい場合、カテゴリー『SoftBank Air』の記事を何か見てみてください。サイドバーにずらーっと関連記事としてブログ内リンクが表示されていますので。

以上です、
ではまた

シェアする

RSS/Feed

この記事と同じカテゴリーの記事一覧はこちら→ Simplicityカスタマイズ, ブログの話


トップへ戻る