Plugin」通称「YARPP」を使って関連記事を表示して画面サイズに合わせて綺麗に表示するようカスタマイズしたのでその方法をご紹介します。完成イメージは以下の感じです。Pluginのインストールまずは「YARPP」のプラグインをインストールします。Plugin」を入力します。今すぐインストール→有効化を行います。Plugin」の設定をクリックします。設定の「YARPP」から表示設定項目で「リスト」、「サムネイル」、「カスタム」とありますがここではカスタムを選択し、「テンプレートを移動」をクリックし、テンプレートを移動すると、テンプレートファイルが追加されます。今回は「Thumbnails」を選択します。これからこのファイルをカスタマイズしてきますので選択し変更を保存します。ここでWordPressのダッシュボード→外観からテーマの編集を見てみると、テンプレートが6つ追加されています。この6つのうち、上で設定したPHP(今回はyarpp-template-thumbnail.php)が採用されていることになります。このyarpp-template-thumbnail.phpのPHPファイルをカスタマイズしていきます。yarpp-template-thumbnail.phpのカスタマイズyarpp-template-thumbnail.phpの編集を行います。すべてのソースコードを削除して以下のソースコードをそのまま貼り付けます。File」をクリックしてファイルをアップデートします。今回の例では関連記事に表示するタイトル文字数を「30文字」で設定しましたがこれは任意で変更してもらえます。ソースコードの2行目は「関連記事のタイトル」を決めることができます。ここも任意で変更することができます。style.cssの編集テーマの「style.css」を編集します。4列に関連記事を並べる場合のコードです。以下のコードを使用すると、画面サイズに応じて画像が拡大縮小し、常に横に4つの記事が綺麗に整列します。YARPPの一度に表示する関連記事数を「8」としておけば、Webページでも良く見かける4列×2段の設定が完成します。横の記事個数は上記コードの11行目のコードになります。100%を上限として横に表示させたい個数により分割します。(※ただし、100%を超えないように)・横に5個表示=100%÷5=20%・横に3個表示=100%÷3=33.33%・横に2個表示=100%÷2=50%あまり横に並べすぎるとアイキャッチ画像が潰れて表示されるので最大で4個表示ぐらいが良いのではと思います。文字サイズ変更font-size:の数値を修正します。Fileをクリックします。以上でコードの追加は終了です。実際にWebページを開いて確かめてみましょう。スポンサーリンクANAマイルの貯め方マイルが貯まるクレジットカードだけでは大量のANAマイルは貯まりません。すれば貯まるのか?ANAマイルを大量に貯めたい人は読んで下さい。コメントをキャンセルメールアドレスが公開されることはありません。*サイトスポンサーリンクプロフィールどうも、ITトラベラーです。旅やマイル、ITに関してのブログを運営しています。旅行とスノーボードが大好きなサラリーマンです。システム屋さんとして働きながら色んな国を周遊中。飛行機に乗らず、お金をかけずにマイレージを貯める方法を日々研究し、最初の1年で25万マイル以上を獲得。2018年4月念願だったファーストクラスに搭乗しました。自分の経験が少しでも誰かの役に立てば幸いです。(2)マイル海外旅行ポイントサイト圧倒的なデザインと驚異のSEO性能!マイルカテゴリ2018年4月21日2019年4月15日タイ航空A380夢のファーストクラス搭乗記。Revisionsを試してみる。