どもです。
当ブログに『新着記事』を表示させたいと思いググってみてようやく?意図に合ったものを見つけましたので、そのサイトを参考にいろいろと弄ってみました。
最近このブログのTOPページをカスタマイズしたのですが、その時に新着記事(最新記事)を表示させるために「Newpost Catch」というプラグインを使いました。この「Newpost Catch」を使いこなすための解説ページは色々とあったのですが、色々と組み合わせた結果自分用のカスタマイズが出来たので、備忘録も兼ねて残...
さて、当ブログは無料テーマ:Simplicity2を使用させて頂いています。 ブログ本来の使い方をすれば新着記事の表示いなど考えなくても良いのですが、ブログの性質上?トップページに固定ページを選択しています。すると、記事を書いてもトップページに記事は表示されません。
そこで、見つけたサイトを参考にプラグイン:Newpost Catchを使用しスタイルも変更しました。 その形が下図です。
通常は?ウィジットに使うようですが、ショートコードを使用すれば固定ページに使用できるようでこれは、助かります。
ある程度、見栄えが良くなったんでこれでOKとしますw
最後に、参考コードをもとに当ブログ用に編集したCSSコードも載せておきます。
テキストモードでのHTMLコード
[npc date=1]
※本来ショートコードは[(全角)ではなく、[(半角)での表示が必要ですが、ここでは説明のために全角の[]を表示させてます。
子テーマ:スタイルシートstyle.cssに追加コード
/*-------------------------------------------- プラグイン:Newpost Catchをカスマイズ ---------------------------------------------*/ #npcatch li{ overflow:hidden; clear:both; vertical-align:top; border-bottom: 1px dotted #666666; } #npcatch img{ float:left; width: 80px; height: 60px; padding:5px 10px 5px 0; } #npcatch .title a{ font-size: 14px; font-weight: bold; text-decoration: none; } #npcatch .date { font-size: 12px; font-weight: bold; display:block; color: #d81b60; margin-bottom: 5px; } #npcatch li:hover{} #npcatch li:hover .title{} #npcatch li:hover .title a{} #npcatch li:hover .date{}