11フォローTwitterFacebookFeedlyRSSサイトデザインを自作テーマに変更しました。507はてブ後で読むLINE購読するこんにちは、SHUMiSTです。Simplicity(シンプリシティー)テーマを使用して、STORK(ストーク)テーマを再現というかデザインを近づけるカスタマイズ第8回目です。前回は、ページトップやカテゴリーページの記事一覧をSTORK(ストーク)テーマのシンプルタイプ風にするカスタマイズを行いました。今回は、予告通りカスタマイズ予定のSTORK(ストーク)テーマ風の3種類の記事一覧のカスタマイズのうち2種類目「カードタイプ」の記事一覧にするカスタマイズを行います。シンプルタイプ(前回)カードタイプ(今回)マガジンタイプ(第9回)ビッグタイプ(カスタマイズ予定なし)各タイプのデザインは、下記のページを参照してください。ストーク:記事一覧ページレイアウトの変更ストークでは記事一覧ページのレイアウトを4種類の中からお選びいただけます。トップページとそれ以外の記事一覧ページのレイアウトをお選びいただけます。くじ設定方法4種類の記事一覧レイアウトマガジン型カード型シンプルビッ...open-cage.com追加ソースはなるべく、子テーマのスタイルシート(style.css)に追加しましょう。テンプレートファイルに変更を加える場合は親テーマの該当ファイルを子テーマのディレクトリにコピーし、子テーマで変更を加えましょう。既存のスタイルに要素を追加function.phpにカードタイプの記事一覧用のサムネイル画像サイズを設定entry-card.phpの大きなサムネイルカードのサムネイルサイズ設定を変更カスタマイズまとめ今回のカスタマイズ前後のスクリーンショット記事一覧をSTORK(ストーク)テーマのカードタイプ風にしよう!STORK(ストーク)テーマで選択できる記事一覧レイアウトのうち、カードタイプ風のデザインに整えていきます。Simplicity(シンプリシティー)テーマでは、外観->カスタマイズ->レイアウト(全体・リスト)->一覧リストのスタイルから10種類の記事一覧タイプを選択することができます。前回も書きましたが、この10種類の中からカスタマイズ予定の上記3種類のタイプを切り替えられるように、各タイプに近いデザインタイプを選んでからカスタマイズを行います。今回は、外観->カスタマイズ->レイアウト(全体・リスト)->一覧リストのスタイルのサムネイル大を選択します。今回行う記事一覧のカスタマイズは前回選択したエントリーカード(デフォルト)をベースにして行っていくので前回のカスタマイズは必ず行ってください。header.phpのメインカラムボックスにカードタイプ用のクラスを追加header.phpのメインカラムボックス(#main)にカードタイプ用のクラス(.s-large_thumb_style)を追加します。今回のカスタマイズのメインであるメインカラム左(記事一覧)にスタイルを設定します。前回でメインカラムボックスやサイドバーのレイアウト設定などは完了しているため、今回以降は比較的簡単にカスタマイズを行えます。追加ソース以下の追加ソースを子テーマのスタイルシート(style.css)にコピペ(コピー&ペースト)します。第3回で追加してあるメディアクエリ(1166px以上)の設定にレイアウトを設定します。第3回、第4回、前回で追加した既存のスタイルに今回、同様のスタイルを適用するため要素を追加します。#list関係のbefore、after要素を追加します。疑似要素でのclearfix(clear:both)は、本来は各所で何度も使用するため専用のクラスを用意した方が良いですが分かり易いように下記のように記載しています。both;}function.phpにカードタイプの記事一覧用のサムネイル画像サイズを設定STORK(ストーク)テーマでは、各タイプ毎にサムネイル画像サイズが違うため、第6回で書いた理由によりカードタイプ用のサムネイル画像サイズを設定します。true);entry-card.phpの大きなサムネイルカードのサムネイルサイズ設定を変更entry-card.phpの大きなサムネイルカードのサムネイルサイズ設定を”thumb320”から先ほど設定した”thumb356”に変更します。?>カスタマイズまとめ今回のカスタマイズにより、メインカラム左(記事一覧)がSTORK(ストーク)テーマのカードタイプ風に変わりました。前回と同じくSimplicity(シンプリシティー)テーマの記事一覧リストのスタイルからサムネイル大に上記のカードタイプを割り当てたので今後は外観->カスタマイズ->レイアウト(全体・リスト)->一覧リストのスタイルからサムネイル大を選択することで切り替えができるようになってます。画像縦横比保存(要再生成)を選択することで、STORK(ストーク)テーマのマガジンタイプ風の記事一覧ページになるようにデザインを整えていきます。Simplicity(シンプリシティー)テーマの元々の機能やソースを流用して、STORK(ストーク)テーマに近づけているため、STORK(ストーク)テーマのソースをそのまま丸ごと利用したりはしておりませんので中身はまったく別物です。STORK(ストーク)テーマの機能面などを利用したい方はSTORK(ストーク)テーマを購入してご利用ください。第7回:記事一覧をシンプルタイプに変更編を読む第9回:記事一覧をマガジンタイプに変更編を読むSimplicityをSTORK風にカスタマイズシリーズ目次へSimplicityWordPressPICKUPスポンサーリンクこの記事が気に入ったらいいね!しよう!最新記事をお届けします。書いている人”SHUMiST(シュミスト/趣味人)”は自他共に認める「割と極度に面倒くさがり」です。人に「極度に面倒くさがりだよね。」とか「変な所で几帳面だよね。」とか自分はO型なんですけど「本当にO型?」とか言われることが多い。WEB関係に手を出したのかが自分でも疑問。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目です。書いている人”SHUMiST(シュミスト/趣味人)”は自他共に認める「割と極度に面倒くさがり」です。人に「極度に面倒くさがりだよね。」とか「変な所で几帳面だよね。」とか自分はO型なんですけど「本当にO型?」とか言われることが多い。WEB関係に手を出したのかが自分でも疑問。