【賢威7】記事一覧のサムネイル画像を左に寄せる

有料のWordpressテーマである「賢威7」のカスタマイズ方法を記載していきます。

賢威7の記事一覧（ブログのTOP画面）は、デフォルトでは以下のようなデザインです。

サムネイル画像が右寄り、記事の抜粋が左寄りになっていますが、明らかに見た目がおかしいですよね。

どうしてこんな仕様でリリースしているのか理解に苦しみます。

サムネイル画像が左、記事抜粋が右、が一般的なブログの配置だと思うので、その様に修正していきたいと思います。

※賢威7.1のクール版BLACKで説明していきます。

記事一覧のサムネイルを左寄せにする

base.cssに以下の記述を追加してください。

@media (min-width:737px){
.home .article-body .eye-catch{
    float:left;
    margin-right: 1em;
}
}

サムネイル画像を左に寄せて、サムネイルの右側に1emのマージンを設定し直しました。

賢威7で2段組レイアウトを選んだ場合、横幅736pxまでがスマホ表示、横幅737px以上がPC表示になります。

今回はメディアクエリーでPC表示の場合のみ指定しました。

サムネイル画像を左に寄せたのは良いのですが、

カテゴリータグとサムネイル画像が近すぎて違和感があります。

間にマージンを空けるという方法もありますが、それだと1記事の縦幅があまりにも広くなりすぎるので、

今回は、日付とカテゴリーを横並びにして対応していきます。

記事一覧の日付とカテゴリーを横並びにする

先程のbase.cssに以下の7行目～18行目を追加。

@media (min-width:737px){
.home .article-body .eye-catch{
    float:left;
    margin-right: 1em;
}

.home .article-header::after{
    content: "";
    display: block;
    clear: both;
}
.home .article-header .post-date{
    float:left;
}
.home .article-header .post-cat{
    float:none;
    margin-left:135px;
}
}

「日付」と「カテゴリータグ」が横並びになって、サムネイル画像との間に適度な余白が空きました。

複数のカテゴリーを追加していくと、日付の横並びに追加されていきます。

アーカイブ一覧にも反映

記事一覧はブログのトップページだけではありません。

カテゴリーごとの一覧や、記事を投稿した年月ごとの一覧にもCSSを書く必要があります。

先程書いたbase.cssに

以下の20行目～37行目を追記

@media (min-width:737px){
/*ブログ記事一覧*/
.home .article-body .eye-catch{
    float:left;
    margin-right: 1em;
}

.home .article-header::after{
    content: "";
    display: block;
    clear: both;
}
.home .article-header .post-date{
    float:left;
}
.home .article-header .post-cat{
    float:none;
    margin-left:135px;
}
/*アーカイブ一覧*/
.archive .article-body .eye-catch{
    float:left;
    margin-right: 1em;
}

.archive .article-header::after{
    content: "";
    display: block;
    clear: both;
}
.archive .article-header .post-date{
    float:left;
}
.archive .article-header .post-cat{
    float:none;
    margin-left:135px;
}
}

これで全ての記事一覧にサムネイル画像の左寄せを反映させることが出来ました。

今回は基本的な配置を変えただけなので、これだけだとまだ見栄えが悪いです。

記事タイトルの装飾や文字サイズ、上下の余白などは個人の好みでカスタマイズしていく必要があります。