当ブログで行ったSimplicity2のデザインカスタマイズの備忘録。
コピペで可能なので大した知識なしでOK。
まずは子テーマをインストール
カスタマイズは子テーマで行いましょう。
でないとテーマがアップデートされたときに、カスタマイズが全て消えてしまいます。
simplicity2子テーマのインストール方法はこちら
CSS
デザインのカスタマイズではstyle.cssを編集していきます。
編集といってもコピペするだけで、wordpressのメニューから
外観→テーマの編集→スタイルシートを選択
し、コードをコピペしていくだけです。
↓参考になる記事
コードをコピペすると表示がおかしくなる場合がありますが、その場合はコピペした部分を消去して更新すれば元に戻ります。
元に戻せなくなったときに備えて、バックアップをとっておくと安心です。
カスタマイズ
準備が出来たらカスタマイズしていきましょう。
ヘッダーを画像に変更
まずはお好みでヘッダー画像を用意。
例
こんな感じ。
綺麗に表示させたいなら 1070 × 100 ピクセルが推奨とのことです。
（このヘッダーはサイズ適当）
次に、ヘッダー画面（外観→カスタマイズ→ヘッダー）の、ロゴ画像のところに用意した画像を新規追加します。
そして、ロゴを画像にするにチェックを入れましょう。
これでヘッダー部分に画像が表示されます。
しかし、このままではブログのキャッチフレーズが邪魔になってしまう場合があります。
（ウホウホが被った）
その場合はstyle.cssに、以下のコードをコピペしましょう。
|
1 2 3 4 |
/*キャッチフレーズ消去*/ #site-description { display: none; } |
私はこれで上手くいきました。
トップメニュー
次に、タイトル下のメニューデザインをカスタマイズしていきます。
完成はこんな感じ。
以下の通りに操作してみてください。
１．カスタマイズ画面のスキンで、オレンジメニューにチェック
２．カスタマイズ画面の色で、グローバルナビ色、グローバルナビリンク色、グローバルリンクホバー色の色を選択（お好みで）
３．カスタマイズ画面のヘッダーで、グローバルナビを横幅いっぱいにするにチェック
たったこれだけです。
まとめ
ヘッダーやメニューのデザイン方法はこれだけではありません。
他サイトの方法も組み合わせながら、ぜひ理想のカスタマイズを目指してみてください。