固定ページをフロントページにしているサイトがあります。
サイトのトップページですので、「新着記事」をコンテンツの一つとして掲載するのですが、プラグイン「Page Builder by SiteOrigin」でページを構成し、「Simplicity」のウィジェットを挿入すると、サムネイルに記事タイトルが表示されます。
ここのデザインを変えてみたいと思い、「style.css」をカスタマイズした記録です。
CSSファイルの知識が無くても出来るよう分かりやすくまとめました。
プラグイン「Newpost Catch」を使ってスタイルシートを変更する手順
「Simplicity」のウィジェット「新着記事」は3通りの表示パターンがあります。
- デフォルト（100角のサムネイルの右にタイトルを表示）
- 大きなサムネイルの下にタイトルを表示
- 大きなサムネイルにタイトルを重ねる
それぞれ３通りのキャプチャーは以下の通りです。
一番上はタイトルが短いせいもあるのですが、右側の余白が大きすぎます。
二番目と三番目は、サムネイル画像のサイズが大きくなってしまいます。これは、サイドバーに新着記事を掲載する場合に、iPhone6のMaxWidthに画像サイズを合せているため、本文にサムネイル画像を表示させると、このように大きくなります。
サムネイル画像はサイズは100pxでかまわないのですが、横配列にしたいと考えています。
「Simplicity」のウィジェット「新着記事」はサイドバーでも使いますので、「Simplicity」のスタイルシートを変えるわけにはいきません。
そこでフロントページ用にはプラグイン「Newpost Catch」を使います。
Newpost Catchをインストールして、ショートコードを「新着記事」を掲載したいブロックへ記述します。
固定ページは「Page Builder by SiteOrigin」で構成していますので、新着記事用の「列」を新規に作成しウィジェットを追加しますが、ウィジェットは「SiteOrigin Editor」を使います。
＊「NewPost Catch」を使うとうまくいきません。
ショートコードは[npc]ですが、このままでは10px×10pxの小さなサムネイルになりますので100pxのサムネイルを使い横並びの２列配置にするので下のコードを記述します。
[npc id="new-post" posts_per_page="4" width="100" height="100"]
このままでは縦に４個の新着記事が並びますので、スタイルシートに追加記述します。
#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」に追加記述します。
ここまでの手順でフロントページに新着記事を表示させたのが下の画像です。
コメント