Sibatabi

旅の経験を情報として配信するブログ

【STINGER6】コピペでOK!記事一覧のカード化カスタマイズ

 2016/01/18 
stinger6

 記事一覧をカード型にカスタマイズ

カード型の記事一覧ってお洒落ですよね。

これは僕もずっとやりたかったカスタマイズで、「STINGER6」にテーマ変更した機会に挑戦してみたら、ある程度形になった(と思ってます)ので記事にまとめておきたいと思います。

今回のカスタマイズでは、下記ブログを参考にさせて頂きました。

Stinger5カスタマイズ!記事一覧をオシャレな写真付き2カラムにする方法、もちろんレスポンシブ対応だよ

※ファイルは全て子テーマにコピペして対応しています。

 

記事一覧部分の背景を透過させる

まずは、記事一覧部分の背景を消します。

home.php、archive.phpの下記の部分を訂正。

このブログでは検索はGoogleカスタム検索を利用していますが、「STINGER6」備え付けの検索ウィジェットを利用する場合は、search.phpも訂正が必要です。

グローバルメニュー、サイドバーと合わせるために、padding-topとpadding-leftも0pxに指定しています。

「stinger6」記事一覧カード化

paddingを指定しないと、こんな風に不揃いな感じになってしまいます。

 

抜粋文を削除する

抜粋文を削除します。

itiran-thumbnail-on.phpの上記部分を削除。

 

記事一覧をカード化する

いよいよ記事一覧をカード化します。

style.css共通部分に上記コードを追加。

 

PC部分に上記コードを追加。

モバイルとPCで表示されるサイズを変えました。

 

サムネイルを作成・差し替え

カード型の記事一覧に合わせてサムネイル画像を新しく作成します。

function.phpに上記コードを追加。

追加したら、出力するサムネイル画像の差し替えをします。

itiran-thumnail-on.phpの上記「st_thum150」の部分を先ほど作成した「st_thumb_itiran」というコードに書き換えます。

書き換えが終わったら、プラグイン「Force Regenerate Thumbnails」を使ってサムネイル画像の再生成と不要になったサムネイル画像を削除します。
画像が多いと結構時間が掛かるので注意。

 

ちなみに、モバイル画面とPC画面で出力するサムネイル画像のサイズを変える場合は、上記部分を丸々下記コードに書き換えて、それぞれコードを入力。

iPhoneのLetinaディスプレイに対応するためにやってみようと思ったけど、上手くできなかったので忘れないように書いときます。

 

一覧ページの見出しをカード化

一覧ページの見出しも、そのままだと不自然なので、ついでにカード化しました。

archive.phpの<h2>を下記の通り訂正。

 

次にCSSで見出しデザインの変更。

上記コードをstyle.css共通部分に追加。

上記コードをPC部分に追加。

 

「stinger6」一覧ページ見出しのカード化

こんな感じになります。

 

最後に色々と調整

記事一覧タイトルのサイズと行間を調整

style.css共通部分に上記コードを追加。

PC部分に上記コードを追加。

PCのみ「投稿日」「カテゴリー」「タグ」表記の文字を大きく

style.cssのPC部分に上記コードを追加。

 

最後に

以上で、記事一覧のカード化カスタマイズは完了です。

これで合っているかはわかりませんが、まぁ見られる形にはなっているので良しとします。

今回は、2カラムにしましたが、サイズを変えれば3カラムにしたりも出来るので宜しければ参考にしてみてください。

また、この記事一覧カード化に合わせて、サイドバーもカード化しているので、そのカスタマイズについてはまた近々アップしたいと思います。

※サイドバーのカード化もアップしました。

【STINGER6】サイドバーカスタマイズ!記事一覧に合わせてカード化するよ!もちろん見出しも!