固定ページをフロントページにしているサイトがあります。
サイトのトップページですので、「新着記事」をコンテンツの一つとして掲載するのですが、プラグイン「Page Builder by SiteOrigin」でページを構成し、「Simplicity」のウィジェットを挿入すると、サムネイルに記事タイトルが表示されます。
ここのデザインを変えてみたいと思い、「style.css」をカスタマイズした記録です。
CSSファイルの知識が無くても出来るよう分かりやすくまとめました。
プラグイン「Newpost Catch」を使ってスタイルシートを変更する手順
「Simplicity」のウィジェット「新着記事」は3通りの表示パターンがあります。
- デフォルト(100角のサムネイルの右にタイトルを表示)
- 大きなサムネイルの下にタイトルを表示
- 大きなサムネイルにタイトルを重ねる
それぞれ3通りのキャプチャーは以下の通りです。
一番上はタイトルが短いせいもあるのですが、右側の余白が大きすぎます。
二番目と三番目は、サムネイル画像のサイズが大きくなってしまいます。これは、サイドバーに新着記事を掲載する場合に、iPhone6のMaxWidthに画像サイズを合せているため、本文にサムネイル画像を表示させると、このように大きくなります。
サムネイル画像はサイズは100pxでかまわないのですが、横配列にしたいと考えています。
「Simplicity」のウィジェット「新着記事」はサイドバーでも使いますので、「Simplicity」のスタイルシートを変えるわけにはいきません。
そこでフロントページ用にはプラグイン「Newpost Catch」を使います。
Newpost Catchをインストールして、ショートコードを「新着記事」を掲載したいブロックへ記述します。
固定ページは「Page Builder by SiteOrigin」で構成していますので、新着記事用の「列」を新規に作成しウィジェットを追加しますが、ウィジェットは「SiteOrigin Editor」を使います。
*「NewPost Catch」を使うとうまくいきません。
ショートコードは[npc]ですが、このままでは10px×10pxの小さなサムネイルになりますので100pxのサムネイルを使い横並びの2列配置にするので下のコードを記述します。
[npc id="new-post" posts_per_page="4" width="100" height="100"]
このままでは縦に4個の新着記事が並びますので、スタイルシートに追加記述します。
#new-post ul{ margin:0px; } #new-post ul li { float: left; margin-right: 5px; padding: 3px; } #new-post li { display: inline-block; overflow: hidden; clear: both; margin:5px; list-style: none; vertical-align: top; } #new-post img{ float:left; padding:0px; margin:5px; border-radius: 2px; } #new-post .title { width: 160px; float: left; padding: 5px; }
Simplicityでは新着記事のclass属性は「new-entrys」で指定していますが、「Newpost Catch」はid属性を「new-post」で指定していますので、上のようなコードになります。
このコードをSimplicityの子テーマにある「style.css」に追加記述します。
ここまでの手順でフロントページに新着記事を表示させたのが下の画像です。
コメント