gdata.io.handleScriptLoaded({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$georss":"http://www.georss.org/georss","xmlns$thr":"http://purl.org/syndication/thread/1.0","xmlns$blogger":"http://schemas.google.com/blogger/2008","id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100"},"updated":{"$t":"2023-03-13T11:23:17.127+09:00"},"category":[{"term":"レビュー"},{"term":"宅建"},{"term":"リダイレクト"},{"term":"ブログ"},{"term":"Windows エクスペリエンス インデックス"},{"term":"アップデート"},{"term":"アナリティクス"},{"term":"WordPress"},{"term":"A8"},{"term":"光・モバイル回線"},{"term":"拡張機能"},{"term":"外注記事"},{"term":"メニューバー"},{"term":"ウェブマスターツール"},{"term":"禁煙に失敗した人の話"},{"term":"動画"},{"term":"WordPressカスタマイズ"},{"term":"Hatch"},{"term":"画像の圧縮"},{"term":"プラグイン"},{"term":"URL"},{"term":"ネームサーバー"},{"term":"STINGER"},{"term":"Seesaaカスタマイズ"},{"term":"Vista"},{"term":"Chrome"},{"term":"テラダモケイ"},{"term":"FREETEL"},{"term":"ファビコン"},{"term":"サブメニュー"},{"term":"ドメイン"},{"term":"AdSense"},{"term":"子テーマ"},{"term":"amazon"},{"term":"Bloggerカスタマイズ"},{"term":"css"},{"term":"NURO光"},{"term":"カテゴリー"},{"term":"バリューコマース"},{"term":"JavaScript"},{"term":"nofollow"},{"term":"マネークリップ"},{"term":"LinkWithin"},{"term":"サチコ"},{"term":"KIWAMI"},{"term":"プロフィール"},{"term":"ツイッター連携"},{"term":"totoBIG"},{"term":"ランサーズ"},{"term":"プロジェクター"},{"term":"Seesaa"},{"term":"キャッシュ"},{"term":"サイドバー"},{"term":"投稿ページ"},{"term":"グラボ"},{"term":"GIMP"},{"term":"Skitch"},{"term":"サイトマップ"},{"term":".exeファイル"},{"term":"Picasa"},{"term":"ウィンドウエアコン"},{"term":"テーマ"},{"term":"固定ページ"},{"term":"テンプレート"},{"term":"格安SIM"},{"term":"関連記事"},{"term":"スコアカード"},{"term":"禁煙に成功した人の話"},{"term":"連絡フォーム"},{"term":"禁煙の効果"},{"term":"艦これ"},{"term":"Google+"},{"term":"コピーライト"},{"term":"Linux"},{"term":"パーマリンク設定"},{"term":"トップページ"},{"term":"ミニバード"},{"term":"ペイント"},{"term":"Blogger"},{"term":"ドメインキング"},{"term":"Inkscape"},{"term":"圧縮"},{"term":"くじ"},{"term":"禁煙"},{"term":"ダウンロード"},{"term":"gzip"},{"term":"フォント"},{"term":"バナー広告"},{"term":"Googleアカウント"},{"term":"レンタルサーバー"},{"term":"画像"},{"term":"MesoColumn"},{"term":"窓用エアコン"},{"term":"クロスドメイントラッキング"},{"term":"パソコン"},{"term":"月次報告"},{"term":"MVNO"},{"term":"注目の投稿"},{"term":"禁煙のコツ"},{"term":"ページ内リンク"},{"term":"検索"},{"term":"タバコの害"}],"title":{"type":"text","$t":"メモロウ"},"subtitle":{"type":"html","$t":"メモロウ（旧はじめてのWordPressとBlogger+Seesaa）は、ブログ作成スキルゼロだった管理人が、WordPress・Blogger・Seesaaで実際に行ったカスタマイズの備忘録を中心に、日々の生活で気になった情報や話題を投稿しています。"},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/-/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%90%E3%83%BC?alt\u003djson-in-script\u0026max-results\u003d9999"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/-/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%90%E3%83%BC?alt\u003djson-in-script\u0026max-results\u003d9999"},{"rel":"alternate","type":"text/html","href":"http://www.memorou.com/search/label/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%90%E3%83%BC"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"generator":{"version":"7.00","uri":"https://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"8"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"9999"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-7496770927743391457"},"published":{"$t":"2015-02-13T12:52:00.000+09:00"},"updated":{"$t":"2016-07-11T13:14:25.490+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"STINGER"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"メニューバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"STINGER5のスマホとタブレットサイズ表示時のメニューバーをカスタマイズ"},"content":{"type":"html","$t":"STINGER5のスマホとタブレットサイズで表示したときのメニューバーのカスタマイズです。\u003cbr /\u003e\nデフォルトでは、シンプルなデザインになっているため、どこをクリック（タップ）してもクリックできるように、大きなボタン型に変更しました。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003eカスタマイズは、CSSにコピペするだけで完了します。\u003cbr /\u003e\n\u003cbr /\u003e\nPC表示時のメニューバーカスタマイズは、「\u003ca href\u003d\"http://www.memorou.com/2015/02/wordpressstinger5.html\"\u003eWordPress無料レスポンシブテーマSTINGER5のカスタマイズ\u003c/a\u003e」の10を参考にしてください。\u003cbr /\u003e\n\u003ch2\u003e表示タイプは、1列・2列・3列の3パターン\u003c/h2\u003eタブレットとスマホの列を同じにした場合は3パターン、それぞれ別にしたときは6パターンで、合計9パターンになります。\u003cbr /\u003e\n\u003cbr /\u003e\nMENUをクリックしたときの、それぞれの見た目は画像で確認してください。\u003cbr /\u003e\n\u003cbr /\u003e\nスマホ表示の横幅を320px、タブレットサイズの横幅を779pxとし、2列表示のコードを基準としています。※横幅がぶれる（スクロールする）場合は%を少しずつ下げていってください。\u003cbr /\u003e\n\u003ch3\u003e2列表示\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-i6IR5Shsk0E/VNyDMflGtXI/AAAAAAAACpo/HZ5_tMfcpD4/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-i6IR5Shsk0E/VNyDMflGtXI/AAAAAAAACpo/HZ5_tMfcpD4/s1600/03.png\" height\u003d\"106\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n子テーマのstyle.cssに以下を追加します。\u003cbr /\u003e\n\u003cpre\u003e/*media Queries タブレットサイズ以下のメニュー\n----------------------------------------------------*/\n@media only screen and (max-width: 780px) {\n.acordion_tree li {\nfont-size: 14px;\nborder: 1px solid #ccc;\nmargin-bottom: 1px;\nmargin-left: 1px;\npadding: 0px;\nwidth: 48%;\nborder-radius: 5px;\nbackground-color: #fefefe;\nline-height: 40px;\ntext-align: center;\n}\n\n.acordion_tree li a {\nwidth: 100%;\n}\n.acordion_tree li a:hover {\nbackground-color: #e1dfc0;\nborder-radius: 5px;\n}\n}\n/*タブレットサイズ以下のメニュー　　ここまで\n----------------------------------------------------*/\u003c/pre\u003eフォントサイズやカラーなどは自由に変更可能です。\u003cbr /\u003e\n1列・3列表示の場合は、48%の部分を変更してください。\u003cbr /\u003e\n\u003ch3\u003e1列表示\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-xVwIJ4zNZvs/VNyPxGTgbMI/AAAAAAAACp4/lb3Uy-QISzA/s1600/06.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-xVwIJ4zNZvs/VNyPxGTgbMI/AAAAAAAACp4/lb3Uy-QISzA/s1600/06.png\" height\u003d\"157\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e2列表示の、48%の部分を98%に変えて追加してください。\u003cbr /\u003e\n\u003ch3\u003e3列表示\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-PF3lsuZ7lPA/VNyS7eV7ATI/AAAAAAAACqE/iIbejrkrwsQ/s1600/09.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-PF3lsuZ7lPA/VNyS7eV7ATI/AAAAAAAACqE/iIbejrkrwsQ/s1600/09.png\" height\u003d\"86\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e2列表示の、48%の部分を32%に変えて追加してください。\u003cbr /\u003e\n\u003cbr /\u003e\nスマホサイズで見ると、1つずつのボタンの幅が狭くなるため、文字数が多い場合は2行になって見た目が悪くなることがあります。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-VkOitIu-amE/VN1UVGqLfnI/AAAAAAAACqU/BUuFDLASNwY/s1600/10.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-VkOitIu-amE/VN1UVGqLfnI/AAAAAAAACqU/BUuFDLASNwY/s1600/10.png\" /\u003e\u003c/a\u003e\u003c/div\u003e上の画像（横幅320px）のように、2行になることによって空白ができてしまいます。\u003cbr /\u003e\n\u003cbr /\u003e\n2，3文字程度なら、文字の大きさを小さくしたり、スマホ表示時だけ2列にすることで対応できます。\u003cbr /\u003e\n\u003ch2\u003eスマホサイズの時だけ2列表示\u003c/h2\u003e\u003cdiv\u003e上の3列表示のコードの下に、以下を追加します。\u003c/div\u003e\u003cdiv\u003e\u003cpre\u003e/*media Queries スマホサイズのメニュー\n----------------------------------------------------*/\n@media only screen and (max-width: 380px) {\n.acordion_tree li {\nfont-size: 12px;\nwidth: 48%;\n}\n}\n/*スマホサイズのメニュー　　ここまで\n----------------------------------------------------*/\u003c/pre\u003e\u003c/div\u003e\u003cdiv\u003e横幅が380px以下で、2列表示に切り替わるようになっています。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003e文字サイズも14pxから12pxに変更して、見た目は下の画像のようになります。\u003c/div\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-absSPKzMyTo/VN1dgxK_UhI/AAAAAAAACqk/MCqW9qr4Oq0/s1600/11.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-absSPKzMyTo/VN1dgxK_UhI/AAAAAAAACqk/MCqW9qr4Oq0/s1600/11.png\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e文字数が多くて2行になっていたのが、横幅320pxでも1行できれいにおさまるようになりました。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003eスマホサイズの時だけ1列にする場合は、48%の部分を98%に変えて追加してください。\u003c/div\u003e"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7496770927743391457"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7496770927743391457"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2015/02/stinger5.html","title":"STINGER5のスマホとタブレットサイズ表示時のメニューバーをカスタマイズ"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://4.bp.blogspot.com/-i6IR5Shsk0E/VNyDMflGtXI/AAAAAAAACpo/HZ5_tMfcpD4/s72-c/03.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-2523501660588372423"},"published":{"$t":"2014-10-08T11:19:00.000+09:00"},"updated":{"$t":"2016-07-11T13:18:40.394+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Seesaa"},{"scheme":"http://www.blogger.com/atom/ns#","term":"メニューバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Seesaaカスタマイズ"}],"title":{"type":"text","$t":"Seesaaブログにメニューバーを設置する方法"},"content":{"type":"html","$t":"Seesaaブログにメニューバー（グローバルナビゲーション）を設置する方法は何種類かあるようですが、個人的に一番簡単に設置できそうな方法について書いていきます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003ch2\u003eメニューバーのソースを追加する場所\u003c/h2\u003e\u003cbr /\u003e\nメニューバーを設置するためには、デザイン＞PC＞コンテンツからブログ説明にソースを追加する方法と、新たに自由形式のコンテンツを追加する方法があります。\u003cbr /\u003e\nどちらの方法でも大差はないですが、コンテンツを新たに追加したほうが、後の自由度は高くなりそうな気がします。\u003cbr /\u003e\n\u003cbr /\u003e\n追加するソース\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;div id\u003d\"menubar\"\u0026gt;\n        \u0026lt;ul\u0026gt;\n          \u0026lt;li\u0026gt;\u0026lt;a href\u003d'#'\u0026gt;Home\u0026lt;/a\u0026gt;\u0026lt;/li\u0026gt;\n          \u0026lt;li\u0026gt;\u0026lt;a href\u003d'#'\u0026gt;メニュー1\u0026lt;/a\u0026gt;\u0026lt;/li\u0026gt;\n          \u0026lt;li\u0026gt;\u0026lt;a href\u003d'#'\u0026gt;メニュー2\u0026lt;/a\u0026gt;\u0026lt;/li\u0026gt;\n          \u0026lt;li\u0026gt;\u0026lt;a href\u003d'#'\u0026gt;メニュー3\u0026lt;/a\u0026gt;\u0026lt;/li\u0026gt;\n          \u0026lt;li\u0026gt;\u0026lt;a href\u003d'#'\u0026gt;メニュー4\u0026lt;/a\u0026gt;\u0026lt;/li\u0026gt;\n          \u0026lt;li\u0026gt;\u0026lt;a href\u003d'#'\u0026gt;メニュー5\u0026lt;/a\u0026gt;\u0026lt;/li\u0026gt;\n        \u0026lt;/ul\u0026gt;\n\u0026lt;/div\u0026gt;\n\u003c/code\u003e\u003c/pre\u003eidのmenubarやメニューXは任意で変更可能です。\u003cbr /\u003e\n#の部分にリンクするURLを入力してください。（#は削除する）\u003cbr /\u003e\n\u003cbr /\u003e\nここでは、HOMEを入れて6個のメニューになっていますが、liを追加や削除することで表示するメニューの数を変更できます。\u003cbr /\u003e\n\u003ch3\u003eブログ説明にソースを追加\u003c/h3\u003e\u003cdiv\u003eブログ説明にソースを追加する方法は2つ。1つは、コンテンツHTMLを編集する方法と、挿入テキスト（下部）に追加する方法があります。\u003cbr /\u003e\n\u003ch4\u003eコンテンツHTML編集に追加\u003c/h4\u003e\u003c/div\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-lttVKoswOB8/VDN5z2sJL-I/AAAAAAAACUw/2IywBZRwxgo/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-lttVKoswOB8/VDN5z2sJL-I/AAAAAAAACUw/2IywBZRwxgo/s1600/01.png\" height\u003d\"121\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003eブログ説明をクリックします。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-aQO_zPUGdOw/VDN7C34_7BI/AAAAAAAACU4/vZ_cdzacuPw/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-aQO_zPUGdOw/VDN7C34_7BI/AAAAAAAACU4/vZ_cdzacuPw/s1600/02.png\" height\u003d\"116\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e右上のコンテンツHTML編集をクリックします。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-6mNNy8i7oRg/VDN-o_YxFQI/AAAAAAAACVE/NqnMtz6PthE/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-6mNNy8i7oRg/VDN-o_YxFQI/AAAAAAAACVE/NqnMtz6PthE/s1600/03.png\" height\u003d\"176\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e元から入力されているソースの下に「追加するソース」を追加して保存をします。\u003c/div\u003e\u003ch4\u003e挿入テキスト（下部）に追加\u003c/h4\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-lttVKoswOB8/VDN5z2sJL-I/AAAAAAAACUw/2IywBZRwxgo/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-lttVKoswOB8/VDN5z2sJL-I/AAAAAAAACUw/2IywBZRwxgo/s1600/01.png\" height\u003d\"121\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003eブログ説明をクリックします。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-_NbUC0PD0Ng/VDOAUl5jhLI/AAAAAAAACVQ/UOGLZCC6KPc/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-_NbUC0PD0Ng/VDOAUl5jhLI/AAAAAAAACVQ/UOGLZCC6KPc/s1600/04.png\" height\u003d\"183\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e挿入テキスト（下部）に「追加するソース」を追加して保存します。ポイントは上部ではなく下部で。\u003c/div\u003e\u003ch3\u003e自由形式のコンテンツを追加\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-uZgR2064Kio/VDOzDnGGEpI/AAAAAAAACVg/qEz3XVPuL3Q/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-uZgR2064Kio/VDOzDnGGEpI/AAAAAAAACVg/qEz3XVPuL3Q/s1600/05.png\" height\u003d\"182\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e左のコンテンツから自由形式を探して、ブログ説明の下に追加します。テンプレートの種類によっては、記事の上に追加したほうがいい場合もあります。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003e追加したら、自由形式をクリックして「追加するソース」を追加します。\u003c/div\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-Nb0amM-coTs/VDO2uca2BLI/AAAAAAAACVs/p4Q6MOdinQA/s1600/06.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-Nb0amM-coTs/VDO2uca2BLI/AAAAAAAACVs/p4Q6MOdinQA/s1600/06.png\" height\u003d\"248\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003eタイトルは、後で編集するときわかりやすいように「メニューバー」などにしておきます。\u003c/div\u003e\u003cdiv\u003e最後に保存をクリックします。コンテンツ選択画面でも保存します。\u003c/div\u003e\u003ch2\u003eメニューバーの装飾\u003c/h2\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-8THCpgR2g8s/VDO6dXIgjZI/AAAAAAAACV4/iFILobnVviE/s1600/07.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-8THCpgR2g8s/VDO6dXIgjZI/AAAAAAAACV4/iFILobnVviE/s1600/07.png\" height\u003d\"268\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003eデザイン＞PC＞デザイン設定から、使用しているテンプレートのタイトルを選択します。\u003c/div\u003e\u003cdiv\u003e今回は、ライトブルーの右サイドバーに追加します。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003eスタイルシートの一番下に次を追加します。\u003c/div\u003e\u003cpre\u003e\u003ccode\u003e/* menubar */\n#menubar {\n  width:810px;\n  margin:0px;\n  padding:0;\n}\n#menubar ul{\n  padding:0px;\n  list-style: none;\n}\n#menubar ul li{\n  display:inline;\n}\n  \n#menubar ul li a{\n  color:#444;\n  display:block;\n  float:left;\n  margin:0;\n  padding:0;\n  overflow:hidden;\n  text-align:center;\n  width:133px;\n  line-height:30px;\n  font-size:14px;\n  font-weight:bold;\n  border-bottom: solid 2px #2E5056;\n  text-decoration:none;\n  white-space: nowrap;\n}\n\n#menubar ul li a:hover{\n  color:#fff;\n  border-bottom: solid 2px #FFFF00;\n  background:#2E5056;\n}\n/* menubar */\n\u003c/code\u003e\u003c/pre\u003eこれは、ライトブルーに6個のメニューバーを設置する場合のコードです。 \u003cbr /\u003e\n\u003cbr /\u003e\n各カラーコードは好みで変更します。\u003cbr /\u003e\n\u003cbr /\u003e\n他のテンプレートの場合、width:810とwidth:133あたりを変更すると使用できます。\u003cbr /\u003e\n\u003ch2\u003eメニューバーの位置調整\u003c/h2\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-vUayvRkooMk/VDPHllJUoWI/AAAAAAAACWI/KgDmKCWBd_c/s1600/08.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-vUayvRkooMk/VDPHllJUoWI/AAAAAAAACWI/KgDmKCWBd_c/s1600/08.png\" height\u003d\"111\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003eこのままだと、位置が下で背景とかぶって見づらいので、h1を上にずらして位置を整えます。\u003cbr /\u003e\nメニューバーの装飾と同様に、使用しているテンプレートを選択します。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/--ilIgRh9VdU/VDPLM3amvdI/AAAAAAAACWc/hAjbw8wSZ9I/s1600/09.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/--ilIgRh9VdU/VDPLM3amvdI/AAAAAAAACWc/hAjbw8wSZ9I/s1600/09.png\" height\u003d\"168\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eスタイルシート内からh1を探して、padding-topを42pxから22pxに変更します。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-IyCcCBY85s8/VDPKgLpCv-I/AAAAAAAACWU/QpN88Hh9_po/s1600/10.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-IyCcCBY85s8/VDPKgLpCv-I/AAAAAAAACWU/QpN88Hh9_po/s1600/10.png\" height\u003d\"92\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e変更すると、上の余白がなくなってきれいに収まります。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/2523501660588372423"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/2523501660588372423"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/10/seesaa_8.html","title":"Seesaaブログにメニューバーを設置する方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://3.bp.blogspot.com/-lttVKoswOB8/VDN5z2sJL-I/AAAAAAAACUw/2IywBZRwxgo/s72-c/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-444395909306604093"},"published":{"$t":"2013-12-06T09:39:00.000+09:00"},"updated":{"$t":"2017-02-25T17:22:57.838+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"メニューバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"カテゴリー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"固定ページ"}],"title":{"type":"text","$t":"WordPressメニューバーにカテゴリーと固定ページを表示させる方法"},"content":{"type":"html","$t":"メニューバーにカテゴリーと固定ページを表示する方法を記録します。\u003cbr /\u003e\n\u003cbr /\u003e\nこの記事は、\u003ca href\u003d\"http://www.memorou.com/2013/03/blog-post_13.html\"\u003eワードプレスカテゴリーをメニューバーに表示する方法\u003c/a\u003eと\u003ca href\u003d\"http://www.memorou.com/2013/03/blog-post_11.html\"\u003eワードプレス固定ページをメニューバーに表示する方法\u003c/a\u003eのまとめです。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nメニューバーには階層をつけることができ、階層をつけることにより、メニューにマウスを乗せたときにサブメニューが表示されるようになります。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-bIrrX1Gqa7c/Up_-uGn1QyI/AAAAAAAAA4k/HyVVNwO92oY/s1600/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%90%E3%83%BC.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"186\" src\u003d\"http://4.bp.blogspot.com/-bIrrX1Gqa7c/Up_-uGn1QyI/AAAAAAAAA4k/HyVVNwO92oY/s320/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%90%E3%83%BC.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eカテゴリーで親を指定しただけでは、サブメニューとして表示されません。\u003cbr /\u003e\nサブメニューとして表示させるには、メニューの編集が必要です。（後述）\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"reference\"\u003e※AdSense広告をメニューバーの下に表示している場合には注意が必要です。\u003cbr /\u003e\nサブメニューが開いたときにAdSense広告にかぶらないようにしましょう。\u003c/div\u003e\u003ch2\u003eカテゴリーの登録\u003c/h2\u003eまずは、メニューバーに表示させる親カテゴリーを作ります。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-eFPPBVN5-EQ/Up__LuknCNI/AAAAAAAAA4s/a0oJqB_LEm0/s1600/%E3%82%AB%E3%83%86%E6%96%B0%E8%A6%8F.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"93\" src\u003d\"http://3.bp.blogspot.com/-eFPPBVN5-EQ/Up__LuknCNI/AAAAAAAAA4s/a0oJqB_LEm0/s320/%E3%82%AB%E3%83%86%E6%96%B0%E8%A6%8F.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e投稿タブからカテゴリーを選択します。「カテゴリー画面」になるので新規カテゴリーを追加で名前とスラッグを入力します。スラッグを入力しない場合は「名前」で入力した文字がスラッグとなります。親カテゴリーを作っているので、親の指定は「なし」のままでOKです。「新規カテゴリーを追加」をクリックすると、右側に今作ったカテゴリーが表示されます。\u003cbr /\u003e\n\u003ch3\u003eカテゴリーの編集\u003c/h3\u003e今までに作ったカテゴリーを編集する場合は、カテゴリー画面で編集をしたいカテゴリーにマウスを乗せると「編集」や「削除」などが表示されるので、編集をしたい場合は「編集」を、削除をしたい場合は「削除」をクリックする。\u003cbr /\u003e\n\u003cbr /\u003e\n編集が終わったら「更新」をクリックして完了です。\u003cbr /\u003e\n\u003cbr /\u003e\n削除をクリックすると「選択した項目を完全に削除しようとしています。」とでるので、OKなら「OK」をクリックして完了です。\u003cbr /\u003e\n\u003ch2\u003eメニューバーの作成\u003c/h2\u003e外観タブからメニューを選択します。「メニューを編集」画面になるので、メニューバーに表示させたい項目を選び追加します。\u003cbr /\u003e\n新しいメニューを作成する場合は、「メニューの名前」に任意の名前を入力し「メニューを保存」をクリックします。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-tftLM1f0288/Up__fTpPjuI/AAAAAAAAA40/x8YWkNB7dMc/s1600/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"88\" src\u003d\"http://3.bp.blogspot.com/-tftLM1f0288/Up__fTpPjuI/AAAAAAAAA40/x8YWkNB7dMc/s320/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003e固定ページの追加\u003c/h3\u003eメニューバーに固定ページを表示させたい場合は、固定ページタブ内の項目にチェックを入れ、「メニューに追加」をクリックする。\u003cbr /\u003e\n表示させたい固定ページが見つからない場合は、「すべて表示」か「検索」をクリックして探します。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-0O_92nTx4lE/Up__lfP6E1I/AAAAAAAAA48/Oc-a0qdnBlY/s1600/%E5%9B%BA%E5%AE%9A.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"155\" src\u003d\"http://2.bp.blogspot.com/-0O_92nTx4lE/Up__lfP6E1I/AAAAAAAAA48/Oc-a0qdnBlY/s320/%E5%9B%BA%E5%AE%9A.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eリンクの追加\u003c/h3\u003eメニューバーにリンクを表示させたい場合は、リンクタブ内の「URL」と「リンクテキスト」を入力後に、「メニューに追加」をクリックする。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-qVbMx2DpocI/Up__qUQoyyI/AAAAAAAAA5E/9xslWYGy49U/s1600/%E3%83%AA%E3%83%B3%E3%82%AF.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"154\" src\u003d\"http://4.bp.blogspot.com/-qVbMx2DpocI/Up__qUQoyyI/AAAAAAAAA5E/9xslWYGy49U/s320/%E3%83%AA%E3%83%B3%E3%82%AF.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eカテゴリーの追加\u003c/h3\u003eメニューバーにカテゴリーを表示させたい場合は、カテゴリータブ内の項目にチェックを入れ、「メニューに追加」をクリックする。\u003cbr /\u003e\n表示させたいカテゴリーが見つからない場合は、「すべて表示」か「検索」をクリックして探します。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-DJH2Di9Uku0/Up__vzXXzhI/AAAAAAAAA5Q/wZPnhEreDL0/s1600/%25E3%2582%25AB%25E3%2583%2586.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"142\" src\u003d\"http://1.bp.blogspot.com/-DJH2Di9Uku0/Up__vzXXzhI/AAAAAAAAA5Q/wZPnhEreDL0/s320/%25E3%2582%25AB%25E3%2583%2586.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eメニューバーの編集\u003c/h3\u003e外観タブからメニューを選択します。「メニューを編集」画面になるので、編集したいメニューをクリックして編集後に「メニューを保存」をクリックする。\u003cbr /\u003e\n\u003cbr /\u003e\n順番を変えたり階層をつける場合は、メニューをドラッグアンドドロップで移動する。\u003cbr /\u003e\nここで階層をつけることにより、サブメニューが表示されるようになります。\u003cbr /\u003e\n\u003cbr /\u003e\nメニューの設定で、ナビゲーションメニューにチェックを入れるとメニューバーに表示されるようになります。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-C5AOSZdheEA/Up__8AAf-qI/AAAAAAAAA5U/IsvRMHXl-mY/s1600/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC2.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"301\" src\u003d\"http://3.bp.blogspot.com/-C5AOSZdheEA/Up__8AAf-qI/AAAAAAAAA5U/IsvRMHXl-mY/s320/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC2.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/444395909306604093"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/444395909306604093"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/12/wordpress_6.html","title":"WordPressメニューバーにカテゴリーと固定ページを表示させる方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://4.bp.blogspot.com/-bIrrX1Gqa7c/Up_-uGn1QyI/AAAAAAAAA4k/HyVVNwO92oY/s72-c/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%90%E3%83%BC.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-8765047152723941124"},"published":{"$t":"2013-11-29T15:02:00.001+09:00"},"updated":{"$t":"2017-02-25T20:08:45.795+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"メニューバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"検索"}],"title":{"type":"text","$t":"Bloggerのサイト内検索をメニューバーに表示する方法"},"content":{"type":"html","$t":"この方法は、テンプレートの「HTMLの編集」をするような、ややこしいものではなく、誰でも簡単に表示させることができます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nまだメニューバー（グローバルバー）を設置していない方は、\u003ca href\u003d\"www.memorou.com/2013/02/blog-post_28.html\"\u003eBloggerにメニューバー（グローバルバー）を設置し色を変更する方法\u003c/a\u003eを参考にして、設置ができたらこの記事に戻ってきてください。\u003cbr /\u003e\n\u003ch2\u003eメニューバーの高さを変更する\u003c/h2\u003e設置ができたらメニューバーの高さを調節します。\u003cbr /\u003e\n\u003cbr /\u003e\nテンプレートのカスタマイズをクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-ThyCAmBmavA/UpgW8GJrjRI/AAAAAAAAA1U/nWqmYcYMyW0/s1600/1.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"179\" src\u003d\"http://3.bp.blogspot.com/-ThyCAmBmavA/UpgW8GJrjRI/AAAAAAAAA1U/nWqmYcYMyW0/s320/1.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e上級者向けのタブのテキストをクリックして、フォントの下の数字を大きくすると、メニューバーの高さがが高くなります。変更したらブログに適用を押します。\u003cbr /\u003e\n今回は、16pxにしました。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-b5ScyiOwMaE/UpgZF5oA_LI/AAAAAAAAA1g/qoeJOSFw-JM/s1600/2.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"120\" src\u003d\"http://4.bp.blogspot.com/-b5ScyiOwMaE/UpgZF5oA_LI/AAAAAAAAA1g/qoeJOSFw-JM/s320/2.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch2\u003e検索ボックスの準備\u003c/h2\u003e2カラム右サイドバーのレイアウトを例にします。\u003cbr /\u003e\n\u003ch3\u003eレイアウトの変更\u003c/h3\u003eメニューバーの高さを変更するときと同じように、テンプレートのカスタマイズをクリックしたら、レイアウトを選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-9SRkfVyQmlI/UpgcsqOYz7I/AAAAAAAAA1s/Hft_gppmKIw/s1600/3.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"65\" src\u003d\"http://1.bp.blogspot.com/-9SRkfVyQmlI/UpgcsqOYz7I/AAAAAAAAA1s/Hft_gppmKIw/s320/3.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n本文のレイアウトで上の左から2番目を選択します。変更できたら右上のブログに適用を押します。\u003cbr /\u003e\n\u003ch3\u003e検索ボックスの追加\u003c/h3\u003eレイアウトでガジェットの追加をクリックし、検索ボックスを選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-kB7ZXHd375A/Upghr69ZJPI/AAAAAAAAA18/nbyOITxHoQA/s1600/4.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"165\" src\u003d\"http://1.bp.blogspot.com/-kB7ZXHd375A/Upghr69ZJPI/AAAAAAAAA18/nbyOITxHoQA/s320/4.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n検索ボックスの設定は、用途によって変更してください。\u003cbr /\u003e\n\u003cbr /\u003e\nこれで、ブログに検索ボックスが表示されていれば準備が完了です。\u003cbr /\u003e\n\u003cbr /\u003e\n既に、検索ボックスを追加してる場合は、右サイドバーの一番上に移動しておいてください。\u003cbr /\u003e\n\u003ch2\u003eメニューバーに検索ボックスを表示する方法\u003c/h2\u003e準備ができたら、テンプレートのカスタムから、上級者向けをクリックしてCSSを追加を選択します。\u003cbr /\u003e\n\u003cbr /\u003e\nカスタムCSSを追加部分に下記のCSSを追加します。\u003cbr /\u003e\n\u003cpre\u003e/* 検索ボックスのタイトル */\nh2.title{\nfont-size:0px;\n}\n\n/* 右サイドバーの位置 */\n#sidebar-right-1{\nmargin: -70px 0px 0px 0px;\n}\n\u003c/pre\u003e検索ボックスのタイトルを消したくない場合は、削除してください。\u003cbr /\u003e\nタイトルを消すと、他のガジェットタイトルも消える可能性があります。\u003cbr /\u003e\n\u003cbr /\u003e\n右サイドバーの位置は、検索ボックスのタイルの有無によって変わってきます。\u003cbr /\u003e\nプレビューを見ながら、適宜変更してください。\u003cbr /\u003e\n\u003cbr /\u003e\nこれで、メニューバーの中に表示されるようになりました。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-mDJ4KUefQTg/UpgsS3OhipI/AAAAAAAAA2M/LiOkrTZxjps/s1600/6.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"115\" src\u003d\"http://3.bp.blogspot.com/-mDJ4KUefQTg/UpgsS3OhipI/AAAAAAAAA2M/LiOkrTZxjps/s320/6.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nこの方法の応用で、ヘッダー内に検索ボックスやバナー広告、SNSボタンなどを表示することができます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/12/blogger_16.html\"\u003eBloggerに忍者おまとめボタンを簡単に設置する方法\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\nIEやGCなどブラウザによって表示位置が異なるので注意が必要です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"reference\"\u003e[2017年追記]\u003cbr /\u003e\nこの投稿の内容を「サイト内検索をメニューバーに表示する目的」で行うことはおすすめしません。\u003cbr /\u003e\n右サイドバーの位置の調整には使えます。\u003c/div\u003e"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/8765047152723941124"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/8765047152723941124"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/11/blogger_29.html","title":"Bloggerのサイト内検索をメニューバーに表示する方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://3.bp.blogspot.com/-ThyCAmBmavA/UpgW8GJrjRI/AAAAAAAAA1U/nWqmYcYMyW0/s72-c/1.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-6311714474584219793"},"published":{"$t":"2013-03-27T12:39:00.000+09:00"},"updated":{"$t":"2017-02-25T23:37:08.257+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"サブメニュー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"メニューバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"ワードプレス　マウスオーバーでサブメニューが自動開閉するメニューバー"},"content":{"type":"html","$t":"企業ホームページなどでよく目にする、マウスオーバーで開閉するメニューバーの作成方法は、カテゴリーと固定ページをメニューバーに表示させる方法の応用である。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eサブメニューが自動開閉するメニューバーの作成\u003c/h2\u003eまず、マウスオーバーで自動開閉させるには、親となるカテゴリーか固定ページと、子となるカテゴリーか固定ページの、最低でも2個以上どちらかを作成する必要がある。\u003cbr /\u003e\n\u003cbr /\u003e\n次に、上で作ったカテゴリーか固定ページを、階層をつけてメニューバーに表示する。\u003cbr /\u003e\n\u003cbr /\u003e\nカテゴリーの作成方法とメニューバーに表示させる方法はこちらで説明している。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/03/blog-post_13.html\"\u003eワードプレス　カテゴリーをメニューバーに表示する方法\u003c/a\u003eを参照\u003cbr /\u003e\n固定ページの作成方法とメニューバーに表示させる方法はこちらで説明している。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/03/blog-post_11.html\"\u003eワードプレス　固定ページをメニューバーに表示する方法\u003c/a\u003eを参照\u003cbr /\u003e\n\u003cbr /\u003e\n追記：\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_6.html\"\u003eWordPressメニューバーにカテゴリーと固定ページを表示させる方法\u003c/a\u003eの記事を追加しました。\u003cbr /\u003e\n\u003ch3\u003e親子 属性 階層のつけ方\u003c/h3\u003e今回はカテゴリーで説明する。\u003cbr /\u003e\n\u003cbr /\u003e\n例えば、メニューに表示させたいテキストを「テスト カテゴリー」とする。\u003cbr /\u003e\nマウスオーバーで表示させるテキストを「テスト①」、「テスト②」とする。\u003cbr /\u003e\nメニューに追加した後に「テスト①」と「テスト②」をドラッグ＆ドロップで少しずらす。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-zGxmQk8qH_8/UVJg_NWKiTI/AAAAAAAAAHo/-w1FpEBUxzk/s1600/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E9%9A%8E%E5%B1%A4%E2%91%A0.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"113\" src\u003d\"http://1.bp.blogspot.com/-zGxmQk8qH_8/UVJg_NWKiTI/AAAAAAAAAHo/-w1FpEBUxzk/s320/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E9%9A%8E%E5%B1%A4%E2%91%A0.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nこうしてずらすことによって階層ができる。 \u003cbr /\u003e\n\u003cbr /\u003e\nこのとき、さらに階層をつけたい場合はそれぞれに同じ要領でカテゴリーを追加する。\u003cbr /\u003e\n「メニューを保存」を忘れないようにする。\u003cbr /\u003e\n\u003cbr /\u003e\nすると、「テストカテゴリー」にマウスを乗せると、「テスト①」と「テスト②」が開き、\u003cbr /\u003e\n「テスト①」にマウスを乗せると、「テスト①A」と「テスト②B」が順番に開いていきます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-DgLoIZnQCKs/UVJmcDuIOjI/AAAAAAAAAIQ/2q-c3Q9fX_4/s1600/%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"71\" src\u003d\"http://1.bp.blogspot.com/-DgLoIZnQCKs/UVJmcDuIOjI/AAAAAAAAAIQ/2q-c3Q9fX_4/s320/%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n複数のメニューを作成した場合は表示させるメニューを、外観のテーマからカスタマイズを選択する。\u003cbr /\u003e\n次に、ナビゲーションのPrimary Menuからテストメニューを選択する。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6311714474584219793"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6311714474584219793"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/03/blog-post_27.html","title":"ワードプレス　マウスオーバーでサブメニューが自動開閉するメニューバー"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://1.bp.blogspot.com/-zGxmQk8qH_8/UVJg_NWKiTI/AAAAAAAAAHo/-w1FpEBUxzk/s72-c/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E9%9A%8E%E5%B1%A4%E2%91%A0.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-6483914135243275621"},"published":{"$t":"2013-03-13T11:19:00.002+09:00"},"updated":{"$t":"2017-02-25T23:42:13.583+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"メニューバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"カテゴリー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"ワードプレス　カテゴリーをメニューバーに表示する方法"},"content":{"type":"html","$t":"カテゴリーを指定して記事を書くと関連記事を探すときなどに便利なほか、メニューバーを作るときも非常に便利である。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_6.html\"\u003eWordPressメニューバーにカテゴリーと固定ページを表示させる方法\u003c/a\u003eに改めて書き直しました。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eカテゴリーを作る方法\u003c/h2\u003eまず、ダッシュボードの投稿からカテゴリーを選択する。\u003cbr /\u003e\n次に、新規カテゴリーを追加の名前にカテゴリー名を入力し、新規カテゴリーを追加をクリックする。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-0g7X07Dw234/UT58x6K0cJI/AAAAAAAAAGo/5pQ-HpLfIb0/s1600/%E3%82%AB%E3%83%86%E6%96%B0%E8%A6%8F.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"320\" src\u003d\"http://3.bp.blogspot.com/-0g7X07Dw234/UT58x6K0cJI/AAAAAAAAAGo/5pQ-HpLfIb0/s320/%E3%82%AB%E3%83%86%E6%96%B0%E8%A6%8F.jpg\" width\u003d\"313\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nこのとき親カテゴリーを指定すると、カテゴリーに階層をつけることができる。\u003cbr /\u003e\n特に指定しない場合はなしを選択する。\u003cbr /\u003e\n親を指定しない場合は、このとき作ったカテゴリーが親になる。\u003cbr /\u003e\n\u003cbr /\u003e\nスラッグも特に指定しない場合カテゴリー名が使用される。\u003cbr /\u003e\nまた、投稿ページから直接カテゴリーを作ることもできる。\u003cbr /\u003e\n\u003ch3\u003e投稿ページからカテゴリーを作成\u003c/h3\u003e投稿の新規追加か、投稿一覧から編集する。 \u003cbr /\u003e\n\u003cbr /\u003e\n投稿ページの右下のほうにある＋新規カテゴリーの追加をクリックして、空欄にカテゴリー名を入力する。\u003cbr /\u003e\n\u003cbr /\u003e\nここでも親カテゴリーの指定ができるので任意で選択する。\u003cbr /\u003e\n新規カテゴリーを追加をクリックして公開もしくは下書きとして保存する。\u003cbr /\u003e\n\u003ch2\u003eカテゴリーをメニューバーに表示\u003c/h2\u003eダッシュボードの外観からメニューを選択する。\u003cbr /\u003e\n\u003cbr /\u003e\nカテゴリー一覧のすべて表示から、メニューバーに表示させたいカテゴリー名を選択する。\u003cbr /\u003e\n\u003cbr /\u003e\nボックスにチェックを入れてメニューに追加すると、右側に表示されるのでメニューを保存したらメニューバーに表示されるようになる。\u003cbr /\u003e\n\u003cbr /\u003e\nここで注意するのが、新しくカテゴリーを作ると「よく使うもの」ではなく、「すべて表示」にしないと選択できないところ。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6483914135243275621"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6483914135243275621"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/03/blog-post_13.html","title":"ワードプレス　カテゴリーをメニューバーに表示する方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://3.bp.blogspot.com/-0g7X07Dw234/UT58x6K0cJI/AAAAAAAAAGo/5pQ-HpLfIb0/s72-c/%E3%82%AB%E3%83%86%E6%96%B0%E8%A6%8F.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-2850871672018111502"},"published":{"$t":"2013-03-11T10:18:00.000+09:00"},"updated":{"$t":"2017-02-25T23:43:56.776+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"メニューバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"固定ページ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"ワードプレス　固定ページをメニューバーに表示する方法"},"content":{"type":"html","$t":"会社概要、お問い合わせなど、常に同じ情報を公開しておく時に便利な固定ページをメニューバーに表示させる方法の記録です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_6.html\"\u003eWordPressメニューバーにカテゴリーと固定ページを表示させる方法\u003c/a\u003eに改めて書き直しました。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003e固定ページの作り方\u003c/h2\u003eまず、ダッシュボードの固定ページから新規追加を選択します。\u003cbr /\u003e\nそこで、タイトルと記事を書いたら公開します。\u003cbr /\u003e\nこのときに、ページ属性を指定したい場合は、変更してから公開します。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-W6h0806xSg8/UT0ueskCvxI/AAAAAAAAAF8/rvPEpQmy6Vc/s1600/%25E5%259B%25BA%25E5%25AE%259A%25E6%2596%25B0%25E8%25A6%258F.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"97\" src\u003d\"http://2.bp.blogspot.com/-W6h0806xSg8/UT0ueskCvxI/AAAAAAAAAF8/rvPEpQmy6Vc/s320/%25E5%259B%25BA%25E5%25AE%259A%25E6%2596%25B0%25E8%25A6%258F.jpg\" style\u003d\"cursor: move;\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eページ属性について\u003c/h3\u003eページ属性は、固定ページやブログの投稿ページに親子関係（階層）を作ることができて、メニューバーをプルダウン形式で表示するときなどに使えます。\u003cbr /\u003e\n\u003cbr /\u003e\nプルダウン形式のメニューバーに関してはこちらで説明しています。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/03/blog-post_27.html\"\u003eワードプレス マウスオーバーでサブメニューが自動開閉するメニューバー\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\nまた、固定ページは個別にテンプレートも変更できるので、それぞれ好きなデザインに変えることができます。\u003cbr /\u003e\n\u003ch2\u003e固定ページをメニューバーに表示\u003c/h2\u003e公開したら、ダッシュボードの外観からメニューを選択する。\u003cbr /\u003e\n\u003cbr /\u003e\nすると、固定ページの欄にさっき作ったタイトルが追加されています。\u003cbr /\u003e\n\u003cbr /\u003e\nここで、タイトルの横のボックスにチェックを入れてメニューに追加をクリックすると、右側に表示されるのでメニューを保存したらメニューバーに表示されるようになります。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/2850871672018111502"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/2850871672018111502"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/03/blog-post_11.html","title":"ワードプレス　固定ページをメニューバーに表示する方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://2.bp.blogspot.com/-W6h0806xSg8/UT0ueskCvxI/AAAAAAAAAF8/rvPEpQmy6Vc/s72-c/%25E5%259B%25BA%25E5%25AE%259A%25E6%2596%25B0%25E8%25A6%258F.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-1530396702912246313"},"published":{"$t":"2013-02-28T12:45:00.000+09:00"},"updated":{"$t":"2017-02-25T23:58:30.613+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"メニューバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"}],"title":{"type":"text","$t":"Bloggerにメニューバー（グローバルバー）を設置し色を変更する方法"},"content":{"type":"html","$t":"このブログの上部（ヘッダーの下）にもあるメニューバーを表示して、その色を変更する方法です。\u003cbr /\u003e\n\u003cbr /\u003e\nこのメニューバーはどのページに移動しても表示されるので、訪問者が迷うことなくサイト内を行き来できるようになります。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eメニューバーの設置方法\u003c/h2\u003eまず、メニューバーをつけたいブログのページを開いて上部のタブを選択する。\u003cbr /\u003e\n\u003cbr /\u003e\nその後、新しいページをクリックしてウェブアドレスを選択する。 \u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-KpGSbNrPVtA/US2AB5F6vOI/AAAAAAAAABg/jkjUw9KCzZg/s1600/%E3%83%96%E3%83%AD%E3%82%AC%E3%83%BC%E3%83%9A%E3%83%BC%E3%82%B8.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-KpGSbNrPVtA/US2AB5F6vOI/AAAAAAAAABg/jkjUw9KCzZg/s320/%E3%83%96%E3%83%AD%E3%82%AC%E3%83%BC%E3%83%9A%E3%83%BC%E3%82%B8.jpg\" height\u003d\"169\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eあとは、表示させたいタイトルとリンク先アドレスを入力して保存を押したら完成。\u003cbr /\u003e\n\u003cbr /\u003e\nこのときに、ラベルをメニューバーに表示すると簡単に設置することができる。\u003cbr /\u003e\n\u003cbr /\u003e\nラベルをメニューバーに表示させる場合、先に表示させたいラベルのＵＲＬをコピーしておいて貼り付ける、この繰り返しで上部に目立たせたいラベルを表示することが出来る。\u003cbr /\u003e\n\u003cbr /\u003e\nメニューバーの表示される順番を変えたいときは、移動したいページ（下の赤○部分）を、ドラッグ＆ドロップで簡単に変更できる。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-vYeDWFM4jbU/US2AZRg0gCI/AAAAAAAAABw/n57RNzfEd1Y/s1600/%E3%83%96%E3%83%AD%E3%82%AC%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E9%A0%86.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-vYeDWFM4jbU/US2AZRg0gCI/AAAAAAAAABw/n57RNzfEd1Y/s320/%E3%83%96%E3%83%AD%E3%82%AC%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E9%A0%86.jpg\" height\u003d\"142\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nラベルではなく、他のサイトや自分のプロフィールなど、好きなURLを指定することも出来るので、自分の好みのメニューバーにカスタマイズすることができる。\u003cbr /\u003e\n\u003ch2\u003eブロガーのメニューバーの色を変更する方法\u003c/h2\u003eブロガーでは、上で作ったメニューバーの背景色や文字の色を簡単に変更することができる。\u003cbr /\u003e\n\u003ch3\u003eテキストの色やサイズの変更\u003c/h3\u003eまずは、マイブログのテンプレートからカスタマイズを選択する。\u003cbr /\u003e\n\u003cbr /\u003e\n上級者向けの中に、タブのテキストという項目があるので、ここでタブに表示されるフォント、フォントサイズ、テキストの色を変更できる。\u003cbr /\u003e\n\u003cbr /\u003e\nテキストの色は選択前と選択済みの色を変えられ、下にプレビューが表示されるので確認しながら変更することができる。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-MhwKin5b5DQ/UTaQ7DhOvFI/AAAAAAAAADY/HkajYNJ36qs/s1600/%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25AC%25E3%2583%25BC%25E3%2583%2586%25E3%2583%25B3%25E3%2583%2597%25E3%2583%25AC%25E3%2582%25AB%25E3%2582%25B9.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-MhwKin5b5DQ/UTaQ7DhOvFI/AAAAAAAAADY/HkajYNJ36qs/s320/%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25AC%25E3%2583%25BC%25E3%2583%2586%25E3%2583%25B3%25E3%2583%2597%25E3%2583%25AC%25E3%2582%25AB%25E3%2582%25B9.jpg\" height\u003d\"181\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003e背景色の変更\u003c/h3\u003eタブのテキストの下にあるタブの背景で、タブの背景色、選択済みの色を変更することができる。\u003cbr /\u003e\nページの背景や上で選んだテキストの色とかぶらないようにすると見やすくなる。\u003cbr /\u003e\n\u003cbr /\u003e\n変更が終わったら右上のブログに適用を押して完了。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/1530396702912246313"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/1530396702912246313"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/02/blog-post_28.html","title":"Bloggerにメニューバー（グローバルバー）を設置し色を変更する方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://2.bp.blogspot.com/-KpGSbNrPVtA/US2AB5F6vOI/AAAAAAAAABg/jkjUw9KCzZg/s72-c/%E3%83%96%E3%83%AD%E3%82%AC%E3%83%BC%E3%83%9A%E3%83%BC%E3%82%B8.jpg","height":"72","width":"72"}}]}});