ワードプレスで自作テーマ作成シリーズ
今回は「L34-カテゴリページの調整」をします。

現状このようになっているのを以下のように変更します。

index.phpの編集

<li class=”linkbox“>

以下に変更

<li class=”linkbox card”>

Style.cssの編集

Style.cssに以下の記述をします。

.card {
background-color: white;
text-align: center;
padding-top: 30px;
margin-bottom: 30px;
}

.card .thumb {
padding-top: 60%;
margin-bottom: 20px;
overflow: hidden;
position: relative;
}

.card .thumb img {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 0;
left: 0;
}

.card .excerpt {
width: 96%;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
text-align: left;
padding: .3em;
}

.card .readmore {
width: 12em;
padding: 1em;
border: 1px solid #61c1be;
background-color: white;
color: #61c1be;
margin-left: auto;
margin-right: auto;
text-align: center;
position: relative;
z-index: 0;
}

.card:hover .readmore {
background-color: #61c1be;
color: white;
}

完成！

関連記事

コメント