Catchを使って固定ページに新着記事(最新記事)を表示させる方法まとめツイート3シェアはてブ12LINEPocket7どうもNon太(@LoveWifeLives)です。Catch」というプラグインを使いました。Catch」を使いこなすための解説ページは色々とあったのですが、一つのページだけを見て完了というわけにはいかず、色々と組み合わせた結果自分用のカスタマイズが出来たので、備忘録も兼ねて残しておこうと思います。Catch」が有効化されている前提でお話しを進めます。Catchは使用していません。Catch」の何が凄いって、プラグインをダウンロードして後はショートコードを本文中に記述するだけで新着記事(最新記事)が表示されるようになること。そのショートコードはこれ↓↓↓[npc]※本来ショートコードは[(全角)ではなく、[(半角)での表示が必要ですが、ここでは説明のために全角の[]を表示させてます。このショートコードを本文中に記述するだけで、最新記事が一覧で表示されるようになるんです。Catchってかなり嬉しいプラグインですよね。▼で、[npc]と本文中に書いて実際に表示させたのがこちら。いや、まぁ...確かに表示されたのはされたんだけど...サムネイル画像は小さすぎるし、画像と本文が横並びになってないし、という表示でした。これでは見栄えが悪すぎるのでカスタマイズが必要ですね。ショートコードを追加するだけで表示を変えられる実はこのプラグイン、[npc]の後ろに色々なショートコードを付け足すだけで表示のされ方が変わるんです。先ほどよりもサムネイル画像が大きくなりました。「width」は横幅で「height」は高さです。height=”50′′】と書いてあげることで画像のサイズが変わるんですね。60という長方形のサイズ比にしたはずなのに正方形で表示されてる...。Press管理画面の【設定>>メディア】と進んだ先にある「サムネイルのサイズ」の設定値に依存するとのこと。Press設定のサムネイルのサイズを幅100、高さ60に変えてみました。(僕の環境では幅150、高さ150で設定されていた。)残念ながらこの数値を変えただけでは、ショートコードで設定した縦横比の画像にはならず何も変わりませんでした。height=”100′′】で行くことにしました。“date”が日付の有無なので、タイトルの末尾に日付も付くようにしました。日付まで表示されたのはいいのですが、とにかくなんかダサいですよね。画像の横にタイトルが並んでいないのが一番ダサく見えるので、ここからは実際にCSSを追記することで調整してみました。Catch」の新機能「ショートコード」の使い方)の中に書かれてるので、参考に見てみるのもいいですよ。スポンサーリンク実際に追記したCSS上記で説明した通り、新着記事(最新記事)が表示されるのは良いものの綺麗とは言えない並び方だったため、実際にCSSを追加しました。追加するのはスタイルシート(style.css)です。アルバトロスを使っている場合は子テーマにスタイルシート(style.css)があるので、そこに追記したコードがこちら。場所はどこでもOKですが、子テーマに最初から書かれているコードのすぐ下に書いて問題ないです。Cpllege)を参考に、そのままのコードを記載しています。一発で画像とタイトルが横並びになって、表示が綺麗に揃いました。次に、タイトルの下に引かれたアンダーラインが邪魔だなと思ったので、CSSコードを追加しました。.date{}黄色く表示されているところを追記します。▼これを書くことでリンクの下線が消えました。次に、投稿した日付をもう少し大きく表示させて色も変えたいなぁと、また追記します。.date{}font-sizeを【x-small⇒small】に、font-weightを【400⇒600】、colorを【#666699⇒#adb5bf】に変更しました。このあたりはかなり自分の好みが入っているので、好きな大きさや色に変えていけばいいと思います。▼こんな風に、日付が大きくグレーっぽい色に変わりました。記事と記事の間に点線を入れたいなと。.date{}[/su_note]点線なので【dotted】、【solid】にすれば点線じゃなく直線が引かれます。▼記事と記事の間に点線が引かれた最後にサムネイル画像の下が5pxとなっていたので、それを0にして行間を少しだけ詰めました。.date{}これで少しだけですが、行間が詰まって見栄えが良くなったように思えました。date=”1′′]を記載することで、現在のこのブログのトップページのような表示がされるようになります。諦めたCSSサムネイル横にある「●」トップぺージを見てもらえれば分かりますが、新着記事(最新記事)の左側に「●」が付いています。この「●」は不要だったので本当は消したかったんです。block;】も併せて記述すれば良いと書かれているページがありましたが、それでも消えませんでした。今回は「●」を消すのは諦めました。none;】をスタイルシートに記述すると消えるはずなのですが、ストークを使っていると消えません。これは下記のコードを書くことで消せる、というか非表示にすることが可能です。0;}簡単に説明しておくと、高さも幅も0にすることで非表示にさせているというコードです。listの●が消せなくて試行錯誤してましたが、これで非表示に出来ます。記事本文の表示これは諦めたというか、なくていいと思いました。こんふぃでんしゃる)に書かれているコードを記述してみたのですが、うまくいかなかったのでもういいやと思いました。実際記事本文の最初の数十文字が表示されるのはパソコンで見ている時のみで、スマホなどのモバイルの時は表示されないようなので。まとめかなり手こずりましたが、何とか形にはなりました。Catchを使ってウィジットではなく記事本文中に新着記事(最新記事)を表示させようとしている方で、同じように行き詰った人が少しでも参考にしてもらえれば幸いです。^)こちらの新着記事一覧と同様のものを私のウェブサイトへ導入したいな...と考えているのですが、こちらの記事でのCSSコードで完成するものと、現在のトップページにて設置されているものとを比較すると、現在のものの方がかなり洗練されているなーと感じます。PMタナカさんこんばんは。コメントありがとうございます。出来るならばお教えしたいんですが...実はこれは、WordPressのテーマをストークにしてるから簡単に出来ているカスタマイズなんです。笑こちらの記事で紹介しているように、ストークを導入すればウィジットであとはちょこちょこっとやるだけで、トップページは僕のような感じに出来ますよ。(ハミングバードでも出来ますが、アルバトロスはできない仕様になってます。)コードでは僕は限界だったので...期待に応えられずすみません。PMご返信ありがとうございます!リンクの記事、読ませていただきました。私は現在、ハミングバードなので、設定できそうです。PMいえいえ、僕もまだまだ勉強中なので。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿はスルーされますのでご注意ください。これこそ大阪が誇る最強の桜祭りだ!RECOMMENDこちらの記事も人気です。UltimateプラグインはCSSが苦手な人にもホ...このブログを書いている人5年間ブラック企業で働き続けていましたが、このままじゃいけないと何とか抜け出しました。それまで毎日休みなく仕事に追われていた中で、妻とそして家族と過ごせる日々が本当に大切と感じ、このブログの開設を決意。プロフィール補足このブログを書いている人Non太2015年9月に5年間働いたブラック企業から抜け出しました。それまで毎日休みなく仕事に追われていた中で、妻と過ごせる日々が本当に大切と感じ、このブログの開設を決意。ブログ歴は2015年4月~。月間最高35万PVです。>>詳細のプロフィールはこちら▼このサイトで使っているテーマ▼WordPressテーマ「ストーク」を見てみるブロガー専用のWordPressテーマである「STORK(ストーク)」です。カスタマイズをしなくてもメチャクチャ綺麗に表示されます。