WordPressテーマSimplicityでブログカードをカスタマイズします。
WordPressのダッシュボード
→外観
→テーマの編集
→「編集するテーマを選択」Simplicity2 Child
→スタイルシート(style.css)
でCSSを編集します。
→外観
→テーマの編集
→「編集するテーマを選択」Simplicity2 Child
→スタイルシート(style.css)
でCSSを編集します。
ブログカード枠色・背景色
まずブログカードの色付けから。
1 2 3 4 5 6 7 8 9 10 | /* ブログカードの色付け */ .internal-blog-card{ padding:12px 12px 0; border:1px solid #FFAD90; word-wrap:break-word; border-radius:5px; background-color: #FFFFEE; min-width: initial; min-width: auto; } |
出典Simplicityでブログカードの枠、背景色をカスタマイズする方法
これをCSSにコピペするだけです。
バックグラウンドカラーは黄、枠はオレンジになります。
この黄やオレンジはクリック率が上がりやすい色なのでこのまま使うことをオススメします。
モバイルでシンプルなブログカードに
次にモバイルで表示した時のブログカードの表示をいじっていきます。
デフォルトのままだとモバイルで見た時にサムネイル画像が大きすぎたり、記事の説明分が長すぎてブログカード1枚でスマホの画面を埋め尽くすような状態になってしまいます。
そこで、モバイルで表示した時に、サムネイル画像を少し小さくし、ブログカード内のページの説明をモバイルでは非表示にしています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | /* モバイルでのブログカードカスタマイズ*/ @media screen and (max-width: 740px) { /* モバイルでブログカードのページ説明を非表示*/ .blog-card-excerpt{ display:none; } /* モバイルでサムネイル画像を小さめに*/ img.blog-card-thumb-image{ max-width: 90px; max-height: 90px; } /* モバイルでブログカードの最小サイズを設定*/ .blog-card{ margin:0; width:auto; position:relative; min-height:100px; } } |
これにより、モバイルで表示した時は小さめのサムネイルとページタイトルだけのシンプルなブログカードになります。
記事一覧ページ（インデックスページ）もシンプルに
さらに、ブログカードだけでなく、記事一覧ページ・インデックスページもモバイルではシンプルにします。
1 2 3 4 5 6 7 8 9 | /* モバイルでは記事一覧のページ説明・日付非表示 */ @media screen and (max-width: 740px) { .entry-snippet{ display:none; } .entry .post-date { display:none; } } |
私はシンプルな方が良いと思うのでこうしています。
全部取り入れる場合
例えば、このページに記載した全てをCSSにコピペするのであれば
1 | @media screen and (max-width: 740px){} |
この記述は1回でOKです。
1 | @media screen and (max-width: 740px){この中に全部放り込む} |
なので、全て取り入れる場合は以下のものをそのままコピペでいけます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | @media screen and (max-width: 740px) { .blog-card-excerpt{ display:none; } img.blog-card-thumb-image{ max-width: 90px; max-height: 90px; } .blog-card{ margin:0; width:auto; position:relative; min-height:100px; } .entry-snippet{ display:none; } .entry .post-date { display:none; } } |