Celtis one テーマ設定 その1

このテーマを使用する上でいくつかの設定ポイントについて紹介したいと思います

今回は、ブログの印象を決めるヘッダーとメニューの設定です

ヘッダー

どこかで見たようなメニューだなと思われたかも知れませんが、公式テーマの Twenty Thirteen のカスタムヘッダーを使わせて頂いてます (^^)

変更点は、画像の大きさを 1024×150 に変更しているところです。

custom-header

ヘッダー画像上にテキストが表示出来ますが、これはWordPress管理画面の一般設定のサイトのタイトルキャッチフレーズが表示されます

スマートフォンで見た時に折り返さずに表示できるように短い文言を設定して下さい

site-name

この設定で、あなたが書いた記事が Google で検索された場合に下記のような感じに記事のタイトルの横にサイトタイトルが表示されるようになります

searchsample

また、キャッチフレーズはホームページが検索されて表示された場合に下記の用に表示されます

homesearchsample

この2つの設定は、意外に大事です (^^)

あとはお気に入りのヘッダー画像を用意して頂いて、サイズを 1024×150 にしてセットして頂ければよろしいかと思います

メニュー

メニューは、ヘッダー下のナビゲーションメニューフッターメニューの2箇所に設定できます

設定は管理画面のメニューから行います

最初はサンプルページ等の固定ページの一覧がメニュー位置に表示されると思いますが、これをメニューの階層に分けて表示できるように設定していきます

最初にメニューの名前、例えば ‘Mein Menu’ 等を設定して、保存をクリックすると編集するメニューを選択欄が ‘Main Menu’ となり設定できるようになります

new-menu

左側の固定ページ、リンク、カテゴリーから表示するメニューを選びメニューに追加ボタンをクリックすると右のメニュー構造エリアに追加されます

後は追加された項目をドラッグして並びを入れ替えたり、ドラッグ位置を下げて階層をつけたりしてメニューの構造を設定していきます

メニューはあまり深い階層にすると扱いにくくなるので2階層程度がよろしいかと重います

Menu-setting

作成したメニューの表示位置(メインメニューかフッターメニュー)をチェックして、メニューを保存すると階層化されたメニューが表示されます

ちなみにこのテーマのナビゲーションメニューは、あまちゃんぽいカラーを意識した青と桃色ベースにしています じぇじぇじぇ

デスクトップだとこんな感じ

desktop-menu

スマートフォンだと折りたたまれるので左のマークをクリックすると表示されます

mobile-menu

メニューバーには、検索入力欄があるので、あまりメニュートップに項目を増やしてしまうと干渉するかもしれませんので、トップの項目は3個程度がよろしいかと思います

※ここの表示例では Googleカスタム検索を使った表示になっていますが、WordPress の検索を使う場合には、検索入力欄が折りたたまれているのでもう少しトップのメニューエリアが広くなります(Googleカスタム検索に切替える方法は別途記事にします)

後は、サブメニューにしていただくか、フッターにも設置出来ますので、お問い合わせ、ポリシー、サイトマップ等はフッターに設置して頂ければと思います

footer-menu

カスタマイズ画面からメニュー色とリンク色を設定

管理画面のカスタマイズからプレビューで確認しながら簡単に設定することが出来ます

リンク色とメニュー色の設定

メニューとリンクの色を変えるだけでも全体のイメージがかなり変わります (^^)

customizer_linkcolor.pngcustomizer_menucolor.png

 

 

背景

また、このテーマでは背景設定もサポートしています

文字が読みやすいテーマとして作成していますので、ボディ部分の透過をしていませんので背景は余白部分に限られますが、色や画像を指定することが可能です

一応設定できますってだけです (^^)

background

 

今回は、主にヘッダーとメニューについて紹介しました

次回は、このテーマ専用のテーマ設定について紹介します

 


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss