, ↑のコードをコピーしてメモ帳等に貼り付けてから、↓のようにURL部分を皆さんのブログのURLに修正してください。, の前のXXXの部分には表示させたい単語(TOP、BOOKなど)を入力してください。, 貼り付ける場所はココ↓(はてなブログの場合)。すでに何かのコードが書かれているときは、一番下に貼り付けます。, (「ダッシュボード」→「デザイン」→「カスタマイズタブ」(左上のスパナのアイコン)→「ヘッダ」の順でクリックしていくと、↑の画面に辿り着きます。), この段階ではページの左上にTOPのように表示されるだけです。↓のCSSの追加で立派なメニューバーに作りかえます。, /* グローバルナビゲーション */.nav {width: 170%; /* 幅を指定 */padding: 0 0; /* 余白を指定 */margin-left: -286px;margin-top: -50px;}.nav ul{padding: 0;overflow:hidden; /* 高さを出すために指定 */list-style-type: none; /* リストスタイルを指定 */background:#688226; /* 背景色を指定 */margin-bottom:100px; /* 枠の下周囲の余白を指定 */text-align: center; /* 文字を真ん中に表示 */height: 50px;  /* 高さを指定 */}.nav li{float: left; /* 左に詰めて表示をする */text-align: center;width:20%; /* 幅を指定 */margin: 0;}.nav li a{display: block; /* ブロック表示にする */margin: 0;line-height:50px; /* 高さを指定 */color: #fff; /* 文字色の指定 */font-size: 17px; /* 文字の大きさを指定 */text-decoration: none; /* アンダーラインを消す */}.nav a:hover{color: #fff799; /* マウスオーバー時の文字色を指定 */background:#f7546d; /* マウスオーバー時の背景色を指定 */}, (HTMLのときと同様にデザイン‐カスタマイズ画面に行き、「デザインCSS」をクリックします。), これで終了です。上手くできましたでしょうか(右側のプレビュー画面で確認できます)。, デザイン画面の右側のプレビューが変になってしまった場合は、「管理画面に戻る」↓でダッシュボードに戻ると変更は保存されません。, 今回の記事でグローバルメニューバーの横幅の調整が一番苦労しました。↓のサイトにも書いてあるように何かを横幅いっぱいに表示するのってなかなか難しいんですよね。bodyの設定を変えたくないし……。う~ん、うっふ~ん。取り消しはしない。, /* グローバルナビゲーション */.nav {width: 170%; /* 幅を指定 */padding: 0 0; /* 余白を指定 */margin-left: -286px;margin-top: -50px;}, 青の部分が参考にしたCSSを修正した箇所です。「margin-top」でグローバルメニューとタイトルロゴの間隔を調整し、「margin-left」と「width」の数値をいじることで左右の隙間を埋めました(時間かかった)。, 続いて、グローバルメニューの背景色や高さを調整します。背景色を何にするかは非常に大切ですので、↓のカラーコードサイトなども参考にしながら慎重に決定してください。, .nav ul{padding: 0;overflow:hidden; /* 高さを出すために指定 */list-style-type: none; /* リストスタイルを指定 */background:#688226; /* 背景色を指定 */margin-bottom:100px; /* 枠の下周囲の余白を指定 */text-align: center; /* 文字を真ん中に表示 */height: 50px;  /* 高さを指定 */}, を変更することができます。今使っている緑茶(#688226)のほかにオレンジ(#f3c75b)、茶色(#b39241)などいろいろ検討して思案しました。かなり迷いましたね。, なお、メニューバーの高さを変えるには二つ↓の項で説明している「文字の高さ」も同じ数値に変える必要があります。, .nav li{float: left; /* 左に詰めて表示をする */text-align: center;width:20%; /* 幅を指定 */margin: 0;}, ここで言うことは特にないです(float: left; で文章を画像に回り込ませることができるんですね。leftをrightに変更したら文字を右に寄せられるそう。勉強になりました)。, .nav li a{display: block; /* ブロック表示にする */margin: 0;line-height:50px; /* 高さを指定 */color: #fff; /* 文字色の指定 */font-size: 17px; /* 文字の大きさを指定 */text-decoration: none; /* アンダーラインを消す */}, ↑のcolorとfont-sizeの数値やアルファベットを変更することで文字の色や大きさを変えられます。メニューバーの背景を緑茶っぽい暗く濃い色に設定しましたので、文字色は白(#fff)の方が際立ちました。逆に「背景色の指定」で背景を薄い色にして、文字を黒や青にする選択肢もあります。, line-heightは↑で説明した「メニューバーの高さの調整」のheightと同じ数値にしてください。, .nav a:hover{color: #fff799; /* マウスオーバー時の文字色を指定 */background:#f7546d; /* マウスオーバー時の背景色を指定 */}, これがラストのコード部分。マウスを重ねたとき(マウスオーバー時)の色の変化を示しています。文字色はグレーや黒(+緑)も試したのですが、薄い黄色(#fff799)が一番赤(#f7546d)に合いましたので、それに設定しました。, 以上で説明は終わりです。グローバルメニューを作成しておくことで、「お、このブログ面白い。他にどんな記事があるんだろう」とビジターが思った時にクリックしてもらいやすくなりますね。PV数は向上する……ハズ。, と勇気を持ちながらブログをやっていきたく候(「そうろう」で早漏改善とでるのやめてねGoogleさん)。, ↓参考にした書籍。「見出しのカスタマイズ」「SNSボタンのカスタマイズ」などCSSを使用した見やすいブログの作り方がわかりやすく説明されています。, ayaeyegoさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか?, Powered by Hatena Blog この記事は2016年3月17日に更新されたもので、内容が古い可能性がありますのでご注意ください。, グローバルメニュー上でマウスオーバーしたときに開く子メニューの幅が狭く、テキストが2行で表示されてしまいます。少し幅を広げて1行で表示したいです。, この記事は役に立ちましたか? ※最初にpaddingの左右の幅を狭めて、グローバルメニューの表示をご確認ください。それでも2列となっている場合はfont-sizeを調整ください。 関連記事.
Sugar アプリ 芸能人一覧 17, ギャラクシーs10 イヤホン 応募 16, Essence 横浜 偽物 7, Ffbe 幻影 戦争 最強 ビジョン 5, Photoshop Jpeg 保存できない 6, Zx14r クラッチ 切れ ない 12, Python Csv 行 指定 4, モンハン ワールド:アイスボーン ギャラリー 7, Google Home Bluetooth接続 4, あつ森 データ 復元 12, 山本山 社長 息子 53, 猫 口 臭い 4, Cubase 音 おかしい 7, 猫 口 臭い 4, 睡蓮花 ジャケ写 誰 9, Cf J9 改造 5, ドラクエ10 めぐ らむね 37, 中学1年 数学 計算問題 4, S660 クルーズコントロール 後付け 21, 涼宮ハルヒ ニコ生 現在 7, 仕事 優秀 早い 12, "/>
November 15, 2020
by


WordPress管理画面からヘッダー、背景、ナビゲーションメニューを編集する方法とそのカスタマイズについての記述です。WordPress3.0から対応している機能を使います。, トップのナビゲーションメニューを編集する際、今までは直接コードを編集したり プラグインを入れたりしていましたが、これからはプラグイン無しで管理画面から直接編集が可能です。, 管理画面の「外観」→「メニュー」から ナビゲーションに表示させたいメニューを追加します。画面も直感的に操作できるので簡単です。, function.phpに以下のコードを記述します(WordPress3.0以上)。, 次にナビゲーションメニュー部分(header.phpなど)に以下のコードを挿入すればOKです。, HTML/CSSに慣れている方なら テーマを直接編集する方が自由が利いて便利だったりするのですが、誰でもヘッダーの変更を気軽に変更できる機能が「カスタムヘッダー」です。これもWordPress3.0以上の環境が必要です。, 管理画面の「外観」→「ヘッダー」から 変更します。こちらも直感的な操作が可能です。function.phpであらかじめ設定したサイズにトリミングされます。, カスタムヘッダー未対応のテーマは functions.phpに以下のコードを記述します(WordPress3.0以上)。1000とか110とか書いてあるところは横幅/縦幅です。, 背景に 画像やカラーを設定したり 繰り返し/スクロールの有無 の設定も出来ます。これもWordPress3.0以上。WordPress3.4以上。, カスタム背景未対応のテーマは functions.phpに以下のコードを記述します(WordPress3.0以上WordPress3.4以上)。以上で完了です。, これで管理画面から編集できる項目がさらに増え、より初心者層にも使いやすいWordPressになりそうです。, 投稿タグ、カテゴリの説明でリッチテキストが使えるプラグイン「Rich Text …. ブログを報告する, http://iimonntsutaetai.hatenablog.com/archive/category/%E6%98%A0%E7%94%BB, http://iimonntsutaetai.hatenablog.com/archive/category/%E6%9C%AC, http://iimonntsutaetai.hatenablog.com/archive/category/GIMP%E3%81%A7%E3%83%AC%E3%82%BF%E3%83%83%E3%83%81, 『藤子・F・不二雄のまんが技法』感想と考察!「ちょっとバカにしていたまんが家もいました」, 季節外れの『サマータイムラブ(Shiggy Jr.)』やっと見つけた「プールのCM」の曲!. メニュー数が少ない時、一つ一つのメニュー幅(縦罫線の区切り)が長いので調整したいです。, 項目名は8文字以内、項目数も画面に収まる範囲内(6~7個程度)が、レイアウトが崩れずに表示される推奨設定となっていますが、これを変更する場合はCSSおよびJSファイルのカスタマイズが必要です。 WordPress管理画面からヘッダー、背景、ナビゲーションメニューを編集する方法とそのカスタマイズについての記述です。WordPress3.0から対応している機能を使います。 WordPress管理画面からヘッダー、背景、ナビゲーションメニューを編集する方法とそのカスタマイズについての記述です。WordPress3.0から対応している機能を使います。 ヘッダーメニューは画面右上に固定されますが、グローバルメニューはスクロールに合わせて、追従して表示されます。 何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。, TCDテーマGENSEN:検索結果ページとカテゴリー一覧の並べ替え条件の各文言を変更する方法, TCDテーマAVALON:トップページスクロールコンテンツの説明文でHTMLタグを使用する方法. TCDテーマ活用のヒント . TCDテーマオリジナルウィジェットでサイトの見た目を向上させる.

もし参考になりましたら、下のボタンで教えてください。 | なお、メニューバーの高さを変えるには二つ↓の項で説明している「文字の高さ」も同じ数値に変える必要があります。 文字の回り込み③ .nav li{float: left; /* 左に詰めて表示をする */ text-align: center; width:20%; /* 幅を指定 */ margin: 0;} ① 2017.01.13. グローバルメニュー作ってみました! ↑にある「TOP」「MOVIE」「BOOK」「GIMP」のバーです。想像以上に大変で時間もかかりましたが、なんとか用意することができました(結局なんやかんや2時間ぐらいかかったのかな……なんでや?)。これで当ブログのPV数も……増えると……いいん……だけど……(無理だワナ)。, 文字の色(白)にどんな背景色が合うんだとか、メニューバーの横幅をページいっぱいに(余白なく)広がっているように見せるとか(できてるよね?)。マウスオーバー時に文字や背景のカラーを変化させることとか。そのカラーは何にするかとか。とかとかとかとかとかとかとかとかとかとかとかとかとっととか。, ため息ばかりついているのもアレなので、僕がやったことをご紹介しましょう……その、前に……と。, 以下の説明ははてなブログ初期のブログテーマを装飾することを想定しています。数値やカラーは各自で変更してください(「各CSSコードの説明」の項でどの数値やアルファベットを変えればいいかを説明しています。ご参考ください)。, また、元に戻したい場合、追記したコードを消せば大丈夫です(こちらもはてなブログの場合)。,

, ↑のコードをコピーしてメモ帳等に貼り付けてから、↓のようにURL部分を皆さんのブログのURLに修正してください。, の前のXXXの部分には表示させたい単語(TOP、BOOKなど)を入力してください。, 貼り付ける場所はココ↓(はてなブログの場合)。すでに何かのコードが書かれているときは、一番下に貼り付けます。, (「ダッシュボード」→「デザイン」→「カスタマイズタブ」(左上のスパナのアイコン)→「ヘッダ」の順でクリックしていくと、↑の画面に辿り着きます。), この段階ではページの左上にTOPのように表示されるだけです。↓のCSSの追加で立派なメニューバーに作りかえます。, /* グローバルナビゲーション */.nav {width: 170%; /* 幅を指定 */padding: 0 0; /* 余白を指定 */margin-left: -286px;margin-top: -50px;}.nav ul{padding: 0;overflow:hidden; /* 高さを出すために指定 */list-style-type: none; /* リストスタイルを指定 */background:#688226; /* 背景色を指定 */margin-bottom:100px; /* 枠の下周囲の余白を指定 */text-align: center; /* 文字を真ん中に表示 */height: 50px;  /* 高さを指定 */}.nav li{float: left; /* 左に詰めて表示をする */text-align: center;width:20%; /* 幅を指定 */margin: 0;}.nav li a{display: block; /* ブロック表示にする */margin: 0;line-height:50px; /* 高さを指定 */color: #fff; /* 文字色の指定 */font-size: 17px; /* 文字の大きさを指定 */text-decoration: none; /* アンダーラインを消す */}.nav a:hover{color: #fff799; /* マウスオーバー時の文字色を指定 */background:#f7546d; /* マウスオーバー時の背景色を指定 */}, (HTMLのときと同様にデザイン‐カスタマイズ画面に行き、「デザインCSS」をクリックします。), これで終了です。上手くできましたでしょうか(右側のプレビュー画面で確認できます)。, デザイン画面の右側のプレビューが変になってしまった場合は、「管理画面に戻る」↓でダッシュボードに戻ると変更は保存されません。, 今回の記事でグローバルメニューバーの横幅の調整が一番苦労しました。↓のサイトにも書いてあるように何かを横幅いっぱいに表示するのってなかなか難しいんですよね。bodyの設定を変えたくないし……。う~ん、うっふ~ん。取り消しはしない。, /* グローバルナビゲーション */.nav {width: 170%; /* 幅を指定 */padding: 0 0; /* 余白を指定 */margin-left: -286px;margin-top: -50px;}, 青の部分が参考にしたCSSを修正した箇所です。「margin-top」でグローバルメニューとタイトルロゴの間隔を調整し、「margin-left」と「width」の数値をいじることで左右の隙間を埋めました(時間かかった)。, 続いて、グローバルメニューの背景色や高さを調整します。背景色を何にするかは非常に大切ですので、↓のカラーコードサイトなども参考にしながら慎重に決定してください。, .nav ul{padding: 0;overflow:hidden; /* 高さを出すために指定 */list-style-type: none; /* リストスタイルを指定 */background:#688226; /* 背景色を指定 */margin-bottom:100px; /* 枠の下周囲の余白を指定 */text-align: center; /* 文字を真ん中に表示 */height: 50px;  /* 高さを指定 */}, を変更することができます。今使っている緑茶(#688226)のほかにオレンジ(#f3c75b)、茶色(#b39241)などいろいろ検討して思案しました。かなり迷いましたね。, なお、メニューバーの高さを変えるには二つ↓の項で説明している「文字の高さ」も同じ数値に変える必要があります。, .nav li{float: left; /* 左に詰めて表示をする */text-align: center;width:20%; /* 幅を指定 */margin: 0;}, ここで言うことは特にないです(float: left; で文章を画像に回り込ませることができるんですね。leftをrightに変更したら文字を右に寄せられるそう。勉強になりました)。, .nav li a{display: block; /* ブロック表示にする */margin: 0;line-height:50px; /* 高さを指定 */color: #fff; /* 文字色の指定 */font-size: 17px; /* 文字の大きさを指定 */text-decoration: none; /* アンダーラインを消す */}, ↑のcolorとfont-sizeの数値やアルファベットを変更することで文字の色や大きさを変えられます。メニューバーの背景を緑茶っぽい暗く濃い色に設定しましたので、文字色は白(#fff)の方が際立ちました。逆に「背景色の指定」で背景を薄い色にして、文字を黒や青にする選択肢もあります。, line-heightは↑で説明した「メニューバーの高さの調整」のheightと同じ数値にしてください。, .nav a:hover{color: #fff799; /* マウスオーバー時の文字色を指定 */background:#f7546d; /* マウスオーバー時の背景色を指定 */}, これがラストのコード部分。マウスを重ねたとき(マウスオーバー時)の色の変化を示しています。文字色はグレーや黒(+緑)も試したのですが、薄い黄色(#fff799)が一番赤(#f7546d)に合いましたので、それに設定しました。, 以上で説明は終わりです。グローバルメニューを作成しておくことで、「お、このブログ面白い。他にどんな記事があるんだろう」とビジターが思った時にクリックしてもらいやすくなりますね。PV数は向上する……ハズ。, と勇気を持ちながらブログをやっていきたく候(「そうろう」で早漏改善とでるのやめてねGoogleさん)。, ↓参考にした書籍。「見出しのカスタマイズ」「SNSボタンのカスタマイズ」などCSSを使用した見やすいブログの作り方がわかりやすく説明されています。, ayaeyegoさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか?, Powered by Hatena Blog この記事は2016年3月17日に更新されたもので、内容が古い可能性がありますのでご注意ください。, グローバルメニュー上でマウスオーバーしたときに開く子メニューの幅が狭く、テキストが2行で表示されてしまいます。少し幅を広げて1行で表示したいです。, この記事は役に立ちましたか? ※最初にpaddingの左右の幅を狭めて、グローバルメニューの表示をご確認ください。それでも2列となっている場合はfont-sizeを調整ください。 関連記事.

Sugar アプリ 芸能人一覧 17, ギャラクシーs10 イヤホン 応募 16, Essence 横浜 偽物 7, Ffbe 幻影 戦争 最強 ビジョン 5, Photoshop Jpeg 保存できない 6, Zx14r クラッチ 切れ ない 12, Python Csv 行 指定 4, モンハン ワールド:アイスボーン ギャラリー 7, Google Home Bluetooth接続 4, あつ森 データ 復元 12, 山本山 社長 息子 53, 猫 口 臭い 4, Cubase 音 おかしい 7, 猫 口 臭い 4, 睡蓮花 ジャケ写 誰 9, Cf J9 改造 5, ドラクエ10 めぐ らむね 37, 中学1年 数学 計算問題 4, S660 クルーズコントロール 後付け 21, 涼宮ハルヒ ニコ生 現在 7, 仕事 優秀 早い 12,

Comments are closed.