ブログカスタマイズの雑談BLOG

記事ページ下に表示される「関連記事」を編集します。
これまでの「関連記事」に関するカスタマイズ記事はこちらです。





前回の記事「（3）」では関連記事のサムネイル画像を左端から表示させましたが、今回の記事「（4）」ではタイトル部分よりも内側からサムネイル画像を表示させます。
前回と同じように2つのパターンの画像を掲載しますので、お好きな方でカスタマイズしてください。



ちなみに私自身は、この記事で書いているやり方（タイトル部分よりも内側からサムネイル画像を表示させる方法）を採用しています。
この記事での方法は、関連記事のタイトル部分とサムネイル部分を切り分けてしまって、タイトル部分に新しいclass「subheading」を付ける方法です。これだと他の部分にも「subheading」を使うことができてラクなのです。


とかまあ、何の話をしているのかわからないとは思いますが、前回の記事の方法（関連記事のサムネイル画像を左端から表示させる方法）を使われたとしても、今後は結局class「subheading」を作らないといけない場面が出てきますので、気にしないでください。


もちろん、class「subheading」を作らないといけない場面が出てきた時にはきちんと説明しますので、ここでは深く考える必要はありません。関連記事のサムネイル画像を左端から表示させたいのか、それとも少し内側から表示させたいのか、それを選んでいただいて、好きな方でカスタマイズしていただければ結構です。



サムネイルを左端から表示させる（記事3）





サムネイルをタイトルよりも内側から表示させる（記事4）




では、関連記事のサムネイル画像を少し内側から表示する方法を説明します。


まずは、なぜわざわざそんな面倒なことをやろうと思ったのか、きっかけを説明してから、HTMLを編集して関連記事のタイトル部分とサムネイル部分を切り離します。
そして、上余白100pxを持つclass「subheading」を新しく作ります。
サムネイル部分の左側に余白を入れることで「タイトル部分よりも少し内側」という状況を設定し、サムネイル画像下の文字サイズを少し小さくして、サムネイル画像の上下間隔を少し広くします。
最後にサムネイル画像のサイズを調整して、メインコンテンツの幅いっぱいに画像が表示されるようにしたいと思います。

‥‥やることがいっぱいですね（笑）



ちなみに、今回の記事では、前回の記事（サムネイル画像を左端から表示する方法）でやったカスタマイズは無視します。
まったく何もなかったことにして、まっさらの状態で関連記事の編集をしますので、前回の記事に書いている編集をやった方は、元に戻しておいてください。
まあ、こういうことになりますから、最初からどちらのパターンで編集するのか、上記の画像を参考にして決めておいてください。

「タイトル部分よりも内側からサムネイル画像を表示」の概要

前回の記事ではサムネイル画像を左端から表示させましたが、なんだか主張しすぎている気がしてしまいました。もうちょっと、隙間が欲しいと思ってしまったんです。
なので、サムネイル画像表示の左側に余白ができるようにCSSを編集していたんですが、なかなかうまくいかないんですよね。



＜元コード（サムネイル部分）＞


これは元々のコードなんですが、「margin-right: 10px;」という指示が記述されています。
「margin-right: 10px;」は画像の右側に余白を入れるという意味なので、サムネイル画像を少し内側から始めたいわけですから「margin-left: 10px;」に変更したんですけど、なんだかおかしい。
余白の数値を例えば30pxに増やすと30px内側からサムネイルが始まるじゃん！とか思いましたが、結局画像と画像の間も30pxになるので、もはやめちゃくちゃです。（そりゃそうだｗ）



色々と考えてみましたが、要するに、「.module--category-recent-entry」という関連記事全体のclassの中に関連記事タイトルが入っているからおかしなことになるわけですよ。
関連記事タイトルがこの全体の枠から出てくれれば、あとはサムネイル画像部分全体の設定、ということにできるわけです。
くっ付いてるからダメならば、切り離してしまえばいいじゃない！ｗ



ということで、関連記事タイトル部分だけを別設定にします。
別設定にした部分に、私は「subheading」というclass名を付けることにしました。
「heading」のサブ（sub）ということで、相変わらず安易なネーミングです（笑）

関連記事タイトルとサムネイル画像をHTML上で切り離す

まずは、HTMLを編集したいと思います。
なにしろ関連記事タイトル（『カテゴリ「○○」の最新記事』というタイトル）を、関連記事全体から飛び出させないといけませんからね。CSSでスタイルを作るのは後からにして、とりあえずHTML上で「タイトル部分は別枠なのだ」という記述をしておきたいと思います。
イメージはこんな感じです。





黄緑の部分が関連記事のタイトル部分、赤枠の部分がサムネイル画像部分です。
このように完全に切り離してしまいます。






管理画面の「HTML編集」画面を開き、「module--category-recent-entry」というclass名で検索すると1ヶ所がヒットしますので、この部分を編集します。
ちなみに、以下のコード画像には、以前の記事＜■記事ページの「関連記事」（2）タイトル表記を変更＞で編集済みのコード（「カテゴリ」などの文字）が入っていますのでお気を付けください。





このコードの中で関連記事のタイトル部分は『<h3 class="module__heading"><% if:blog.get_property('related_article') eq 'category' %>カテゴリ「<% article_category.name -%>」の最新記事<% else %>関連する記事<% /if %></h3>』です。
このコードを外に飛び出させないといけません。
「外」とは、「module--category-recent-entry」の外、ということです。


「module--category-recent-entry」は関連記事全体の枠です。
この枠から外に、関連記事タイトルを表示させるように設定します。



先ほど私は、全体枠とは別設定にした関連記事タイトル部分に「subheading」という名前のclassを設定すると決めました。
このclass名「subheading」を使用し、関連記事タイトル部分を「div」で挟みます。
そして「module--category-recent-entry」の上に置きます。





＜編集後のコード＞


●「<div class="subheading">」「</div>」で関連記事タイトル部分を挟みました。

●そして、「<div class="module module--category-recent-entry">」という関連記事全体の枠よりも上に配置しました。

●「<h3 class="module__heading">」という記述があります。上記「イメージ図」を見てみると、関連記事タイトル（『カテゴリ「○○」の最新記事』というタイトル）の下に少しだけ余白があります。これが「<h3 class="module__heading">」の設定です。元々のタイトルの設定「module__heading」の中で「下余白」が設定されていました。

新しく作ったclass「subheading」の設定

次に、CSS編集画面で先ほど作ったclass「subheading」の設定をします。
関連記事のタイトル部分の設定です。
class「subheading」の上に余白を入れ、タイトル文字は左寄せにします。






CSS編集画面でお好きな場所に下記の「新しく追加するコード」を追加して保存してください。（空いている場所ならどこでもいいです）

私は「関連記事」関連の記述の下に追加します。
個別記事ページの関連記事を表示させるclass名は「module--category-recent-entry」ですので、その関連の下に書いておいた方がわかりやすいかな？と思ったからです。


＜新しく追加するコード＞


●「.subheading」は関連記事のタイトル部分ですので、関連記事の上にある「前ページ・次ページ案内リンク」との間隔を設定します。このブログでは基本的に、メインコンテンツのパーツ同士の余白は100pxに設定しようと思っていますので「margin-top:100px;」と設定します。（もちろん、好きなように数値を変更してください）


●「.subheading .module__heading」
「.subheading .module__heading」という記述には2つのclassが同時設定されています。
このうち「module__heading」は、サイドバータイトルで設定していました。

＜サイドバータイトルで設定している「module__heading」＞


この「module__heading」の設定が生きていますので、「module__heading」の設定から変更する部分だけを記述しています。
つまり、サイドバーのタイトル表示と基本は同じなんだけど、この関連記事のタイトルは文字は左寄せ（text-align: left;）にして、内側に余白を追加した（padding: 3px 15px;）、という記述です。

コード追加後のCSS（追加した記述）

サムネイル画像を左端より少し内側から表示させる

続いてサムネイル画像部分を設定します。
タイトルよりも内側から表示させるようにして、関連記事の下のパーツ（コメント欄のタイトル）との余白をわざとなくします。






CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「module--category-recent-entry」というclassを探します。


下記に「元コード」と「編集後」のコードを掲載しておきますので、CSSの該当部分に「編集後」のコードをコピペもしくは該当箇所を直接変更して「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


＜元コード＞


＜編集後＞


●「module--category-recent-entry」は、タイトルの下の、サムネイル画像が表示される部分です。
「margin-bottom: 0px;」に設定しているのは、関連記事の下にある「コメント欄」との間隔を、「コメント欄」に上余白100pxを設定することで作り出すつもりだからです。→＜■記事ページのコメント欄に上余白を設定し、「コメントを書く」ボタンを作る＞

●「padding-left: 20px;」を設定することで、関連記事タイトルよりもずっと内側からサムネイル画像を並べることができます。（これをやりたかったのです！）

コード編集後のCSS

関連記事のサムネイル画像下の文字サイズを編集する

次に、サムネイル画像下の文字サイズを少し小さくします。
必要ない方はこの作業をする必要はありません。






CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「.module--category-recent-entry .recent-entry__item p」というclassを探して編集します。


＜元コード＞


＜編集後＞


●「font-size:85%;」を追加して、文字サイズを通常よりも少し小さめにしています。

コード編集後のCSS

関連記事のサムネイル画像の上下間隔を編集する

関連する記事が2行、3行となった場合（関連記事の表示件数を増やした場合）、サムネイル画像の上下の間隔が少し狭いような気がしますので、ちょっと広めに設定します。






CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「.module--category-recent-entry .recent-entry__item」というclassを探して編集します。


＜元コード＞


＜編集後＞


●「margin-bottom: 15px;」を「20px」に変更しただけです。

コード編集後のCSS

関連記事のサムネイル画像サイズを変更する

最後に、サムネイル画像のサイズを変更します。
今は1行に4つのサムネイル画像が入っていて右側に余白ができています。（5つ目のサムネイルは1行目に入れずに2行目に表示されています）






画像のサイズを変更して調整すれば、1行に5つのサムネイル画像を入れることができ、右側の余白も気にならなくなります。






CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面の「module--category-recent-entry」というclass関連の記述の中に、「140px」と書かれた島が3つあります。





「140px」がサムネイル画像のサイズですので、この数値を適当に変更してください。
色々やってみましたが、このブログでは「120px」ぐらいが丁度いいのではないでしょうか。
「140px」という数値すべて（6個すべて）を、お好きなサイズに変更してください。


逆に、1行に4つの画像を入れたい場合は、画像サイズを「140」よりも大きい数値に変更します。（私はやってないのでどれぐらいのサイズがいいのかわかりません）



ということで、関連記事のタイトル部分よりも内側からサムネイル画像を表示させる方法を説明しました。
私自身は、関連記事についてこちらの方法を使っているので、以降の記事で関連記事に関するものが出てきた場合はすべてこちらの記述（やり方）を踏まえた上での説明になると思います。
（どこでどう出てくるのか現時点ではわかっていないのであやふやで申し訳ありません）




次の記事の紹介

次の記事では、Seesaaブログのコメント欄に余白を付けてボタンを作る方法を説明します。