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

   

stinger5 記事一覧

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

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

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

スポンサーリンク

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

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

<main>

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

<main style="background-color:transparent;border:none;box-shadow:none;padding:20px 0;">

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

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

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

<div id="topnews">
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <a href="<?php the_permalink() ?>" class="thumb-link" >
  <dl class="clearfix">
    <dt> 
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php the_post_thumbnail( 'thumb150' ); ?>
      <?php else: // サムネイルを持っていないときの処理 ?>
      <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
      <?php endif; ?>
       </dt>
    <dd>
      <h3>
        <?php the_title(); ?>
      </h3>
      <div class="blog_info">
        <p><i class="fa fa-clock-o"></i>&nbsp;
          <?php the_time('Y/m/d') ?>
          &nbsp;<span class="pcone"><i class="fa fa-tags"></i>&nbsp;
          <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
          
          </span></p>
      </div>
      <div class="smanone">
        <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
      </div>
    </dd>
  </dl>
  </a>
  <?php endwhile; else: ?>
  <p>記事がありません</p>
  <?php endif; ?>
</div>

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

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

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

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

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

a.thumb-link{
  text-decoration:none;
}

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

#topnews dl {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999;
}

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

#topnews dl {
	margin-bottom: 20px;
	padding:10px 10px 20px;
	background:#fff;
   border:1px solid #e5e5e5;
  box-shadow:1px 1px 2px rgba(0,0,0, .4);
    box-sizing:border-box;
}
#topnews dl:hover{
    background:#f9f9f9; /*カーソルを合わせた時の背景色*/
}

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

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

#topnews dl:hover{
    background:#f9f9f9; /*カーソルを合わせた時の背景色*/
}

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

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

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

stinger5-miyasuku

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

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

@media only screen and (max-width: 780px) {
  #topnews dd h3{
	font-size:16px;
	line-height:18px;
  }
  #topnews dt{
	width:80px;
  }
  #topnews dl{
	padding-bottom:1px !important;
	margin-bottom:10px !important;
  }
}

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

最新の将棋ニュースを知りたい人におススメ

 あなたは、既存の将棋ニュースサイトに不満を感じたり、「もっと便利にならないかな」と思っていませんか?  

そんな人におススメしたいのが、「Shogi Pocket」と言う将棋ニュースサイトです。

Shogi Pocketは、「知りたい将棋の最新情報だけを、すぐにゲットできる」ように設計された新しいニュースサイトです。

 無駄を削ぎ落した将棋ニュースサイト「Shogi Pocket」

スポンサーリンク

この記事をシェアする

こちらの記事もおすすめ!