スティンガー8

STINGER8の関連記事をCSSでかっこよくタイル形式に表示する方法

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

ワードプレスの「STINGER8」では、デフォルトの状態で投稿記事の下に関連記事が表示されています。

 

デザインとしては記事一覧と全く同じリスト形式が採用されているので、少し見栄え的にも変わり映えがないように感じていましたし、この機会のもっとかっこよくタイル形式に表示してみようと思います。

 

関連記事は「YARPP」や「Contextual Related Post」プラグインを使えば、簡単に導入することができますが、サーバーの負荷を考えてあまりプラグインを増やしたくないという方も多いでしょう。

そこでCSS初心者の私のような方でもプラグインなしでSTINGER8の関連記事を、かっこよくタイル形式に表示させる方法を、できるだけわかりやすくご紹介していきます。

関連記事の「ビフォーアフター」

まずはSTINGER8のビフォー(変更前)の関連記事が以下のようになっています。

 

 

「続きを読む」ボタンはCSSでアレンジしたものですが、アイキャッチ画像や記事タイトル、説明文はデフォルトのまま使用しています。

 

このリスト形式をCSSで以下のように、アフター(変更後)のリスト形式デザインにしていきます。

 

 

自分で言うのもなんですが、かなりかっこよく関連記事を表示できたので、このデザインに非常に満足しています。

ただ、CSSに慣れていないのでこのデザインにたどり着くまでに実はかなり苦労しました。

 

ネット上を探してもSTINGER8の関連記事に関する参考になりそうな情報が見つからなかったので、一時期は放置していましたがようやく完成させることができました。

予断はさておき、早速アフターデザインにカスタマイズしていきましょう。

 

関連記事をタイル形式で表示させる方法

ワードプレス管理画面のメニューから、「外観」⇒『テーマの編集』をクリックしてファイルの編集画面に移動します。

STINGER8のテーマ内にある「kanren.php」と「style.css」ファイルを使って編集を行っていきます。

 

ファイル編集は子テーマ「STINGER8 Child」で進めていきますので、もし親テーマにしか「kanren.php」がない場合は、FTPソフトで子テーマ内にファイルをアップロードしておいて下さい。

また、テーマの編集を行う際は複数タブを開いておき、不都合が起きた場合にすぐに編集前の状態に戻せるよう準備しておくことをオススメします。

 

また、ご紹介する編集内容は「STINGERの関連記事をグリッド表示っぽくデザイン変更してみた」の記事を参考にさせて頂いています。

 

子テーマ「kanren.php」を編集

初めに「kanren.php」を開き、ファイル内の下の方にある以下の記述を探しましょう。

 

 

見つかりましたら、上記のコードを以下の色がついている部分のみ、コード内容を変更・追加していきます。

 

 

2・3・15・17列目はコードを追加して8列目は「dl ⇒ ul」に変更し、9・16列目は「dt ⇒ li」に変更して下さい。

「dl」のままだとタイル形式で表示させた時に、歪んでいたのでここでは「ul」に変更しています。

 

コードの追記と変更が終わったら次に以下のコードをコメントアウトにする為、「dd」の前に「<!– 」、「/dd」の後に「 –>」を追記します。

 

 

ここのコードは今回の編集では必要ないので削除してしまってもいいですが、また復活させたい時に手間がかかってしまうので、コメントアウトで非表示にしておきます。

 

以上のファイル編集が完了したら、下にある『ファイルを更新』をクリックしましょう。

 

子テーマ「style.css」の編集

続いて子テーマの「style.css」で関連記事をタイル形式に表示させていきます。

以下のコードを「style.css」ファイルの一番下に追記します。

 

 

これでファイルを更新すれば、関連記事がタイル形式で表示されているはずです。

後はアイキャッチ画像のサイズやタイトルの色などをブログに合わせて変更して下さい。

 

こちらがスマホ用のCSSコードになります。

 

 

基本的には2列で表示されるようになっていますが、画面が小さい機種の場合は1列になってしまう可能性があります。

その際はサイズを調整されてみて下さい。

 

その他のカスタマイズ

少し変化を付け加えてみたい方は、こちらも参考にしてみて下さい。

 

関連記事のタイトルを編集

関連記事であることを示すタイトル部分が小さくてあまり目立たないので、もう少しユーザーにわかりやすく表示したいと思います。

「kanren.php」を開いて以下のコードを変更します。

 

 

6列目の「p ⇒ div」「/p ⇒ /div」に変更して、「関連記事」の部分を自分が表示させたい文字列に変えたら、ファイルを更新しましょう。

 

次に「style.css」を開いて以下のコードをファイル内に追記します。

 

 

文字の大きさや背景色などを自由に変更していきましょう。

 

カーソルホバーで画像を拡大

カーソルが乗った時に画像が拡大するアクションを追加したい時は、以下のコードを「style.css」に追加して下さい。

 

 

先程追加した「random li」「li img」内に対象コードの1文を追加し、「hover」に関するコードはそのまま追加しましょう。

 

これで画像がはみ出ることなく、領域内で拡大されるかと思います。

 

STINGER8の関連記事エリアまとめ

関連記事はユーザーが記事を読み終わった時に、次の行動を促すことができる重要なものであり、ブログの回遊率にも大きく影響します。

CSSのカスタマイズはなかなか手間のかかる作業ですが、プラグインを導入しなくても関連記事をかっこよく表示させることができます。

 

ワードプレスのSTINGER8を利用されている方は、今回の記事を参考にして頂いてユーザーの目に止まるような関連記事にしてみてはいかがでしょうか。

こちらも読まれています

ABOUT ME
フリーマン
フリーマン
1988年生まれで兵庫県に在住してます。気になることをただひたすらに書き続けて、ブログ運営10ヶ月目で月間10万PV超えを達成。 将来的な資産を作る為に資産運用も実践中。>>詳細プロフィール