ブログ

【AFFINGER5】TOPページの記事一覧をおしゃれなカード型にカスタマイズする方法【CSSで対応する】

投稿日:

こんにちは、クライン(@kleinitblog)です。

 

今回は、このブログでも使用しているWordPressのテーマ「AFFINGER5(WING)」のトップページをおしゃれなカード型にカスタマイズする方法を解説していきます。

 

カード型にするとアイキャッチ画像が見やすくなったり、全体的にまとまった印象になるので個人的にはお気に入りです!

 

 

完成系のイメージ

本ブログのトップ画面

 

本ブログのトップを見ていただけるとそのままなのでイメージつきやすいかと思います。

 

ちなみに、本手順ではテンプレートファイルやCSSをいじったりしていきますが、

AFFINGER5には自動でカード型にできる子テーマ「JET」もあるので、面倒な方はそちらを購入するのも良いかもしれません。

 

あくまで、無料で且つトップをカード型に変更だけをしたい方向けの記事になります。

 

注意

本サイトとのAFFINGERのバージョン差や、お使いの独自CSSの影響などで今回のカスタマイズが完全にうまくいかない可能性があることを予めご了承ください。

(できるだけ影響を受けないようなカスタマイズを心がけてます。)

 

手順1. 親テーマフォルダから子テーマフォルダに必要なテンプレート(PHPファイル)をコピー

 

まず最重要な手順がこちら。

 

AFFINGER5の親テーマフォルダから以下の2ファイルを、子テーマ(WING-AFFINGER5 Child)のテーマフォルダにコピーします。

 

コピーするPHPファイル

itiran-original-thumbnail-on.php

itiran-thumbnail-on.php

 

必ず子テーマにコピーしてください。

 

具体的なコピー先のフォルダは以下になります。

wp-content > themes > affinger5-child > ココにコピー

 

 

このPHPファイルを編集することで、実際のページにも変更が反映されるので以下ご注意ください。

 

手順2. CSSを追加

 

WordPress管理画面から今回カスタマイズする用のCSSを追加します。

 

外観 > カスタマイズ > 追加CSS

 

追加CSSに以下をコピペして保存してください。

 

追加CSS

 

手順3. コピーしたPHPファイルを編集

 

コピーした「itiran-original-thumbnail-on.php」と「itiran-thumbnail-on.php」を以下のように変更してください。

完全コピペでもOKです!

 

itiran-original-thumbnail-on.php

 

 

itiran-thumbnail-on.php

 

表示を確認

ここまでの手順がうまくいっていれば、トップ画面の記事一覧がカード型になっているはずです!

ご自身のブログないしウェブサイトのトップページにアクセスして確認して見てください!

 

なお冒頭記載しました通り、環境によってもしかするとうまく動作しない可能性もあります。

お困りの際はDMやコメントをいただければ可能な範囲でお答えしますので、お気軽にご相談くださいませ。

 

自由にカスタマイズしてブログをもっと楽しもう!

 

今回はAFFINGER5(WING)のトップページをカード型にする手順を紹介しました。

私自身実は、HTMLやCSS、PHPに関する知識はさほど多くないのですが、どうしてもカード型にしたかったのでトライしてみました。

 

自分で好きなようにブログをカスタマイズできると執筆意欲も上がるし、ブログへの愛着も倍増しますよ!

ぜひお試しください!

 

また、知識がまだないからカスタマイズなんてできない!という方はUdemyの以下の動画がとってもおすすめです。

 

 

 

「HTML」「CSS」「PHP」「WordPress」は勿論、「JavaScript」や「MySQL」「Python」などまで非常に多くの基礎をこの動画だけで網羅しています。

セール時ならなんと1500円程度で買えてしまうので興味があればチェックして見てください!

 

【厳選】Udemyでセール時に購入すべきオススメの動画Part2【どの分野にも役立つ】

エンジニアの皆さま!これからエンジニアを目指す皆さま!Udemyは有効に使っていますか?? 以前にUdemyでセール時に絶対買っておいた方が良い動画を分野別に分けて以下の記事で紹介しました。 &nbs ...

続きを見る

 

【圧倒的】Udemyのコスパが最強すぎる件。評判まとめ!【プログラミング学習】

プログラミング学習をしていく上でいかにのコスパが良いかということについて語っていきます。 独学に詰まった皆さん、一度試してみるといいですよ。   ちなみに私が現時点で購入している動画は以下で ...

続きを見る

よく読まれている記事

1

  現在5年目のエンジニアで26歳です。 今回は20代の現役エンジニアとして、自分も含め転職について考えている方に向けて20代エンジニア転職に完全特化したおすすめのサービスを3つ紹介していき ...

2

これからエンジニアになりたい、プログラミングを使えるようになりたいという方に向けて 山のようにあるプログラミングスクールの中から、特におすすめなスクールをタイプ別に逆引きで3つ紹介します。 &nbsp ...

3

みなさんはを使っていますでしょうか。   本記事を見ていただいているということは、   プログラミングの勉強でを使うことに興味がある、 もしくはこれから動画を購入したいけどどれを買 ...

-ブログ
-, , , ,

Copyright© クラインの備忘壺 , 2019 All Rights Reserved.