MENU

スマートフォン用サイドメニューウィジェットエリアにウィジェットを設定して下さい。

サイトデザインを自作テーマに変更しました。

Simplicityの記事一覧をSTORKテーマのカードタイプ風にカスタマイズ!

こんにちは、SHUMiSTです。

Simplicity(シンプリシティー)テーマを使用して、STORK(ストーク)テーマを再現というかデザインを近づけるカスタマイズ第8回目です。

前回は、ページトップやカテゴリーページの記事一覧をSTORK(ストーク)テーマのシンプルタイプ風にするカスタマイズを行いました。

今回は、予告通りカスタマイズ予定のSTORK(ストーク)テーマ風の3種類の記事一覧のカスタマイズのうち2種類目「カードタイプ」の記事一覧にするカスタマイズを行います。

  • シンプルタイプ(前回
  • カードタイプ(今回)
  • マガジンタイプ(第9回
  • ビッグタイプ(カスタマイズ予定なし)

各タイプのデザインは、下記のページを参照してください。

追加ソースはなるべく、子テーマのスタイルシート(style.css)に追加しましょう。
また、テンプレートファイルに変更を加える場合は親テーマの該当ファイルを子テーマのディレクトリにコピーし、子テーマで変更を加えましょう。

記事一覧をSTORK(ストーク)テーマのカードタイプ風にしよう!

STORK(ストーク)テーマで選択できる記事一覧レイアウトのうち、カードタイプ風のデザインに整えていきます。

Simplicity(シンプリシティー)テーマでは、外観->カスタマイズ->レイアウト(全体・リスト)->一覧リストのスタイルから10種類の記事一覧タイプを選択することができます。

前回も書きましたが、この10種類の中からカスタマイズ予定の上記3種類のタイプを切り替えられるように、各タイプに近いデザインタイプを選んでからカスタマイズを行います。

今回は、外観->カスタマイズ->レイアウト(全体・リスト)->一覧リストのスタイルサムネイル大を選択します。
今回行う記事一覧のカスタマイズは前回選択したエントリーカード(デフォルト)をベースにして行っていくので前回のカスタマイズは必ず行ってください。

header.phpのメインカラムボックスにカードタイプ用のクラスを追加

header.phpのメインカラムボックス(#main)にカードタイプ用のクラス(.s-large_thumb_style)を追加します。

追加前のソース

80行~82行付近
          <!-- main -->
          <main itemscope itemprop="mainContentOfPage">
            <div id="main" itemscope itemtype="http://schema.org/Blog">

追加後のソース

          <!-- main -->
          <main itemscope itemprop="mainContentOfPage">
            <?php if ( is_list_style_large_thumb_cards() ): //サムネイル大の場合?>
            <div id="main" class="s-large_thumb_style" itemscope itemtype="http://schema.org/Blog">
            <?php else: //それ以外の場合?>
            <div id="main" itemscope itemtype="http://schema.org/Blog">
            <?php endif ?>

メインカラム左(記事一覧)にスタイルを設定

今回のカスタマイズのメインであるメインカラム左(記事一覧)にスタイルを設定します。

前回でメインカラムボックスやサイドバーのレイアウト設定などは完了しているため、今回以降は比較的簡単にカスタマイズを行えます。

追加ソース

以下の追加ソースを子テーマのスタイルシート(style.css)にコピペ(コピー&ペースト)します。

.s-large_thumb_style #list, .s-tile_thumb_style #list {
    margin-left: -1%;
    margin-right: -1%;
}
.s-large_thumb_style #list a.hover-card {
    width: 48%;
    margin: 0 1% 2.5%;
    float: left;
    height: 390px;
    font-size: inherit;
    position: static;
}
.s-large_thumb_style #list a.hover-card:hover:before {
    width: auto;
    height: auto;
    left: auto;
}
.s-large_thumb_style #list a:first-child .entry {
    border: 0;
}
.s-large_thumb_style #list a .entry {
    padding: .6em;
    color: #333;
    background: #fff;
    width: auto !important;
    height: 100% !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .13);
    border: 0;
    float: none !important;
    margin: 0 !important;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
.s-large_thumb_style #list a .entry:before {
    display: none;
}
#main.s-large_thumb_style .hover-card .entry-thumb {
    max-height: 215px;
    margin: -.6em -.6em .5em;
    width: auto;
}
.s-large_thumb_style #list .hover-card .entry-card-content {
    padding: 0;
}
.s-large_thumb_style #list .hover-card .entry-card-content h2 {
    font-size: 1.15em;
    margin-top: 0.5em;
    margin-bottom: 0.3em;
    color: #333;
    padding: 0;
}
.s-large_thumb_style #list .hover-card .entry-card-content p {
    font-size: .9em;
}
.s-large_thumb_style #list .hover-card .entry-card-content .entry-snippet {
    filter: alpha(opacity=90);
    -ms-filter: "alpha(opacity=90)";
    opacity: 0.9;
    font-size: .765em;
    color: #333;
    height: auto;
    overflow: inherit;
}
.s-large_thumb_style #list a .entry:after {
    content: '';
    display: block;
    width: 100%;
    height: 2.5em;
    background: linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%);
    position: absolute;
    bottom: 0;
}
.s-large_thumb_style #list a .entry:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.s-large_thumb_style #list a .entry:hover img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    transform: scale(1.05);
}
.s-large_thumb_style .post-meta .post-date {
    color: #333;
}

メディアクエリにメインカラムボックスのレイアウトを設定

第3回で追加してあるメディアクエリ(1166px以上)の設定にレイアウトを設定します。

追加先のメディアクエリ

@media only screen and (min-width: 1166px) {
//この括弧内に追加する
}

追加ソース

    .s-large_thumb_style #list a.hover-card:before{
        content: "";
        display: none;
    }

既存のスタイルに要素を追加

第3回第4回前回で追加した既存のスタイルに今回、同様のスタイルを適用するため要素を追加します。

追加前のソース

#header-in:before, #header-in:after,
.menu:before, .menu:after,
#h-top:before, #h-top:after,
#body-in:before, #body-in:after,
#main:before, #main:after,
#list .entry:before, #list .entry:after,
#list a.hover-card:before, #list a.hover-card:after {
    content: "";
    display: table;
}
#header-in:after, .menu:after, #h-top:after,
#body-in:after, #main:after, #list .entry:after,
#list a.hover-card:after {
    clear: both;
}

追加後のソース

.s-large_thumb_style #list関係のbefore、after要素を追加します。

疑似要素でのclearfix(clear:both)は、本来は各所で何度も使用するため専用のクラスを用意した方が良いですが分かり易いように下記のように記載しています。
#header-in:before, #header-in:after,
.menu:before, .menu:after,
#h-top:before, #h-top:after,
#body-in:before, #body-in:after,
#main:before, #main:after,
#list .entry:before, #list .entry:after,
#list a.hover-card:before, #list a.hover-card:after,
.s-large_thumb_style #list:before, .s-large_thumb_style #list:after,
.s-large_thumb_style #list .hover-card .entry-card-content:before,
.s-large_thumb_style #list .hover-card .entry-card-content:after {
    content: "";
    display: table;
}
#header-in:after, .menu:after, #h-top:after,
#body-in:after, #main:after, #list .entry:after,
#list a.hover-card:after,
.s-large_thumb_style #list:after,
.s-large_thumb_style #list .hover-card .entry-card-content:after {
    clear: both;
}

function.phpにカードタイプの記事一覧用のサムネイル画像サイズを設定

STORK(ストーク)テーマでは、各タイプ毎にサムネイル画像サイズが違うため、第6回で書いた理由によりカードタイプ用のサムネイル画像サイズを設定します。

追加ソース

//記事一覧サムネイル大のサムネイル画像を設定
add_image_size('thumb356', 356, 213, true);

entry-card.phpの大きなサムネイルカードのサムネイルサイズ設定を変更

entry-card.phpの大きなサムネイルカードのサムネイルサイズ設定を”thumb320”から先ほど設定した”thumb356”に変更します。

変更前のソース

10行~13行付近
    <?php else: //大きなサムネイルカードの場合?>
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき
        //サムネイル画像の縦横比を保存するかどうかで取得するサムネイルを変化
        $thumb = ( is_list_style_tile_thumb_cards_raw() ? 'thumb320_raw' : 'thumb320') ?>

変更後のソース

    <?php else: //大きなサムネイルカードの場合?>
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき
        //サムネイル画像の縦横比を保存するかどうかで取得するサムネイルを変化
        $thumb = ( is_list_style_tile_thumb_cards_raw() ? 'thumb320_raw' : 'thumb356') ?>

カスタマイズまとめ

今回のカスタマイズにより、メインカラム左(記事一覧)がSTORK(ストーク)テーマのカードタイプ風に変わりました。

また、前回と同じくSimplicity(シンプリシティー)テーマの記事一覧リストのスタイルからサムネイル大に上記のカードタイプを割り当てたので今後は外観->カスタマイズ->レイアウト(全体・リスト)->一覧リストのスタイルからサムネイル大を選択することで切り替えができるようになってます。

次回は、Simplicity(シンプリシティー)テーマの記事一覧リストのスタイルからタイル2列 画像縦横比保存(要再生成)を選択することで、STORK(ストーク)テーマのマガジンタイプ風の記事一覧ページになるようにデザインを整えていきます。

Simplicity(シンプリシティー)テーマの元々の機能やソースを流用して、STORK(ストーク)テーマに近づけているため、STORK(ストーク)テーマのソースをそのまま丸ごと利用したりはしておりませんので中身はまったく別物です。

STORK(ストーク)テーマの機能面などを利用したい方はSTORK(ストーク)テーマを購入してご利用ください。

今回のカスタマイズ前後のスクリーンショット

カスタマイズ前

カスタマイズ後

第7回:記事一覧をシンプルタイプに変更編を読む

第9回:記事一覧をマガジンタイプに変更編を読む

SimplicityをSTORK風にカスタマイズシリーズ目次へ

この記事が気に入ったら
いいね!しよう!

最新記事をお届けします。