【超簡単】Simplicity2カスタマイズ①(ヘッダー、メニュー編)

当ブログで行ったSimplicity2のデザインカスタマイズの備忘録。

コピペで可能なので大した知識なしでOK。


ごりら
今回はヘッダーとトップメニューのカスタマイズを紹介していきます

まずは子テーマをインストール

カスタマイズは子テーマで行いましょう。

でないとテーマがアップデートされたときに、カスタマイズが全て消えてしまいます。

simplicity2子テーマのインストール方法はこちら

Simplicityの子テーマをインストールする方法
Simplicityは、そのままでも利用できますが、カスタマイズを念頭に置いて作成したWordpressテーマです。 子テーマを作成してスタイルシートから外観を変更しやすいように作りました。 「そもそもなんで子テーマを使う必要があるんだ?

CSS

デザインのカスタマイズではstyle.cssを編集していきます。

編集といってもコピペするだけで、wordpressのメニューから

外観→テーマの編集→スタイルシートを選択

し、コードをコピペしていくだけです。

↓参考になる記事

自分でカスタマイズしよう!WordPressでCSSを編集する方法【初心者向け】
WordPressの各テーマで使用されているcssファイルを編集する方法を、管理画面から行う方法とFTPクライアントを使用してファイルを更新する方法の二つを紹介します。自分でカスタマイズできるようになりましょう。

コードをコピペすると表示がおかしくなる場合がありますが、その場合はコピペした部分を消去して更新すれば元に戻ります。

元に戻せなくなったときに備えて、バックアップをとっておくと安心です。

BackWPUpで確実にWordPressのバックアップを取る方法

カスタマイズ

準備が出来たらカスタマイズしていきましょう。

ヘッダーを画像に変更

まずはお好みでヘッダー画像を用意。

こんな感じ。

綺麗に表示させたいなら 1070 × 100 ピクセルが推奨とのことです。
(このヘッダーはサイズ適当)

次に、ヘッダー画面(外観→カスタマイズ→ヘッダー)の、ロゴ画像のところに用意した画像を新規追加します。

そして、ロゴを画像にするにチェックを入れましょう。

これでヘッダー部分に画像が表示されます。

しかし、このままではブログのキャッチフレーズが邪魔になってしまう場合があります。

(ウホウホが被った)

その場合はstyle.cssに、以下のコードをコピペしましょう。

私はこれで上手くいきました。

トップメニュー

次に、タイトル下のメニューデザインをカスタマイズしていきます。

完成はこんな感じ。

以下の通りに操作してみてください。

1.カスタマイズ画面のスキンで、オレンジメニューにチェック

2.カスタマイズ画面ので、グローバルナビ色、グローバルナビリンク色、グローバルリンクホバー色の色を選択(お好みで)

3.カスタマイズ画面のヘッダーで、グローバルナビを横幅いっぱいにするにチェック

たったこれだけです。

まとめ

ヘッダーやメニューのデザイン方法はこれだけではありません。

他サイトの方法も組み合わせながら、ぜひ理想のカスタマイズを目指してみてください。

ごりら
デザインでサイトの印象が大きく変わるよ
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加
スポンサーリンク