コピペだけ!STINGER5の記事一覧をカード型にするカスタマイズ方法

   

stinger5 記事一覧

WordPressを使う人で、もはや『STINGER5』を知らない人はいないと思いますが、あまりにも普及しすぎているせいで、本来はカッコいいデザインが、なんだかダサく見えてしまいませんか?

そこで今回は、STINGER5を他のブログとは一味違うデザインにするために、記事一覧をカード型にカスタマイズする方法を紹介していきます。

基本的に、これから紹介する3つの手順をお茶でも飲みながら作業すれば完成するので、初心者の方でも安心して下さい。 では、早速やっていきましょう。

スポンサーリンク

1.TOPとカテゴリーページの記事一覧のデザインを失くす

まずは、home.phpとindex.php(メインインデックスのテンプレート)のファイルにある、

この記述を消して、以下のコードを貼り付けます。

上の記述に書き換えることで、TOPページ・カテゴリー、アーカイブページに表示される記事一覧の背景色や線を消します。

2.itiran.phpの記述を変更する

1の作業が終わったら、今度は「itiran.php」に移動しましょう。このitiran.phpに、STINGER5の記事一覧に関する記述が書かれています。 まずは、itiran.phpに書かれているコードを全て消して、以下のコードをコピペします。

今のご時世、スマホの利用者が増えているので、ブログのデザインも「スマホでの操作の時に、リンクをクリックしやすいか」が重要になってきます。

なので、今回のカスタマイズでは、記事一覧のカードの全体にリンクがかかるようにしました。それに、こっちの方がカッコいいです。

3.CSSの記述をカスタマイズする

次は、style.css(スタイルシート)のファイルに進みます。

このコード内の310~350行目くらいまで、やたらと「#topnews」と書かれている部分がありますが、そこが記事一覧のデザインを決めているコードになります。 まずは、「/*抜粋文字*/」と言う記述を見つけて、その真上に以下のコードをコピペします。

このコードを書くことで、記事一覧のタイトルや本文抜粋の文章に線が入るのを防ぎます。 そして今度は、

と言う記述を、以下のコードに書き換えます。

これでカスタマイズは完了です。

今回のカスタマイズでは、記事一覧にカーソルを合わせると、背景色が薄い灰色に変化するようにしています。もし、変化する背景色を変えたい場合は、

上のコードの「edf6ff」と言う記述を、変えてあげればOKです。「いや、背景色の変化なんていらねーし」と言う人は、上のコードを消せば良いです。

番外編:スマホ時のデザインをちょいと変える

上記のカスタマイズが完成した場合は、スマホで記事一覧を見ると、サムネイル画像と記事タイトルが少し窮屈に見えます。

stinger5-miyasuku

なので、ボクはスマホで見る時にもっとシンプルに記事一覧を出したいな、と思ったので、以下のカスタマイズを追加しました。

とは言ってもやり方は簡単で、以下のコードをstyle.cssのどこかにコピペするだけでOKです。cssについて詳しくない人は、style.cssの一番下にコピーすれば、間違いなくできます。

これでstingerの記事一覧のカスタマイズは完了です。

スポンサーリンク

この記事をシェアする

スポンサーリンク

この記事と関連がある記事

スポンサーリンク