カスタマイズ今回はグローバルメニューを少々変更しました。グローバルメニューの色の変更もこちらで可能です。追加CSS変更内容は以下の通りで追加CSSにコードを追加します。僕のサイトの出来上がりでは他サイトでは使いモノにならないと思うので個別で微調整してください。追加CSSの内容を上から説明をしていくので参考にしてください。※カスタマイズは自己責任でお願いします。グローバルメニューのクラス名クラス名は.globalNaviになります。このクラス名を使い装飾を変更や追加していきます。サイズと位置を設定/*グローバルメニュー*/の部分width:100%;グローバルメニュー全体のサイズを設定。48px;グローバルメニューの上部分に余白を取っています。デフォルトよりかなり大きめ。当サイトではメインビジュアルなどの設定をしていないので余白大きめです。各サイトで数値を微調整してください。文字色や背景色などの設定を行います。背景などが必要ない部分はゴッソリカットしてください。#eeeeee;文字の背景色を設定することでボタンのようになります。#444444;こちらは文字色です。4px;背景を角丸形状にします。必要なければカットしてください。110px;文字背景のサイズです。当サイトではボタンサイズを統一したかったのでpxで指定していますがpaddingを使ったほうが良い場合が多いと思います。center;文字をセンター配置にしています。110px;の代わりに下記CSSを挿入してください。数値で左右の余白サイズが変更できます。10px;色を決めるのに参考資料として本があると色をweb検索しながらの作業より効率が良くオススメです。一冊は手元に置いておきましょう。2014/08/26Amazon楽天ブックスYahooAmazonの情報を掲載しています↑持ってます。2012/10/05Amazon↑電子版がめちゃ安い(役立つかは不明)マウスオーバーの変化メニュー上にポインターがきたときの挙動です。スマホでは選択した結果として表示されます。#cccccc;ここで指定した色に変化します。実行すると影がつくと思いますが、影付けはデフォルトでの設定です。文字色なども同時に変更すると良いかもしれません。スマホ用の設定ですグローバルメニューの上の余白がPCと同じでは大きすぎるので小さくしています。デフォルトよりは大きいかと思います。24px;各サイトにあわせて数値を変えてください。グローバルメニューをカスタムできるので色々試してみてください。あとがきグローバルメニューは各ページで表示されることが多いパーツです。その割におざなりになっている事が多い不思議なパーツです。上手く使うことが出来れば直帰率の改善によるPV数アップが期待できるので、この状態を基本としてさらに改良をしていきたいと思っています。※現在、当サイトでは標準で設定できるグローバルメニューを非表示にしています。コメントをキャンセルメールアドレスが公開されることはありません。karaagebow.com。