ta2oweb

【Stinger5カスタマイズ】コピペですぐできる!新着記事を画像付きでタイトル直下に表示する方法。

 

僕のブログテーマはStinger5をカスタマイズして使用しています。

先日、ブログタイトル直下にサムネイル付きで新着記事を表示させている方法について問い合わせをいただいてることに気付きました。m(_ _)m

コメントを表示させてないため、今日まで全く気付かずにスルーしてました。せっかくコメントいただいていたのにごめんなさい。

最近は他のブログでもよく見かけるのであんまり意味はないと思いますが、ひっさしぶりのStinger5カスタマイズをエントリーしたいと思います!

新着記事を画像付きでブログタイトルの下に表示する

検索で訪問してこられた方の目に極力止まる方法はこれが一番かなーと思い設置してます。今回はこの写真のように新着記事を表示させることを目指します。

まず大前提として、僕は全くHTMLやCSSの知識がありません。STINGER3から初めて触るようになって、感覚でポイントを覚えてるくらいなので詳しい説明はできませんのでご了承ください。

こちらの記事を参考に自分で組み立ててみました。

【CSS】table-cellを使って要素を均等に配置する方法

リストを横並びに配置する際、同じ幅で均等に並べたいことって多いですよね?そんなときこそtable-cellが活躍します。ソースも載せてますので参考にしてみてください。

delaymania.com

少しだけ解説すると、記事に関してはStingerに元々備わっているコードを流用しているので、タイトルやタグもちゃんと吐き出してくれます。サムネイル付きの新着記事はSTINGER3から応用しているので、Stingerシリーズなら全てでこのコードは応用できるとも思ってます。(3とFANと5は検証済み)

HTMLのコードはこちら


3 ); $myposts = get_posts( $args ); foreach( $myposts as $post ) { setup_postdata($post); ?>
no image

$kiji ){ echo ' 新着記事
'; } ?>

6 ); $myposts = get_posts( $args ); foreach( $myposts as $post ) { setup_postdata($post); ?>
no image
$kiji ){ echo ' 新着記事'; } ?>   

これを好きなところにコピペしてください。僕はブログタイトルの下に表示させたかったのでheader.phpのwrapper直下に挿入して、全てのページで表示するようにしています。

このコードで注意して欲しいのは、マークしている14と48のサムネイルの大きさです。これはご自身のfunction.phpに記載されているどれかをチョイスして書き換えてくださいね。これをしなければ崩れると思います。500っていうのは僕が勝手に作ったサイズです。

それと、僕のブログではPCとスマフォで記事の表示数を分けているため、新着記事をPCで表示させたくない人は35〜68を削除してください。

マーク5と39の、3と6という数字は表示させる新着記事の数です。スマフォで表示させる新着記事数は3つが限界だと思います。もちろんレスポンシブ対応のCSSコードなので、スマフォを横にしてもバランスは崩れません。

マーク25と59は、新着記事のback-groundをHTMLで強制的に出力している箇所です。もし背景の赤色が嫌な方はここで修正してもいいですし、消してもらってclassを付けてCSSの方に書き足してもらってもいいと思います。めんどくさい方はそのままで笑

マーク20と54は「新着記事と表示する日数」です。僕は更新頻度が低いので8にしています。新着とちゃうやんけ!のツッコミはどうかナシの方向で笑

CSSのコードはこちら

/*------------------ヘッダnewtop3-------------------------------*/
.newnew{
   table-layout: fixed;
   display:table;
   background-color: #fff;/*F2F2F2*/
   margin-top:-1px;
   margin-bottom:13px;
   width:100%;
   box-shadow: 2px 5px 7px 0px  #c5c5c5;
}
.newpic{
   height:auto;
   text-align:left;
   padding:5px;
   display:table-cell;
   width: 100%;
   font-size:12px;
   line-height:1.5em;
   letter-spacing:0px;
}
.newnew a{
   color: #0489B1;
   text-decoration: none;
}
.newpic:hover{
   background-color: #FFFCAF;/*#fddd85*/
}
.newtittle1 {
   margin-top:-17px;
}
/*------------------ヘッダnewtop3ここまで-------------------------------*/

このCSSコードは僕の記事幅で調整しているため、そのままだと表示は崩れると思います。teble-layoutとdisplayはさわらずに調整してください。

ここでの注意点は、写真で見てもらってわかる通り、PCとスマフォで「新着記事」の表示位置を変えています。これは単純に表示された時の面積がPCの方が大きいので、個人的に分けているだけで、特に意味はありません。

もし気になる方はCSSで整えてください。いじる箇所はmarginとpaddingで、僕が調整できるレベルなのでそこまで難しいことではないと思います。

delaymaniaさんのホームページが好きなんです

この新着記事を表示する骨格は先ほども書いた通り、【CSS】table-cellを使って要素を均等に配置する方法を参考させてもらいました。

穴があくほど記事を読み返しつつ、コードを作っては書き直してを繰り返しました。僕のコードでは簡単に言うと、newnewというBOXを作って、その中で要素(写真やタイトル、タグ)を均等に配置する構造です。

いつみても@delaymaniaさんのホームページってオシャレですよね。しかもStinger5をベースにフルカスタムされていて逸脱です。デザインや配色など全ての部分で勉強させていただいてます。

とてもわかりやすく書かれているのですが、僕が素人すぎて完成までにめちゃくちゃ時間がかかりました笑 STINGER5を使っている方はどんどんアクセスして勉強しましょう!

今回のマジで。配置するだけで雰囲気が変わります!

レスポンシブ対応のStinger5がリリースされてからすぐにカスタムし倒し、今年の頭にはある程度落ち着いたので最近は全くいじってなかったのですが、先日購入したiPhone6s Plusで表示した際、想定してたこととバランスが多少違ってたので、久しぶりにコードを触りました。

本来は新着記事のカスタムもエントリーしようと思っていたのですが、自分で組み立てたので汚くて恥ずかしかったので中止に。もし「こうすると綺麗になるよー」って優しく教えてくれる方はぜひコメントください。笑

そんなに難しくないと思うので、気になる方は挑戦してみてくださいね!

▼シェアしてもらえるとめっちゃ嬉しいです:)
  2018/09/05