【Stinger5】記事下の関連記事の表示をカード風に変更

12.102014

この記事は2分で読めます

cb



 

Stinger5の単一記事の下部に表示される関連記事の表示は、

メインカラムに横長で下へ表示されますね。

こんな風↓

22 ※ 画像は別サイトのイメージです。

 

で、関連記事をたくさん表示させたかったので、

横並びにしてコンパクトにまとめるようにしてみました。

 

23

 

 

 【Stinger5】記事下の関連記事の表示を横並びにする


Style.cssの編集


 

関連記事は「style.css」のこの部分になります。


 

ここを直接書き換えてもいいのですが、

今回もまたこちらの記事に書いたように、カスタムCSSの「CSS編集」を利用します。

 

下記コードをCSS編集に追加します。

 


 

メインカラムの幅に合わせて、横に並べる数と横幅を調整します。

このサイトでは横に4列並べました。

高さも好みの高さに調整します。

コンパクトにしたかったので、抜粋記事や投稿日時は表示させないようにしました。

 

また、サイドバーのNEW POSTや人気記事等と同じような

角丸のカードのようにして影をつけました。

 



 

kanren.php の編集


 

次に表示させる関連記事数を変更します。

29

今回は横4列縦3行なので 12 です。

 

サムネイルのサイズを変更したいときは、

CSSのコチラ

30

と、kanren.php のこちらを変更します。

31

 

「thumb100」は 「functions.php」の

//アイキャッチサムネイル で任意のサイズを設定することができます。

32

 

サムネイルの位置の設定は、

padding: 10px 20px 0px;

で調整します。

 

padding と margin について


 

padding と margin は、それぞれ余白を表します。

margin 外側の余白
padding 内側の余白

 

33

位置の指定は、

padding: ★px ★px ★0px ★px; (上・右・下・左)

で行います。

値を1つだけ指定 指定した値が[上下左右]のパディングになる。
値を2つ指定 記述した順に[上下][左右]のパディングになる。
値を3つ指定 記述した順に[上][左右][下]のパディングになる。
値を4つ指定 記述した順に[上][右][下][左]のパディングになる。

 

「関連記事」の表示を変更


最後にデフォルトでは「関連記事」と表示されている箇所を


読者さんの興味を引くような文言など、


好きな言葉に書き換えてみましょう。


34


「単一記事の投稿 (single.php)」の中から「関連記事」を探して、書き換えます。


スマホでみると・・・


 

こんな風に横2列縦2行が1画面に並びます。

35

いかがでしょうか?(笑)

 

 

今回参考にさせていただいたのは、こちらのサイト様。

 icon-link Stinger5カスタマイズ;関連記事を横並びに変えてみた。/ブログのちから

ありがとうございました^^

 

 

まとめ


 

関連記事があると、サイト内の滞在時間が伸びて、

またページビューも増えます。

 

縦にスクロールするのは案外面倒なものなので、

横並びにしてコンパクトにまとまっていると、

ひと目で見ることができるので、ついで読みが増える・・・はず。

 

ええ、そうなることを期待してますw

 

 

質問はサポート依頼フォームからお気軽にどうぞ^^

 

 

スポンサーリンク

HP初心者でも楽々。サイト作成お助けツール


■ 初心者でも自分で更新できる最短ホームページテンプレート
■ サクサクっと綺麗なサイトを作りたいなら=サイト作成システム「SIRIUS」
■ 豊富な素材を組み合わせて簡単にLPが作れる=LP作成用テンプレート【MeVIUS-メビウス-】
■SEOに強い戦略的テンプレート「賢威6.2」。レスポンシブWebデザインにも対応!パンダアップデート・ペンギンアップデートで悩むサイトオーナー様必見のSEOマニュアルが付属!

HPやブログで稼げるようになるためには?


■ブログを育てて未来の資産とする方法=PRIDE(プライド)
■初心者のためのアフィリエイトの教科書=3Mブログサイトアフィリエイト「LUREA plus」ルレアプラス
■もうキーワードで悩まない=オートレンダー 「未来のトレンドキーワードやライバル不在の穴場キーワードがわかるアフィリエイトオールインワンツール!」


関連記事

■スポンサーリンク

■過去記事

ご訪問者様

  • 753View:
  • 234052Total:
  • 0Online:
■オススメできるもの

◎PRIDE(プライド)

trend

◎LUREA(ルレア)

lurea

◎MeVIUS(メビウス)