ゼロから始めるWordPress自作テーマ #5「投稿一覧の見た目を整えよう」
WordPress
「ゼロから始めるWordPress自作テーマ」では、既成のテーマを使わずにゼロからWordPressサイトを構築する方法を、私のブログサイト「OUNI studio」の構築例をもとに紹介します。
WordPressの既成テーマは簡単にインストールできますが、実際にサイトを構築する際には、既成のテーマをカスタマイズするよりも、自分でテーマを作成した方が簡単な場合が多いです。自分でWordPressテーマを作れるようになれば、サイトを自由にデザインできるようになります。
第５回は「投稿一覧の見た目を整えよう」です。
以下のように、トップページの投稿一覧の見た目をCSSで整えていきます。
今回の内容
今回は、html と css を修正するだけです。
ソースコードは以下に公開しています。
解説
表示の横幅と領域を設定する
表示領域の最大幅を指定して、背景と記事一覧の領域を指定します。
ページの最大幅を1200pxに指定して、それ以上ページ幅が広がるとマージン幅が広がるようにします。
/*---------------------------------------------------
全体
-----------------------------------------------------*/
body {
background-color: gainsboro;
}
main {
max-width: 1200px;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
}
/*---------------------------------------------------
記事の一覧
-----------------------------------------------------*/
#new-post-list {
background-color: white;
padding: 20px 4%;
}サムネイル画像をサイズとid指定で取得する
サムネイル画像のサイズを合わせるのと、サムネイル画像に対してcssを適用するためにidを指定します。
サムネイル画像の取得は、以下のリファレンスサイトを参考にしました。
以下のコードで、サイズとid指定を指定して取得します。
<!-- サムネイル画像を表示する -->
<?php the_post_thumbnail( array( 250, 200 ), array( 'id' => 'new-post-img' ) ); ?>リンク文字をふわっと表示させる
リンクにカーソルを載せたときに、ふわっとホバー表示させます。
テキストのカラーと遷移時間を指定して、ホバー状態のときに遷移させます。
h3#new-post-header > a {
/* テキストの指定 */
font-size: small;
font-weight: bold;
text-decoration: none;
/* カラーをトランジションさせる */
color: dimgray;
transition: color 0.5s;
}
h3#new-post-header > a:hover {
/* カラーをトランジションさせる */
color: silver;
}まとめ
今回は css で投稿一覧の見た目を調整しました。
cssだけの調整でしたが、かなりブログっぽい見た目になりました。
次回は、ヘッダーを作っていきます。