ブログ初心者がなるべく簡単に1記事目の表示を変更する方法

一番目の記事だけサムネイル大きくするやつどうやるんだろ…って悩んでいた時期が私にもありました。

今ではそういう機能のついたテーマが多いので必要ないかもしれませんが、

覚えておくと便利なので、簡単に紹介したいと思います。

 

 

PHPの処理を変更して、

1記事目にIDやCLASSを付けるという方法が一般的かもしれません。

 

しかし、PHPの変更って、

なんだかんだうまくいかない事があったりします。

 

今回は、出来る限りPHPの記述を減らして、

HTMLとCSSで、1番目の記事表示を変更する方法を紹介します。

 

というわけで、今回の目的

「記事一覧のトップの表示を変更する」

を実践していきましょう。

 

HTML

 

HTMLと言っても、記述するものはphpファイルです。

WordPressのトップページに関するphpは、

front-page.phpかhome.php、index.phpのいずれかになります。

 

まず、今回記述するHTMLは、

<ul><li></li></ul>だけです。

 

多くのサイトで紹介されている通り、

記事一覧はループという処理を使って作られています。

 

その多くが、以下のような記述になっているかと思います。

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
//ここにループ内の記述
<?php endwhile; ?>
<?php endif; ?>

 

それで、この中にphpで分岐を作ったり…なんて事をすると、

ちょっとめんどくさかったりします。

 

なので、このphpにULとLIをそれぞれ入れて、

条件分岐はCSS側でやってしまおうというのが、

今回の手法になります。

 

 

HTMLの記述

 

まず、phpのコードの中に、

ULとLIを埋め込みます。

<?php if ( have_posts() ) : ?>
<ul class="article-container">
<?php while ( have_posts() ) : the_post(); ?>
<li>
//ここにループ内の記述
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>

 

HTMLの記述はこれだけです。

今回は、ULにarticle-containerというクラスを付けました。

 

この名前は、自由に変更して大丈夫です。

 

 

 

CSS

 

では、仕上げにCSSで条件分岐させます。

CSSでの条件分岐は、

「最初の・○番目の・最後の」

と、幾つか方法があります。

 

今回は、一番目の記事の装飾を変更するので、

条件分岐は「最初の」を使います。

 

 

条件分岐

 

では早速条件分岐のコードを記述していきます。

.article-container li:first-child{ color:red; }
.article-container li:first-child ○○○{ }

 

といっても、大枠である<li>に1番目という表記の、

:FIRST-CHILD

を付け足すだけだったりします。

 

例えば、:first-chileを記述すると、

今回のコードでは、

「.article-container」の中の、最初の「li」に、

color:red;という文字を赤くする記述を書いているだけです。

 

つまり、:first-childを付けるだけで、

記事一覧の一番最初の記事の表記を、

自由に変えられるという事になります。

 

 

まとめ

 

 

多くのサイトがif文や関数を使った分岐を使っています。

 

もちろんBLOGRAMでも至る所に使われていますが、

自分でカスタマイズするとなると、

PHPをいじるのは、少しハードルが上がります。

 

自分が最初から作り上げたものならともかく、

WordPressは他の作者様のテンプレートを使う事が多いため、

そんな中で条件分岐をするのは、初心者ではほぼ不可能でしょう。

 

それなら、プログラミングよりハードルが低い、

HTMLとCSSだけで、表示を変えられたらなと思いました。

 

少し話がズレてしまいましたが、

目的は「記事一覧のトップの表示を変更する」でしたね。

 

無事達成出来たかと思います。

 

 

よかったら参考にしてみてくださいね。