MENU

フォロー

LOST ARK（ロストアーク）の攻略を多数掲載中！

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

2017.11.23｜6年前38

こんにちは、SHUMiSTです。

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

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

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

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

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

旧ストーク：記事一覧ページレイアウトの変更

ストークでは記事一覧ページのレイアウトを4種類の中からお選びいただけます。 トップページとそれ以外の記事一覧ページのレイアウトをお選びいただけます。 もくじ1 設定方法2 4種類の記事一覧レイアウト2.1 マガジン型2....

open-cage.comopen-cage.com

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

スポンサーリンク

記事一覧をSTORK（ストーク）テーマのカードタイプ風にしよう！

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

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

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

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

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;
}

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

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

追加先のメディアクエリ

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

追加ソース

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

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

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

追加前のソース

#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（ストーク）テーマでは、各タイプ毎にサムネイル画像サイズが違うため、第６回で書いた理由によりカードタイプ用のサムネイル画像サイズを設定します。

追加ソース

//記事一覧サムネイル大のサムネイル画像を設定
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（ストーク）テーマを購入してご利用ください。

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

カスタマイズ前

カスタマイズ後

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

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

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

スポンサーリンク

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

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

書いている人

SHUMiST

趣味人

書いている人”SHUMiST（シュミスト/趣味人）”は自他共に認める「割と極度に面倒くさがり」です。 よく人に「極度に面倒くさがりだよね。」とか「変な所で几帳面だよね。」とか自分はＯ型なんですけど「本当にＯ型？」とか言われることが多い。なぜ、WEB関係に手を出したのかが自分でも疑問。

Follow Me

カテゴリー

アーカイブ