シェアする

意外と簡単!ワードプレスで自作テーマ作成-L6 トップページのレイアウト-

ワードプレス

ワードプレスで自作テーマ作成シリーズ
今回は「L6 トップページのレイアウト」方法をご紹介します。

トップページにはブログのように記事一覧を表示して、最新記事が一番上に来るようにレイアウトしていきます。

 

①アイキャッチ画像を有効にする

アイキャッチ画像はブログの記事冒頭や記事一覧ページに配置されているサムネイル画像です。ユーザーを記事に誘導するのにとても効果的ですので絶対に必須です。

しかし現在投稿ページにはアイキャッチ画像を追加する場所がありません。投稿ページからアイキャッチ画像を追加できるようにしていきます。

投稿ページアイキャッチ有効前

functions.phpを開いて一番下に以下の記述を追加してください。

投稿ページアイキャッチ有効後

投稿ページ右下からアイキャッチ画像が設定できるようになりました。

②記事を投稿

3つくらい記事を投稿してください。

現在のトップページは以下のように表示されています。

トップページ

トップページに記事の内容が表示されてしまっています。記事は3つ投稿しましたが、タイトルやアイキャッチ画像すら表示されないのでどこからどこまでが1つの記事なのかもわかりません。

③index.phpの記述の変更

現在のindex.phpは以下のような記述になっていると思います。

↑これを全て削除して、以下に書き換えてください。

トップページをリロードしてください。

アイキャッチ画像とタイトルが表示されるようになりました。そして記事内容は表示されなくなりました。また、サイドバーも表示されるようになりました。

トップページ

④cssの記述

①コンテンツとサイドバーの領域の指定

コンテンツ(記事一覧)とサイドバーの領域の指定をします。「style.css」に以下をを記入してください。

記述の説明

#content {
width: 75%;
}

コンテンツ(記事一覧)の領域を75%に指定しました。

 

aside {
width: 25%;
background-color: #eee;
}

サイドバーの領域を25%に指定しました。また、サイドバー部分の背景色を灰色に指定しました。

リロードすると以下のように表示されます。

トップページ

②記事一覧の調整

タイトルの前に●がついていたり、位置が左寄りすぎるので調整します。「style.css」に以下を記入してください。

記述の説明

.postlist {
list-style: none;
}

タイトルの前の●を消しています。

 

.postlist li {
width: 50%;
}

記事一覧の幅を均等にしています。

リロードすると以下のように表示されます。

トップページ

③ボックス内にリンクを貼る

リンクボックス

現在記事のページに行けるのは「more」をクリックした時のみです。しかし、それではユーザービリティがよろしくないので写真やタイトルなどをクリックしても記事ページへ飛ぶように設定します。

ボックス内にリンクを貼るイメージ

見えないボックスを作って、そのボックス内であれば文字上でも画像上でも白紙部分でもどこでもリンクを踏めるようcssで設定していきます。

「style.css」に以下をを記入してください。

記述の説明

.linkbox {
position: relative;
}

ボックスの基準となる箱を指定しています。

 

.linkbox a {
position: absolute;

position: absoluteにすることで位置を自由に指定できるようになります。

 

display: block;

箱型にしている。アンカーは文字に対してだけ領域をもてるが面積をもたせています。

 

top: 0;

リンクの領域をボックス内全部にしています。

 

text-indent: -9999px;

moreを消しています。

リンクボックス

リロードするとmoreが消えている代わりにクリックできる範囲が広がっています。

④記事一覧の間に線を入れる

「style.css」に以下を記入してください。

#home ul.postlist li:nth-child(odd) {
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 20px 20px 20px 0;
}

奇数の記事(左の記事)に対しての指定です。borderで記事ごとにボーダー(線)を表示させるよう指定しています。paddingは記事とボーダーが左揃えになるよう上、右、下が20px指定、左が0指定です。左も20pxで指定してしまうと線が左にはみ出てしまいます。(見にくいですが以下画像参照。赤丸で囲んである部分がはみ出ています。)

 トップページのボーダーの設定

#home ul.postlist li:nth-child(even) {
border-bottom: 1px solid #ddd;
padding: 20px 0 20px 20px;

偶数の記事(右の記事)に対しての指定です。こちらも、右の記事とボーダーが右揃えになるようにpaddingを設定しています。

Toi

お疲れ様でした!