MENU

フォロー

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

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

2017.11.16｜6年前64

こんにちは、SHUMiSTです。

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

前回は、レスポンシブに強いjQueryカルーセルスライダー「slick.js」を使用して、ページトップにピックアップ記事スライダーを追加するカスタマイズを行いました。

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

また、今回から３回に渡って下記のSTORK（ストーク）テーマ風の４種類のうち３種類の記事一覧のカスタマイズを行います。

ビッグタイプについては、Simplicity（シンプリシティー）テーマの大きなエントリーカードレイアウトが似たようなレイアウトになっているので省きます。

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

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

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

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

open-cage.comopen-cage.com

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

スポンサーリンク

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

STORK（ストーク）テーマにはシンプルタイプ、カードタイプ、マガジンタイプ、ビッグタイプの４種類のタイプから記事一覧を選ぶことができますが、そのうちのシンプルタイプ風のデザインに整えていきます。

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

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

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

メインカラムボックスのレイアウトを設定

記事一覧のデザインを整える前に、メインカラムボックス#body、#body-inのレイアウトを変更します。

追加ソース

.home #body {
    margin-top: 1.5em;
}
#body-in {
    background: #ffffff;
    box-shadow: 0 0 1px #dddddd;
}

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

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

追加ソース

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

#main {
    background: none;
    border: 0;
    zoom: 1;
    position: static;
}
#list a.hover-card {
    font-size: 13px;
    position: relative;
    zoom: 1;
}
#list a:first-child .entry {
    border-top: 1px dotted rgba(0,0,0,.2);
}
#list a .entry {
    display: block;
    padding: 1.9em .7em;
    text-decoration: none;
    color: #666;
    border-bottom: 1px dotted #ccc;
    border-bottom: 1px dotted rgba(0,0,0,.2);
    position: relative;
    zoom: 1;
    margin-bottom: 0;
}
#main .hover-card .entry-thumb {
    text-align: center;
    overflow: hidden;
    position: relative;
    width: 42%;
    max-height: 180px;
    margin: 0;
}
#main .hover-card .entry-thumb img {
    margin: 0;
    height: auto;
    width: 100%;
}
.entry-thumb .category {
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    background: #fcee21;
    color: #444;
    font-size: 0.7em;
    font-weight: bold;
    padding: 0.1em 0.5em;
    min-width: 8em;
    opacity: .9;
    filter: alpha(opacity=90);
    -ms-filter: "alpha(opacity=90)";
    text-decoration: none;
}
#list .hover-card .entry-card-content {
    padding: 0 0 0 3%;
    overflow: hidden;
    margin: 0;
}
.entry-card-content header {
    margin: 0;
}
#list .hover-card .entry-card-content h2 {
    font-size: 1.6em;
    margin-top: 0;
    margin-bottom: 0.3em;
    color: #444;
}
#list .hover-card .entry-card-content p {
    margin-bottom: 0.3em;
}
.entry .post-meta {
    margin: 0;
    background-color: transparent;
    font-size: inherit;
    color: #666;
}
.entry-card-content p {
    margin: 0 0 1.6em;
    line-height: 1.75;
}
.post-meta .post-date {
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    opacity: .7;
    margin-right: .6em;
    display: inline-block;
    font-size: .85em;
    font-family: 'Concert One', cursive;
    font-weight: normal;
    padding: 0;
    text-decoration: none;
    color: #666;
}
.fa-clock-o:before {
    content: "\f274";
    font-size: .88em;
    margin-right: .3em;
    position: relative;
    top: -1px;
}
#list .hover-card .entry-card-content p {
    margin-bottom: 0.3em;
}

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

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

追加先のメディアクエリ

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

追加ソース

    #body-in {
        width: 1166px;
        padding: 35px;
        margin-bottom: 2em;
    }
    #main {
        width: 798px;
        margin: -35px;
        padding: 35px;
        float: left;
    }
    #list a.hover-card:before {
        content: "";
        display: block;
        width: 0%;
        height: 100%;
        background: #1BB4D3;
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 0;
        transition: .3s;
        opacity: .05;
        filter: alpha(opacity=5);
        -ms-filter: "alpha(opacity=5)";
    }

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

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

追加前のソース

#header-in:before, #header-in:after,
.menu:before, .menu:after,
#h-top:before, #h-top:after {
    content: "";
    display: table;
}
#header-in:after, .menu:after, #h-top:after {
    clear: both;
}

追加後のソース

#body-in、#main、#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 {
    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;
}

function.phpにテーマのメインコンテンツの表示領域の変更を設定

先ほどまでのスタイルを設定したことで、メインカラム全体の幅が”1166px”になりデフォルトのSimplicity（シンプリシティー）テーマより広がっています。

これにより、メインカラム左（記事一覧）も”728px”に広がっているため、Simplicity（シンプリシティー）テーマ側で定義されているコンテンツ幅を変更します。

変更しないと、設定->メディアのメディアサイズ大を”728px”に設定したとしても、投稿画面->メディア挿入画面->添付ファイルの表示設定のサイズ大が”680px”に設定されたままになるので必ず変更してください。

追加ソース

//コンテンツの幅の指定
if ( ! isset( $content_width ) ) $content_width = 728;

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

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

追加ソース

//記事一覧シンプルタイプのサムネイル画像を設定
add_image_size('thumb298', 298, 178, true);

entry-card-content.phpからカテゴリーリンクを削除

カテゴリーリンクを別のテンプレートに移動するため、以下のソースを削除します。

削除前ソース

17行～21行付近
      <?php endif; //is_create_date_visible?>

      <?php get_template_part('category-link');//カテゴリーリンク?>

      <?php //インデクスにタグを表示したい場合コメントアウト

削除ソース

19行付近
      <?php get_template_part('category-link');//カテゴリーリンク?>

削除後ソース

      <?php endif; //is_create_date_visible?>

      <?php //インデクスにタグを表示したい場合コメントアウト

entry-card.phpにカテゴリーリンクを追加

先ほどentry-card-content.phpから削除したカテゴリーリンクを追加します。

追加前のソース

18行～19行付近
    <?php endif; ?>
  </figure><!-- /.entry-thumb -->

追加ソース

19行付近
    <?php get_template_part('category-link');//カテゴリーリンク?>

追加後のソース

    <?php endif; ?>
    <?php get_template_part('category-link');//カテゴリーリンク?>
  </figure><!-- /.entry-thumb -->

entry-card.phpのデフォルトエントリーカードのサムネイルサイズ設定を変更

entry-card.phpのデフォルトエントリーカードのサムネイルサイズ設定を”thumb150”から先ほど設定した”thumb298”に変更します。

変更前のソース

3行～7行付近
  <figure class="entry-thumb">
    <?php if ( is_entry_card_style() ): //デフォルトのエントリーカード表示の場合?>
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>
        <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'thumb150', array('class' => 'entry-thumnail', 'alt' => '') ); ?></a>
      <?php else: // サムネイルを持っていない ?>

変更後のソース

  <figure class="entry-thumb">
    <?php if ( is_entry_card_style() ): //デフォルトのエントリーカード表示の場合?>
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>
        <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'thumb298', array('class' => 'entry-thumnail', 'alt' => '') ); ?></a>

category-link.phpに記事一覧ページ用のカテゴリーリンクを追加

トップページやカテゴリーページなどの記事一覧が表示されるページ用のカテゴリーリンクを追加し、各ページによりカテゴリーリンク表示を変更するように条件分岐を追加します。

追加前のソース

1行～5行付近
<?php //インデックスページや投稿ページで表示されるカテゴリーリンク
if ( is_category_visible() && //カテゴリを表示する場合
           get_the_category() ): //投稿ページの場合?>
<span class="category"><span class="fa fa-folder fa-fw"></span><?php the_category('<span class="category-separator">, </span>') ?></span>
<?php endif; //is_category_visible?>

追加ソース①

条件分岐と記事一覧ページ用のカテゴリーリンク表示を追加します。

4行～8行付近
<?php //インデックスページや投稿ページで表示されるカテゴリーリンク
if ( is_category_visible() && //カテゴリを表示する場合
           get_the_category() ): //投稿ページの場合?>
    <?php if ( !is_single() && !is_page() ): ?>
        <?php $cat = get_the_category(); ?>
        <?php $cat = $cat[0]; ?>
        <span class="category"><?php echo get_cat_name($cat->term_id); ?></span>
    <?php else: ?>

追加ソース②

上記、条件分岐を閉じます。

10行付近
    <?php endif; ?>

追加後のソース

1行～11行付近
<?php //インデックスページや投稿ページで表示されるカテゴリーリンク
if ( is_category_visible() && //カテゴリを表示する場合
           get_the_category() ): //投稿ページの場合?>
    <?php if ( !is_single() && !is_page() ): ?>
        <?php $cat = get_the_category(); ?>
        <?php $cat = $cat[0]; ?>
        <span class="category"><?php echo get_cat_name($cat->term_id); ?></span>
    <?php else: ?>
        <span class="category"><span class="fa fa-folder fa-fw"></span><?php the_category('<span class="category-separator">, </span>') ?></span>
    <?php endif; ?>
<?php endif; //is_category_visible?>

記事を読むを非表示に設定

STORK（ストーク）テーマでは、記事一覧での記事を読むの表示がないので非表示に設定します。Simplicity（シンプリシティー）テーマでは下記のカスタマイズ項目で簡単に非表示にすることができます。

設定方法

外観->カスタマイズ->テーマ内テキスト->「記事を読む」の変更でデフォルトでは記事を読むが入力されていますが、全て削除してテキストエリア内を空にすることで非表示に設定できます。

日付表示のフォーマットを変更

日付表示のフォーマットもSTORK（ストーク）テーマと同様になるように変更します。有り難いことに今回の変更もSimplicity（シンプリシティー）テーマでは下記のカスタマイズ項目で簡単に変更することができます。

変更方法

外観->カスタマイズ->テーマ内テキスト->日付表示のフォーマットをY.n.jに変更します。

メインカラム右（サイドバー）の幅を336pxに変更

Simplicity（シンプリシティー）テーマでは、デフォルトのサイドバーの幅が”300px”になっており、変更したメインカラムの幅に対して余白が空いてしまい不格好になってます。
簡単に変更できるため、今回のカスタマイズついでに”336px”に変更しておきます。

変更方法

変更方法は２種類あるのでお好みの方で変更してください。

  1. 外観->カスタマイズ->レイアウト（全体・リスト）->サイドバーの幅を336pxに（デフォルト300px）にチェックをする。
  2. 下記の追加ソースをスタイルシート（style.css）に追加する。

追加先のメディアクエリ

メディアクエリ（1166px）に追加するので、間違わないように気を付けてください。
@media only screen and (min-width: 1166px) {
//この括弧内に追加する
}

追加ソース

    #sidebar {
        width: 336px;
    }

カスタマイズまとめ

今回のカスタマイズにより、メインカラム左（記事一覧）がSTORK（ストーク）テーマのシンプルタイプ風に変わり、サイドバーの幅が336pxになりました。

また、Simplicity（シンプリシティー）テーマの記事一覧リストのスタイルからエントリーカード（デフォルト）に上記のシンプルタイプを割り当てたので今後は外観->カスタマイズ->レイアウト（全体・リスト）->一覧リストのスタイルからエントリーカード（デフォルト）を選択することで切り替えができるようになってます。

次回は、Simplicity（シンプリシティー）テーマの記事一覧リストのスタイルからサムネイル大を選択することで、STORK（ストーク）テーマのカードタイプ風の記事一覧ページになるようにデザインを整えていきます。

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

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

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

カスタマイズ前

カスタマイズ後

第６回：ページトップにピックアップ記事スライダーを追加編を読む

第８回：記事一覧をカードタイプに変更編

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

スポンサーリンク

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

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

書いている人

SHUMiST

趣味人

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

Follow Me

カテゴリー

アーカイブ