【cocoon】サイドバーの新着記事にサムネイルをつける

カスタマイズ

今回はブログのカスタマイズです。

サイドバーに表示される新着記事や人気記事が、タイトルのみの掲載で少し寂しかったので、アイキャッチ画像をサムネイルとして表示させてみました。

設定の切り替えだけで簡単に表示を変えることが出来るので、機能をご紹介しつつ、わたしも設定をやり直していきたいと思います。

スポンサーリンク

サイドバーの新着記事や人気記事にサムネイルを付ける設定

サイドバーにある新着記事の表示は、デフォルトのままだとタイトルだけの表示になっています。(使用しているスキンによって変わるかもしれません。)

上記の画像はスマホから見た場合のサイドバーです。
文字だけの表示なので少しさっ風景ですね。

新着記事や人気記事に表示されるタイトルの設定は、ワードプレスのダッシュボードより簡単に設定することができます。

 

ウィジェットから設定

大まかな流れです。

  1. ワードプレスのダッシュボード外観
  2. ウィジェット
  3. 利用できるウィジェットの中から、[C]新着記事や[C]人気記事を選択してサイドバーに追加する

実は、これでけでサムネイル付きの新着記事や人気記事が出来ました(^^;

このとき気をつけたいのが、
最新の投稿】ではなく、【〔C〕新着記事・〔C〕人気記事】を選択してください。

(デフォルトでは【最新の投稿】がサイドバーに設定されているので削除します。)

 

サムネイルの選択

サイドバーに表示するサムネイルのタイプを選びます。
『サイドバー』の欄に追加したウィジェット(新着記事や人気記事)をクリックすると、小さな設定画面が開きます。

この編集画面で表示の仕方を設定することができます。

表示の設定表示モード…投稿したすべての記事を表示するか、カテゴリ別に分けるかを選択します。
新着記事のタイトル…サイドバーに表示されるタイトルを変更できます。
表示数…サイドバーに表示する記事数を設定できます。
表示タイプ…記事タイトルの表示の仕方を選択できます。
矢印表示…少しおしゃれ感がでます。
「固定表示」記事を表示…ブログトップで固定している記事も表示するかを選択します。人気記事では、ランキングやPV数なども表示できます。
スポンサーリンク

サイドバーのウィジェットをCSSでカスタマイズ

上記ではウィジェットをありがたく使用し、簡単に表示の設定を行うことが出来ましたが、さらに自由を求めるタイプの方はCSSで編集してみましょう。

といっても、区切り線をどうにかするくらいしか思いつきませんが…
記事の間の区切り線を変更する場合は、
borderのCSSを変更します。

外観→カスタマイズ→追加CSS に、CSSを追加します。
必ず、バックアップを取るなり、ミスっても良い準備をしておいてください。下記CSSで記載しているプロパティは、当サイトのデベロッパーツールで確認しながら作成しているので、記述が異なる場合もあります。cocoonを使用しているなら大丈夫かと思います。

 

区切り線*二重線

.border-partition a:first-of-type{
border-top: none;
}
.widget-entry-cards .a-wrap{
border-bottom: double 6px #d2b48c;}

 

 

 

 

区切り線*破線

.border-partition a:first-of-type{
border-top: dashed 2px #d2b48c;
}
.widget-entry-cards .a-wrap{
border-bottom: dashed 2px #d2b48c;
}

 

 

 

 

区切り線を消す*ホバー時に背景色を付ける

.border-partition a:first-of-type{
border-top: none;
}
.widget-entry-cards .a-wrap{
border: none;
}
.widget-entry-cards a:hover{
background-color: #fdf5e6;/*ホバーカラー*/
}

 

 

 

背景色とホバー時に色を変える

.border-partition a:first-of-type{
border-top: none;
}
.widget-entry-cards .a-wrap{
margin: 0.5em 0;
background-color: #eee;/*背景色*/
}
.widget-entry-cards a:hover{
background-color:#bbb;/*ホバー時背景色*/
}

 

サムネイルや外枠を丸くする

カードの外枠とサムネイルを無駄に丸くしてみました。

.border-partition a:first-of-type{
border-top: none;
}
.widget-entry-cards .a-wrap{
margin: 0.5em 0;
background-color: #eee;
border-radius: 25px;/*外枠を丸くする*/
}
.card-thumb img{
border-radius: 25px;/*画像を丸くする*/
}

区切り線を打ち消す

線で区切りたくない場合は、
デフォルトで指定してある区切り線の表示を、none;で表示しないように指示します。

.border-partition a:first-of-type{border-top: none;} 
.widget-entry-cards .a-wrap{ border: none; }

 

 

まとめ

後半は表示のカスタマイズを載せてみましたが、私のセンスのなさが煌めいていますね。
簡単なものしか載せていませんが、組み合わせによってはいろいろなデザインができます。
好みに合わせてカスタマイズしてください。

色は全て#000000といったカラーコードを変えることで変更することが出来ます。

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

 

タイトルとURLをコピーしました