スティンガー8

STINGER8の記事一覧をおしゃれなカード型にカスタマイズする方法

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

まだSTINGER8のカスタマイズで、トップページの記事一覧にはあまり手をつけていなかったので、おしゃれな「カード型」デザインのものに変更することに決めました。

 

ですが、ネットで調べてもSTINGER8でカスタマイズされている方がなかなか見つからなかったので、ある程度は自分で何とかしようと作業を開始したら、完成するまでに半日はかかりましたね。

プラグインは極力使いたくないので、CSSでなんとかデザインの変更を挑戦していますが、やはり私のような初心者では1つ変更するのも一苦労です。

 

それではSTINGER8のトップページを、おしゃれなカード型にカスタマイズする方法についてご紹介していきます。

変更前と完成系のイメージ

変更前のトップページ記事一覧は、基本的にはほとんどデフォルトの状態ものになっています。

 

 

上記の画像はデフォルトのものですが、今までは右下に「続きを読む」ボタンを表示させていましたので、カスタマイズ方法が気になる方はこちらの記事をご覧ください。

参考:続きを読むボタンはどこだ?STINGER8で表示させるカスタマイズ方法

 

ここからCSSで新たにカスタマイズした完成系イメージはこちらになります。

 

 

「このブログ、前と全然変わったなぁ。」と思ってもらえるような、カード型のデザインに仕上がったと私ながら満足しています。

 

因みに「続きを読む」ボタンは、「この記事を見る」に内容を変更しているだけです。

それでは早速STINGER8でカスタマイズを行っていきましょう。

 

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

STINGER8のトップページの記事一覧をカード型にするには、以下のテーマファイルを編集していきます。

  • itiran.php
  • style.css

ファイルの編集はアップデートしても、カスタマイズ内容が消えることのない「子テーマ」で編集するのが基本となります。

親テーマにしか対象ファイルがない場合は、「FTPソフト」などでファイルを子テーマにアップロードしておきましょう。

 

また、テーマの編集は何かと不都合が起きる可能性があるので、事前にデータのバックアップなどを取っておくことをオススメします。

 

「itiran.php」でカード型にする

ワードプレスの管理画面メニューから、「外観」⇒「テーマの編集」の順に進んで、右側の一覧から「itiran.php」ファイルを開きます。

記事一覧には「投稿日時」「カテゴリー」「抜粋文」が表示されているので、必要がない場合は「コメントアウト」で対応します。

 

ここではカテゴリーと抜粋文をコメントアウトで非表示にしたいので、itiran.phpから以下のコードを探して最初と最後の部分に、「<!– –>」のコードで囲みましょう。

 

 

3列目から9列目が対象のコードになるのでコメントアウトを行いますが、このままでは「続きを読む」ボタンも表示されなくなってしまう場合があります。

もしボタンを利用されている方は上記コードのところに、以下の3列目のコードを追記して下さい。

 

 

コードが追記できたら、またそのすぐ上にあるコードのところに以下の2列目のコードを追加して、3列目の最初にある「<p>」を削除します。

 

 

「class」を指定しておくことで、記事一覧の投稿日時だけのデザインをカスタマイズすることができるようになります。

次にitiran.phpの上の方にある「class=”kanren”>」を、以下の6列目のコードに変更しましょう。

 

 

ここで「class」を変更しておかないと、この後に行うstyle.cssの変更内容が記事一覧だけでなく、「関連記事」や「新着記事」欄にも同時に反映されてしまいます。

 

すでにカスタマイズされている方やトップページだけを変更したい場合は、必ず新しいclassを指定しておきましょう。

これでカード型にする準備は完了になります。

 

画像上にカテゴリーを重ねる場合は

先程カテゴリーを非表示にしたのは、アイキャッチの画像上にカテゴリーを重ねているからで、2つも表示する必要がないからです。

もし通常のカテゴリー表示のままでいいという方は、コメントアウトの最初の部分を一段下にするだけで簡単に表示できます。

 

カテゴリーを画像上に重ねる場合は、itiran.phpから以下の3列目と5~8列目のコードを追加します。

 

 

また、4列目の「thumbnail」をここでは「medium」に変更しています。

これは表示されている画像が元々小さめで設定されている為、拡大した時に画像が荒れてぼやけてしまいます。

そこでmediumに変更することで、ワードプレスの「設定」⇒「メディア」で設定されている、「中サイズ」の設定値(既存で300×300)に拡大されます。

 

※mediumを使うと画像の縦横比率がそのまま縮小表示される為、画像サイズがバラバラになってしまう可能性があるので注意しましょう。

 

「style.css」でデザインを調整する

style.cssファイルでカード型デザインを整えていきますが、そのまま以下のコードをコピー&ペーストするだけですぐに使用できます。

 

 

マウスホバー時に画像を拡大させたり、カテゴリーを画像の左上に表示させてみたり、カードに影をつけてみたり色々変更もできるので、各説明文を見ながら簡単に自分好みのカスタマイズができるかと思います。

 

また、「この記事を見る」ボタンのコードはあくまで配置だけのものになるので、デザインが気になる方やボタンを表示したいという方は、先程の「続きを読む」に関する記事を参考にされて下さい。

 

スマホ用のデザインはこちら

上記のコードだけではスマホで表示した時にデザインが崩れてしまうので、以下のコードを追記しておきましょう。

 

 

上記のコードを追加すると、このように表示されます。

 

 

気になる部分があれば自由にカスタマイズされてみて下さい。

 

STINGER8カスタマイズまとめ

今回のSTINGER8のカード型カスタマイズでは、トップページの記事一覧やカテゴリーの一覧ページ、アーカイブの一覧でも反映されます。

 

関連記事一覧ではまた別の方法でタイル形式に表示させているので、気になる方は以下の記事を参考にされてみて下さい。

参考:STINGER8の関連記事をCSSでかっこよくタイル形式に表示する方法

 

今まで結構なカスタマイズをSTINGER8で行ってきましたが、私のブログはまだまだ超弱小なのでほとんど人目にさらされることもないと思うと悲しくなりますね。

 

ですが、CSSは色々と勉強になるのでブログを成長させつつ、カスタマイズも行ってユーザビリティやブログデザインを向上させて集客に繋がればと思います。

こちらも読まれています

ABOUT ME
フリーマン
フリーマン
1988年生まれで兵庫県に在住してます。気になることをただひたすらに書き続けて、ブログ運営10ヶ月目で月間10万PV超えを達成。 将来的な資産を作る為に資産運用も実践中。>>詳細プロフィール