11フォローTwitterFacebookFeedlyRSSサイトデザインを自作テーマに変更しました。804はてブ後で読むLINE購読するこんにちは、SHUMiSTです。Simplicity(シンプリシティー)テーマを使用して、STORK(ストーク)テーマを再現というかデザインを近づけるカスタマイズをしてみようと考え、どうせならなるべく【コピペでOK!】な状態でカスタマイズの記録を残そうと思い、現在第1回目の記事を書いております。当ブログを使用してカスタマイズしていくため、進捗状況も合わせて見ることができるのでそちらも楽しんでいただけたらと思います。(2017/10/30時点)Simplicity(シンプリシティー)テーマを選択した理由シンプルでカスタマイズしやすい。機能面が充実しており、流用できるものもある。普段から使用している。単純にデザインが好みサイト全体を見た時の記事の見易さWordPressテーマのカスタマイズをするのも割と好き購入すれば早い話ですが、上記の理由により思い立った次第です。長ったらしい前置きはここまでにして同じような考えの方に、少しでもカスタマイズの参考かつ時間短縮になればいいなぁと思います。行数を掲載していますが、Simplicity(シンプリシティー)テーマのバージョンや各々のカスタマイズ内容により確実にその行数にあるとは限りません。大体、その行数付近にある基準として参考までにと思ってください。対応しているSimplicity(シンプリシティー)テーマのバージョン:2.6.1.1~2.6.2テンプレートファイルに変更を加える場合は親テーマの該当ファイルを子テーマのディレクトリにコピーし、子テーマで変更を加えましょう。第1回:ヘッダーレイアウトをカスタマイズしよう!header-logo.phpのサイト概要を削除header.phpのグローバルナビゲーションの挿入位置を変更header.phpのモバイルメニューの挿入位置を変更header.phpの外側のカスタムヘッダーの挿入位置を変更header.phpの内側のカスタムヘッダーの挿入位置を変更header.phpのページトップフォローボタンの挿入位置を変更カスタマイズまとめ今回のカスタマイズ前後のスクリーンショット第1回:ヘッダーレイアウトをカスタマイズしよう!記念すべき第一回は、Simplicity(シンプリシティー)テーマとSTORK(ストーク)テーマのヘッダーソースを比較してレイアウトが違う箇所をカスタマイズしていきます。header-logo.phpのサイト概要を削除STORK(ストーク)テーマにはサイト概要の表示がないのでSimplicity(シンプリシティー)テーマの下記のサイト概要に関するソースを削除します。?>header.phpのグローバルナビゲーションの挿入位置を変更Simplicity(シンプリシティー)テーマの下記のグローバルナビゲーションの挿入位置は、headerタグ外になっているため、STORK(ストーク)テーマ同様、<header></header>タグ内に変更します。?>変更後のソースSTORK(ストーク)テーマと同じになるように下記のようにヘッダーロゴボックス(top-title-catchphrase)の下に変更します。?>header.phpのモバイルメニューの挿入位置を変更Simplicity(シンプリシティー)テーマでは、ヘッダーの最初に挿入されますが、STORK(ストーク)テーマではパソコン用グローバルナビゲーション直下に挿入されるため、今後のスタイルのし易さを考え、同様の箇所に変更します。//モバイルメニューボタンの呼び出し?>変更後のソースSTORK(ストーク)テーマと同じになるように下記のようにパソコン用グローバルナビゲーションの下に変更します。//モバイルメニューボタンの呼び出し?>header.phpの外側のカスタムヘッダーの挿入位置を変更Simplicity(シンプリシティー)テーマでは外側のカスタムヘッダーボックス(header)がグローバルナビゲーションの上にあるため、STORK(ストーク)テーマ同様、グローバルナビゲーションの下にくるように<header></header>タグ外に挿入位置を変更します。今回は下記の2箇所を変更するため間違わないように注意してください。-->変更後のソース上記の該当ソースを繋げた形で<header></header>タグ外に挿入します。このボックスは画面幅いっぱいに広がるヘッダー画像を設定する際に使用します。外観->カスタマイズ->ヘッダー->ヘッダー外側背景画像で設定することができます。次に、内側のカスタムヘッダーボックス(h-top)の挿入位置を外側のカスタムヘッダーボックス(header)内に変更します。今回も下記の2箇所を変更するため間違わないように注意してください。-->変更後のソース上記の該当ソースを繋げた形で外側のカスタムヘッダーボックス(header)内に挿入します。このボックスは中央寄せのヘッダー画像を設定する際に使用します。外観->カスタマイズ->ヘッダー->現在のヘッダーで設定することができます。-->header.phpのページトップフォローボタンの挿入位置を変更Simplicity(シンプリシティー)テーマにはページトップフォローボタンがあります。STORK(ストーク)テーマにはありませんが、カスタムヘッダー内でのテキストやボタン表示があるので、せっかくなので追加で挿入するようにして有効活用できるようにしようと思います。不要な場合は、追加しなくても良いですが下記のように表示/非表示を切り替えられるので追加しても問題ありません。ページトップフォローボタンは外観->カスタマイズ->SNS->ページトップフォローボタンの表示で表示/非表示を切り替えられます。先ほど変更した下記の内側のカスタムヘッダーボックス(h-top)内に該当ソースを挿入します。-->カスタマイズまとめ今回のカスタマイズ記事で、ヘッダーレイアウトはSTORK(ストーク)テーマに近しいレイアウトになっているので、次回はSimplicity(シンプリシティー)テーマの流用だけでは再現できない箇所のソースの追加カスタマイズを行っていきます。CSS(スタイルシート)の変更は追々していくので、現状ではレイアウトが乱れていると思いますが問題ありません。自身のカスタマイズを記事として紹介・執筆するのは今回が初めてなので、分かりづらい箇所も多々あると思いますがご容赦ください。Simplicity(シンプリシティー)テーマの元々の機能やソースを流用して、STORK(ストーク)テーマに近づけているため、STORK(ストーク)テーマのソースをそのまま丸ごと利用したりはしておりませんので中身はまったく別物です。STORK(ストーク)テーマの機能面などを利用したい方はSTORK(ストーク)テーマを購入してご利用ください。第2回:ヘッダーソース追加編を読むSimplicityをSTORK風にカスタマイズシリーズ目次へSimplicityWordPressPICKUPスポンサーリンクこの記事が気に入ったらいいね!しよう!最新記事をお届けします。書いている人”SHUMiST(シュミスト/趣味人)”は自他共に認める「割と極度に面倒くさがり」です。人に「極度に面倒くさがりだよね。」とか「変な所で几帳面だよね。」とか自分はO型なんですけど「本当にO型?」とか言われることが多い。WEB関係に手を出したのかが自分でも疑問。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目です。書いている人”SHUMiST(シュミスト/趣味人)”は自他共に認める「割と極度に面倒くさがり」です。人に「極度に面倒くさがりだよね。」とか「変な所で几帳面だよね。」とか自分はO型なんですけど「本当にO型?」とか言われることが多い。WEB関係に手を出したのかが自分でも疑問。