11フォローTwitterFacebookFeedlyRSSサイトデザインを自作テーマに変更しました。677はてブ後で読むLINE購読するこんにちは、SHUMiSTです。Simplicity(シンプリシティー)テーマを使用して、STORK(ストーク)テーマを再現というかデザインを近づけるカスタマイズ第7回目です。前回は、レスポンシブに強いjQueryカルーセルスライダー「slick.js」を使用して、ページトップにピックアップ記事スライダーを追加するカスタマイズを行いました。今回は、Simplicity(シンプリシティー)テーマのページトップやカテゴリーページの記事一覧をSTORK(ストーク)テーマのシンプルタイプ風にするカスタマイズを行います。今回から3回に渡って下記のSTORK(ストーク)テーマ風の4種類のうち3種類の記事一覧のカスタマイズを行います。ビッグタイプについては、Simplicity(シンプリシティー)テーマの大きなエントリーカードレイアウトが似たようなレイアウトになっているので省きます。シンプルタイプ(今回)カードタイプ(第8回)マガジンタイプ(第9回)ビッグタイプ(カスタマイズ予定なし)各タイプのデザインは、下記のページを参照してください。ストーク:記事一覧ページレイアウトの変更ストークでは記事一覧ページのレイアウトを4種類の中からお選びいただけます。トップページとそれ以外の記事一覧ページのレイアウトをお選びいただけます。くじ設定方法4種類の記事一覧レイアウトマガジン型カード型シンプルビッ...open-cage.com追加ソースはなるべく、子テーマのスタイルシート(style.css)に追加しましょう。テンプレートファイルに変更を加える場合は親テーマの該当ファイルを子テーマのディレクトリにコピーし、子テーマで変更を加えましょう。日付表示のフォーマットを変更メインカラム右(サイドバー)の幅を336pxに変更カスタマイズまとめ今回のカスタマイズ前後のスクリーンショット記事一覧をSTORK(ストーク)テーマのシンプルタイプ風にしよう!STORK(ストーク)テーマにはシンプルタイプ、カードタイプ、マガジンタイプ、ビッグタイプの4種類のタイプから記事一覧を選ぶことができますが、そのうちのシンプルタイプ風のデザインに整えていきます。Simplicity(シンプリシティー)テーマでは、外観->カスタマイズ->レイアウト(全体・リスト)->一覧リストのスタイルから10種類の記事一覧タイプを選択することができます。この10種類の中からカスタマイズ予定の上記3種類のタイプを切り替えられるように、各タイプに近いデザインタイプを選んでからカスタマイズを行います。今回は、外観->カスタマイズ->レイアウト(全体・リスト)->一覧リストのスタイルのエントリーカード(デフォルト)を選択します。今回から3回に渡って行う記事一覧のカスタマイズは今回選択するエントリーカード(デフォルト)をベースにして行っていくので必ず行ってください。記事一覧のデザインを整える前に、メインカラムボックス#body、#body-inのレイアウトを変更します。今回のカスタマイズのメインであるメインカラム左(記事一覧)にスタイルを設定します。追加ソース以下の追加ソースを子テーマのスタイルシート(style.css)にコピペ(コピー&ペースト)します。第3回で追加してあるメディアクエリ(1166px以上)の設定にレイアウトを設定します。第3回、第4回で追加した既存のスタイルに今回、同様のスタイルを適用するため要素を追加します。both;}追加後のソース#body-in、#main、#list関係のbefore、after要素を追加します。疑似要素でのclearfix(clear:both)は、本来は各所で何度も使用するため専用のクラスを用意した方が良いですが分かり易いように下記のように記載しています。先ほどまでのスタイルを設定したことで、メインカラム全体の幅が”1166px”になりデフォルトのSimplicity(シンプリシティー)テーマより広がっています。これにより、メインカラム左(記事一覧)も”728px”に広がっているため、Simplicity(シンプリシティー)テーマ側で定義されているコンテンツ幅を変更します。変更しないと、設定->メディアのメディアサイズ大を”728px”に設定したとしても、投稿画面->メディア挿入画面->添付ファイルの表示設定のサイズ大が”680px”に設定されたままになるので必ず変更してください。728;function.phpにシンプルタイプの記事一覧用のサムネイル画像サイズを設定STORK(ストーク)テーマでは、各タイプ毎にサムネイル画像サイズが違うため、第6回で書いた理由によりシンプルタイプ用のサムネイル画像サイズを設定します。true);entry-card-content.phpからカテゴリーリンクを削除カテゴリーリンクを別のテンプレートに移動するため、以下のソースを削除します。先ほどentry-card-content.phpから削除したカテゴリーリンクを追加します。-->entry-card.phpのデフォルトエントリーカードのサムネイルサイズ設定を変更entry-card.phpのデフォルトエントリーカードのサムネイルサイズ設定を”thumb150”から先ほど設定した”thumb298”に変更します。?></a>category-link.phpに記事一覧ページ用のカテゴリーリンクを追加トップページやカテゴリーページなどの記事一覧が表示されるページ用のカテゴリーリンクを追加し、各ページによりカテゴリーリンク表示を変更するように条件分岐を追加します。//is_category_visible?>追加ソース1条件分岐と記事一覧ページ用のカテゴリーリンク表示を追加します。?>追加ソース2上記、条件分岐を閉じます。//is_category_visible?>記事を読むを非表示に設定STORK(ストーク)テーマでは、記事一覧での記事を読むの表示がないので非表示に設定します。Simplicity(シンプリシティー)テーマでは下記のカスタマイズ項目で簡単に非表示にすることができます。外観->カスタマイズ->テーマ内テキスト->「記事を読む」の変更でデフォルトでは記事を読むが入力されていますが、全て削除してテキストエリア内を空にすることで非表示に設定できます。日付表示のフォーマットもSTORK(ストーク)テーマと同様になるように変更します。有り難いことに今回の変更もSimplicity(シンプリシティー)テーマでは下記のカスタマイズ項目で簡単に変更することができます。外観->カスタマイズ->テーマ内テキスト->日付表示のフォーマットをY.n.jに変更します。メインカラム右(サイドバー)の幅を336pxに変更Simplicity(シンプリシティー)テーマでは、デフォルトのサイドバーの幅が”300px”になっており、変更したメインカラムの幅に対して余白が空いてしまい不格好になってます。2種類あるのでお好みの方で変更してください。外観->カスタマイズ->レイアウト(全体・リスト)->サイドバーの幅を336pxに(デフォルト300px)にチェックをする。下記の追加ソースをスタイルシート(style.css)に追加する。追加先のメディアクエリメディアクエリ(1166px)に追加するので、間違わないように気を付けてください。}カスタマイズまとめ今回のカスタマイズにより、メインカラム左(記事一覧)がSTORK(ストーク)テーマのシンプルタイプ風に変わり、サイドバーの幅が336pxになりました。Simplicity(シンプリシティー)テーマの記事一覧リストのスタイルからエントリーカード(デフォルト)に上記のシンプルタイプを割り当てたので今後は外観->カスタマイズ->レイアウト(全体・リスト)->一覧リストのスタイルからエントリーカード(デフォルト)を選択することで切り替えができるようになってます。次回は、Simplicity(シンプリシティー)テーマの記事一覧リストのスタイルからサムネイル大を選択することで、STORK(ストーク)テーマのカードタイプ風の記事一覧ページになるようにデザインを整えていきます。Simplicity(シンプリシティー)テーマの元々の機能やソースを流用して、STORK(ストーク)テーマに近づけているため、STORK(ストーク)テーマのソースをそのまま丸ごと利用したりはしておりませんので中身はまったく別物です。STORK(ストーク)テーマの機能面などを利用したい方はSTORK(ストーク)テーマを購入してご利用ください。第6回:ページトップにピックアップ記事スライダーを追加編を読む第8回:記事一覧をカードタイプに変更編SimplicityをSTORK風にカスタマイズシリーズ目次へSimplicityWordPressPICKUPスポンサーリンクこの記事が気に入ったらいいね!しよう!最新記事をお届けします。書いている人”SHUMiST(シュミスト/趣味人)”は自他共に認める「割と極度に面倒くさがり」です。人に「極度に面倒くさがりだよね。」とか「変な所で几帳面だよね。」とか自分はO型なんですけど「本当にO型?」とか言われることが多い。WEB関係に手を出したのかが自分でも疑問。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目です。書いている人”SHUMiST(シュミスト/趣味人)”は自他共に認める「割と極度に面倒くさがり」です。人に「極度に面倒くさがりだよね。」とか「変な所で几帳面だよね。」とか自分はO型なんですけど「本当にO型?」とか言われることが多い。WEB関係に手を出したのかが自分でも疑問。