広告

フロントページに新着記事を横配列で表示させるカスタマイズ~Simplicity編

固定ページをフロントページにしているサイトがあります。
サイトのトップページですので、「新着記事」をコンテンツの一つとして掲載するのですが、プラグイン「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」を使います。

SiteOrigin Editor

*「NewPost Catch」を使うとうまくいきません。

ショートコードは[npc]ですが、このままでは10px×10pxの小さなサムネイルになりますので100pxのサムネイルを使い横並びの2列配置にするので下のコードを記述します。

[npc id="new-post" posts_per_page="4" width="100" height="100"]

SiteOrigin Editor

このままでは縦に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」に追加記述します。

ここまでの手順でフロントページに新着記事を表示させたのが下の画像です。

新着記事リスト

広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする