// API callback
related_results_labels_thumbs({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100"},"updated":{"$t":"2023-03-13T11:23:17.127+09:00"},"category":[{"term":"WordPress"},{"term":"禁煙"},{"term":"Blogger"},{"term":"WordPressカスタマイズ"},{"term":"Bloggerカスタマイズ"},{"term":"レビュー"},{"term":"ブログ"},{"term":"禁煙に成功した人の話"},{"term":"Seesaa"},{"term":"ドメイン"},{"term":"パソコン"},{"term":"AdSense"},{"term":"Seesaaカスタマイズ"},{"term":"バナー広告"},{"term":"画像"},{"term":"アナリティクス"},{"term":"テーマ"},{"term":"メニューバー"},{"term":"月次報告"},{"term":"くじ"},{"term":"ウェブマスターツール"},{"term":"テンプレート"},{"term":"ドメインキング"},{"term":"レンタルサーバー"},{"term":"STINGER"},{"term":"プラグイン"},{"term":"リダイレクト"},{"term":"禁煙に失敗した人の話"},{"term":"amazon"},{"term":"totoBIG"},{"term":"スコアカード"},{"term":"格安SIM"},{"term":"禁煙の効果"},{"term":"ウィンドウエアコン"},{"term":"グラボ"},{"term":"ミニバード"},{"term":"光・モバイル回線"},{"term":"固定ページ"},{"term":"窓用エアコン"},{"term":"A8"},{"term":"FREETEL"},{"term":"Googleアカウント"},{"term":"JavaScript"},{"term":"KIWAMI"},{"term":"MVNO"},{"term":"NURO光"},{"term":"URL"},{"term":"Vista"},{"term":"Windows エクスペリエンス インデックス"},{"term":"css"},{"term":"アップデート"},{"term":"カテゴリー"},{"term":"キャッシュ"},{"term":"コピーライト"},{"term":"サイトマップ"},{"term":"プロフィール"},{"term":"ランサーズ"},{"term":"動画"},{"term":"外注記事"},{"term":"子テーマ"},{"term":"投稿ページ"},{"term":"禁煙のコツ"},{"term":".exeファイル"},{"term":"Chrome"},{"term":"GIMP"},{"term":"Google+"},{"term":"Hatch"},{"term":"Inkscape"},{"term":"LinkWithin"},{"term":"Linux"},{"term":"MesoColumn"},{"term":"Picasa"},{"term":"Skitch"},{"term":"gzip"},{"term":"nofollow"},{"term":"クロスドメイントラッキング"},{"term":"サイドバー"},{"term":"サチコ"},{"term":"サブメニュー"},{"term":"タバコの害"},{"term":"ダウンロード"},{"term":"ツイッター連携"},{"term":"テラダモケイ"},{"term":"トップページ"},{"term":"ネームサーバー"},{"term":"バリューコマース"},{"term":"パーマリンク設定"},{"term":"ファビコン"},{"term":"フォント"},{"term":"プロジェクター"},{"term":"ペイント"},{"term":"ページ内リンク"},{"term":"マネークリップ"},{"term":"圧縮"},{"term":"宅建"},{"term":"拡張機能"},{"term":"検索"},{"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.memorou.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/-\/Blogger%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA?alt=json-in-script\u0026max-results=9999"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/search\/label\/Blogger%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"22"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"9999"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-3487877652410476523"},"published":{"$t":"2016-11-04T12:30:00.000+09:00"},"updated":{"$t":"2016-11-26T11:56:31.293+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"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":"リダイレクト"}],"title":{"type":"text","$t":"Bloggerの2個目以降のブログもサブドメインで運営する方法"},"content":{"type":"html","$t":"タイトルだけを見ても何を言っているのか分かりづらいので、どのような状況のことか先に補足しておきます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nまず、このブログは、Bloggerと独自ドメイン（memorou.com）で運営しています。厳密にはwww.が付きますが、\u003Cb\u003Eこれを1個目のブログ\u003C\/b\u003Eとします。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nそして、Bloggerでは1つのアカウントで100個までブログを作成できます。2個目でも3個目でも100個目でも設定方法は同じなので、\u003Cb\u003E1個目以外を2個目とします\u003C\/b\u003E。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこの2個目のブログも、「同じドメイン（memorou.com）」を使って設定する方法です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Ch2\u003Eサブドメインとサブディレクトリの違い\u003C\/h2\u003Eサブドメインとサブディレクトリについて簡単に説明します。\u003Cbr \/\u003E\n\u003Ch3\u003Eサブドメインとは\u003C\/h3\u003Eサブドメインは、\u003Cbr \/\u003E\n\u003Cul\u003E\u003Cli\u003Ebeauty.memorou.com\u003C\/li\u003E\n\u003Cli\u003Enews.memorou.com\u003C\/li\u003E\n\u003Cli\u003Eweather.memorou.com\u003C\/li\u003E\n\u003C\/ul\u003Eのように、「memorou.com」より前に「beauty.」「news.」「weather.」などが付くドメインのこと\u003Cbr \/\u003E\n\u003Ch3\u003Eサブディレクトリとは\u003C\/h3\u003Eサブディレクトリは、\u003Cbr \/\u003E\n\u003Cul\u003E\u003Cli\u003Ememorou.com\/football\/\u003C\/li\u003E\n\u003Cli\u003Ememorou.com\/baseball\/\u003C\/li\u003E\n\u003Cli\u003Ememorou.com\/tennis\/\u003C\/li\u003E\n\u003C\/ul\u003Eのように、「memorou.com」の後ろに「football」「baseball」「tennis」などが付くドメインのこと\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nここでは、どんな時にどちらを選べばいいのかは省略します。\u003Cbr \/\u003E\nなおBloggerではサブディレクトリは使えません。\u003Cbr \/\u003E\n\u003Ch2\u003E2個目以降のブログもサブドメインで運営する方法\u003C\/h2\u003E2個目のブログが作成済みであることを前提に話を進めます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n1．サブドメインを設定するブログを選択します。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/1.bp.blogspot.com\/-Lns05KDUAqk\/WBs-ZLo-RaI\/AAAAAAAADTk\/EPhvDx4OBlkQO74K2cXp2DfQIoXta2HUgCLcB\/s1600\/01.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-Lns05KDUAqk\/WBs-ZLo-RaI\/AAAAAAAADTk\/EPhvDx4OBlkQO74K2cXp2DfQIoXta2HUgCLcB\/s320\/01.png\" width=\"320\" height=\"95\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n2．「\u003Ca href=\"http:\/\/www.memorou.com\/2014\/12\/blogger.html\"\u003EBloggerのカスタムドメイン設定方法\u003C\/a\u003E」同様に、「設定＞基本＞公開＞+ ブログのサードパーティ URL を設定」と進みサブドメインを追加します。（ここでは仮に「news.memorou.com」とします。）\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n3．ムームードメインのコントロールパネル＞ドメイン管理＞ドメイン操作＞ムームーDNSと進み、ドメイン一覧から追加したドメインの「変更」をクリックします。（今回は「memorou.com」）\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/2.bp.blogspot.com\/-8DcglW6KnM4\/WBtEYOwuwZI\/AAAAAAAADT8\/rKg_N_FjZLcyP_pNVa1xp5XsJ6gjcOoEgCLcB\/s1600\/03.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-8DcglW6KnM4\/WBtEYOwuwZI\/AAAAAAAADT8\/rKg_N_FjZLcyP_pNVa1xp5XsJ6gjcOoEgCLcB\/s320\/03.png\" width=\"320\" height=\"246\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n4．「カスタム設定のセットアップ情報変更」の「設定2」にサブドメインを追加します。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/2.bp.blogspot.com\/-agbPJhnKSP8\/WBtGex-h2tI\/AAAAAAAADUE\/hYcAU87qnXApo_TVELd6WvGA2HRxPrqIQCLcB\/s1600\/04.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-agbPJhnKSP8\/WBtGex-h2tI\/AAAAAAAADUE\/hYcAU87qnXApo_TVELd6WvGA2HRxPrqIQCLcB\/s320\/04.png\" width=\"320\" height=\"230\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eサブドメインに「news」、内容に「ghs.google.com」と入力し、種別を「CNAME」にします。\u003Cbr \/\u003E\n別のサブドメインにした場合は、「news」の部分をそのサブドメイン名に変更してください。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n5．「セットアップ情報変更」をクリックして少し時間を置くとページが表示されます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこの手順は一例です。手順の1と2を最後に持ってきた方がいい場合もあります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nなお、3個目以降も同様の手順でサブドメインの設定が可能です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nまた、今回はムームードメインで取得したドメインを設定しましたが、どのドメイン登録業者で取得したドメインであってもやること自体は同じです。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/3487877652410476523"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/3487877652410476523"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2016\/11\/subdomain.html","title":"Bloggerの2個目以降のブログもサブドメインで運営する方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-Lns05KDUAqk\/WBs-ZLo-RaI\/AAAAAAAADTk\/EPhvDx4OBlkQO74K2cXp2DfQIoXta2HUgCLcB\/s72-c\/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-6184086074874989816"},"published":{"$t":"2016-09-15T17:36:00.000+09:00"},"updated":{"$t":"2017-04-22T22:36:15.474+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"連絡フォーム"}],"title":{"type":"text","$t":"Bloggerの連絡フォームをHTMLの編集なしでページに設置する方法【script編】"},"content":{"type":"html","$t":"Bloggerではブログ運営で必須の「お問い合わせフォーム」をガジェットから簡単に追加できます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n今までサイドバーやフッターに設置していたお問い合わせフォームをscriptでページに設置する方法のメモです。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこの方法は、面倒な\u003Cb\u003EHTMLの編集をすることなく、わずか3工程で設置\u003C\/b\u003Eできます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\nこの投稿は「\u003Ca href=\"http:\/\/www.bloggerplugins.org\/2013\/05\/create-separate-contact-page-for-blogger.html\" rel=\"nofollow\" target=\"_blank\"\u003ECreate Separate Contact Page in Blogger\u003C\/a\u003E」を参考に作成しています。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこの記事内では、連絡フォーム＝お問い合わせフォームです。\u003Cbr \/\u003E\n\u003Ch2\u003E連絡フォームをページに設置する方法\u003C\/h2\u003E\u003Ch3\u003E1. ガジェットを追加\u003C\/h3\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/3.bp.blogspot.com\/-m0E3uUMjet4\/V9oyef_VYeI\/AAAAAAAADJA\/t5stuxBkEHs5tcda-AxqS8HKzS7kTrcqACLcB\/s1600\/06.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-m0E3uUMjet4\/V9oyef_VYeI\/AAAAAAAADJA\/t5stuxBkEHs5tcda-AxqS8HKzS7kTrcqACLcB\/s320\/06.png\" width=\"301\" height=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eレイアウトのsidebar-section（テンプレートにより異なる）の「ガジェットを追加」から、その他のガジェットをクリックし「連絡フォーム」を選択します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n3行程目が完了したら追加した「連絡フォーム」を削除して下さい。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n1度でも追加したことがある人は2へ進んで下さい。\u003Cbr \/\u003E\n\u003Cdiv class=\"reference\"\u003E※この1工程目の必要性は要検証。\u003Cbr \/\u003E\n必ず一度はサイドバーに追加しないといけないのか、一度でもどこかに追加したらそれでいいのか。\u003Cbr \/\u003E\nそもそも追加すること自体必要ないのか。\u003Cbr \/\u003E\n最後に削除しているため、2工程目からスタートしても問題ないかもしれません。\u003Cbr \/\u003E\n当環境では既に追加したことがあったため2工程目からスタートし、問題なく動作しました。\u003C\/div\u003E\u003Ch3\u003E2. 新しいページの追加\u003C\/h3\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/2.bp.blogspot.com\/-CjOIRK5-9_s\/V9o0WsGBZUI\/AAAAAAAADJE\/I2vrYTTlIOkR5yQjT-ty8UqMu2LN2ocFwCLcB\/s1600\/07.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-CjOIRK5-9_s\/V9o0WsGBZUI\/AAAAAAAADJE\/I2vrYTTlIOkR5yQjT-ty8UqMu2LN2ocFwCLcB\/s320\/07.png\" width=\"320\" height=\"111\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nページの「新しいページ」をクリックし、ページ設定のオプションを編集します。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/3.bp.blogspot.com\/-ci5r3VCISbo\/V9o163P2-iI\/AAAAAAAADJM\/PIx18SQXxGIIj5r5tp7M5IkP4l4WiNohACLcB\/s1600\/08.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-ci5r3VCISbo\/V9o163P2-iI\/AAAAAAAADJM\/PIx18SQXxGIIj5r5tp7M5IkP4l4WiNohACLcB\/s320\/08.png\" width=\"306\" height=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n設定は、構成モードを「HTMLコードを表示」、改行を「＜br＞タグを使用」にチェックを入れます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"reference\"\u003E元からあるページにそのまま追加することもできます。\u003C\/div\u003E\u003Ch3\u003E3. scriptの追加\u003C\/h3\u003E新しく作成したページに、下記のコードを貼り付けます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nモードは「作成」ではなく「HTML」にしてください。「HTML」に貼り付けた後「作成」にするとコードが自動で書き換えられるので注意してください。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;script\u0026gt;\nvar blogId = '自分のブログIDを入力';\nvar contactFormMessageSendingMsg ='送信中...';\nvar contactFormMessageSentMsg = 'メッセージを送信しました。';\nvar contactFormMessageNotSentMsg = 'メッセージを送信できませんでした。';\nvar contactFormEmptyMessageMsg ='メッセージを入力してください。';\nvar contactFormInvalidEmailMsg = '有効なメールアドレスを入力してください。'\n\nvar widgetLoaded=false;\nfunction sendEmailMsg() {\nif(widgetLoaded== false) {\n_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https:\/\/www.blogger.com\/contact-form.do'}, 'displayModeFull'));\nwidgetLoaded=true;\ndocument.getElementById('ContactForm1_contact-form-submit').click();\n}\nreturn true;\n}\n\u0026lt;\/script\u0026gt;\n\n\u0026lt;form name='contact-form'\u0026gt;\n\u0026lt;div\u0026gt;お名前：\u0026lt;\/div\u0026gt;\n\u0026lt;input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''\/\u0026gt;\n\u0026lt;div\u0026gt;メールアドレス*必須：\u0026lt;\/div\u0026gt;\n\u0026lt;input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''\/\u0026gt;\n\u0026lt;div\u0026gt;お問い合わせ内容 *必須：\u0026lt;\/div\u0026gt;\n\u0026lt;textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'\u0026gt;\u0026lt;\/textarea\u0026gt;\n\u0026lt;p\u0026gt;\u0026lt;\/p\u0026gt;\n\u0026lt;input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='送信する' onclick=\"sendEmailMsg()\"\/\u0026gt;\n\n\u0026lt;div style='text-align: center; max-width: 450px; width: 100%'\u0026gt;\n\u0026lt;p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'\u0026gt;\u0026lt;\/p\u0026gt;\n\u0026lt;p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'\u0026gt;\u0026lt;\/p\u0026gt;\n\u0026lt;\/div\u0026gt;\n\n\u0026lt;\/form\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n「自分のブログIDを入力」の部分にblogID（数字のみ）を入力します。\u003Cbr \/\u003E\nblogIDは、Bloggerブログ内でブラウザのURLを見ればどこでも確認できます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/1.bp.blogspot.com\/-WmkknclCyTU\/V9o9Y_Wr-GI\/AAAAAAAADJY\/WThfkSNCuAI0ftwgzfDXSKbktALY5chbwCLcB\/s1600\/09.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-WmkknclCyTU\/V9o9Y_Wr-GI\/AAAAAAAADJY\/WThfkSNCuAI0ftwgzfDXSKbktALY5chbwCLcB\/s320\/09.png\" width=\"320\" height=\"43\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nblogIDとpostIDを間違えないように注意してください。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n上のコードをページ本文に貼り付けるとこのようになります。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/3.bp.blogspot.com\/-CIGdtMKPZW8\/V9fh025oTRI\/AAAAAAAADIs\/pNgKng9bbrEPiaetLDKrQm55Xu36dwzWgCLcB\/s1600\/04.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-CIGdtMKPZW8\/V9fh025oTRI\/AAAAAAAADIs\/pNgKng9bbrEPiaetLDKrQm55Xu36dwzWgCLcB\/s320\/04.png\" width=\"320\" height=\"268\" \/\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※必ず動作確認をして下さい。\u003Cbr \/\u003E\n\u003Ch2\u003E連絡フォームのカスタマイズ\u003C\/h2\u003E以下のカスタマイズをすると、このようになります。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/1.bp.blogspot.com\/-W3Q8NAdQbEs\/V9fez1y6E2I\/AAAAAAAADIc\/n7E627DZuLIbZbA2Du1TsJCvrHCG6ABGQCLcB\/s1600\/02.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-W3Q8NAdQbEs\/V9fez1y6E2I\/AAAAAAAADIc\/n7E627DZuLIbZbA2Du1TsJCvrHCG6ABGQCLcB\/s320\/02.png\" width=\"275\" height=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n当ブログの\u003Ca href=\"http:\/\/www.memorou.com\/p\/contact-form.html\" rel=\"nofollow\"\u003Eお問い合わせ\u003C\/a\u003Eページです。\u003Cbr \/\u003E\n\u003Ch3\u003E1. 黄色い背景を消す\u003C\/h3\u003E「送信中」などが表示される黄色い背景を「送信する」ボタンを押すまで表示しないようにします。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n上記コードの\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;div style='text-align: center; max-width: 450px; width: 100%'\u0026gt;\n\u0026lt;p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'\u0026gt;\u0026lt;\/p\u0026gt;\n\u0026lt;p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'\u0026gt;\u0026lt;\/p\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003Eを\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;div style='text-align: center; max-width: 450px; width: 100%'\u0026gt;\n\u0026lt;div class='contact-form-error-message' id='ContactForm1_contact-form-error-message'\u0026gt;\u0026lt;\/div\u0026gt;\n\u0026lt;div class='contact-form-success-message' id='ContactForm1_contact-form-success-message'\u0026gt;\u0026lt;\/div\u0026gt;\n\u0026lt;\/div\u0026gt;\u003C\/pre\u003Epからdivに書き換えます。\u003Cbr \/\u003E\n\u003Ch3\u003E2. お問い合わせ内容の行数を増やす\u003C\/h3\u003E「お問い合わせ内容」の行数を増やしたり、減らしたりする場合は、上記コード「rows='5'」の数字を変更する。入力した数字がそのまま行数になります。上記画像の行数は10です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n数字を増やしても増やさなくても入力できる文字数に違いはありません。\u003Cbr \/\u003E\n\u003Ch3\u003E3. 必須の文字を赤に変更\u003C\/h3\u003E文字の色を変更するときは、このように書き換えます。\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;div\u0026gt;メールアドレス\u0026lt;span style=\"color: red;\"\u0026gt;*必須\u0026lt;\/span\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/pre\u003E\u003Ch3\u003E4. 文字のフォントやサイズを変える\u003C\/h3\u003Eここでは次の内容を変更しています。\u003Cbr \/\u003E\n\u003Cul\u003E\u003Cli\u003E入力フォームの横幅\u003C\/li\u003E\n\u003Cli\u003E入力フォームと文言の位置調整\u003C\/li\u003E\n\u003Cli\u003E「送信する」ボタンのフォント\u003C\/li\u003E\n\u003C\/ul\u003E下記は、テンプレートの「HTMLの編集」から追加してください。\u003Cbr \/\u003E\n\u003Cpre\u003E.contact-form-name, .contact-form-email {\nmax-width: 300px;\nwidth: 100%;\nmargin-top: 3px;\nmargin-bottom: 10px;\n}\n\n.contact-form-email-message {\nmax-width: 480px;\nwidth: 100%;\n}\n\n.contact-form-button {\nfont-family:\"游ゴシック\",\"Yu Gothic\",\"meiryo\",\"メイリオ\",Helvetica,sans-serif;\nfont-size: 14px;\nfont-weight: normal;\n}\u003C\/pre\u003E\u003Cbr \/\u003E\n「お名前」と「メールアドレス」の幅を300px、「お問い合わせ内容」の幅を480pxに設定しています。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n「送信する」ボタンのフォントを游ゴシックにし、文字の太さを普通にし、文字サイズを少し大きくしています。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/www.memorou.com\/2016\/06\/bloggervaster2.html\"\u003EテンプレートをVaster2に変えて\u003C\/a\u003Eからは、コメント欄で代用してしていましたが、無事「お問い合わせフォーム」を設置することができました。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/6184086074874989816"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/6184086074874989816"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2016\/09\/bloggerhtmlscript.html","title":"Bloggerの連絡フォームをHTMLの編集なしでページに設置する方法【script編】"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/3.bp.blogspot.com\/-m0E3uUMjet4\/V9oyef_VYeI\/AAAAAAAADJA\/t5stuxBkEHs5tcda-AxqS8HKzS7kTrcqACLcB\/s72-c\/06.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-6769650542173021322"},"published":{"$t":"2016-06-30T19:27:00.001+09:00"},"updated":{"$t":"2017-02-19T01:16:16.170+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テンプレート"}],"title":{"type":"text","$t":"Bloggerの無料日本語レスポンシブテンプレート「Vaster2」のカスタマイズ"},"content":{"type":"html","$t":"前回テンプレートを変更してから、あと2ヶ月で2年が経ちます。今回は、Bloggerで私が唯一知っている日本語テンプレート、「Vaster」に変更しました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n海外テンプレートは「\u003Ca href=\"http:\/\/www.memorou.com\/2015\/12\/blogger.html\"\u003EBlogger トップページにカテゴリ別の記事一覧を表示できるテンプレート\u003C\/a\u003E」\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n「Vaster」は非常にシンプルなデザインで、WordPressを使ったことがある人なら一度は見たことのある「STINGER」を彷彿させる、カスタマイズのし甲斐があるテンプレートです。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n2016年6月現在、「Vaster2」が無料公開されています。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\nダウンロードは、\u003Ca href=\"http:\/\/toumaswitch.com\/vaster2\/\" target=\"_blank\" rel=\"nofollow\"\u003Eトーマスイッチ\u003C\/a\u003Eさんのブログからお願いします。\u003Cbr \/\u003E\nちなみにトーマスイッチさんのブログは、Bloggerの「Vaster2」ではなく、WordPressの「STINGER5」です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nカスタマイズの前には必ずバックアップを取りましょう。データのバックアップやCSSの追加、ガジェットの追加方法は「\u003Ca href=\"http:\/\/www.memorou.com\/2015\/01\/blogger_11.html\"\u003Eテンプレートカスタマイズ時の基本\u003C\/a\u003E」を参考にしてください。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n今までのテンプレートにCSSを追加している場合は、その部分をコピーしてメモ帳などに保存しておくとスムーズに移行できます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"mokuji\"\u003E\u003Cdiv class=\"mokuji-title\"\u003Eもくじ\u003C\/div\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\"#moku1\"\u003Eレイアウトの変更\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku2\"\u003Eヘッダーのカスタマイズ\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku3\"\u003Eメニューバーの変更\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku4\"\u003Eパンくずリストの上の空白を狭く\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku5\"\u003Eサイドバーのカスタマイズ\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku6\"\u003E月間アーカイブの変更\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku7\"\u003Eテキスト・見出しの変更\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku8\"\u003ESNSボタンの変更\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku9\"\u003E関連記事のカスタマイズ\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku10\"\u003E人気記事のカスタマイズ\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku11\"\u003Eトップページのカスタマイズ\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku12\"\u003E記事ページのカスタマイズ\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku13\"\u003Eフッターのカスタマイズ\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku14\"\u003Eレスポンシブ表示時のカスタマイズ\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku15\"\u003E表示速度を早くする\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku16\"\u003EVaster2を使うときの注意\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku17\"\u003Eお問い合わせページの追加\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku18\"\u003Eアドセンスを関連記事下に追加\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku19\"\u003Eコメントを左寄せに変更\u003C\/a\u003E\u003C\/li\u003E\n\u003C\/ul\u003E随時追加\u003Cbr \/\u003E\n\u003C\/div\u003E\u003Ch2\u003EVaster2のカスタマイズ\u003C\/h2\u003EVaster2には、無印とTDがあります。TDはテンプレートデザイナーのことで、TD付きのテンプレートは「上級者向け」からリンクの色や見出しのデザインが簡単に変更できます。\u003Cbr \/\u003E\n今回は無印をカスタマイズしました。\u003Cbr \/\u003E\n\u003Ca name=\"moku1\"\u003E\u003C\/a\u003E\u003Ch3\u003Eレイアウトの変更\u003C\/h3\u003Eレイアウトから不要なガジェットを削除し、表示位置がずれてしまったガジェットを移動します。\u003Cbr \/\u003E\n\u003Ca name=\"moku2\"\u003E\u003C\/a\u003E\u003Ch3\u003Eヘッダーのカスタマイズ\u003C\/h3\u003E基本的にHTML編集の「ヘッダー」内を編集します。\u003Cbr \/\u003E\n\u003Ch4\u003Eヘッダートップのボーダーとタイトル下の空白を削除\u003C\/h4\u003E\u003Cpre\u003E\u003Ccode\u003Eborder-top:7px solid #008ec2;\u003C\/code\u003E\u003C\/pre\u003Eと、2行下の\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Epadding-bottom: 30px;\u003C\/code\u003E\u003C\/pre\u003Eを削除する。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n空白を狭めるだけのときは、30pxを10pxなどに変更する。\u003Cbr \/\u003E\n\u003Ch4\u003Eヘッダーの上の空白を削除\u003C\/h4\u003E上から2つ目の\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Epadding-top:20px;\u003C\/code\u003E\u003C\/pre\u003Eを削除する。\u003Cbr \/\u003E\n\u003Ch4\u003Eタイトルロゴを真ん中に\u003C\/h4\u003Eスマホとタブレットで見たときに、タイトルロゴが真ん中に来るように変更する。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E@media screen and (max-width: 768px){\n#Header1_headerimg {\n    margin: 0 auto;\n}\n}\u003C\/code\u003E\u003C\/pre\u003Eを追加する\u003Cbr \/\u003E\n\u003Ca name=\"moku3\"\u003E\u003C\/a\u003E\u003Ch3\u003Eメニューバーの変更\u003C\/h3\u003Epagelistの1つ目\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ebackground-color:#4b99b5;\u003C\/code\u003E\u003C\/pre\u003Eを削除して\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Eborder-top: 1px solid #999;\nborder-bottom: 1px solid #999;\u003C\/code\u003E\u003C\/pre\u003Eを追加する。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n「ヘッダーナビゲーション」の\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ebackground: #4b99b5;\u003C\/code\u003E\u003C\/pre\u003Eを削除して\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ecolor: #fff;\u003C\/code\u003E\u003C\/pre\u003Eを#666に変更する。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nレスポンシブ表示時のカスタマイズは後述\u003Cbr \/\u003E\n\u003Ca name=\"moku4\"\u003E\u003C\/a\u003E\u003Ch3\u003Eパンくずリストの上の空白を狭く\u003C\/h3\u003E\u003Cpre\u003E\u003Ccode\u003E.breadcrumb-wrapper\u003C\/code\u003E\u003C\/pre\u003Eで検索して、30pxを10pxに変更する。\u003Cbr \/\u003E\n\u003Ca name=\"moku5\"\u003E\u003C\/a\u003E\u003Ch3\u003Eサイドバーのカスタマイズ\u003C\/h3\u003E\u003Ch4\u003Eサイドバーの幅を変更\u003C\/h4\u003Eサイドバーの幅を300pxにするために\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Epadding-left:40px;\u003C\/code\u003E\u003C\/pre\u003Eで検索して、30pxに変更する。\u003Cbr \/\u003E\n\u003Ca name=\"moku5\"\u003E\u003C\/a\u003E\u003Ch3\u003E月間アーカイブの変更\u003C\/h3\u003E\u003Cstrike\u003E階層表示のJSが機能していない気がします。\u003C\/strike\u003Eそんな人は、一度レイアウトからアーカイブを消して、改めて追加すると直るかもしれません。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n階層表示時の上下の間隔を狭くする\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E.archive-list ul\u003C\/code\u003E\u003C\/pre\u003Eで検索して、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Epadding: 0 0 0 1.25em;\nline-height: 1.25em;\u003C\/code\u003E\u003C\/pre\u003Eに変更する。\u003Cbr \/\u003E\n\u003Ca name=\"moku7\"\u003E\u003C\/a\u003E\u003Ch3\u003Eテキスト・見出しの変更\u003C\/h3\u003E\u003Ch4\u003Eブログ全体の文字をメイリオに変更\u003C\/h4\u003Efont-familyにメイリオを追加する。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Efont-family:\"meiryo\",\"メイリオ\",Helvetica,\"游ゴシック\",\"Yu Gothic\",sans-serif;\u003C\/code\u003E\u003C\/pre\u003E追加後は上記のようにまります。\u003Cbr \/\u003E\n\u003Ch4\u003E見出しの装飾\u003C\/h4\u003E記事中のH2の上に空白を追加する。\u003Cbr \/\u003E\n.entry-content h2で検索して、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Emargin-top: 30px;\u003C\/code\u003E\u003C\/pre\u003Eを追加する。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nH3の変更\u003Cbr \/\u003E\n.entry-content h3で検索して、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Emargin-bottom: 20px;\nmargin-top: 30px;\nborder-bottom: 1px solid #999;\u003C\/code\u003E\u003C\/pre\u003Eを追加し、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Epadding: 5px 0 5px 10px;\u003C\/code\u003E\u003C\/pre\u003Eに書き換える。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nH4の変更\u003Cbr \/\u003E\n上記のH3の下に、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E.entry-content h4 {\nfont-size:18px;\nborder-left:none;\n}\u003C\/code\u003E\u003C\/pre\u003Eを追加する。\u003Cbr \/\u003E\n\u003Ca name=\"moku8\"\u003E\u003C\/a\u003E\u003Ch3\u003ESNSボタンの変更\u003C\/h3\u003E「Vaster2」にはデフォルトでSNSボタンが表示されるようになっています。これを今まで使っていた「忍者おまとめボタン」に変更します。\u003Cbr \/\u003E\nSNSボタン編集で検索して、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;!--SNSボタン編集--\u0026gt;\n\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\nここに貼り付ける\n\u0026lt;\/b:if\u0026gt;\n\u0026lt;!--SNSボタン編集ここまで--\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E\u003C!--SNSボタン編集ここまで--\u003E 上記の「ここに貼り付ける」の部分に「忍者おまとめボタンのスクリプトコード」を貼り付けます。\u003Cbr \/\u003E\nifを消すとトップページの各記事の下にも表示できますが、ページを開くときに重くなります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/www.memorou.com\/2013\/12\/blogger_16.html\"\u003EBloggerに忍者おまとめボタンを簡単に設置する方法\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこの変更と同時にSNSボタンもレスポンシブ対応のものに変更しました。\u003Cbr \/\u003E\n\u003Ch4\u003ESNSボタンの変更\u003C\/h4\u003E\u003Cpre\u003E\u003Ccode\u003E\/*SNSボタンのカスタマイズ*\/\u003C\/code\u003E\u003C\/pre\u003Eから\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\/*   リンク\n----------------------------------------------- *\/\u003C\/code\u003E\u003C\/pre\u003Eの上までを全て削除する。\u003Cbr \/\u003E\n\u003Ca name=\"moku9\"\u003E\u003C\/a\u003E\u003Ch3\u003E関連記事のカスタマイズ\u003C\/h3\u003E\u003Ch4\u003E文字の太さを変更\u003C\/h4\u003E関連記事に表示されるタイトルを太字から普通に変更する。\u003Cbr \/\u003E\n#related-titleで検索して、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Efont-weight:700;\u003C\/code\u003E\u003C\/pre\u003Eの700を500に変更する。\u003Cbr \/\u003E\n\u003Ch4\u003Eリンクの色を変える\u003C\/h4\u003E#related-posts aで検索して、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ecolor :#666;\u003C\/code\u003E\u003C\/pre\u003Eを記事内のリンクの色と同じ色に変更する。\u003Cbr \/\u003E\n\u003Ch4\u003Eマウスオーバー時の色を変える\u003C\/h4\u003E#related-posts a:hoverで検索して、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ecolor :#fff;\nbackground :#008ec2;\u003C\/code\u003E\u003C\/pre\u003Eの色をそれぞれ#008ec2と#eeeに変更する。\u003Cbr \/\u003E\n\u003Ch4\u003E見出しの装飾を変える\u003C\/h4\u003E\u003Cpre\u003E\u003Ccode\u003E#related-posts h2 {\npadding :.5em .75em;\nmargin-bottom :30px;\nbackground :#424A76;\ncolor :#fff;\n}\u003C\/code\u003E\u003C\/pre\u003Eから\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E#related-posts h2 {\npadding: .5em .75em 0;\nmargin-bottom: 30px;\ncolor: #111;\nborder-bottom: 1px solid #777;\n}\u003C\/code\u003E\u003C\/pre\u003Eに変更し、背景をなくして文字の下に線を引く\u003Cbr \/\u003E\n\u003Ch4\u003E表示する文字を変える\u003C\/h4\u003E「この記事の関連記事」から「この記事に関連する記事」変更する。\u003Cbr \/\u003E\nこの記事の関連記事で検索して、好きな文字に書き換える。\u003Cbr \/\u003E\n\u003Ch4\u003E表示する記事数を変える\u003C\/h4\u003Eデフォルトでは関連記事が8件表示される。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Emaxresults=8\u003C\/code\u003E\u003C\/pre\u003Eで検索して、8の部分を表示したい件数に変更する。今回は6件表示に変更しました。\u003Cbr \/\u003E\n表示する件数に関係なく、サムネイル画像の大きさは変わらない。画像のサイズをCSSで変更しないのであれば、4の倍数の件数にすると見た目が崩れない。それ以外の件数にする場合は、サイズを変更しないと空白ができます。\u003Cbr \/\u003E\n\u003Ch4\u003E画像の大きさを変える\u003C\/h4\u003E1行に4件表示している状態で、画像の大きさが幅150pxに設定されているため、3件表示するときは幅200pxにするとピッタリはまります。この際、高さも変更することを忘れずに。\u003Cbr \/\u003E\n150:100=200:x　x=133.333\u003Cbr \/\u003E\n幅200pxに指定した場合は、高さを133pxにするとほぼ同一の比率で拡大できます。\u003Cbr \/\u003E\n#related-posts .related_imgで検索して、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ewidth :150px;\nheight :100px;\u003C\/code\u003E\u003C\/pre\u003Eから\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ewidth :200px;\nheight :133px;\u003C\/code\u003E\u003C\/pre\u003Eに変更する。\u003Cbr \/\u003E\n\u003Ch4\u003Eタイトルの幅を広げる\u003C\/h4\u003E上記同様に、#related-titleの幅も200pxに変更する。高さは特に変える必要はない。\u003Cbr \/\u003E\nタイトルの幅を変更したときはレスポンシブ表示に幅の指定を追加する必要があります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nレスポンシブ表示については後述\u003Cbr \/\u003E\n\u003Ca name=\"moku10\"\u003E\u003C\/a\u003E\u003Ch3\u003E人気記事のカスタマイズ\u003C\/h3\u003E.popular-post ul li aで検索して、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Efont-size :15px;\ncolor :#666;\nfont-weight :700;\u003C\/code\u003E\u003C\/pre\u003E文字の大きさを14pxに、色を#111に、太さを500に変更する。\u003Cbr \/\u003E\n\u003Ch4\u003Eマウスオーバー時\u003C\/h4\u003Eマウスオーバー時の色を記事内のリンクの色と同じにして、アンダーラインを表示させる。\u003Cbr \/\u003E\n.popular-post ul li a:hoveで検索してカラーを変更、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Etext-decoration: underline;\u003C\/code\u003E\u003C\/pre\u003Eを追加する。\u003Cbr \/\u003E\n\u003Ca name=\"moku11\"\u003E\u003C\/a\u003E\u003Ch3\u003Eトップページのカスタマイズ\u003C\/h3\u003E\u003Ch4\u003E時計マークを非表示\u003C\/h4\u003E投稿日時を非表示にしても消えない時計マークを非表示にする。\u003Cbr \/\u003E\n.post-timestampで検索すると3つ出てくるので、それぞれに\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Edisplay: none;\u003C\/code\u003E\u003C\/pre\u003Eを追加するか、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E.post-timestamp {\ndisplay: none;\n}\u003C\/code\u003E\u003C\/pre\u003Eを追加して、一度に全部消す。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n記事ページの時計も同時に消えます。\u003Cbr \/\u003E\n\u003Ch4\u003E記事タイトルの変更\u003C\/h4\u003E文字の色と大きさを変更する。幅を狭めたときと2つあるので注意。\u003Cbr \/\u003E\n.article-list-title h2で検索して、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ecolor:#666;\nfont-size:23px;\u003C\/code\u003E\u003C\/pre\u003Eを#111と20pxに変更する。\u003Cbr \/\u003E\n\u003Ch4\u003E抜粋の変更\u003C\/h4\u003E文字の色を変更する。\u003Cbr \/\u003E\n.snippetで検索して、#333に変更する。\u003Cbr \/\u003E\n\u003Ch4\u003E新着記事を表示しない\u003C\/h4\u003Eサイドバーに設置している新着記事をトップページにだけ表示しないようにします。\u003Cbr \/\u003E\n自分で付けたタイトル（新着記事・新しい投稿など）かidで検索する。\u003Cbr \/\u003E\nこのブログの場合は下記のようになっている。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;b:widget id='Feed1' locked='false' title='新着記事' type='Feed' version='1' visible='true'\u0026gt;\n\u0026lt;b:includable id='main'\u0026gt;\n\u0026lt;h2\u0026gt;\u0026lt;data:title\/\u0026gt;\u0026lt;\/h2\u0026gt;\n\u0026lt;div class='widget-content' expr:id='data:widget.instanceId + \u0026amp;quot;_feedItemListDisplay\u0026amp;quot;'\u0026gt;\n\u0026lt;span style='filter: alpha(25); opacity: 0.25;'\u0026gt;\n\u0026lt;a expr:href='data:feedUrl'\u0026gt;\u0026lt;data:loadingMsg\/\u0026gt;\u0026lt;\/a\u0026gt;\n\u0026lt;\/span\u0026gt;\n\u0026lt;\/div\u0026gt;\n\u0026lt;b:include name='quickedit'\/\u0026gt;\n\u0026lt;\/b:includable\u0026gt;\n\u0026lt;\/b:widget\u0026gt;\u003C\/code\u003E\u003C\/pre\u003Eこれに魔法のコードでおなじみの\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;b:if cond='data:blog.url != data:blog.homepageUrl'\u0026gt;\n\u0026lt;\/b:if\u0026gt;\u003C\/code\u003E\u003C\/pre\u003Eを追加する。\u003Cbr \/\u003E\nただし、widgetの外ではなくincludableの内に追加します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name=\"moku12\"\u003E\u003C\/a\u003E\u003Ch3\u003E記事ページのカスタマイズ\u003C\/h3\u003E\u003Ch4\u003Eブラウザの幅を縮めたときに左側に余白を作る\u003C\/h4\u003E.date-outerで検索して、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Epadding-left: 10px;\u003C\/code\u003E\u003C\/pre\u003Eを追加し、40pxを30pxに変更する。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこれに伴い、レスポンシブの.post-bodyのpaddingを変更する。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Epadding: 0px 15px 0px 5px;\u003C\/code\u003E\u003C\/pre\u003E\u003Ch4\u003E記事とサイドバーの区切りを変える\u003C\/h4\u003E記事とサイドバーの間にある線を消します。\u003Cbr \/\u003E\n.date-outerで検索して、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Eborder-right:1px solid #e4e4e4;\u003C\/code\u003E\u003C\/pre\u003Eを削除する。線の種類や太さ、色を変えたい場合は適宜変更する。\u003Cbr \/\u003E\n※このコードはデフォルトと違う可能性があります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n削除した場合、気になる人はレスポンシブのコードも同時に削除する。\u003Cbr \/\u003E\n.date-outerの2つ目の\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Eborder-right:none !important;\u003C\/code\u003E\u003C\/pre\u003Eを削除する。\u003Cbr \/\u003E\n\u003Ch4\u003E「Previous」と「Next」を「前へ」と「次へ」に変更する\u003C\/h4\u003E;Previousで検索してPreviousを「前へ」に、\u003Cbr \/\u003E\nすぐ下のNextを「次へ」に変更する\u003Cbr \/\u003E\n\u003Ca name=\"moku13\"\u003E\u003C\/a\u003E\u003Ch3\u003Eフッターのカスタマイズ\u003C\/h3\u003E\u003Ch4\u003E線を引く\u003C\/h4\u003Eコンテンツとの境目に線を引き、下の空白を狭くする。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E.footer-outer {\npadding-top: 10px;\npadding-bottom: 10px;\nborder-top: 1px solid #ebebeb;\n}\u003C\/code\u003E\u003C\/pre\u003Eを追加する。\u003Cbr \/\u003E\n\u003Ch4\u003E色をつける\u003C\/h4\u003E上記と同じ場所に\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ecolor:#eee;\nbackground-color: #000;\u003C\/code\u003E\u003C\/pre\u003Eを追加する。上は文字の色\u003Cbr \/\u003E\n\u003Ch4\u003Eメニューバーを設置する\u003C\/h4\u003Eフッターにメニューを追加します。\u003Cbr \/\u003E\nレイアウトのfooterに「HTML\/JavaScript」を追加する。\u003Cbr \/\u003E\nHTMLの編集に下記を追加する。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;nav class=\"grobal-navi\"\u0026gt;\n \u0026lt;ul class=\"footer-nav\"\u0026gt;\n  \u0026lt;li\u0026gt;\n   \u0026lt;a href=\"リンク先URL\"\u0026gt;\n   テキスト\n   \u0026lt;\/a\u0026gt;\n  \u0026lt;\/li\u0026gt;\n  \u0026lt;li\u0026gt;\n   \u0026lt;a href=\"リンク先URL\"\u0026gt;\n   テキスト\n   \u0026lt;\/a\u0026gt;\n  \u0026lt;\/li\u0026gt;\n \u0026lt;\/ul\u0026gt;\n\u0026lt;\/nav\u0026gt;\n\u0026lt;div class=\"clear\"\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E続いて、テンプレートのHTMLの編集からCSSを追加します。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E.footer-nav {\n  padding: 0 !important;\n}\n\n.footer-nav li {\n  float: left;\n  list-style: none;\n  font-size: 14px;\n  padding: 0;\n}\n\n.footer-nav a {\n  padding: 10px 20px;\n  font-size: 14px;\n  color: #666;\n  text-decoration: none;\n  display: block;\n  transition: .3s;\n}\n\n.footer-nav a:hover {\n  background-color: #666;\n  color: #fff;\n  text-decoration: none;\n}\u003C\/code\u003E\u003C\/pre\u003Eヘッダーナビをほぼそのまま貼り付けているので、色やサイズなどは適宜変更してください。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name=\"moku14\"\u003E\u003C\/a\u003E\u003Ch2\u003Eレスポンシブ表示時のカスタマイズ\u003C\/h2\u003E「Vaster2」のレスポンシブ表示は、横幅が768px以下か、それ以上かの2種類しかありません。\u003Cbr \/\u003E\n今回ここまでにしてきたカスタマイズ内容だと、2種類では表示がおかしくなる箇所もあります。例えば、関連記事の画像の大きさがそれです。\u003Cbr \/\u003E\nパソコンのブラウザを徐々に狭めていくと、768pxになった瞬間に画像が小さくなってしまいます。これはスマホで見たときに見やすくするためで、タブレットなどの少し大きな画面の場合は逆に見づらくなってしまいます。そこで、もう一つ480px以下の表示を作り画像を三段階で大きさが変わるようにカスタマイズします。\u003Cbr \/\u003E\n\u003Ch3\u003E関連記事の画像の大きさ\u003C\/h3\u003Eまず、レスポンシブデザインの#related-posts .related_imgを\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ewidth:140px;\nheight:100px;\u003C\/code\u003E\u003C\/pre\u003Eから\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ewidth:240px;\nheight:160px;\u003C\/code\u003E\u003C\/pre\u003Eに変更する。\u003Cbr \/\u003E\n次に、768pxの｝以降に、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E@media screen and (max-width: 480px){\n#related-posts .related_img{\nwidth:140px;\nbox-sizing:border-box;\nheight:100px;\n}\n#related-title {\nwidth :150px;\n}\n}\u003C\/code\u003E\u003C\/pre\u003Eを追加する。\u003Cbr \/\u003E\nこれで、少し大きい画像が546pxまで1行に2件まで表示できるようになります。545px以下は1列の表示になり、480px以下で2列の表示切り替わります。\u003Cbr \/\u003E\n数値は適宜変更してください。\u003Cbr \/\u003E\n\u003Ca name=\"moku15\"\u003E\u003C\/a\u003E\u003Ch2\u003E表示速度を早くする\u003C\/h2\u003E「Vaster2」で少し残念なのは、シンプルなデザインなのにページの表示スピードが遅い（重い）というところだ。\u003Ca href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\"\u003EPageSpeed Insights\u003C\/a\u003EでURLを入力し、遅ければ改善することをオススメする。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nグーグルではモバイルネットワークで1秒未満でページをレンダリングすることを推奨している。\u003Cbr \/\u003E\n\u003Ca href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/mobile\"\u003EPageSpeed Insights でのモバイル解析\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPageSpeed Insightsの説明は省くとして、当ブログの表示スピードは下記のようになっている。\u003Cbr \/\u003E\n「Vaster2」変更後の修正前\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/1.bp.blogspot.com\/-YbHCUB3Axp0\/V3zEpBc1k0I\/AAAAAAAAC_0\/bxcpDDhmSZsPur55O1kHkx2wrD6OF3jzgCLcB\/s1600\/002.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"56\" src=\"https:\/\/1.bp.blogspot.com\/-YbHCUB3Axp0\/V3zEpBc1k0I\/AAAAAAAAC_0\/bxcpDDhmSZsPur55O1kHkx2wrD6OF3jzgCLcB\/s320\/002.jpg\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eモバイルが62点、パソコンが72点となっている。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n※この記事は素人が作成したものです。正しい方法ではない可能性も十分あります。ここに記載した内容は、同等の速さになることを保障するもではありません。むしろ遅くなることもあります。また、遅くなるだけではなく動作すらしなくなる可能性もあります。デモサイトなどでテストにテストを重ねてから、すべて自己責任で実行するようにしてください。最低限バックアップを取ることを強くススメます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nひとまず、「黄色い！の修正を考慮」は置いておいて、「赤い！の修正が必要」から改善していきます。「修正方法を表示」すると改善のヒント（答え）が書かれている。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/3.bp.blogspot.com\/-hS68fBsuHFY\/V3zIlbnoSSI\/AAAAAAAADAA\/lMAlKk99bnEW1o-3WreaMTXS3cBdkUQ6QCLcB\/s1600\/003.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"81\" src=\"https:\/\/3.bp.blogspot.com\/-hS68fBsuHFY\/V3zIlbnoSSI\/AAAAAAAADAA\/lMAlKk99bnEW1o-3WreaMTXS3cBdkUQ6QCLcB\/s320\/003.jpg\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003EWordPressの場合、プラグインを入れることで簡単に改善することができる。ことが多いが、Bloggerにはなさそうなので自力で少しずつ改善していく。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n画像を見てわかるとおり、「レンダリングをブロックするスクリプトソースが11個、CSSリソースが5個あります」と教えてくれている。\u003Cbr \/\u003E\nこの中には、「Vaster2」とは直接関係のない「忍者おまとめボタン」のソースも含まれている。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch3\u003Eページスピードを早くするためにやったこと\u003C\/h3\u003E\u003Ch4\u003E1.javascriptを\/bodyの直前に移動\u003C\/h4\u003E元々、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;head\u0026gt;\n\u0026lt;script src='http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.2\/jquery.min.js' type='text\/javascript'\/\u0026gt;\n\u0026lt;link href='https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.4.0\/css\/font-awesome.min.css' rel='stylesheet'\/\u0026gt;\u003C\/code\u003E\u003C\/pre\u003Eとなっていたところを、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;script src='http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.2\/jquery.min.js' type='text\/javascript'\/\u0026gt;\u003C\/code\u003E\u003C\/pre\u003Eだけ切り取って、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;\/div\u0026gt;\n\u0026lt;script src='http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.2\/jquery.min.js' type='text\/javascript'\/\u0026gt;\n\u0026lt;\/body\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E\/bodyの直前に貼り付けた。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこの結果、\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/3.bp.blogspot.com\/-kFbNoPG2Lmg\/V3zPEFVboWI\/AAAAAAAADAQ\/gYImazJv-Sssew6LVsaUtmRNCv79bshRQCLcB\/s1600\/004.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"53\" src=\"https:\/\/3.bp.blogspot.com\/-kFbNoPG2Lmg\/V3zPEFVboWI\/AAAAAAAADAQ\/gYImazJv-Sssew6LVsaUtmRNCv79bshRQCLcB\/s320\/004.jpg\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eモバイルが66点、パソコンが79点まで改善した。\u003Cbr \/\u003E\nその代わり、モバイル表示時にメニューの開閉ができなくなるので注意してください。\u003Cbr \/\u003E\n\u003Ch4\u003E2.Google+ウィジェットの廃止\u003C\/h4\u003E今まで使用していた「Google+フォロワー」と「Google+バッジ」を廃止して、「\u003Ca href=\"https:\/\/developers.google.com\/+\/web\/follow\/\"\u003EGoogle+ Follow Button\u003C\/a\u003E」で作成したボタンを設置した。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/1.bp.blogspot.com\/-W4WWDqpJwDY\/V4htCIwSUaI\/AAAAAAAADEI\/Of0H6870faks6ggXWDAFUJwkgoXTtNaygCKgB\/s1600\/05.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-W4WWDqpJwDY\/V4htCIwSUaI\/AAAAAAAADEI\/Of0H6870faks6ggXWDAFUJwkgoXTtNaygCKgB\/s320\/05.png\" width=\"320\" height=\"181\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E詳細オプションのタグを解析で「任意のタイミング」を選択すると、読み込みを遅らせることができる。右側に表示される「ウィジェットを――」と「レンダリングを――」のコードをガジェットの追加で「HTML\/JavaScript」に貼り付ければ表示できる。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこの結果トップページ（今までは個別ページ）の表示速度は、\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/4.bp.blogspot.com\/-Uq1bweBN29c\/V4hv2TtAviI\/AAAAAAAADEY\/Zq0MvwooDbIBdaH1ttGiUzUOiVaWTL-WACLcB\/s1600\/06.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-Uq1bweBN29c\/V4hv2TtAviI\/AAAAAAAADEY\/Zq0MvwooDbIBdaH1ttGiUzUOiVaWTL-WACLcB\/s320\/06.jpg\" width=\"320\" height=\"55\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eモバイルが71点、パソコンが86点になった。トップページの元のスピードを保存していなかったため比較はできません。\u003Cbr \/\u003E\n\u003Ch4\u003Eスマホ表示時のメニューをカスタマイズ\u003C\/h4\u003E上記で使えなくなったメニューの開閉ボタンを非表示にして、ボタン風に変更する。\u003Cbr \/\u003E\nまずは、開閉ボタンを非表示にする。javascriptコード自体を削除してもいいが、また使いたくなったときのために消さずにCSSで非表示にします。\u003Cbr \/\u003E\n.button-toggleで検索して、レスポンシブデザインの\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Edisplay:block!important\u003C\/code\u003E\u003C\/pre\u003Eを\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Edisplay:none\u003C\/code\u003E\u003C\/pre\u003Eに書き換えます。\u003Cbr \/\u003E\n次に、リンクをボタン風にカスタマイズします。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/www.memorou.com\/2015\/02\/stinger5.html\"\u003Eスマホとタブレットサイズ表示時のメニューバーをカスタマイズ\u003C\/a\u003Eの表示方法と同様に変更します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n.header-nav liで検索して、レスポンシブデザインの方を\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E.header-nav li {\nfloat:none;\n}\u003C\/code\u003E\u003C\/pre\u003Eから\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E.header-nav li {\nborder: 1px solid #666;\nmargin: 1px;\nwidth: 48%;\nborder-radius: 6px;\ntext-align: center;\n}\u003C\/code\u003E\u003C\/pre\u003Eに変更します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n3列表示にしたいときは48%を32%に変えてください。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name=\"moku16\"\u003E\u003C\/a\u003E\u003Ch2\u003EVaster2を使うときの注意\u003C\/h2\u003E\u003Ch3\u003Eアドセンスを楽に設置したとき\u003C\/h3\u003EVaster2には、アドセンスを記事の途中と記事下に簡単に設置できる、便利な機能がついています。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこの機能を使うときの注意点として、記事中と記事下の両方にアドセンスを設置数する場合、moreタグがない記事は記事下にアドセンスが2つ並ぶことになります。\u003Cbr \/\u003E\nmoreタグがないときは表示されないのではなく「記事下に行く」ということです。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこれは、スマホ表示で見たときにはポリシー違反になるので、一度すべての記事にタグが入っているか確認することをおすすめします。※最新のポリシーは、ご自身で確認してください。\u003Cbr \/\u003E\n\u003Ch2\u003Eカスタマイズの追加\u003C\/h2\u003E\u003Ca name=\"moku17\"\u003E\u003C\/a\u003E\u003Ch3\u003Eお問い合わせページの追加\u003C\/h3\u003Eページに連絡フォームを使ったお問い合わせページを追加します。\u003Cbr \/\u003E\nHTMLの編集なしで、コピペで簡単に設置できます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n現在、サイドバーやフッターに連絡フォームを設置している方にもオススメです。\u003Cbr \/\u003E\n詳しくは「\u003Ca href=\"http:\/\/www.memorou.com\/2016\/09\/bloggerhtmlscript.html\"\u003Eお問い合わせページの追加\u003C\/a\u003E」へ\u003Cbr \/\u003E\n\u003Ca name=\"moku18\"\u003E\u003C\/a\u003E\u003Ch3\u003Eアドセンスを関連記事下に追加\u003C\/h3\u003E関連記事とコメントの間にアドセンスを追加します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;\/div\u0026gt;\u0026lt;div class='clear'\/\u0026gt;\n\u0026lt;\/b:if\u0026gt;\nここに下のコードを追加\n\u0026lt;div class='post-footer'\/\u0026gt;\n                    \u0026lt;!--関連記事ここまで--\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E上の「ここに下のコードを追加」部分に下記のコードを追加します。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\nここにアドセンスコード\n\u0026lt;\/b:if\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E上の「ここにアドセンスコード」部分に自分のアドセンスコードを追加します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nifを削除するとトップページの記事の下にも表示できます。※規約違反にならないように注意\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nうまく表示されない場合は「\u003Ca href=\"Bloggerの記事タイトル下と記事下にアドセンス広告を設置する方法\"\u003EBloggerの記事タイトル下と記事下にアドセンス広告を設置する方法\u003C\/a\u003E」を参考にしてください。\u003Cbr \/\u003E\n\u003Ca name=\"moku19\"\u003E\u003C\/a\u003E\u003Ch3\u003Eコメントを左寄せに変更\u003C\/h3\u003Eコメントの文字が「均等割付」になっているのを「左寄せ」に変更します。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E.comments .comments-content .comment-content {\n  text-align: left;\n}\u003C\/code\u003E\u003C\/pre\u003Eを追加する。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/6769650542173021322"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/6769650542173021322"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2016\/06\/bloggervaster2.html","title":"Bloggerの無料日本語レスポンシブテンプレート「Vaster2」のカスタマイズ"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-YbHCUB3Axp0\/V3zEpBc1k0I\/AAAAAAAAC_0\/bxcpDDhmSZsPur55O1kHkx2wrD6OF3jzgCLcB\/s72-c\/002.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-6400434230200627984"},"published":{"$t":"2015-12-14T18:38:00.000+09:00"},"updated":{"$t":"2015-12-14T18:44:22.454+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"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":"Bloggerに新たに導入された「注目の投稿」ガジェットの設置と、見た目のカスタマイズメモです。「注目の投稿」は選択した投稿をハイライト表示できるガジェットで、過去の記事に埋もれてしまったみんなに読んでもらいたい記事などを好きな場所に表示できます。\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-gMlo7wD-naA\/Vm5XpqLTBrI\/AAAAAAAAC50\/Y4z6V9yL2wk\/s1600\/02.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"295\" src=\"http:\/\/4.bp.blogspot.com\/-gMlo7wD-naA\/Vm5XpqLTBrI\/AAAAAAAAC50\/Y4z6V9yL2wk\/s320\/02.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\n今回はトップページの左下「禁煙」の下に「禁煙3ヶ月――」を追加します。\u003Cbr \/\u003E\n\u003Ch2\u003E\n「注目の投稿」の設置と設定\u003C\/h2\u003E\n\u003Cdiv\u003E\n設置場所、設定ともに後から変更可能です。\u003C\/div\u003E\n\u003Ch3\u003E\n設置\u003C\/h3\u003E\n\u003Cdiv\u003E\n表示したい場所の「ガジェットを追加」をクリックして、「注目の投稿」を追加します。\u003C\/div\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-Ls-Zg64cMcc\/Vm5eIptwa7I\/AAAAAAAAC6E\/_Bosaz7BQEI\/s1600\/03.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"83\" src=\"http:\/\/1.bp.blogspot.com\/-Ls-Zg64cMcc\/Vm5eIptwa7I\/AAAAAAAAC6E\/_Bosaz7BQEI\/s320\/03.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\n\u003Ch3\u003E\n設定\u003C\/h3\u003E\n\u003Cdiv\u003E\nガジェットのタイトルを変更したいときは、「注目の投稿」を変更します。\u003C\/div\u003E\n\u003Cdiv\u003E\n\u003Cbr \/\u003E\u003C\/div\u003E\n\u003Cdiv\u003E\n投稿のタイトルと画像を表示したくないときは、チェックを外します。\u003C\/div\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-J8GB_MBbjd8\/Vm5h05khd6I\/AAAAAAAAC6Q\/lpZCp7FXjzg\/s1600\/04.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"177\" src=\"http:\/\/2.bp.blogspot.com\/-J8GB_MBbjd8\/Vm5h05khd6I\/AAAAAAAAC6Q\/lpZCp7FXjzg\/s320\/04.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\n\u003Cdiv\u003E\n\u003Cbr \/\u003E\u003C\/div\u003E\n\u003Cdiv\u003E\n表示する投稿は、「注目の投稿を選択」でラベルと記事内の文字から絞り込み検索ができます。\u003C\/div\u003E\n\u003Cdiv\u003E\n\u003Cbr \/\u003E\u003C\/div\u003E\n\u003Cdiv\u003E\n「保存」を押して配置を変更したら完了です。\u003C\/div\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-Nuse5jfKiY0\/Vm5n7LMDVaI\/AAAAAAAAC6g\/WENhm2DBM1M\/s1600\/05.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"224\" src=\"http:\/\/3.bp.blogspot.com\/-Nuse5jfKiY0\/Vm5n7LMDVaI\/AAAAAAAAC6g\/WENhm2DBM1M\/s320\/05.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\n上の画像は、ガジェットのタイトルを「注目の投稿」、投稿タイトルと画像ともに「表示」の設定にしています。\u003Cbr \/\u003E\n\u003Ch2\u003E\n見た目のカスタマイズ\u003C\/h2\u003E\n\u003Cdiv\u003E\n「注目の投稿」と言うだけあって、デフォルトではガジェットタイトルがH2、記事タイトルがH3になっています。ガジェットタイトルは「注目の投稿」です。\u003C\/div\u003E\n\u003Ch3\u003E\nガジェットタイトルのタグを変更\u003C\/h3\u003E\n\u003Cdiv\u003E\nこのブログの場合、トップページのカテゴリタイトル（WordPress、Blogger、禁煙やSeesaaなど）は、H2となっています。そこで、今回はガジェットタイトルをH3に変更します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-cXXzX14F6kA\/Vm6IUy_eoiI\/AAAAAAAAC6w\/RPiI7dBFYXQ\/s1600\/07.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"73\" src=\"http:\/\/2.bp.blogspot.com\/-cXXzX14F6kA\/Vm6IUy_eoiI\/AAAAAAAAC6w\/RPiI7dBFYXQ\/s320\/07.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\nテンプレート＞HTMLの編集から注目の投稿（上で設定したガジェットタイトル）を検索し、そのすぐ下にある\u003C\/div\u003E\n\u003Cpre\u003E\u0026lt;h2 class='title'\u0026gt;\u0026lt;data:title\/\u0026gt;\u0026lt;\/h2\u0026gt;\n\u003C\/pre\u003E\nのh2をh3にそれぞれ変更します。\u003Cbr \/\u003E\n\u003Ch3\u003E\n記事タイトルのタグを変更\u003C\/h3\u003E\n続いて記事タイトルをDIVに変更します。\u003Cbr \/\u003E\n上で検索したすぐ下にある\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;h3\u0026gt;\u0026lt;a expr:href='data:postUrl'\u0026gt;\u0026lt;data:postTitle\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/h3\u0026gt;\u003C\/pre\u003E\nのh3をdivにそれぞれ変更します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n変更後は、下の画像のようになります。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-Zt9J6lVVDXg\/Vm6KZGLIdqI\/AAAAAAAAC68\/Bb0-6_wbtpU\/s1600\/08.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"206\" src=\"http:\/\/2.bp.blogspot.com\/-Zt9J6lVVDXg\/Vm6KZGLIdqI\/AAAAAAAAC68\/Bb0-6_wbtpU\/s320\/08.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\n\u003Ch3\u003E\n見た目の変更\u003C\/h3\u003E\nガジェットタイトルの見た目を変更したい場合は、\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;h2 class='title'\u0026gt;\u0026lt;data:title\/\u0026gt;\u0026lt;\/h2\u0026gt;\n\u003C\/pre\u003E\nのclassの方のtitleを変更して、cssを編集します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n記事タイトルの見た目を変更したい場合は、\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;h3\u0026gt;\u0026lt;a expr:href='data:postUrl'\u0026gt;\u0026lt;data:postTitle\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/h3\u0026gt;\u003C\/pre\u003E\nを\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;h3 class='attention'\u0026gt;\u0026lt;a expr:href='data:postUrl'\u0026gt;\u0026lt;data:postTitle\/\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/h3\u0026gt;\u003C\/pre\u003E\nのようにclassを追加して、cssを編集します。※classは一例です。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/6400434230200627984"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/6400434230200627984"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2015\/12\/blogger_14.html","title":"Blogger　「注目の投稿」の設置とカスタマイズ"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-gMlo7wD-naA\/Vm5XpqLTBrI\/AAAAAAAAC50\/Y4z6V9yL2wk\/s72-c\/02.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-2074241822005989275"},"published":{"$t":"2015-01-11T15:52:00.002+09:00"},"updated":{"$t":"2017-02-19T00:13:32.660+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"}],"title":{"type":"text","$t":"Bloggerのカスタマイズと使い方（シンプルテンプレート対応）"},"content":{"type":"html","$t":"Bloggerシンプルテンプレートのカスタマイズ、ガジェットやCSSの追加方法と基本的な設定方法など、Bloggerで今までに実際にやったカスタマイズをまとめました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nまだBloggerをはじめていない場合は、\u003Ca href=\"http:\/\/www.memorou.com\/2013\/12\/blogger_17.html\" target=\"\"\u003EBloggerを始める前の準備と予備知識\u003C\/a\u003Eへ\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"mokuji\"\u003E\u003Cdiv class=\"mokuji-title\"\u003Eもくじ\u003C\/div\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\"#moku1\"\u003Eカスタマイズ時の基本\u003C\/a\u003E【バックアップ・ガジェットの追加・CSSの追加】\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku2\"\u003E新着記事を表示\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku3\"\u003E人気の投稿の表示とカスタマイズ\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku4\"\u003Eコメント非表示の設定\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku5\"\u003E「続きを読む」関連\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku6\"\u003E記事内の見出し（h1、h2、h3）の装飾\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku7\"\u003Eサイドバーカスタマイズ\u003C\/a\u003E【背景色・メインカラムとの間に線】\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku8\"\u003Eファビコンの変更\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku9\"\u003E画像関連\u003C\/a\u003E【alt追加・完全削除】\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku10\"\u003E登録:投稿(Atom)を非表示\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku11\"\u003Eラベルの削除と一括編集\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku12\"\u003E検索結果表示で記事タイトルをサイトタイトルより先に表示\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#moku13\"\u003Eツイッターと連携\u003C\/a\u003E【投稿時に自動つぶやき】\u003C\/li\u003E\n\u003C\/ul\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ca name=\"moku1\"\u003E\u003C\/a\u003E \u003Ch2\u003Eカスタマイズ時の基本\u003C\/h2\u003E\u003Ch3\u003Eテンプレートのバックアップ\u003C\/h3\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-mkrUnpnlZXM\/Uqg2TIwxdvI\/AAAAAAAAA7Y\/Bk2550NhiUA\/s1600\/4.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-mkrUnpnlZXM\/Uqg2TIwxdvI\/AAAAAAAAA7Y\/Bk2550NhiUA\/s320\/4.png\" height=\"148\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nテンプレートをカスタマイズ（編集）するときは、念のためバックアップを取ります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n方法は、テンプレートを選択して、「バックアップ\/復元」をクリックします。\u003Cbr \/\u003E\n次に、テンプレートをすべてダウンロードをクリックして保存します。\u003Cbr \/\u003E\n\u003Ch3\u003Eガジェットの追加\u003C\/h3\u003E\u003Cdiv\u003Eレイアウトから追加したい場所の「ガジェットを追加」をクリックします。\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-WOEIBouFF1c\/VLIY9qoLE8I\/AAAAAAAACk4\/FCywI6eT7OM\/s1600\/04.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-WOEIBouFF1c\/VLIY9qoLE8I\/AAAAAAAACk4\/FCywI6eT7OM\/s1600\/04.png\" height=\"132\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003Eガジェット追加画面で、追加したいガジェットを選択し詳細設定をします。\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-MrPnJf164Gk\/VLIZ2DjZOWI\/AAAAAAAAClA\/eb_EE3GuI6Q\/s1600\/05.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-MrPnJf164Gk\/VLIZ2DjZOWI\/AAAAAAAAClA\/eb_EE3GuI6Q\/s1600\/05.png\" height=\"300\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\n\u003C\/div\u003E\u003Ch3\u003ECSSの追加\u003C\/h3\u003E\u003Cdiv\u003ECSSの追加は、テンプレートの「カスタマイズ」か「HTMLの編集」から行います。\u003C\/div\u003E\u003Ch4\u003Eカスタマイズ\u003C\/h4\u003E\u003Cdiv\u003Eテンプレートの「カスタマイズ」をクリックします。\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-slEP3L2nd1E\/UpKxbpV3p6I\/AAAAAAAAAw4\/QVq0FqhxKAA\/s1600\/01.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-slEP3L2nd1E\/UpKxbpV3p6I\/AAAAAAAAAw4\/QVq0FqhxKAA\/s1600\/01.png\" height=\"219\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003E上級者向けの中から「CSSを追加」をクリックし、カスタムCSSを追加します。\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-cdMY774nrJY\/UpKynSiNwSI\/AAAAAAAAAxA\/ldQeiKuNI3M\/s1600\/02.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-cdMY774nrJY\/UpKynSiNwSI\/AAAAAAAAAxA\/ldQeiKuNI3M\/s1600\/02.png\" height=\"98\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ch4\u003EHTMLの編集\u003C\/h4\u003Eテンプレートの「HTMLの編集」から追加します。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-k8GYulIkpj0\/UszSGOOWe5I\/AAAAAAAABQE\/Uqn6qRAUahs\/s1600\/01.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-k8GYulIkpj0\/UszSGOOWe5I\/AAAAAAAABQE\/Uqn6qRAUahs\/s1600\/01.png\" height=\"103\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/www.memorou.com\/2013\/11\/bloggercss.html\"\u003E表示位置とCSSコードの対応図\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n特別な記載がない限り、ここではこの方法で行います。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name=\"moku2\"\u003E\u003C\/a\u003E \u003Ch2\u003E新着記事を表示する方法\u003C\/h2\u003Eマイブログのレイアウトから「フィード」のガジェットを追加します。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-O75MtQeHfmU\/VK-Dtdv0HbI\/AAAAAAAACkI\/mJjmFvUB4As\/s1600\/01.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-O75MtQeHfmU\/VK-Dtdv0HbI\/AAAAAAAACkI\/mJjmFvUB4As\/s1600\/01.png\" height=\"83\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eクリックすると、フィードの設定画面が開くので、フィードＵＲＬを入力して、次へをクリックします。\u003Cbr \/\u003E\nフィードURLには自分のブログのトップページのＵＲＬを入力します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nすると、タイトルや表示件数などが設定できるので、下に表示されるプレビューをみながら好みに合わせて設定します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n表示の説明\u003Cbr \/\u003E\nアイテムは、記事の表示件数（1件～５件の中から選べる）\u003Cbr \/\u003E\nアイテムの日付にチェックを入れると、英語で曜日、月、日、年が表示される。\u003Cbr \/\u003E\nアイテムのソース\/投稿者は、投稿者名\u003Cbr \/\u003E\nリンクを新しいウィンドウで開くは、テキストをクリックしたときに新しいウィンドウ（タブ）で開くようにするかを選べます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n最後に保存を押して、レイアウト画面で自分が配置したい場所にドラッグ＆ドロップで移動したら完成です。移動後に、配置を保存をクリックするのを忘れないようにしてください。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name=\"moku3\"\u003E\u003C\/a\u003E \u003Ch2\u003E人気の投稿の表示とカスタマイズ\u003C\/h2\u003E\u003Ch3\u003E人気の投稿を表示する方法\u003C\/h3\u003Eマイブログのレイアウトから「人気の投稿」のガジェットを追加します。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-4k5Ii22r-RM\/VK-GCnQgYUI\/AAAAAAAACkU\/g8l6wJc7Afk\/s1600\/02.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-4k5Ii22r-RM\/VK-GCnQgYUI\/AAAAAAAACkU\/g8l6wJc7Afk\/s1600\/02.png\" height=\"86\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eクリックすると、人気の投稿を設定する画面が開くので、タイトルや表示する内容などを設定します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n設定できる項目は、タイトル、閲覧数の期間、何を表示するかの3種類あり、投稿のタイトルは必ず表示する設定になっているので、それとあわせて記事内に画像がある場合にそれを表示するかしないか、記事の抜粋を表示するかどうかを決められます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n例えば、画像のサムネイルにチャックを入れて、抜粋のチェックをはずしたとする。\u003Cbr \/\u003E\n記事内に画像が無いときの表示はタイトルだけとなります。\u003Cbr \/\u003E\n\u003Ch3\u003E人気の投稿の文字を大きくする方法\u003C\/h3\u003E\u003Ca href=\"http:\/\/www.memorou.com\/2013\/11\/blogger_25.html\"\u003Eフォントの変更方法\u003C\/a\u003E \u003Cbr \/\u003E\n表示は投稿のタイトルと画像のサムネイルです。念のため、抜粋を表示しても問題なく表示されました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nまずはノーマルの状態の画像です。 \u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-8sQY3FCWsLo\/Uvr5ih7l1ZI\/AAAAAAAABeQ\/OA0rAl5zozs\/s1600\/01.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-8sQY3FCWsLo\/Uvr5ih7l1ZI\/AAAAAAAABeQ\/OA0rAl5zozs\/s1600\/01.png\" height=\"320\" width=\"258\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E少し文字サイズが小さく、タイトルがメインカラムの幅いっぱいまで使っているのが気になっていたため、文字を少し大きくして、使用する幅も少し狭めることにしました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-h5ILJ8R2zI0\/Uvr8J2EjprI\/AAAAAAAABec\/ibhImeJa9wE\/s1600\/02.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-h5ILJ8R2zI0\/Uvr8J2EjprI\/AAAAAAAABec\/ibhImeJa9wE\/s1600\/02.png\" height=\"320\" width=\"259\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E画像でもわかるように、文字サイズを大きくして、太くすることにより存在感が増したように思います。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nCSSに下記を追加します。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\/* 人気記事 *\/\n.PopularPosts .item-title{\nwidth: 95%;\nfont-size: 20px;\nfont-weight: bold;\n}\n\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\n「width」で横幅を%で指定します。\u003Cbr \/\u003E\n「font-size」で文字サイズを大きくします。\u003Cbr \/\u003E\n「font-weight」で文字を太くします。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n人気の投稿を複数設置していて、どちらか片方だけを変更したい場合は、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\/* 人気記事 *\/\n#PopularPosts2 .item-title{\nwidth: 95%;\nfont-size: 20px;\nfont-weight: bold;\n}\n\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\n上記のように、「PopularPosts」の前を「.」から「#」に変更して、後ろに数字をつけます。\u003Cbr \/\u003E\nこのブログの場合は、「1」がサイドバーの人気記事で、「2」がメインカラムでした。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name=\"moku4\"\u003E\u003C\/a\u003E \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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-IpB53PeMv9E\/UXnOwXDiLWI\/AAAAAAAAAK0\/-yBRnvCFkFU\/s1600\/%E8%A8%AD%E5%AE%9A%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-IpB53PeMv9E\/UXnOwXDiLWI\/AAAAAAAAAK0\/-yBRnvCFkFU\/s320\/%E8%A8%AD%E5%AE%9A%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88.jpg\" height=\"213\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ch3\u003E記事ごとに表示するかどうかを設定する方法\u003C\/h3\u003Eコメントを許可したくない記事（新しい投稿か、投稿の編集など）を開くと、右側に投稿の設定があります。その中からオプションをクリックすると、オプション内に閲覧者のコメントがあるので、許可しないを選んで完了をクリックします。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n上でコメントを非表示に設定していると出てこないので、こちらで設定する場合は非表示にしないように注意してください。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-hgGT40gX08U\/UXnSsNMJ7YI\/AAAAAAAAALE\/EJXv6xxe2Tk\/s1600\/%E6%8A%95%E7%A8%BF%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-hgGT40gX08U\/UXnSsNMJ7YI\/AAAAAAAAALE\/EJXv6xxe2Tk\/s320\/%E6%8A%95%E7%A8%BF%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88.jpg\" height=\"320\" width=\"178\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ca name=\"moku5\"\u003E\u003C\/a\u003E \u003Ch2\u003E記事の途中に「続きを読む」を表示する方法\u003C\/h2\u003E「長文になってしまったブログ記事を途中まで表示させたい。」「トップページをスッキリさせたいけど、表示する記事数を減らしたくない。」などというときに便利な、記事を途中で折りたたんで「続きを読む」を表示させ、クリックすると全文表示するようにします。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nBloggerの場合デフォルトでは「続きを読む」ではなく、「もっと読む」になっています。\u003Cbr \/\u003E\n\u003Ch3\u003E続きを読むの文字を変える方法\u003C\/h3\u003Eマイブログからレイアウトを選び、ブログの投稿の編集をクリックします。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-xM126gzNnOk\/VK-MzmaoVvI\/AAAAAAAACkk\/SSCHlRkSEQQ\/s1600\/03.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-xM126gzNnOk\/VK-MzmaoVvI\/AAAAAAAACkk\/SSCHlRkSEQQ\/s1600\/03.png\" height=\"130\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eすると、ブログ投稿の設定ができるので、「投稿ページのリンクテキスト」の横のボックスの文字を好きな言葉に変えれば完成です。\u003Cbr \/\u003E\n\u003Ch3\u003E記事を折りたたむ\u003C\/h3\u003E「もっと読む」を入れたい場所を決めて、本文を記入する場所の上にあるビジュアルエディタの、紙が半分に破けたようなボタンをクリックします。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/--I3SYa2BFy0\/UXvrc2l1N_I\/AAAAAAAAALs\/QLpmkwyJSLc\/s1600\/%E7%B6%9A%E3%81%8D.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/--I3SYa2BFy0\/UXvrc2l1N_I\/AAAAAAAAALs\/QLpmkwyJSLc\/s320\/%E7%B6%9A%E3%81%8D.png\" height=\"20\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eすると、点線とグレーのラインが引かれるので、線から下が折りたたまれて非表示になり「もっと読む」が表示されます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nＨＴＭＬで作成しているいる人は、\u0026lt;!--more--\u0026gt;と入力すると同じように「もっと読む」が表示され、記事が折りたたまれます。\u003Cbr \/\u003E\n\u003Ch3\u003E続きを読むの装飾\u003C\/h3\u003E背景を画像にすることや、「続きを読む」自体を画像にすることもできる。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\/*続きを読むの背景色*\/\n.jump-link{\nline-height: 250%; \/*テキストの行間*\/\ntext-align: center; \/*テキストの水平位置*\/\nheight: 40px;\nwidth: 150px;\nmargin: 0px 0px 0px 400px;\n}\n.jump-link a{\ndisplay: block;\nbackground:#dcdcdc; \/*背景色*\/\nborder-radius: 10px; \/*枠を丸角*\/\nborder: 2px solid #ababab; \/*枠の太さと色*\/\n}\n\n\/*マウスを乗せたときの背景色*\/\n.jump-link a:hover{\ntext-align: center;\ncolor:#ffffff; \/*テキストの色*\/\nbackground:#0000ff; \/*背景色*\/\ntext-decoration: none; \/*文字の下線なし*\/\n}\n\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\n背景を画像にしたい場合は、background:#dcdcdc;の部分を、background-image: url();に変えて()の中に画像がある場所のURLを入力します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name=\"moku6\"\u003E\u003C\/a\u003E \u003Ch2\u003E記事内の見出し（h1、h2、h3）を装飾する方法\u003C\/h2\u003E見出しはh2、小見出しはh3、準見出しはh4に対応している。h2はガジェットのタイトルにも使用されていて、h3は記事のタイトルにも使用されているので、 変更するときには注意が必要です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n記事本文中にh2やh3を使う場合は「class」をつけると、記事タイトルとガジェットタイトルとは別の装飾ができます。\u003Cbr \/\u003E\n\u003Ch3\u003EHTMLとCSSの書き方\u003C\/h3\u003E\u003Cdiv\u003E記事を書くときにHTMLで\u003C\/div\u003E\u003Cpre\u003E\u003Ccode\u003E\u0026lt;h2 class=\"main\"\u0026gt;\nh2の見出し\n\u0026lt;\/h2\u0026gt;\n\u003C\/code\u003E\u003C\/pre\u003Eのように記入します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\ncssへの記述は以下の通り。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\/* 記事内のh2 *\/\nh2.main {\nmargin:0.5em 0;\npadding: 3px 0px 5px 10px;\nfont-weight:normal; \/*テキストの太さ*\/\ncolor:#121212; \/*テキストの色*\/\nbackground: #FFFFFF; \/*背景の色*\/\nborder-left: 5px solid #121212; \u0026nbsp;\/* 枠の左側の太さと色*\/\nborder-bottom: 0px solid #121212; \/*枠の下側\u0026nbsp;の太さと色*\/\nborder-right: 0px solid #121212; \/*枠の右側\u0026nbsp;の太さと色*\/\nborder-top: 0px solid #121212; \/*枠の上側\u0026nbsp;の太さと色*\/\n}\n\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name=\"moku7\"\u003E\u003C\/a\u003E \u003Ch2\u003Eサイドバーのカスタマイズ\u003C\/h2\u003E\u003Ch3\u003Eサイドバーに背景色をつける方法\u003C\/h3\u003E\u003Cdiv\u003Eサイドバーの背景色は、2箇所変えることが出来ます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003C\/div\u003E\u003Cdiv\u003ECSSの記述は下記の通りです。\u003C\/div\u003E\u003Cpre\u003E\u003Ccode\u003E\n\/*サイドバー外側*\/\n.column-right-outer{\nbackground:#ff0000;\n}\n\n\/*サイドバーの内側*\/\n#sidebar-right-1{\nbackground:#ffff00;\n}\u003C\/code\u003E\n\u003C\/pre\u003E上が外側で、下が内側の背景色を指定しています。 わかりやすいように外側を赤、内側を黄色にしています。 \u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-5_AdaMalUQM\/UlN1r2bfJLI\/AAAAAAAAATI\/ocsGv9Ir5M0\/s1600\/%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E8%83%8C%E6%99%AF.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-5_AdaMalUQM\/UlN1r2bfJLI\/AAAAAAAAATI\/ocsGv9Ir5M0\/s320\/%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC%E8%83%8C%E6%99%AF.jpg\" height=\"320\" width=\"254\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n見た目はこのようになり、文字の背景と、その外側を囲う背景を変えることが出来ます。 どちらか片方だけを変えることも可能で、その場合は変えたくないほうのCSSを消します。 \u003Cbr \/\u003E\n\u003Ch3\u003Eサイドバーとメインの間に線を引く方法\u003C\/h3\u003E線を引くときは、innerで引かないとサイドバーがメインの下に回りこんでしまうことがあります。\u003Cbr \/\u003E\n回り込んだらpaddingとmarginで調節出来ますが、面倒なのでinnerの方でラインを引きます。\u003Cbr \/\u003E\nCSSの記述は下記の通りです。 \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\n\/*サイドバー外側*\/\n.column-right-inner{\nborder-left: 1px solid #ff0000;\n}\n\n\/*サイドバーの内側*\/\n#sidebar-right-1{\nborder-left: 1px solid #0000ff;\n}\n\u003C\/code\u003E\n\u003C\/pre\u003E上が外側で、下が内側の線を指定しています。わかりやすいように、外側を赤、内側を青にしています。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-RNUmOoys2vs\/UlN4cCQYmuI\/AAAAAAAAATU\/xrPaSFNd3YA\/s1600\/%E9%96%93%E3%81%AE%E7%B7%9A.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-RNUmOoys2vs\/UlN4cCQYmuI\/AAAAAAAAATU\/xrPaSFNd3YA\/s320\/%E9%96%93%E3%81%AE%E7%B7%9A.jpg\" height=\"148\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n見た目はこのようになり、border-leftの部分をtop,right,bottomを追加してサイドバーを囲む枠を作ることも出来ます。\u003Cbr \/\u003E\nどちらか片方だけでいい場合は、いらない方のCSSを消します。\u003Cbr \/\u003E\n\u003Ch3\u003E線を引く方法 その2\u003C\/h3\u003Eもしかしたらこちらのほうが一般的かもしれません。\u003Cbr \/\u003E\nメインカラムのサイドバー側に線を引きます。右にサイドバーがある場合は、右側に線を引きます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nCSSの記述は下記の通りです。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\n\/* メインカラムの右側 *\/\n#main{\nborder-right: 1px solid #ff0000;\n}\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name=\"moku8\"\u003E\u003C\/a\u003E \u003Ch2\u003Eファビコンの変更\u003C\/h2\u003E\u003Ch3\u003Eファビコンとは\u003C\/h3\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-uxksz8qKumU\/Unxq_hiAZYI\/AAAAAAAAAV8\/qQyDEqUK71Q\/s1600\/0.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-uxksz8qKumU\/Unxq_hiAZYI\/AAAAAAAAAV8\/qQyDEqUK71Q\/s320\/0.jpg\" height=\"88\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nファビコンは上の画像のように、タブ、URLの横やお気に入り登録（ブックマーク）したときに表示されます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nファビコンを変更する理由は、例えば、自分のサイトがお気に入りに登録されたとき、その他のお気に入りサイトとひと目で見分けがつくようにしたり、ブラウザのタブを多数開いているときに文字が隠れてしまってもファビコンで見分けがつくようにすることができます。\u003Cbr \/\u003E\n\u003Ch3\u003Eファビコンの変更方法\u003C\/h3\u003E変更前は上の画像の上二つのように、オレンジバックに白字のBのファビコンです。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n通常ファビコンは、jpg、gif、pngでは表示されず、icoでなくてはなりませんが、Bloggerの場合は正方形であれば自動で変換して表示してくれるので、とても簡単に変更することが出来ます。\u003Cbr \/\u003E\n\u003Ch4\u003Eファビコン用の画像を用意する\u003C\/h4\u003E先ほども書いたように正方形の画像を用意します。が、1つ注意する点があり、ファイルサイズが100KB未満の画像でなくてはありません。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nファビコンを作るときのポイントは、画像が16px×16pxになるので、小さくても目立つようにできるだけシンプルにします。\u003Cbr \/\u003E\n\u003Ch4\u003Eファビコンの編集\u003C\/h4\u003E画像の準備が出来たら、Bloggerのレイアウトをクリックして、ガジェットの追加と編集画面に移ります。 左上にファビコンのガジェットがあるので、「編集」をクリックします。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-RraVYAizH80\/Unx1t8t4heI\/AAAAAAAAAWM\/vrUA9LaimOA\/s1600\/1.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-RraVYAizH80\/Unx1t8t4heI\/AAAAAAAAAWM\/vrUA9LaimOA\/s320\/1.jpg\" height=\"153\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nすると、新しいウィンドウが開くので、「ファイルを選択」をクリックして、先ほど作った画像をアップロードします。アップロードができたら、「保存」を押して完了です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-4BGhdVqLdi8\/Unx4U_naH4I\/AAAAAAAAAWY\/Ua6JSxo3_n8\/s1600\/2.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-4BGhdVqLdi8\/Unx4U_naH4I\/AAAAAAAAAWY\/Ua6JSxo3_n8\/s320\/2.jpg\" height=\"156\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nサイトを見ても変更されていない場合は、ブラウザのキャッシュをクリアしてみてください。 \u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name=\"moku9\"\u003E\u003C\/a\u003E \u003Ch2\u003E画像関連\u003C\/h2\u003ESEO(検索エンジン最適化)にも多少効果があるといわれる、画像にalt属性やtitle属性を追加する方法です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nalt属性やtitle属性を追加することによって、画像検索からの流入も見込めるようになります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSEO(Search Engine Optimization)とは何なのか、という説明は省略します。\u003Cbr \/\u003E\n\u003Ch3\u003EBloggerに画像を挿入する\u003C\/h3\u003Eまずは普段通り、画像を挿入します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n投稿エディタで「画像を挿入」をクリックします。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-sYBBnIbLxtQ\/UpwUNhLwx3I\/AAAAAAAAA2c\/6J9WPWxVJ84\/s1600\/1.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-sYBBnIbLxtQ\/UpwUNhLwx3I\/AAAAAAAAA2c\/6J9WPWxVJ84\/s320\/1.png\" height=\"102\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E「ファイルを選択」をクリックして、挿入したい画像を選んだら、「開く」ボタンを押すと、アップロードされます。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-SoLukg0tWmw\/UpwWitVoceI\/AAAAAAAAA2o\/xqw4D3WSlvQ\/s1600\/2.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-SoLukg0tWmw\/UpwWitVoceI\/AAAAAAAAA2o\/xqw4D3WSlvQ\/s320\/2.png\" height=\"261\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nファイルを選択画面に戻るので、アップロードした画像を選択して、「選択した画像を追加」ボタンを押したら画像が挿入されます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n以前に画像をアップロードしている場合は、Picasaウェブアルバムに保存されているので、そこから探して挿入することができます。\u003Cbr \/\u003E\n\u003Ch3\u003E投稿画像にalt属性やtitle属性を追加する\u003C\/h3\u003E画像の挿入ができたら、その画像にalt属性やtitle属性を追加していきます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n挿入した画像にマウスを乗せると、矢印が十字になります。その状態で左クリックして、プロパティを選択します。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-K9MXDFqXwzo\/Upwpt4SRHVI\/AAAAAAAAA24\/3MfqTUGwolI\/s1600\/3.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-K9MXDFqXwzo\/Upwpt4SRHVI\/AAAAAAAAA24\/3MfqTUGwolI\/s320\/3.png\" height=\"103\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n画像のプロパティ画面になるので、titleとaltを入力したら、OKボタンを押して完了です。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-c8QbCasLRq0\/Upwp0rO3AbI\/AAAAAAAAA3A\/mUjJUY48V0k\/s1600\/4.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-c8QbCasLRq0\/Upwp0rO3AbI\/AAAAAAAAA3A\/mUjJUY48V0k\/s320\/4.png\" height=\"119\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch4\u003Ealt属性とtitle属性\u003C\/h4\u003Ealt属性は、画像が表示されない場合の代替テキストとして表示されます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\ntitle属性は、画像の補足説明として使用します。\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E「alt」属性は、画像を見ることができない（たとえばブラウザの互換性や視覚障害のため）ユーザーのための画像の説明です。「title」属性を使用すると、画像に関するより詳しい説明を付けることができます。\u003C\/blockquote\u003E参考：Bloggerヘルプ \u003Ca href=\"https:\/\/support.google.com\/blogger\/answer\/2494469?hl=ja\u0026amp;ref_topic=2469780\" target=\"_blank\" rel=\"nofollow\"\u003E画像のプロパティ\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/www.memorou.com\/2013\/12\/bloggerpicasa.html\"\u003EBloggerに挿入した画像はPicasaウェブアルバムで削除\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/www.memorou.com\/2013\/10\/blog-post.html\"\u003Eマウスオーバーで画像を半透明にする方法\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name=\"moku10\"\u003E\u003C\/a\u003E \u003Ch2\u003E登録:投稿(Atom)を非表示にする方法\u003C\/h2\u003EテンプレートからHTMLの編集をクリックし\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;b:include name='feedLinks'\/\u0026gt;\u003C\/pre\u003Eを検索して削除するか、隠しテキストにします。 \u003Cbr \/\u003E\n\u003Cbr \/\u003E\n隠しテキストはこのように記入します。\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;!-- 登録:投稿(Atom)の削除 \u0026lt;b:include name='feedLinks'\/\u0026gt; --\u0026gt;\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-QaIyR_610ls\/UszpuE2HCuI\/AAAAAAAABQU\/nSM7-2zB0Nw\/s1600\/02.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-QaIyR_610ls\/UszpuE2HCuI\/AAAAAAAABQU\/nSM7-2zB0Nw\/s1600\/02.png\" height=\"100\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nこれでブログから登録:投稿(Atom)を非表示にすることができます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name=\"moku11\"\u003E\u003C\/a\u003E \u003Ch2\u003Eラベルの削除と一括で編集する方法\u003C\/h2\u003EBloggerの投稿には、カテゴリーやタグの変わりに、ラベルをつけることができます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nラベルを追加するのは簡単で、投稿の設定から「ラベル」を選んで入力するだけでできます。もう少し詳しい説明は、\u003Ca href=\"http:\/\/www.memorou.com\/2013\/12\/blogger_18.html\"\u003EBloggerのページと投稿の違い\u003C\/a\u003Eを参考にしてください。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n今回は追加したラベルの削除と、登録しているラベルの編集方法を記録します。\u003Cbr \/\u003E\nラベルを削除するには、そのラベルがどの投稿でも使われていない状態にする必要があります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n通常1つの投稿だけで使用されているラベルを削除する場合は、そのラベルが使われている記事の編集で、ラベルの使用を止めれば自動的に削除されます。\u003Cbr \/\u003E\n\u003Cbr class=\"Apple-interchange-newline\" \/\u003E しかし、2つ以上の記事で使用していると、各記事からラベルを削除しなくてはなりません。\u003Cbr \/\u003E\n\u003Ch3\u003E2つ以上の記事で使用しているラベルの削除方法\u003C\/h3\u003E方法は2つあります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n1つは、上にも書いたとおり記事の編集で、一記事ずつ削除していく方法です。\u003Cbr \/\u003E\nしかし、2,3記事ならともかく、50や100記事ともなるとそうは行きません。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nそこで、まとめて、使用しているラベルを止める方法を使います。\u003Cbr \/\u003E\n\u003Ch4\u003E一括でラベルの使用を止める方法\u003C\/h4\u003Eマイブログから投稿の「すべてのラベル」をクリックし、削除したいラベルを選択します。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-LcmiJvltUX4\/UrJ8kIm3AEI\/AAAAAAAAA-k\/4YyfbCgFHNI\/s1600\/1.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-LcmiJvltUX4\/UrJ8kIm3AEI\/AAAAAAAAA-k\/4YyfbCgFHNI\/s320\/1.png\" height=\"116\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n今回は「Blogger」を選択しました。\u003Cbr \/\u003E\nすると、そのラベルを使用している記事がフィルタされ一覧表示されます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n表示された記事を、左上のチェックボックスをクリックして一括で選択します。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-RmO7kwFL_A4\/UrKB30u34qI\/AAAAAAAAA-0\/kLliSg0oOkU\/s1600\/2.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-RmO7kwFL_A4\/UrKB30u34qI\/AAAAAAAAA-0\/kLliSg0oOkU\/s320\/2.png\" height=\"164\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E次に、隣のラベルマークをクリックして、削除するラベル（この場合はBlogger）を選択します。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-kOOMh3g4C6A\/UrKErkovneI\/AAAAAAAAA_A\/BSWGmiNaMC0\/s1600\/3.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-kOOMh3g4C6A\/UrKErkovneI\/AAAAAAAAA_A\/BSWGmiNaMC0\/s320\/3.png\" height=\"189\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E「投稿はありません―」と出たら削除完了です。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-bDazXJjZWvU\/UrKHPLlvJfI\/AAAAAAAAA_M\/yh7yLkGoHKA\/s1600\/4.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-bDazXJjZWvU\/UrKHPLlvJfI\/AAAAAAAAA_M\/yh7yLkGoHKA\/s320\/4.png\" height=\"115\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch3\u003Eラベルの一括編集方法\u003C\/h3\u003E例えば、今まで「ブロガー」としていたものを、「Blogger」に変更する場合の方法です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nマイブログから投稿の「すべてのラベル」をクリックし、「ブロガー」を選択します。 \u003Cbr \/\u003E\n\u003Cbr \/\u003E\n「ブロガー」でフィルタされた記事一覧を一括選択します。\u003Cbr \/\u003E\n26件以上記事がある場合は、次のページに表示されるので、下の手順を繰り返します。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-ZL9DoomBvJw\/UrKQEMoGHwI\/AAAAAAAAA_c\/bTVfgL9SJ4A\/s1600\/5.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-ZL9DoomBvJw\/UrKQEMoGHwI\/AAAAAAAAA_c\/bTVfgL9SJ4A\/s320\/5.png\" height=\"304\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E選択後、隣のラベルマークをクリックして、新しいラベルを選択し、入力欄に「Blogger」と入力します。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-kwrTeNl9-ms\/UrKUI89MCOI\/AAAAAAAAA_w\/gRuE9-itO7A\/s1600\/6.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-kwrTeNl9-ms\/UrKUI89MCOI\/AAAAAAAAA_w\/gRuE9-itO7A\/s320\/6.png\" height=\"150\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003EOKボタンを押したらチェックした記事に「Blogger」のラベルが追加されます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n次に、「ブロガー」のラベルを削除します。\u003Cbr \/\u003E\nラベルマークをクリックして「ブロガー」を選択すると、チェックした記事からラベルが削除されます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこれで、ラベルの変更は完了です。\u003Cbr \/\u003E\n\u003Ch3\u003Eラベル変更後の注意点\u003C\/h3\u003E「ブロガー」から「Blogger」に変更したとき、「ブロガー」ラベルの検索結果をメニューバーに使用していると、「Blogger」に変更することによって、検索結果に影響が出ます。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-g4JZuXx88E4\/UrKXd53eesI\/AAAAAAAAA_8\/XX9y_RoKvh0\/s1600\/8.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-g4JZuXx88E4\/UrKXd53eesI\/AAAAAAAAA_8\/XX9y_RoKvh0\/s320\/8.png\" height=\"33\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eこのように表示され、メニューバーの機能を果たしません。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nラベルをメニューバーに使用している場合は速やかに変更することをおすすめします。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name=\"moku12\"\u003E\u003C\/a\u003E \u003Ch2\u003E検索結果表示で記事タイトルをサイトタイトルより先に表示する方法\u003C\/h2\u003E検索エンジンの検索結果で、Bloggerの記事が表示されるとき、大抵の場合「サイトタイトル⇒記事タイトル」の順に表示されると思います。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこの順番を「記事タイトル⇒サイトタイトル」の順に変更する方法の記録です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nまずは、自分のサイトがどちらの順で表示されているかを確認してみます。 \u003Cbr \/\u003E\n確認方法は、検索ボックスに「site:サイトURL」と入力します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこのブログの場合、\u003Cbr \/\u003E\n「site:http:\/\/wordpress-customize.blogspot.jp」（現在はmemorou.com）\u003Cbr \/\u003E\nと入力します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n下の画像のように、まれに、記事タイトルだけが表示される場合もあります。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-x0Q0V6T6YZQ\/UunHtjwKZgI\/AAAAAAAABdE\/rDwafRO_Qes\/s1600\/01.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-x0Q0V6T6YZQ\/UunHtjwKZgI\/AAAAAAAABdE\/rDwafRO_Qes\/s1600\/01.png\" height=\"320\" width=\"259\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E検索結果に表示される文字数には制限があり、タイトルが長いと全てが表示されず、途中から省略されてしまいます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこのブログのタイトルの長さでも検索結果の半分くらいの文字数を使用します。できるだけ多く記事タイトルを表示させるためにも「記事タイトル⇒サイトタイトル」の順に変える事にしました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこの変更によりCTR（クリック率）の上昇も期待しています。\u003Cbr \/\u003E\n\u003Ch3\u003E記事タイトルを先に表示する方法\u003C\/h3\u003EテンプレートのHTMLの編集で\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;title\u0026gt;\n\u0026lt;data:blog.pageTitle\/\u0026gt;\n\u0026lt;\/title\u0026gt;\n\u003C\/code\u003E\u003C\/pre\u003Eを検索します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこの部分を下記のように変更します。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;b:if cond='data:blog.pageType == \"item\"'\u0026gt;\n\u0026lt;title\u0026gt;\u0026lt;data:blog.pageName\/\u0026gt;：\u0026lt;data:blog.title\/\u0026gt;\u0026lt;\/title\u0026gt;\n\u0026lt;b:else\/\u0026gt;\n\u0026lt;title\u0026gt;\u0026lt;data:blog.pageTitle\/\u0026gt;\u0026lt;\/title\u0026gt;\n\u0026lt;\/b:if\u0026gt;\n\u003C\/code\u003E\u003C\/pre\u003E最後に、「テンプレートを保存」を押したら完了です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n検索結果が反映されるまでしばらく待ちましょう。 \u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name=\"moku13\"\u003E\u003C\/a\u003E \u003Ch2\u003Eツイッターと連携して投稿時に自動つぶやき\u003C\/h2\u003Eまずは、\u003Ca href=\"http:\/\/twitterfeed.com\/\" target=\"_blank\" rel=\"nofollow\"\u003Etwitterfeed\u003C\/a\u003Eに登録します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nすでにアカウントを持っている人は、メールアドレスとパスワードを入れてログインしてください。\u003Cbr \/\u003E\nまだ持っていないければ、ログインボタンの下の赤い四角で囲った部分をクリックします。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-RpmZdcxib-Q\/UW399F8GWDI\/AAAAAAAAAJc\/hfX1zM1YN3w\/s1600\/twi%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-RpmZdcxib-Q\/UW399F8GWDI\/AAAAAAAAAJc\/hfX1zM1YN3w\/s320\/twi%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3.jpg\" height=\"123\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n次に、フィードを作成します。\u003Cbr \/\u003E\nフィード名とブログURLまたはRSSフィードのＵＲＬを入力して、テストRSSフィードをクリックしてステップ２へ進みます。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-kCwhXyfF9eY\/UW3-wq0gTFI\/AAAAAAAAAJk\/qPyFX_R3vOA\/s1600\/twist1.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-kCwhXyfF9eY\/UW3-wq0gTFI\/AAAAAAAAAJk\/qPyFX_R3vOA\/s320\/twist1.jpg\" height=\"195\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nツイッターをクリックして、新しい（連携したい）Twitterアカウントを認証します。\u003Cbr \/\u003E\n認証できたら、上の認証されたTwitterアカウントから選択してサービスの作成をクリックします。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-KszQMKnpp04\/UW4A_1-dThI\/AAAAAAAAAJs\/RyZY5wMCVjs\/s1600\/twist2.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-KszQMKnpp04\/UW4A_1-dThI\/AAAAAAAAAJs\/RyZY5wMCVjs\/s320\/twist2.jpg\" height=\"223\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n更新時間など細かい設定は作成後に変更できます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nフェイスブックと連携したい場合は、ツイッターを選択したところでフェイスブックを選択してください。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/www.memorou.com\/search\/label\/%E9%96%A2%E9%80%A3%E8%A8%98%E4%BA%8B\"\u003E関連記事の表示設定\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/www.memorou.com\/2013\/02\/blog-post_28.html\"\u003Eメニューバーの設置\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/www.memorou.com\/2014\/12\/blogger.html\"\u003EBloggerの独自ドメイン設定\u003C\/a\u003E "},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/2074241822005989275"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/2074241822005989275"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2015\/01\/blogger_11.html","title":"Bloggerのカスタマイズと使い方（シンプルテンプレート対応）"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-mkrUnpnlZXM\/Uqg2TIwxdvI\/AAAAAAAAA7Y\/Bk2550NhiUA\/s72-c\/4.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-3844619103915839157"},"published":{"$t":"2014-12-10T10:22:00.000+09:00"},"updated":{"$t":"2017-02-19T00:36:50.832+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"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":"リダイレクト"}],"title":{"type":"text","$t":"Bloggerのカスタムドメイン設定方法(wwwなしでリダイレクト)"},"content":{"type":"html","$t":"blogspot.jpの障害で、一時的にブログにアクセスできなったことを機に、Blogger（このブログ）を独自ドメインで運営しようと考えていました。\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/www.memorou.com\/2014\/11\/blogger.html\"\u003EBloggerにアクセスできなくなる障害が発生中\u003C\/a\u003E（2014年11月7日）\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nそこで、ついに重い腰を上げて実行に移したため、今回行った「独自ドメインの取得」から「Bloggerのカスタムドメイン設定」までの記録をメモしておきます。\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Ch2\u003EBloggerを独自ドメインで運営する方法\u003C\/h2\u003E\u003Cdiv\u003E独自ドメインの取得⇒　Bloggerのカスタムドメイン設定⇒　ムームードメインの設定⇒　Bloggerの設定という流れで進めていきます。\u003C\/div\u003E\u003Ch3\u003E独自ドメインの取得\u003C\/h3\u003Eまずは独自ドメイン（以下、ドメイン）を取得します。ドメインは\u003Ca href=\"https:\/\/px.a8.net\/svt\/ejp?a8mat=261YJ6+2312FM+348+1BNBJM\" target=\"_blank\" rel=\"nofollow\"\u003Eムームードメイン\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cimg border=\"0\" width=\"1\" height=\"1\" src=\"https:\/\/www19.a8.net\/0.gif?a8mat=261YJ6+2312FM+348+1BNBJM\" alt=\"\"\u003Eで取得しました。\u003Cbr \/\u003E\nすでにドメインを取得済みの場合は飛ばしてください。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nまだ取得していない場合は、\u003Ca href=\"http:\/\/www.memorou.com\/2014\/12\/blog-post_10.html\" target=\"_blank\"\u003Eムームードメインで独自ドメインを取得するまでの流れ\u003C\/a\u003Eを参考にし、取得後に次へ進んでください。　　　\u003Cbr \/\u003E\n\u003Ch3\u003EBloggerのカスタムドメイン設定\u003C\/h3\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-Vqe5RuzWb8Y\/VIVKGm-Fo3I\/AAAAAAAACfU\/SqVkMMkdMyY\/s1600\/01.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-Vqe5RuzWb8Y\/VIVKGm-Fo3I\/AAAAAAAACfU\/SqVkMMkdMyY\/s1600\/01.png\" height=\"81\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003Eカスタムドメインを設定するブログの設定から基本を選択します。\u003C\/div\u003Eブログアドレスの「+ ブログのサードパーティ URL を設定」をクリックして、上で取得したドメインを入力します。\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003Eドメインそのもの（例: yourdomain.com）ではブログをホストできません。トップレベル ドメイン（www.yourdomain.com）やサブドメイン（blog.yourdomain.com）を追加してください。\u003C\/blockquote\u003Eとあるように、トップレベルドメインかサブドメインを追加する必要があります。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-N4u85w4_qSA\/VIVNdZ2ZOdI\/AAAAAAAACfg\/U_cYLVLW8Hw\/s1600\/02.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-N4u85w4_qSA\/VIVNdZ2ZOdI\/AAAAAAAACfg\/U_cYLVLW8Hw\/s1600\/02.png\" height=\"129\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n保存をクリックすると、\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003Eこのドメインに対する権限を確認できませんでした。エラー 12。 \u003C\/blockquote\u003Eと、エラーが出るので、赤枠内をコピーまたはメモしておきます。（後で戻ってくるため、ページを閉じずにムームードメインの設定に進むことをオススメします。）\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-76xzj5i9zeA\/VIVVXAbG49I\/AAAAAAAACgE\/DLJQWU2LZBo\/s1600\/03.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-76xzj5i9zeA\/VIVVXAbG49I\/AAAAAAAACgE\/DLJQWU2LZBo\/s1600\/03.png\" height=\"180\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003C\/div\u003E\u003Ch3\u003Eムームードメインの設定\u003C\/h3\u003E\u003Cdiv\u003E続いてムームードメイン側の設定をします。コントロールパネルにログイン後以下の手順で進めます。\u003C\/div\u003E\u003Ch4\u003Eネームサーバ設定変更\u003C\/h4\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-KrH-Z1AqdSA\/VIVTLo3VPsI\/AAAAAAAACf4\/xq--EfMfU5E\/s1600\/04.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-KrH-Z1AqdSA\/VIVTLo3VPsI\/AAAAAAAACf4\/xq--EfMfU5E\/s1600\/04.png\" height=\"168\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003E「ムームードメインのネームサーバ（ムームーDNS）を使用する」を選択して、下の「ネームサーバ設定変更」をクリックします。\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003EムームーDNSの設定\u003C\/h4\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-088zY3X6-Qg\/VIVVisHQdiI\/AAAAAAAACgM\/7qY6s8-Rj8o\/s1600\/05.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-088zY3X6-Qg\/VIVVisHQdiI\/AAAAAAAACgM\/7qY6s8-Rj8o\/s1600\/05.png\" height=\"248\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003EムームーDNSから「カスタム設定」をクリックします。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-kFj14DDp_gU\/VIVY6npeJOI\/AAAAAAAACgY\/tA37pH4a7Mc\/s1600\/06.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-kFj14DDp_gU\/VIVY6npeJOI\/AAAAAAAACgY\/tA37pH4a7Mc\/s1600\/06.png\" height=\"258\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eカスタム設定のセットアップ情報変更の「設定2」の名前・種別・内容に上でメモした「後で必要な情報」を入力し、下の「セットアップ情報変更」をクリックします。\u003Cbr \/\u003E\n\u003Ch3\u003EBloggerの設定\u003C\/h3\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-IMVWdtwzVTs\/VIVaVXr-PGI\/AAAAAAAACgk\/H2IBxSggJDs\/s1600\/07.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-IMVWdtwzVTs\/VIVaVXr-PGI\/AAAAAAAACgk\/H2IBxSggJDs\/s1600\/07.png\" height=\"49\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003EBloggerに戻り、改めて「保存」をクリックします。\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\n\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-lnVisfpgQSI\/VIVaw_r-1zI\/AAAAAAAACgs\/kizb0RzJ_TM\/s1600\/08.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-lnVisfpgQSI\/VIVaw_r-1zI\/AAAAAAAACgs\/kizb0RzJ_TM\/s1600\/08.png\" height=\"62\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E上の画像のように表示されれば設定完了です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこれで、www.memorou.comでも元のwordpress-customize.blogspot.comでも同じページが表示されるようになりました。\u003Cbr \/\u003E\n\u003Ch2\u003EAレコードの設定\u003C\/h2\u003E\u003Cdiv\u003E上記の設定だけでもBloggerのカスタムドメイン設定は完了しますが、wwwなしのmemorou.comでも同じページを表示したい場合は、Aレコードの設定が必要になります。\u003C\/div\u003E\u003Cdiv\u003E\u003Ch3\u003EムームードメインのAレコード設定\u003C\/h3\u003E\u003C\/div\u003EAレコードの設定は、ムームーDNSの「カスタム設定」からできます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n設定2の「後で必要な情報」を入力した下に追加します。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-gPF3Skwy4j4\/VIVlMLaqt2I\/AAAAAAAAChI\/CHOe0vmSc74\/s1600\/10.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-gPF3Skwy4j4\/VIVlMLaqt2I\/AAAAAAAAChI\/CHOe0vmSc74\/s1600\/10.png\" height=\"234\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E名前の欄は空白にし、種別をA、内容は「\u003Ca href=\"https:\/\/support.google.com\/blogger\/troubleshooter\/1233381?rd=1#ts=1734115\" target=\"_blank\" rel=\"nofollow\"\u003Eブログでカスタム ドメイン名を使用するには\u003C\/a\u003E」内のトップレベルドメインの8を参考に異なる4つのAレコードを入力します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch4\u003EGoogle IP\u003C\/h4\u003E\u003Cblockquote class=\"tr_bq\"\u003E216.239.32.21\u003Cbr \/\u003E\n216.239.34.21\u003Cbr \/\u003E\n216.239.36.21\u003Cbr \/\u003E\n216.239.38.21 \u003C\/blockquote\u003E最後に下の「セットアップ情報変更」をクリックしたらムームードメインのAレコード設定は終了です。\u003C\/div\u003E\u003Ch3\u003EBloggerのリダイレクト設定\u003C\/h3\u003E\u003Cdiv\u003E二つ上の画像の「編集」をクリックして、「memorou.comをwww.memorou.comにリダイレクトする。」にチェックを入れて保存します。\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-jmku8r3atVw\/VIVdNgBOsqI\/AAAAAAAACg4\/53DFO60BHgY\/s1600\/09.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-jmku8r3atVw\/VIVdNgBOsqI\/AAAAAAAACg4\/53DFO60BHgY\/s1600\/09.png\" height=\"135\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nこれで、wwwなしでもwwwありのページにリダイレクトされるようになります。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/3844619103915839157"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/3844619103915839157"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2014\/12\/blogger.html","title":"Bloggerのカスタムドメイン設定方法(wwwなしでリダイレクト)"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-Vqe5RuzWb8Y\/VIVKGm-Fo3I\/AAAAAAAACfU\/SqVkMMkdMyY\/s72-c\/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-5785198876969340709"},"published":{"$t":"2014-11-26T10:53:00.000+09:00"},"updated":{"$t":"2017-02-19T00:52:45.576+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テンプレート"}],"title":{"type":"text","$t":"Bloggerシンプルテンプレートの記事タイトルをh3からh2に日付をh2からdivに変更"},"content":{"type":"html","$t":"シンプルテンプレートの記事タイトルをh3からh2に変更して、日付やウィジェット(ガジェット)タイトルをh2からdivにそれぞれ変更した方法の記録です。\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-AeNkHn_LUog\/VHUxhh-c2VI\/AAAAAAAACc4\/je7OfXC6vDg\/s1600\/01.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-AeNkHn_LUog\/VHUxhh-c2VI\/AAAAAAAACc4\/je7OfXC6vDg\/s1600\/01.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n変更後、記事内で使う見出しは小見出し(h3)から使い始めます。また、Bloggerでは準見出し(h4)までしか選択できないため、h5やh6はHTMLで手書きする必要があります。\u003Cbr \/\u003E\n\u003Ch3\u003E日付をh2からdivに変更\u003C\/h3\u003Eテンプレートの編集から\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;h2 class='date-header'\u0026gt;\u0026lt;span\u0026gt;\u0026lt;data:post.dateHeader\/\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/h2\u0026gt;\n\u003C\/code\u003E\u003C\/pre\u003Eを検索して、h2の部分をdivに変更する。2個あるので両方変更する。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n変更後はこのようになります。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;div class='date-header'\u0026gt;\u0026lt;span\u0026gt;\u0026lt;data:post.dateHeader\/\u0026gt;\u0026lt;\/span\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E\u003Ch3\u003Eガジェットタイトルをh2からdivに変更\u003C\/h3\u003Eテンプレートの編集から\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;h2 class='title'\u0026gt;\u0026lt;data:title\/\u0026gt;\u0026lt;\/h2\u0026gt;\n\u003C\/code\u003E\u003C\/pre\u003Eを検索(1850行)して、h2の部分をdivに変更する。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n続いて、 \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;h2\u0026gt;\u0026lt;data:title\/\u0026gt;\u0026lt;\/h2\u0026gt;\n\u003C\/code\u003E\u003C\/pre\u003Eを検索(2008行と2046行)して、同様に変更する。2個あるので両方変更する。\u003Cbr \/\u003E\n※これは、ガジェットでラベルと新着記事を追加している場合の変更方法です。追加しているガジェットが増えると、変更する箇所も増えます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこのときdivにclassを設定しておくとスタイルを変更できる。ここではwidget-titleとしました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n変更後はこのようになります。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;div class='widget-title'\u0026gt;\u0026lt;data:title\/\u0026gt;\u0026lt;\/div\u0026gt;\n\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\n後からガジェットを追加した場合は、その都度変更が必要です。 \u003Cbr \/\u003E\nガジェットタイトルの装飾は、テンプレートカスタマイズの上級者向けCSSの追加からできます。\u003Cbr \/\u003E\n\u003Ch3\u003Eガジェットタイトルの装飾\u003C\/h3\u003Eテンプレートの編集で直接書き込むことも可能ですが、今回はCSSの追加からやりました。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E.widget-title {\npadding-left:10px;\nfont-size:20px;\nborder-left:solid 5px #000;\n}\n\u003C\/code\u003E\u003C\/pre\u003E上のclassでwidget-titleとしたため.widget-titleとなっています。文字サイズやボーダーの色、太さなどは自由に変更可能です。\u003Cbr \/\u003E\n\u003Ch3\u003E記事タイトルをh3からh2に変更\u003C\/h3\u003Eテンプレートの編集から\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;h3 class='mobile-index-title entry-title' itemprop='name'\u0026gt;\n\u0026lt;data:post.title\/\u0026gt;\n\u0026lt;\/h3\u0026gt;\n\u003C\/code\u003E\u003C\/pre\u003Eと\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;h3 class='post-title entry-title' itemprop='name'\u0026gt;\n\u0026lt;b:if cond='data:post.link'\u0026gt;\n\u0026lt;a expr:href='data:post.link'\u0026gt;\u0026lt;data:post.title\/\u0026gt;\u0026lt;\/a\u0026gt;\n\u0026lt;b:else\/\u0026gt;\n\u0026lt;b:if cond='data:post.url'\u0026gt;\n\u0026lt;b:if cond='data:blog.url != data:post.url'\u0026gt;\n\u0026lt;a expr:href='data:post.url'\u0026gt;\u0026lt;data:post.title\/\u0026gt;\u0026lt;\/a\u0026gt;\n\u0026lt;b:else\/\u0026gt;\n\u0026lt;data:post.title\/\u0026gt;\n\u0026lt;\/b:if\u0026gt;\n\u0026lt;b:else\/\u0026gt;\n\u0026lt;data:post.title\/\u0026gt;\n\u0026lt;\/b:if\u0026gt;\n\u0026lt;\/b:if\u0026gt;\n\u0026lt;\/h3\u0026gt;\n\u003C\/code\u003E\u003C\/pre\u003Eが2箇所の計3箇所をh3からh2に変更します。\u003Cbr \/\u003E\n\u003Ch3\u003Eh2・h3・h4・h5の装飾\u003C\/h3\u003ECSSの追加で\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Eh2{\nmargin:20px 0 10px 0;\nfont-size:20px;\ncolor:#444;\nfont-weight: bold;\n}\n\nh3{\npadding-left:10px;\nmargin:20px 0 10px 0;\nborder-left:solid 5px #444;\nfont-size:20px;\ncolor:#444;\n}\n\nh4{\nmargin:20px 0 10px 0;\nfont-size:18px;\ncolor:#444;\n}\n\nh5{\nmargin:20px 0 10px 0;\nfont-size:16px;\ncolor:#444;\n}\n\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\nこれで、ブログタイトルがh1、記事タイトルがh2、記事内の見出しがh3・h4・h5・h6となりました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n一つのことに特化したブログの場合はこれでいいと思いますが、そうではない場合は記事タイトルをh1にしたほうが個人的にはいいと思います。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nしかし、たったこれだけの変更でも結構な手間となるため、元から変更されているテンプレートに変えてしまうのが最も簡単な方法かもしれません。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/5785198876969340709"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/5785198876969340709"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2014\/11\/bloggerh3h2h2div.html","title":"Bloggerシンプルテンプレートの記事タイトルをh3からh2に日付をh2からdivに変更"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-AeNkHn_LUog\/VHUxhh-c2VI\/AAAAAAAACc4\/je7OfXC6vDg\/s72-c\/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-1805802230945219367"},"published":{"$t":"2014-09-25T18:11:00.000+09:00"},"updated":{"$t":"2017-02-19T01:12:14.667+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テンプレート"}],"title":{"type":"text","$t":"Blogger無料レスポンシブテンプレートのLinezapをカスタマイズ"},"content":{"type":"html","$t":"\u003Ca href=\"http:\/\/www.bloggertemplatestore.com\/linezap-multipurpose-template.html\" rel=\"nofollow\" target=\"_blank\"\u003ELinezap\u003C\/a\u003Eからテンプレートのダウンロードとデモの確認ができます。\u003Cbr \/\u003E\n下の編集をすることにより、Linezapの良さが失われる可能性があります。\u003Cbr \/\u003E\n適度に必要な部分だけを編集してください。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-rcCbQx0e9wk\/VCPbEF2Z0VI\/AAAAAAAACOU\/2w_1m5W-mmc\/s1600\/01.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-rcCbQx0e9wk\/VCPbEF2Z0VI\/AAAAAAAACOU\/2w_1m5W-mmc\/s200\/01.jpg\" height=\"201\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ch2\u003EHTMLの編集\u003C\/h2\u003E\u003Cdiv\u003EHTMLを編集する前にバックアップを取ってください。 \u003C\/div\u003E\u003Ch3\u003E使われている画像の変更または削除\u003C\/h3\u003Ebodyの背景 \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ebackground-image: url(http:\/\/1.bp.blogspot.com\/-VwqGmTI9eaE\/U6WXaSyO7EI\/AAAAAAAAAlQ\/MxL2pg4C8jY\/s1600\/13.jpg);\n\u003C\/code\u003E\u003C\/pre\u003E削除する場合は、上記を丸ごと削除するかurlの（）内を削除する。変更する場合は、urlの（）内を新しく使用する画像urlに変更する。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nあわせて、backgroundとbackground-colorを任意の色に変更する。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nウィジェットタイトルの背景画像の変更と削除\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ehttp:\/\/2.bp.blogspot.com\/-gzRaJ5AFrCo\/U6V7dFE88nI\/AAAAAAAAAi0\/_DclnNHIuHY\/s1600\/dot.png\n\u003C\/code\u003E\u003C\/pre\u003Eを検索して削除するか、新しく使用する画像urlに変更する。（全部で3箇所）\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nフッターのウィジェットタイトルも同様に削除または変更する。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ehttp:\/\/1.bp.blogspot.com\/-MlMosFqnzNQ\/U6V71fpyrHI\/AAAAAAAAAi8\/DroNXqPjOw0\/s1600\/dot-footer.png\n\u003C\/code\u003E\u003C\/pre\u003Eを検索する。（1箇所）\u003Cbr \/\u003E\n\u003Ch3\u003E文字をメイリオに変更\u003C\/h3\u003EArial\u003Cbr \/\u003E\nを検索して、その前に\u003Cbr \/\u003E\n\"メイリオ\", meiryo,  \u003Cbr \/\u003E\nを追加する。（全部で13箇所）\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n次に、\u003Cbr \/\u003E\nDroid Sans \u003Cbr \/\u003E\nを検索して、その前に同じように追加する。（全部で3箇所）\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n全体を一気に変更したい場合は、\u003Ca href=\"http:\/\/www.memorou.com\/2013\/11\/blogger_25.html\"\u003EBloggerのフォントをメイリオに変更する方法　記事タイトル対応\u003C\/a\u003Eを参考にしてください。\u003Cbr \/\u003E\n\u003Ch3\u003E大文字を小文字に変更\u003C\/h3\u003Euppercaseで検索して大文字にしたくないところを削除する。 \u003Cbr \/\u003E\n\u003Ch3\u003Eトップメニューの削除\u003C\/h3\u003E今回は使用しないため表示しないようにする。\u003Cbr \/\u003E\ntop-menu\u003Cbr \/\u003E\nを検索すると2つヒットするので、1つ目にdisplay:noneを追加する。\u003Cbr \/\u003E\nまたは、2つ目のtop-nav部分の40行くらいを丸ごと削除する。\u003Cbr \/\u003E\n\u003Ch3\u003Eタイトルを画像に変更\u003C\/h3\u003E画像サイズは257px×90pxがよさそう\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n上の余白を消す\u003Cbr \/\u003E\n.headerを検索して1つ目の35pxを削除するか、任意の数字に変更する。\u003Cbr \/\u003E\n\u003Ch3\u003Eナビの背景画像を削除\u003C\/h3\u003E#nav\u003Cbr \/\u003E\nを検索して、 \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Eurl(http:\/\/2.bp.blogspot.com\/-YxxeRcqP6UI\/U6V7A_pfmnI\/AAAAAAAAAik\/NyzEC4z7POQ\/s1600\/menu-bg2.png) repeat\n\u003C\/code\u003E\u003C\/pre\u003Eを削除して、任意の色に変更する。\u003Cbr \/\u003E\n\u003Ch3\u003E検索ボタンの変更\u003C\/h3\u003E\u003Cpre\u003E\u003Ccode\u003Ehttp:\/\/4.bp.blogspot.com\/-R8OKVUsis3s\/UgZEksy0V1I\/AAAAAAAAAT4\/QtN9sBHMZis\/s1600\/icon-search.png\n\u003C\/code\u003E\u003C\/pre\u003Eを検索して新しいボタン画像のurlに変更する。\u003Cbr \/\u003E\n\u003Ch3\u003E最大幅を1024pxに変更\u003C\/h3\u003E#outer-wrapperのmax-widthを1196pxから1024pxに変更する。（1箇所）\u003Cbr \/\u003E\n\u003Ch3\u003E1024px時メニュー表示の変更\u003C\/h3\u003E@media only screen and (max-width:1024px) \u003Cbr \/\u003E\nの\u003Cbr \/\u003E\n#menu-main {           display: none;         }\u003Cbr \/\u003E\nを削除すると、メニューが表示される。このままだと2つ表示された状態になるためselectnav1を表示しないようにする。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E@media only screen and (max-width:1024px){\n        #selectnav1 {\n          background: none repeat scroll 0 0 #333;\n          border: 1px solid #232323;\n          color: #FFF;\n          width: 418px;\n          margin: 8px 0px;\n          float: left;\n        }\n        .selectnav {\n          display:block;\n          width:50%;\n          margin:0;\n          padding:7px;\n        }\n      }\n\u003C\/code\u003E\u003C\/pre\u003Eの#selectnav1以下をコピーして\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E@media only screen and (max-width:768px){\n        #selectnav1 {\n          width: 405px;\n        }\n      }\n\u003C\/code\u003E\u003C\/pre\u003Eの#selectnav1以下に貼り付け、418pxを405pxに変更する。変更後は以下のようになる\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E      @media only screen and (max-width:1024px){\n      }\n      @media only screen and (max-width:768px){\n        #selectnav1 {\n          background: none repeat scroll 0 0 #333;\n          border: 1px solid #232323;\n          color: #FFF;\n          width: 405px;\n          margin: 8px 0px;\n          float: left;\n        }\n        .selectnav {\n          display:block;\n          width:50%;\n          margin:0;\n          padding:7px;\n        }\n      }\n\u003C\/code\u003E\u003C\/pre\u003E\u003Ch3\u003Eサイドバー左を非表示\u003C\/h3\u003E#sidebar-narrowを検索して、上から5個目にdisplay: none;を追加する。\u003Cbr \/\u003E\n\u003Ch3\u003E右サイドバーの幅を固定\u003C\/h3\u003E#sidebar-wrapperを検索して、一番上の\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ewidth:30%;\nmax-width:300px;\u003C\/code\u003E\u003C\/pre\u003Eを\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ewidth:300px;\u003C\/code\u003E\u003C\/pre\u003Eに変更する。\u003Cbr \/\u003E\n\u003Ch3\u003Emywrapperの幅を変更\u003C\/h3\u003Epostと同じ幅まで縮小する\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ebody#layout #mywrapper {\nwidth: 70%;\n}\n\u003C\/code\u003E\u003C\/pre\u003Eを60%に変更する。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ediv#mywrapper {\nfloat: left;\nwidth: 840px;\n}\n\u003C\/code\u003E\u003C\/pre\u003Eを639pxに変更する。\u003Cbr \/\u003E\n\u003Ch3\u003Epost-wrapperの幅を変更\u003C\/h3\u003E@media only screen and (max-width:1066px)の\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E#post-wrapper {\n          width: 670px;\n          max-width: 670px;\n        }\n\u003C\/code\u003E\u003C\/pre\u003Eと\u003Cbr \/\u003E\n@media only screen and (max-width:1024px)の\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E#post-wrapper {\n          width: 730px;\n          max-width: 730px;\n        }\n\u003C\/code\u003E\u003C\/pre\u003Eを639pxに変更する。 \u003Cbr \/\u003E\n上記と一緒にsidebar-wrapperも変更する。\u003Cbr \/\u003E\n@media only screen and (max-width:1024px)の\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E#sidebar-wrapper{\n          width:100%;\n          max-width:100%;\n        }\n\u003C\/code\u003E\u003C\/pre\u003Eを \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ewidth:300px;\u003C\/code\u003E\u003C\/pre\u003Eに変更する。\u003Cbr \/\u003E\n\u003Ch3\u003E検索ボックスの背景色を変更\u003C\/h3\u003E#searchform inputのbackground:#fff;を変更する。 \u003Cbr \/\u003E\n枠をつける場合は、border:none;をborder: 1px solid #fefefe;などに変更する。 \u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこのとき、枠の太さを1pxとしたならボタンのサイズを34pxから36pxに変更する。\u003Cbr \/\u003E\n\u003Ch3\u003Eメニューバーのデザイン変更\u003C\/h3\u003E\u003Ch4\u003E上の角を丸くする\u003C\/h4\u003E.menubar2 liにborder-radius: 4px 4px 0 0;とborder-width: 1px 1px 0 1px;を追加し、マージンとパディングを変更後、背景の色を変更する。 \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E.menubar2 li {\nposition: relative;\nmargin:0 1px 0;\npadding: 0;\nborder-color: #ccc;\nborder-image: none;\nborder-style: solid;\nborder-width: 1px 1px 0 1px;\nborder-radius: 4px 4px 0 0;\n}\n\u003C\/code\u003E\u003C\/pre\u003E\u003Ch4\u003E行の高さを低くする\u003C\/h4\u003E#navと.menubar2 \u0026gt; li \u0026gt; aの48pxを\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Eheight:32px;\nline-height:36px;\n\u003C\/code\u003E\u003C\/pre\u003Eに変更し、\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ei.fa.fa-home {\nfont-size: 25px;\npadding: 12px 5px;\n}\u003C\/code\u003E\u003C\/pre\u003Eを\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Ei.fa.fa-home {\nfont-size: 20px;\npadding: 7px;\n}\u003C\/code\u003E\u003C\/pre\u003Eに変更する。 \u003Cbr \/\u003E\nここで低くした場合は、検索ボックスのサイズも小さくする必要がある。\u003Cbr \/\u003E\n今回は、ボックスを30px、ボタンを32pxにして、マージンも0にしました。 \u003Cbr \/\u003E\n\u003Ch3\u003E個別記事のタイトルを変更\u003C\/h3\u003Eh2.post-title a, で検索して2つ目に \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Efont-weight: bold;\u003C\/code\u003E\u003C\/pre\u003Eを追加する。サイズを変えたい場合は、26pxを変更する。\u003Cbr \/\u003E\n\u003Ch3\u003Eタイトル下に公開日を表示\u003C\/h3\u003E\u003Cpre\u003E\u003Ccode\u003Elabel-info\n\u003C\/code\u003E\u003C\/pre\u003Eで検索して、2つ目の2個上の上に\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;data:post.dateHeader\/\u0026gt;\n\u003C\/code\u003E\u003C\/pre\u003Eを追加する。 \u003Cbr \/\u003E\n\u003Cdiv\u003E\u003Ch3\u003E記事タイトル下の投稿者名を非表示\u003C\/h3\u003E\u003C\/div\u003E.author-info,で検索して、.author-info{ display: none;}を追加する。 \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E.author-info, .time-info, .comment-info, .label-info, .review-info {\nmargin-right:12px;\ndisplay:inline;\n}\n.author-info{ display: none;}\u003C\/code\u003E\u003C\/pre\u003E\u003Ch3\u003E記事下の投稿者名を非表示\u003C\/h3\u003E以下をすべてコメントアウトします。\u003C!--\/ここに入れる--\u003E \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;div id='author-box'\u0026gt;\n                        \u0026lt;div class='block-head'\u0026gt;\n                          \u0026lt;h3\u0026gt;\n                            About \n                            \u0026lt;data:post.author\/\u0026gt;\n                          \u0026lt;\/h3\u0026gt;\n                          \u0026lt;div class='stripe-line'\/\u0026gt;\n                        \u0026lt;\/div\u0026gt;\n                        \u0026lt;div class='post-listing'\u0026gt;\n                          \u0026lt;div class='author-avatar'\u0026gt;\n                            \u0026lt;script src='\/feeds\/posts\/default?alt=json-in-script\u0026amp;amp;callback=authorshow'\/\u0026gt;\n                          \u0026lt;\/div\u0026gt;\n                          \u0026lt;div class='author-description'\u0026gt;\n                            This is a short description in the author block about the author. You edit it by entering text in the \u0026amp;quot;Biographical Info\u0026amp;quot; field in the user admin panel.\n                          \u0026lt;\/div\u0026gt;\n                          \u0026lt;div class='clear'\/\u0026gt;\n                        \u0026lt;\/div\u0026gt;\n                      \u0026lt;\/div\u0026gt;\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Ch3\u003E記事下のシェアボタンを非表示 \u003C\/h3\u003E#share-postで検索して1つ目にdisplay: none;を追加する。\u003Cbr \/\u003E\n\u003Ch3\u003E関連記事下のコメントボタンを非表示\u003C\/h3\u003E\u003Cpre\u003E\u003Ccode\u003E\u0026lt;div id='top-comment'\u0026gt;\u003C\/code\u003E\u003C\/pre\u003Eを \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;div id='top-comment' style='display: none;'\u0026gt;\u003C\/code\u003E\u003C\/pre\u003Eとする。\u003Cbr \/\u003E\n\u003Ch3\u003E画像がないときの画像を変更\u003C\/h3\u003E検索結果のイメージ \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\nhttp:\/\/3.bp.blogspot.com\/-ltyYh4ysBHI\/U04MKlHc6pI\/AAAAAAAADQo\/PFxXaGZu9PQ\/w200-h150-c\/no-image.pngを変更する。\n\u003C\/code\u003E\u003C\/pre\u003E\u003Ch3\u003Eヘッダーサイズの変更\u003C\/h3\u003E.headerの25.7%を23%に変更し、margin: 22px 0;を追加する。\u003Cbr \/\u003E\n次に.header-rightの72.8%を77%に変更する。\u003Cbr \/\u003E\nこれでタイトル横に728pxの広告が設置できるようになります。\u003Cbr \/\u003E\n\u003Ch3\u003E人気記事のタイトルサイズ変更\u003C\/h3\u003E\u003Cpre\u003E\u003Ccode\u003E.PopularPosts ul li:before,\n.PopularPosts ul li .item-title a, .PopularPosts ul li a\n\u003C\/code\u003E\u003C\/pre\u003Eにfont-size:15px;を追加する。数字は任意 \u003Cbr \/\u003E\n\u003Ch3\u003Eタブウィジェットメニューポイント時の色を変更\u003C\/h3\u003E3分割部分のサイドバーウィジェットタイトルにマウスを乗せたときの色を変更する。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E.tab-widget-menu li:hover{\nbackground: #666;\n}\n\u003C\/code\u003E\u003C\/pre\u003E色は任意\u003Cbr \/\u003E\n\u003Ch3\u003E関連記事の表示数\u003C\/h3\u003Eデフォルトでは最大3記事表示されるようになっている。これを最大6記事表示するようにします。\u003Cbr \/\u003E\nmaxresults=3を検索して、3の部分を変更する。数字は6や9など3の倍数にすると見た目がきれいです。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n画像のサイズを変更する場合は、2や4や6などでもきれいに収まります。\u003Cbr \/\u003E\n\u003Ch3\u003E関連記事の記事タイトル\u003C\/h3\u003E\u003Cdiv\u003Eデフォルトでは2行分しかスペースがなく、少し長いタイトルを付けると隠れてしまうため、3行分のスペースを確保する。\u003C\/div\u003E\u003Cbr \/\u003E\n25px|align|59pxを検索して、25pxを40pxに、59pxを77pxにそれぞれ変更する。\u003Cbr \/\u003E\n\u003Ch3\u003E続きを読むを右へ\u003C\/h3\u003Ea.readmoreにfloat: right;を追加\u003Cbr \/\u003E\n\u003Cdiv\u003E\u003Ch3\u003Eトップページのタグ装飾\u003C\/h3\u003E\u003C\/div\u003E\u003Cdiv\u003EガジェットでテキストかHTMLを追加し、タイトルは空欄のままコンテンツ部分に下記のように入力する。\u003C\/div\u003E\u003Cpre\u003E\u003Ccode\u003E\u0026lt;div class=\"recent-post-title\"\u0026gt;\u0026lt;h2\u0026gt;\u0026lt;span\u0026gt;ここにタイトル\u0026lt;\/span\u0026gt;\u0026lt;\/h2\u0026gt;\u0026lt;\/div\u0026gt;\n\u003C\/code\u003E\u003C\/pre\u003E\u003Ch3\u003E見出しの装飾\u003C\/h3\u003Eh2に追加する。 \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Eborder-left: solid 5px #000;\npadding-left: 10px;\n\u003C\/code\u003E\u003C\/pre\u003Eこのままだと記事以外のh2も同じ装飾になってしまうので、1つずつ消していく。\u003Cbr \/\u003E\n上記の装飾の場合は、 \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Eborder-left: none;\u003C\/code\u003E\u003C\/pre\u003Eを追加するだけで消える。 \u003Cbr \/\u003E\n\u003Ch4\u003E検索結果ページのh2装飾\u003C\/h4\u003E\u003Cpre\u003E\u003Ccode\u003Eh2.post-title, h1.post-title\u003C\/code\u003E\u003C\/pre\u003E\u003Ch4\u003E関連記事の装飾\u003C\/h4\u003E3つ目に追加する。 \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E#related-posts h2\u003C\/code\u003E\u003C\/pre\u003E\u003Ch4\u003Eフッターのウィジェットタイトルの装飾\u003C\/h4\u003E3つ目に追加する。 \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E#bottombar h2\u003C\/code\u003E\u003C\/pre\u003E\u003Ch4\u003Eトップページのh2装飾\u003C\/h4\u003E\u003Cpre\u003E\u003Ccode\u003E.recent-post-title h2\u003C\/code\u003E\u003C\/pre\u003E\u003Ch3\u003E\u003Ccode\u003Eパンくずリストの変更\u003C\/code\u003E\u003C\/h3\u003E\u003Cdiv\u003E\u003Ccode\u003Eパンくずリストが2行になったときに、2行目の文字が見えなくならないようにするために高さを変更します。\u003C\/code\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ccode\u003E.breadcrumbsの16pxの部分を削除する。\u003C\/code\u003E\u003C\/div\u003E"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/1805802230945219367"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/1805802230945219367"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2014\/09\/bloggerlinezap.html","title":"Blogger無料レスポンシブテンプレートのLinezapをカスタマイズ"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-rcCbQx0e9wk\/VCPbEF2Z0VI\/AAAAAAAACOU\/2w_1m5W-mmc\/s72-c\/01.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-7236356927215457447"},"published":{"$t":"2014-07-03T18:20:00.000+09:00"},"updated":{"$t":"2017-02-19T22:02:47.345+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"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":"Bloggerのテンプレートを、レスポンシブWebデザインに変更したのに、スマホで見るとおかしな表示になってしまったため、モバイルテンプレートを編集して、記事の下にサイドバーやアドセンス広告を表示するようにしました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\nBloggerのサイトをスマホなどで見ると、URLの後ろに?m=1が自動で追加されて、モバイル専用テンプレートを読み込みます。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-VoKR4ia5ZpI\/U7UdPeyIn1I\/AAAAAAAAB7w\/knTjI0fBqJ0\/s1600\/01.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-VoKR4ia5ZpI\/U7UdPeyIn1I\/AAAAAAAAB7w\/knTjI0fBqJ0\/s1600\/01.png\" height=\"192\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nテンプレートのモバイル画像の下にある歯車ボタンをクリックし、\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-ld7Ny4ExbJ4\/U7UO1jhnlyI\/AAAAAAAAB7U\/kjXeIZk-J1w\/s1600\/07.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-ld7Ny4ExbJ4\/U7UO1jhnlyI\/AAAAAAAAB7U\/kjXeIZk-J1w\/s1600\/07.png\" height=\"110\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cblockquote\u003Eいいえ。携帯端末で PC テンプレートを表示する。\u003C\/blockquote\u003Eを選択してスマホで見たときに、サイドバーのレイアウトが崩れてしまったため、\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-6cotwqwKiLs\/U7UQQASJhcI\/AAAAAAAAB7c\/QCllOfL-jpI\/s1600\/08.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-6cotwqwKiLs\/U7UQQASJhcI\/AAAAAAAAB7c\/QCllOfL-jpI\/s1600\/08.png\" height=\"307\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cblockquote\u003Eはい。携帯端末でモバイル テンプレートを表示する。\u003C\/blockquote\u003Eを選択して、モバイルテンプレートを選択で「カスタム」を選択して、HTMLの編集でサイドバーに設置しているウィジェットを表示させるようにしました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;b:section class='sidebar1' id='sidebar1' preferred='yes'\u0026gt;\u003C\/pre\u003Eサイドバー丸ごと表示できれば簡単だと思ったけど、これではだめだったためウィジェット単位で表示させた。\u003Cbr \/\u003E\nそれぞれの後ろに\u003Cb\u003Emobile='yes'\u003C\/b\u003Eを追加すると携帯（スマホ）で見たときにもウィジェットが表示される。それぞれのIDは、このブログの場合の例です。わかりにくい場合はtitleで探したほうが見つけやすいこともあります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n例えば、サイト内検索（ガジェットのタイトル）を探すときに、「CustomSearch」で検索するのではなく「サイト内検索」で検索するといいかも。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003Eサイト内検索\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;b:widget id='CustomSearch1'\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cb\u003E最新の記事\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026nbsp;\u0026lt;b:widget id='Feed1'\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cb\u003E忍者まとめ\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;b:widget id='HTML8'\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cb\u003E人気記事\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;b:widget id='PopularPosts2'\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cb\u003EAdSense（サイドバー）\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;b:widget id='HTML3'\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cb\u003EAdSense（メイン下）\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;b:widget id='HTML4'\u003C\/pre\u003E\u003Cbr \/\u003E\n\u003Cb\u003EAdSense（メイン上）\u003C\/b\u003E\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;b:widget id='HTML2'\u003C\/pre\u003E\u003Cbr \/\u003E\n変更後のHTMLはこのようになります。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-o5O90x3fVak\/U7UYbz2O0pI\/AAAAAAAAB7o\/QXwyUV-uKko\/s1600\/10.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-o5O90x3fVak\/U7UYbz2O0pI\/AAAAAAAAB7o\/QXwyUV-uKko\/s1600\/10.png\" height=\"104\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E黄色でハイライトされた部分が、追加した\u003Cb\u003Emobile='yes'\u003C\/b\u003Eです。\u003Cbr \/\u003E\nこれで、スマホなどで見たときも、記事の下にサイドバーが表示されるようになります。\u003Cbr \/\u003E\n\u003Ch2\u003Eモバイル表示の確認方法\u003C\/h2\u003E実際に、スマホなどの携帯端末でアクセスする方法のほかに、URLの後ろに?m=1をつける方法とBloggerのプレビュー機能を使う方法や、GoogleChromeの拡張機能を使う方法があります。\u003Cbr \/\u003E\n\u003Ch3\u003EURLに?m=1を追加\u003C\/h3\u003Eこのブログのトップページを確認する場合は、http:\/\/www.memorou.com\/?m=1となります。\u003Cbr \/\u003E\n\u003Ch3\u003EBloggerのモバイルプレビュー機能\u003C\/h3\u003Eテンプレートのモバイル画像の下にある歯車ボタンをクリックします。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-5a-1riUNes4\/U7Ug-RUFAVI\/AAAAAAAAB74\/ZOLWZqod-j4\/s1600\/02.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-5a-1riUNes4\/U7Ug-RUFAVI\/AAAAAAAAB74\/ZOLWZqod-j4\/s1600\/02.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nQRコードの下のプレビューボタンを押すと、スマホサイズのウィンドウが開き確認できます。\u003Cbr \/\u003E\n\u003Ch3\u003EGoogleChromeの拡張機能を使う\u003C\/h3\u003EChromeの「User-Agent Switcher for Chrome」という拡張機能を使ってiPhoneやAndroidで画面の確認ができます。\u003Cbr \/\u003E\n参考：\u003Ca href=\"http:\/\/www.memorou.com\/2013\/11\/blog-post_9.html\"\u003Eパソコンでスマートフォン（スマホ）表示の確認\u003C\/a\u003E"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/7236356927215457447"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/7236356927215457447"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2014\/07\/blogger_3792.html","title":"Bloggerのモバイルテンプレートを編集してサイドバーを表示する方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-VoKR4ia5ZpI\/U7UdPeyIn1I\/AAAAAAAAB7w\/knTjI0fBqJ0\/s72-c\/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-6778276226744996854"},"published":{"$t":"2014-07-03T17:51:00.001+09:00"},"updated":{"$t":"2017-02-19T22:08:46.706+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テンプレート"}],"title":{"type":"text","$t":"BloggerテンプレートをレスポンシブWebデザインに変えたときにやったこと"},"content":{"type":"html","$t":"ついにと言うかやっとと言うのか、それともようやくと言うべきか、レスポンシブＷｅｂデザイン（以下、レスポンシブ）テンプレートに変更しました。\u003Cbr \/\u003E\n既存のテンプレートをカスタマイズしてレスポンシブ化したわけではなく、完成したテンプレートをダウンロードしました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\nBloggerのテンプレートは、日本語サイトではほとんど配布されていないため、「blogger template」で検索すると数多くの海外テンプレート配布サイトが見つかります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n今回は、\u003Ca href=\"http:\/\/www.bloggertemplatestore.com\/johny-ribet-responsive-blogger-template.html\" target=\"_blank\" rel=\"nofollow\"\u003ETEMPLATE STORE\u003C\/a\u003Eからダウンロードしました。\u003Cbr \/\u003E\n\u003Ch2\u003E海外テンプレート配布サイトの基本\u003C\/h2\u003E基本的に、海外テンプレートサイトでは、Downloadをクリックすると自動でzipフォルダがダウンロードされます。\u003Cbr \/\u003E\nまた、DemoやPreviewでそのテンプレートの表示例を見ることができます。英語が読めなくてもここでウィンドウの幅を縮めたりすることでレスポンシブに対応しているか確認することができます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nダウンロードしたzipフォルダを解凍すると、中にXMLファイルが入っています。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-JNLo_OWlIBg\/U7S_llLT3lI\/AAAAAAAAB6M\/kFvPTl_EyiM\/s1600\/03.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-JNLo_OWlIBg\/U7S_llLT3lI\/AAAAAAAAB6M\/kFvPTl_EyiM\/s1600\/03.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eこれをアップロードするとテンプレートを変更できます。\u003Cbr \/\u003E\n\u003Ch2\u003Eテンプレートの変更方法\u003C\/h2\u003E変更する前には必ず、現在使っているテンプレートのバックアップを取ってください。\u003Cbr \/\u003E\n参考：\u003Ca href=\"http:\/\/www.memorou.com\/2013\/12\/blogger.html\"\u003Eテンプレートをバックアップする方法\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Ch3\u003Eテンプレートのアップロード\u003C\/h3\u003Eテンプレートのバックアップ\/復元をクリックします。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-gVfpkljTdp0\/U7TDEGCxenI\/AAAAAAAAB6U\/GtN57SrCx1A\/s1600\/04.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-gVfpkljTdp0\/U7TDEGCxenI\/AAAAAAAAB6U\/GtN57SrCx1A\/s1600\/04.png\" height=\"177\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eファイルを選択をクリックして、解凍したXMLファイルをアップロードします。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-ZYxhdswrw1M\/U7TD9bhp1pI\/AAAAAAAAB6c\/rg86PbG2Pks\/s1600\/05.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-ZYxhdswrw1M\/U7TD9bhp1pI\/AAAAAAAAB6c\/rg86PbG2Pks\/s1600\/05.png\" height=\"162\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eこれで完了です。\u003Cbr \/\u003E\nテンプレートを変更すると、大抵はレイアウトが乱れます。ガジェットの位置を変えたり、CSSで細かな調整をしていきます。\u003Cbr \/\u003E\n\u003Ch2\u003E必ずやることと見た目の変更\u003C\/h2\u003E今回のテンプレート変更時にやったことと、必ずやることです。\u003Cbr \/\u003E\n\u003Ch3\u003E必ずやること\u003C\/h3\u003Eテンプレートを変更したら、最低限やらなくてはいけないことがあります。\u003Cbr \/\u003E\n\u003Ch4\u003Eアナリティクスコードの再設置\u003C\/h4\u003E問題なく動作していれば、特に気にすることはありません。私は、動作していないことに気付くまで丸1日かかりました。\u003Cbr \/\u003E\n\u003Cbr class=\"Apple-interchange-newline\" \/\u003E 今までの設定その他で追加しても機能していなかった。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-BVJbLawiAU4\/U7Jjl1wFq2I\/AAAAAAAAB58\/Ac6ejv2OfDI\/s1600\/01.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-BVJbLawiAU4\/U7Jjl1wFq2I\/AAAAAAAAB58\/Ac6ejv2OfDI\/s1600\/01.png\" height=\"44\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nレポートを開くと上のほうに、\u003Cbr \/\u003E\n\u003Cblockquote\u003EYou are using a filtered view, which may cause your Users count to be inaccurate. Learn more\u003C\/blockquote\u003Eと表示されている。英語も得意ではないので、そのままGoogle翻訳したら、\u003Cbr \/\u003E\n\u003Cblockquote\u003Eあなたは、ユーザーが不正確に数えることがあり、これフィルタされたビューを使用しています。詳細はこちら\u003C\/blockquote\u003Eと、いまいちわからない日本語になったが、要はうまく動作しないということでしょう。リンクがあったので、「詳細はこちら」の部分をクリックしてみました。すると、「ユニークユーザー数とアクティブユーザー数の算出方法」ページが表示されました。が、長すぎて読んでません。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n結局やったことは、\u003Cbr \/\u003E\nまず、設定のその他の「アナリティクスのウェブ プロパティ ID」を削除します。\u003Cbr \/\u003E\n次に、\u003Ca href=\"http:\/\/www.memorou.com\/2014\/07\/blog-post.html\"\u003Eアナリティクスコードの設置 クロスドメイントラッキングの設定\u003C\/a\u003Eを参考に、トラッキングコードを貼り付けます。\u003Cbr \/\u003E\n\u003Ch4\u003E背景画像の削除\u003C\/h4\u003Eダウンロードしたテンプレートの背景画像などは、リンク切れを起こしている可能性があります。見栄えも悪いので、自分で用意した画像するか、そのまま削除します。今回は、リンク切れを起こしていない画像もすべて削除するか、自分で用意したものに差し替えました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n関連記事の画像がないときに表示されるNoImageを作成し変更\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-qOL7OrNy4Ps\/U7ElAKsiQGI\/AAAAAAAAB5s\/6EmxB4alStc\/s1600\/noimage.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-qOL7OrNy4Ps\/U7ElAKsiQGI\/AAAAAAAAB5s\/6EmxB4alStc\/s1600\/noimage.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E基本的に、HTMLの編集でbackground:url(http:\/\/で始まるURL部分を消すか、差し替えることで変更できます。\u003Cbr \/\u003E\n\u003Ch3\u003E見た目の変更\u003C\/h3\u003Eここからは、今回やった見た目の変更です。特に気にならなければデフォルトの状態で使用して問題ありません。大抵の場合、CSSの追加かHTMLの編集で変更します。HTMLの編集を行う場合は、バックアップをとりながらやると、問題が起きたときに途中から始めることができます。\u003Cbr \/\u003E\n\u003Ch4\u003Eタイトル画像の変更\u003C\/h4\u003Eタイトルの画像サイズを元の大きさから260×80に変更\u003Cbr \/\u003E\nレイアウトの編集から可能\u003Cbr \/\u003E\n\u003Ch4\u003ESNSボタンの削除\u003C\/h4\u003EHTMLの編集から、sosmed-kanan部分をすべて削除（サイドバーとフッター付近）\u003Cbr \/\u003E\n削除したくないけど非表示にしたいときは、コメントアウトするかCSSの追加で\u003Cbr \/\u003E\n\u003Cpre\u003E.sosmed-kananblogger {display:none;}\n.sosmed-kanantwitter {display:none;}\n.sosmed-kananfacebook {display:none;}\n.sosmed-kananrss {display:none;}\n\u003C\/pre\u003Eを追加する。\u003Cbr \/\u003E\n\u003Ch4\u003E影を消す\u003C\/h4\u003Eサイドバーやタイトルなどいたるところにある影をすべて消す。\u003Cbr \/\u003E\nHTMLの編集でbox-shadowで検索して削除する。\u003Cbr \/\u003E\n\u003Ch4\u003Eタイトル下の時間の削除\u003C\/h4\u003E時間を消してタイトルの上に投稿した年月日を追加します。\u003Cbr \/\u003E\n\u003Cpre\u003E.clock {display:none;}\u003C\/pre\u003Eまずは時間を削除します。\u003Cbr \/\u003E\n次に、HTMLの編集で、\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;h1 class='post-title entry-title'\u0026gt;\u003C\/pre\u003Eの上に、 \u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;data:post.dateHeader\/\u0026gt;\u003C\/pre\u003Eと追加します。追加する場所がタイトルの下がいいなら、\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;span class='clock'\u0026gt;\u003C\/pre\u003Eの前後あたりに追加する。 \u003Cbr \/\u003E\n\u003Ch4\u003Eフッターのサポートを変更\u003C\/h4\u003E広告主のリンクを貼ってもいいし、削除してしまってもいい。Supportで検索するとわかりやすい。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch4\u003Eグローバルメニューの変更\u003C\/h4\u003Eリンクとテキストを変更する。DROPで検索するとわかりやすい。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nグローバルメニューの大文字を小文字に変換\u003Cbr \/\u003E\nHTMLの編集でmenuのtext-transform:uppercaseをnoneに変更する。\u003Cbr \/\u003E\n\u003Ch4\u003Eアドセンスをレスポンシブに変更\u003C\/h4\u003E\u003Ca href=\"http:\/\/www.memorou.com\/2014\/06\/wordpress.html\"\u003EWordPressにレスポンシブ広告ユニットの設定\u003C\/a\u003Eを参考に、広告ユニットを変更する。\u003Cbr \/\u003E\n\u003Ch4\u003Eタイトル横にアドセンスを設置\u003C\/h4\u003Eテンプレートの編集で、260pxで検索する。検索に2つかかるのでそれを240pxに変更する。\u003Cbr \/\u003E\n次に、.pega-menuのwidth:70%を74%に変更したら保存して完了。\u003Cbr \/\u003E\n\u003Ch4\u003Eモバイル表示でサイドバーを表示\u003C\/h4\u003E携帯端末表示でモバイルテンプレートを選択したときに、カスタムを選択しただけではサイドバーは表示されません。HTMLの編集で携帯（スマホ）で見たときにサイドバーが表示されるように設定します。\u003Cbr \/\u003E\n参考：\u003Ca href=\"http:\/\/www.memorou.com\/2014\/07\/blogger_3792.html\"\u003EBloggerのモバイルテンプレートを編集してサイドバーを表示する方法\u003C\/a\u003E"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/6778276226744996854"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/6778276226744996854"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2014\/07\/blogger_3.html","title":"BloggerテンプレートをレスポンシブWebデザインに変えたときにやったこと"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-JNLo_OWlIBg\/U7S_llLT3lI\/AAAAAAAAB6M\/kFvPTl_EyiM\/s72-c\/03.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-81502998863240631"},"published":{"$t":"2014-05-22T11:29:00.000+09:00"},"updated":{"$t":"2017-02-19T22:43:40.820+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ページ内リンク"}],"title":{"type":"text","$t":"ページ内リンクで目次を設置する方法"},"content":{"type":"html","$t":"目次やページトップへの誘導などに役立つ、ページ内リンクの設定方法です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n設定は至って簡単です。今回は目次の作り方を例に進めます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/www.memorou.com\/2013\/11\/wordpress_21.html\" target=\"_blank\"\u003Eサンプル1\u003C\/a\u003E　\u003Ca href=\"http:\/\/www.memorou.com\/2014\/04\/wordpress-hatch.html\" target=\"_blank\"\u003Eサンプル2\u003C\/a\u003E\u003Cbr \/\u003E\n上記2つは、このブログで実際にページ内リンクを使って目次を作っている記事です。\u003Cbr \/\u003E\n\u003Ch2\u003E基本コード\u003C\/h2\u003Eサンプル1の1～3を見出しa、見出しb、見出しcとするとこうなります。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;a href=\"#mokuji1\"\u0026gt;見出しa\u0026lt;\/a\u0026gt;\n\u0026lt;a href=\"#mokuji2\"\u0026gt;見出しb\u0026lt;\/a\u0026gt;\n\u0026lt;a href=\"#mokuji3\"\u0026gt;見出しc\u0026lt;\/a\u0026gt;\n\u003C\/code\u003E\u003C\/pre\u003Eこれをリンク元とします。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n次はリンク先です。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;a name=\"mokuji1\"\u0026gt;\u0026lt;\/a\u0026gt;\n\u0026lt;a name=\"mokuji2\"\u0026gt;\u0026lt;\/a\u0026gt;\n\u0026lt;a name=\"mokuji3\"\u0026gt;\u0026lt;\/a\u0026gt;\n\u003C\/code\u003E\u003C\/pre\u003Emokuji1,2,3の部分は、半角英数字で任意のアンカー名をつけられます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこれが基本となります。\u003Cbr \/\u003E\n\u003Ch2\u003E設置例\u003C\/h2\u003E実際に設置してみると\u003Cbr \/\u003E\n\u003Ca name=\"mokuji\"\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Ch3\u003E目次\u003C\/h3\u003E\u003Col\u003E\u003Cli\u003E\u003Ca href=\"#mokuji1\"\u003E見出しa\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#mokuji2\"\u003E見出しb\u003C\/a\u003E\u003C\/li\u003E\n\u003Cli\u003E\u003Ca href=\"#mokuji3\"\u003E見出しc\u003C\/a\u003E\u003C\/li\u003E\n\u003C\/ol\u003E\u003Ch2 id=\"mokuji1\"\u003E見出しaです\u003C\/h2\u003E見出しaの文章…\u003Cbr \/\u003E\n見出しaの文章…\u003Cbr \/\u003E\n\u003Ch2 id=\"mokuji2\"\u003E見出しbです\u003C\/h2\u003E見出しbの文章…\u003Cbr \/\u003E\n見出しbの文章…\u003Cbr \/\u003E\n\u003Ch2 id=\"mokuji3\"\u003E見出しcです\u003C\/h2\u003E見出しcの文章…\u003Cbr \/\u003E\n見出しcの文章…\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca href=\"#mokuji\"\u003E目次へ戻る\u003C\/a\u003E  \u003Cbr \/\u003E\n\u003Ch2\u003E設置例のコード\u003C\/h2\u003E設置例の「目次」から「目次へ戻る」までのコードです。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;h3 id=\"mokuji\"\u0026gt;目次\u0026lt;\/h3\u0026gt;\n\u0026lt;ol\u0026gt;\n\u0026lt;li\u0026gt;\u0026lt;a href=\"#mokuji1\"\u0026gt;見出しa\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n\u0026lt;li\u0026gt;\u0026lt;a href=\"#mokuji2\"\u0026gt;見出しb\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n\u0026lt;li\u0026gt;\u0026lt;a href=\"#mokuji3\"\u0026gt;見出しc\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\n\u0026lt;\/ol\u0026gt;\n\n\u0026lt;h2 id=\"mokuji1\"\u0026gt;\n見出しaです\u0026lt;\/h2\u0026gt;\n\u0026lt;p\u0026gt;見出しaの文章…\u0026lt;\/p\u0026gt;\n\u0026lt;p\u0026gt;見出しaの文章…\u0026lt;\/p\u0026gt;\n\n\u0026lt;h2 id=\"mokuji2\"\u0026gt;\n見出しbです\u0026lt;\/h2\u0026gt;\n\u0026lt;p\u0026gt;見出しbの文章…\u0026lt;\/p\u0026gt;\n\u0026lt;p\u0026gt;見出しbの文章…\u0026lt;\/p\u0026gt;\n\n\u0026lt;h2 id=\"mokuji3\"\u0026gt;\n見出しcです\u0026lt;\/h2\u0026gt;\n\u0026lt;p\u0026gt;見出しcの文章…\u0026lt;\/p\u0026gt;\n\u0026lt;p\u0026gt;見出しcの文章…\u0026lt;\/p\u0026gt;\n\n\u0026lt;a href=\"#mokuji\"\u0026gt;目次へ戻る\u0026lt;\/a\u0026gt;\n\u003C\/code\u003E\u003C\/pre\u003Eこのコードを使う場合、Bloggerなら「HTML」モード、WordPressなら「テキスト」モードを選択してください。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-v7cmciPqq-o\/U3wqNXQV0uI\/AAAAAAAABzc\/aVfXfoe8qsI\/s1600\/01.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-v7cmciPqq-o\/U3wqNXQV0uI\/AAAAAAAABzc\/aVfXfoe8qsI\/s320\/01.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ch2\u003E自動目次作成プラグイン\u003C\/h2\u003EWordPressには自動で目次を作成してくれる便利なプラグインがあります。\u003Cbr \/\u003E\n「Table of Contents Plus」を使うと簡単に目次が設置できます。\u003Cbr \/\u003E\n\u003Ch2\u003Eサイト内の別ページの特定の場所にリンク\u003C\/h2\u003E自サイト内の、他ページの特定の場所にジャンプさせる方法\u003Cbr \/\u003E\nアンカー（ジャンプの着地点）側を \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;div id=\"a01\"\u0026gt;ジャンプ\u0026lt;\/div\u0026gt;\n\u003C\/code\u003E\u003C\/pre\u003Eとします。divやa01の部分は変更可能です。\u003Cbr \/\u003E\nジャンプのスタート地点は \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;a href=\"ページのURL#a01\"\u0026gt;ジャンプ\u0026lt;\/a\u0026gt;\u003C\/code\u003E\u003C\/pre\u003Eとなります。\u003Cbr \/\u003E\nこのとき、別タブで開かせたいときは \u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u0026lt;a href=\"ページのURL#a01\" target=\"_blank\"\u0026gt;ジャンプ\u0026lt;\/a\u0026gt;\u003C\/code\u003E\u003C\/pre\u003Eとします。ページのURLは着地点のページURLを入力します。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/81502998863240631"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/81502998863240631"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2014\/05\/blog-post_22.html","title":"ページ内リンクで目次を設置する方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-v7cmciPqq-o\/U3wqNXQV0uI\/AAAAAAAABzc\/aVfXfoe8qsI\/s72-c\/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-5726901524216346065"},"published":{"$t":"2014-04-14T09:57:00.000+09:00"},"updated":{"$t":"2017-02-20T22:10:25.351+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"LinkWithin"},{"scheme":"http://www.blogger.com/atom/ns#","term":"関連記事"}],"title":{"type":"text","$t":"Bloggerに関連記事を表示 LinkWithinの導入と効果"},"content":{"type":"html","$t":"自動で関連記事を表示してくれる\u003Ca href=\"http:\/\/www.linkwithin.com\/\" target=\"_blank\" rel=\"nofollow\"\u003ELinkWithin\u003C\/a\u003Eの使い方です。\u003Cbr \/\u003E\nBloggerに導入するときに、エラーが出たときの対処法や、個別記事だけに表示する方法、タイトルの変更方法も記録しています。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nまた、LinkWithin導入前と後のPV数の変化を比較しました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nLinkWithinを使用するとこのような表示になります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-O5B74WWFy5U\/U0eoJIC9XYI\/AAAAAAAABs4\/6xumaeC8AFE\/s1600\/00.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"141\" src=\"http:\/\/3.bp.blogspot.com\/-O5B74WWFy5U\/U0eoJIC9XYI\/AAAAAAAABs4\/6xumaeC8AFE\/s1600\/00.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n関連記事のタイトルと画像が一緒に表示されるため、文字だけのときより目を引くつくりになっています。\u003Cbr \/\u003E\n\u003Ch2\u003E設定方法\u003C\/h2\u003Eページ右にある入力欄にメールアドレスやブログURLなどを入力していきます。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-Q2JZZfpc4ts\/U0eGJQef1uI\/AAAAAAAABrw\/WAblvx30tzs\/s1600\/05.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"130\" src=\"http:\/\/1.bp.blogspot.com\/-Q2JZZfpc4ts\/U0eGJQef1uI\/AAAAAAAABrw\/WAblvx30tzs\/s1600\/05.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003EEmail：メールアドレス\u003Cbr \/\u003E\nBlog Link：ブログURL\u003Cbr \/\u003E\nPlatform：Bloggerを選択する\u003Cbr \/\u003E\nWidth：関連記事の表示数\u003Cbr \/\u003E\nMy blog has light text on a dark background：ブログの背景が暗くテキストが明るい場合はチェックを入れる \u003Cbr \/\u003E\n\u003Cbr \/\u003E\n入力ができたら「Get Widget!」をクリックします。 \u003Cbr \/\u003E\n\u003Cbr \/\u003E\nウィジェットのインストール説明ページに移動します。「Install Widget」をクリックします。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-TkVUe22SPog\/U0eIYBaxHoI\/AAAAAAAABr4\/TpH7lWfiZT8\/s1600\/06.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"100\" src=\"http:\/\/3.bp.blogspot.com\/-TkVUe22SPog\/U0eIYBaxHoI\/AAAAAAAABr4\/TpH7lWfiZT8\/s1600\/06.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nページ要素を追加画面が開きます。\u003Cbr \/\u003E\n説明を読んで納得できたら、タイトルを入力して「ウィジェットを追加」ボタンをクリックします。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-QoBTzRtTUUQ\/U0eKIYmOXjI\/AAAAAAAABsA\/g1UBhQaiGkM\/s1600\/07.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"172\" src=\"http:\/\/4.bp.blogspot.com\/-QoBTzRtTUUQ\/U0eKIYmOXjI\/AAAAAAAABsA\/g1UBhQaiGkM\/s1600\/07.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n通常は、これでレイアウト画面にLinkWithinのウィジェットが追加されて完了です。\u003Cbr \/\u003E\n\u003Ch2\u003Eエラーで追加できない場合の対処法\u003C\/h2\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-O96MLRHARVY\/U0ePY5HkyqI\/AAAAAAAABsM\/AbRRwB0G8Fk\/s1600\/08.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"127\" src=\"http:\/\/4.bp.blogspot.com\/-O96MLRHARVY\/U0ePY5HkyqI\/AAAAAAAABsM\/AbRRwB0G8Fk\/s1600\/08.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cblockquote\u003E次のエラーが見つかりました。\u003Cbr \/\u003E\nwidget.content: 必須項目が未入力です\u003Cbr \/\u003E\n引き続き問題が発生する場合:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nブラウザのキャッシュと Cookie をクリアして、もう一度お試しください。\u003C\/blockquote\u003Eと書かれています。この通りにしてもエラーが出る場合の対処法です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n最初に「Blogger」を選択したところで、「Other」を選択し「Get Widget!」をクリックします。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-Y5xzeFJaXjM\/U0eREMS_y_I\/AAAAAAAABsU\/AJg5h23NgUE\/s1600\/09.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"221\" src=\"http:\/\/1.bp.blogspot.com\/-Y5xzeFJaXjM\/U0eREMS_y_I\/AAAAAAAABsU\/AJg5h23NgUE\/s1600\/09.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nスクリプトコードが表示されるので、コードをコピーします。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-dgKzcu6nv0Y\/U0eSOcxrq5I\/AAAAAAAABsc\/ZWkZOVH0B9Y\/s1600\/10.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"190\" src=\"http:\/\/1.bp.blogspot.com\/-dgKzcu6nv0Y\/U0eSOcxrq5I\/AAAAAAAABsc\/ZWkZOVH0B9Y\/s1600\/10.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n次に、Bloggerのレイアウトで「HTML\/JavaScript」ガジェットを追加をします。\u003Cbr \/\u003E\nここにコピーしたコードを貼り付けます。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-kskYlWIrxhc\/U0eU_g36fUI\/AAAAAAAABso\/kvFSP8s2UOg\/s1600\/11.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"306\" src=\"http:\/\/3.bp.blogspot.com\/-kskYlWIrxhc\/U0eU_g36fUI\/AAAAAAAABso\/kvFSP8s2UOg\/s1600\/11.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E保存を押したら表示されます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n個別ページでは特に問題ありませんが、このままだとトップページのレイアウトが崩れてしまいます。\u003Cbr \/\u003E\n\u003Ch2\u003E個別記事にだけ表示\u003C\/h2\u003EテンプレートからHTMLの編集を行います。編集前に必ずバックアップを取っておいてください。\u003Cbr \/\u003E\n参考：\u003Ca href=\"http:\/\/www.memorou.com\/2015\/01\/blogger_11.html\"\u003Eテンプレートをバックアップする方法\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nHTMLの編集で、「HTML\/JavaScript」ガジェットを追加したときのタイトルを検索します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n今回は、上の画像のようにタイトルに「linkwithin」と入力したので、HTMLの編集で「linkwithin」を検索します。 \u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;b:widget id='HTML5' locked='false' title='linkwithin' type='HTML'\u0026gt;\n    \u0026lt;b:includable id='main'\u0026gt;\n  \u0026lt;!-- only display title if it's non-empty --\u0026gt;\n  \u0026lt;b:if cond='data:title != \u0026amp;quot;\u0026amp;quot;'\u0026gt;\n    \u0026lt;h2 class='title'\u0026gt;\u0026lt;data:title\/\u0026gt;\u0026lt;\/h2\u0026gt;\n  \u0026lt;\/b:if\u0026gt;\n  \u0026lt;div class='widget-content'\u0026gt;\n    \u0026lt;data:content\/\u0026gt;\n  \u0026lt;\/div\u0026gt;\n\u003C\/pre\u003E上のコードの\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;data:content\/\u0026gt;\u003C\/pre\u003E部分を下記のコードで挟みます。\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;b:if cond='data:blog.pageType == \"item\"'\u0026gt;\n上のコード\n\u0026lt;\/b:if\u0026gt;\n\u003C\/pre\u003Eこれでトップページの表示が消えてレイアウトが崩れることはありません。\u003Cbr \/\u003E\n\u003Ch2\u003Eタイトルの変更\u003C\/h2\u003E設置しただけの状態だと、タイトルが「You might also like」となります。\u003Cbr \/\u003E\nこれを、「関連記事」など任意の文字に変える方法です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nスクリプトコードを貼り付けた後、下記のコード\u003Cbr \/\u003E\n\u003Cpre\u003Evar linkwithin_text = \"関連記事\";\n\u003C\/pre\u003Eを\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;script\u0026gt;\nvar linkwithin_site_id = ********;\nvar linkwithin_text = \"関連記事\";\n\u0026lt;\/script\u0026gt;\n\u003C\/pre\u003Eのように追加します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこの場合、タイトルが「関連記事」になります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n参考サイト：\u003Ca href=\"http:\/\/www.furimuke.com\/2013\/05\/linkwithinblogger.html\" target=\"_blank\" rel=\"nofollow\"\u003ELinkWithinがトップページにも表示されてしまう時のBlogger対処方法\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Ch2\u003ELinkWithin導入前と後のPV数の変化\u003C\/h2\u003Eサイト内回遊率を上げて、PV数を伸ばすために、記事の下にタイトルだけを表示する関連記事を設置していました。  しかし、思うようにPV数が伸びなかったため、Linkwithinで画像も一緒に表示するように変更しました。\u003Cbr \/\u003E\n\u003Ch3\u003E変更前\u003C\/h3\u003E下の画像が変更前の表示です。タイトル（あわせて読みたい）は別として、Bloggerを使っている方の一般的な関連記事の表示になっていると思います。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-vohHJl9UzQg\/U0d1DLU9XRI\/AAAAAAAABrc\/rlw2eufbUWE\/s1600\/03.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"74\" src=\"http:\/\/3.bp.blogspot.com\/-vohHJl9UzQg\/U0d1DLU9XRI\/AAAAAAAABrc\/rlw2eufbUWE\/s1600\/03.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E禁煙に関する記事の関連記事です。 \u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこの表示方法のときの「訪問別ページビュー」「訪問時の平均滞在時間」「直帰率」はこのようになります。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-CVVY2NlSWd8\/U0d2EIWULGI\/AAAAAAAABrk\/2UPoemG0N9w\/s1600\/04.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"52\" src=\"http:\/\/3.bp.blogspot.com\/-CVVY2NlSWd8\/U0d2EIWULGI\/AAAAAAAABrk\/2UPoemG0N9w\/s1600\/04.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E変更直前約2週間（2014年3月27日から2014年4月10日まで）のデータです。\u003Cbr \/\u003E\n訪問別ページビューが1.39\u003Cbr \/\u003E\n訪問時の平均滞在時間が1:16\u003Cbr \/\u003E\n直帰率が81.30%\u003Cbr \/\u003E\n\u003Ch3\u003E変更後\u003C\/h3\u003E下の画像が変更後の表示です。記事タイトルと共に画像を表示するようしました。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-O5B74WWFy5U\/U0eoJIC9XYI\/AAAAAAAABs8\/466Um6c60HA\/s1600\/00.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"141\" src=\"http:\/\/4.bp.blogspot.com\/-O5B74WWFy5U\/U0eoJIC9XYI\/AAAAAAAABs8\/466Um6c60HA\/s1600\/00.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E変更前と同じ禁煙に関する記事の関連記事です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこの表示方法のときの「訪問別ページビュー」「訪問時の平均滞在時間」「直帰率」はこのようになります。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-OIkQ0u9byCQ\/U12kX2nZCXI\/AAAAAAAABv8\/eA4LPxl3sEg\/s1600\/04.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"51\" src=\"http:\/\/2.bp.blogspot.com\/-OIkQ0u9byCQ\/U12kX2nZCXI\/AAAAAAAABv8\/eA4LPxl3sEg\/s1600\/04.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E変更後約2週間（2014年４月11日から2014年4月25日まで）のデータです。\u003Cbr \/\u003E\nページ\/セッションが1.48\u003Cbr \/\u003E\n平均セッション時間が1:16\u003Cbr \/\u003E\n直帰率が80.82%\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n※アナリティクスの仕様変更により、訪問別ページビューがページ\/セッションに、訪問時の平均滞在時間が平均セッション時間に変わりました。\u003Cbr \/\u003E\n\u003Ch3\u003E比較結果\u003C\/h3\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-iCP8rE5qzb0\/U12nWbIBV-I\/AAAAAAAABwI\/7A7YSgOkxII\/s1600\/05.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"57\" src=\"http:\/\/4.bp.blogspot.com\/-iCP8rE5qzb0\/U12nWbIBV-I\/AAAAAAAABwI\/7A7YSgOkxII\/s1600\/05.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eグラフの青が変更前で、オレンジが変更後です。これはユーザーサマリーでの比較です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n画像の通り、比較対照にしたそれぞれの数値がわずかながら改善されました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nページ\/セッションが1.39→1.48\u003Cbr \/\u003E\n平均セッション時間が1:16→1:16\u003Cbr \/\u003E\n直帰率が81.30→80.82\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこの結果により離脱率も減少しました。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-G_icML3D6QA\/U12q6BWFLEI\/AAAAAAAABwU\/4zvuvfmg67g\/s1600\/06.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-G_icML3D6QA\/U12q6BWFLEI\/AAAAAAAABwU\/4zvuvfmg67g\/s1600\/06.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E離脱率が71.87%→67.55%になり、6.39%も減少しました。これは行動サマリーの数値です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n比較期間が約2週間と短いため、今回はたまたま改善した可能性もあります。\u003Cbr \/\u003E\n\u003Ch3\u003E変更後1ヶ月の比較結果\u003C\/h3\u003Eせっかくなので、1ヶ月でどれくらい改善されたのか比較してみます。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-GfKtC_aEZas\/U3qylX4xztI\/AAAAAAAABzM\/x_m3AgB7SKo\/s1600\/04.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"60\" src=\"http:\/\/4.bp.blogspot.com\/-GfKtC_aEZas\/U3qylX4xztI\/AAAAAAAABzM\/x_m3AgB7SKo\/s1600\/04.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eページ\/セッション（訪問別ページビュー）が1.42から1.50に上昇\u003Cbr \/\u003E\n平均セッション時間（訪問時の平均滞在時間）が1:19から1:26に上昇\u003Cbr \/\u003E\n直帰率が80.72%から80.46%に減少\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n前回の比較結果より更に改善されています。画像つきの関連記事表示はPV数アップに効果があると言えそうです。\u003Cbr \/\u003E\n\u003Ch3\u003E追記\u003C\/h3\u003Eこの投稿から1年が経ちました。テンプレートも変更し、記事数も増えた現在のページ\/セッションや滞在時間と比較します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-D4Xgp_DzZ9M\/VVqzDWmfUEI\/AAAAAAAACys\/VHBUU9PjZO4\/s1600\/10.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"73\" src=\"http:\/\/3.bp.blogspot.com\/-D4Xgp_DzZ9M\/VVqzDWmfUEI\/AAAAAAAACys\/VHBUU9PjZO4\/s320\/10.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E2014年４月11日から2014年4月25日までと、2015年４月11日から2015年4月25日までの比較です。（追記ここまで）\u003Cbr \/\u003E\n\u003Ch2\u003E関連記事をクリックするたびにリダイレクトされる？\u003C\/h2\u003EBloggerの統計でトラフィックを確認すると、\u003Cbr \/\u003E\nwidget3.linkwithin.com\u003Cbr \/\u003E\nwidget5.linkwithin.com\u003Cbr \/\u003E\nwidget6.linkwithin.com\u003Cbr \/\u003E\nからアクセスがありました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n下の画像はあるときのトラフィックを表示したものです。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-RzGp9VyPNyE\/U2rVih16SJI\/AAAAAAAABx0\/1UK9f8bQPjo\/s1600\/01.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"62\" src=\"http:\/\/2.bp.blogspot.com\/-RzGp9VyPNyE\/U2rVih16SJI\/AAAAAAAABx0\/1UK9f8bQPjo\/s1600\/01.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eこれは関連記事がクリックされるたびにリダイレクトされているようです。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n上記URLにアクセスすると「404 Not Found」と表示されます。\u003Cbr \/\u003E\n\u003Ch3\u003Eサイト内リンクに見える\u003C\/h3\u003E関連記事にマウスを乗せると、一見サイト内にリンクしているように見えます。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-FU_sFUdswJc\/U2r6MMLwn9I\/AAAAAAAAByQ\/AU3KvaorpM0\/s1600\/02.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"166\" src=\"http:\/\/1.bp.blogspot.com\/-FU_sFUdswJc\/U2r6MMLwn9I\/AAAAAAAAByQ\/AU3KvaorpM0\/s1600\/02.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nが、関連記事の上で右クリックして、リンクのURLをコピーて貼り付けると、URL内に「redirect」が含まれています。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-WKqjwVGtTSA\/U2r-LDGRZSI\/AAAAAAAAByc\/x4dxsLskz0o\/s1600\/03.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"162\" src=\"http:\/\/1.bp.blogspot.com\/-WKqjwVGtTSA\/U2r-LDGRZSI\/AAAAAAAAByc\/x4dxsLskz0o\/s1600\/03.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ch3\u003Eリダイレクトの影響\u003C\/h3\u003E一説によると、リダイレクトすることで、SEOにも効果があるとか。真偽のほどはわかりません。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nまだ導入して1ヶ月ほどですが、このブログでは今のところマイナスの影響はありません。\u003Cbr \/\u003E\n\u003Ch2\u003E使えなくなる？\u003C\/h2\u003ELinkwithinは、たま～に使えなくなるときがあります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nいつ表示されなくなるのかはわかりませんが、グーグルアナリティクスのオーガニック検索を見てみると、2014年6月4日に「linkwithin　無くなった」のキーワードからアクセスがあり気付きました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nブログを開いてみると、今まで関連記事があった場所は何も表示されていません。\u003Cbr \/\u003E\n\u003Ch3\u003Eエラー\u003C\/h3\u003ELinkwithinのサイトにアクセスしてみると、エラーで「このウェブページにアクセスできません」となります。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-5oajZOS88mk\/U4_CVCsEwlI\/AAAAAAAAB2M\/tFENczwLuog\/s1600\/01.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"62\" src=\"http:\/\/3.bp.blogspot.com\/-5oajZOS88mk\/U4_CVCsEwlI\/AAAAAAAAB2M\/tFENczwLuog\/s1600\/01.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eこのときは一時的なもので、数日後に何事もなく復活していました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n停止中は、Linkwithinをガジェットで追加していた部分が下の画像のように表示されて、見栄えも良くないのでひとまず削除することにしました。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-lzibWRWmGgc\/U4_EmUMr3ZI\/AAAAAAAAB2Y\/-uBJHFBgTQ8\/s1600\/02.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"97\" src=\"http:\/\/2.bp.blogspot.com\/-lzibWRWmGgc\/U4_EmUMr3ZI\/AAAAAAAAB2Y\/-uBJHFBgTQ8\/s1600\/02.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eこのように、画像のリンク切れのようになっていました。削除する前に、コードをメモ帳などに保存しておくと、復活したときすぐに設置でき便利です。\u003Cbr \/\u003E\n\u003Ch3\u003E再設置\u003C\/h3\u003E停止中にガジェットを削除すると、テンプレートが上書きされ表示がおかしくなることがあります。そんなときは、上の設定方法から設置しなおすと問題なく表示されます。\u003Cbr \/\u003E\n"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/5726901524216346065"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/5726901524216346065"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2014\/04\/linkwithin-blogger.html","title":"Bloggerに関連記事を表示 LinkWithinの導入と効果"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-O5B74WWFy5U\/U0eoJIC9XYI\/AAAAAAAABs4\/6xumaeC8AFE\/s72-c\/00.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-1089770248057648776"},"published":{"$t":"2014-01-08T12:17:00.000+09:00"},"updated":{"$t":"2017-02-25T00:38:29.412+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テンプレート"}],"title":{"type":"text","$t":"Bloggerでやっているカスタマイズのほぼ全ての記録（シンプルテンプレート2014年1月8日版）"},"content":{"type":"html","$t":"Bloggerのシンプルテンプレートで作成しているこのブログの現時点でやっているカスタマイズをほぼ全て記録します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nレイアウトやデザインなどを元に戻すときに参考にする自分用の記録です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\nほとんどが、今まで記事にしてきた内容の実践です。\u003Cbr \/\u003E\n\u003Ch2\u003E現在のデザインとレイアウト\u003C\/h2\u003E上からブログタイトル、メニューバー、ブログの投稿で、右サイドバーに忍者おまとめボタン、サイト内検索、AdSense（レクタングル中）、新着記事です。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-uBwQ1pBJccw\/Usy4kSBgSPI\/AAAAAAAABPY\/iAJNlhdJ15c\/s1600\/01.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-uBwQ1pBJccw\/Usy4kSBgSPI\/AAAAAAAABPY\/iAJNlhdJ15c\/s1600\/01.png\" height=\"196\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E忍者おまとめボタンはヘッダーを分割しているのではなく、右サイドバーを上に移動してヘッダー内にあるように見せています。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/www.memorou.com\/2013\/12\/blogger_16.html\"\u003EBloggerに忍者おまとめボタンを簡単に設置する方法\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nサイト内検索も同様に、メニューバーに設置しているのではなく、右サイドバーにガジェットで追加後サイドバーを上に移動しています。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n右サイドバーにはその他に、人気記事、メニュー、タグリスト（ラベル）、AdSense（スカイスクレイパー大）を設置しています。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n左側メイン部分には、記事下にAdSense（レクタングル大）、忍者おまとめボタン、関連記事、最近の人気記事、AdSense（リンクユニット横長中）を設置しています。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nフッター部分は、3分割したレイアウトを選択して、左にアーカイブ、真ん中にGoogle+とRSS、右にコンタクト用のメールフォームとAbout\/サイトマップを設置しています。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-7hzEUUfPcfA\/Usy89x7HC9I\/AAAAAAAABPk\/8wH7tJP08xk\/s1600\/02.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-7hzEUUfPcfA\/Usy89x7HC9I\/AAAAAAAABPk\/8wH7tJP08xk\/s1600\/02.png\" height=\"157\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E一番下にコピーライトを書いています。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/www.memorou.com\/2014\/01\/blog-post_6.html\"\u003Eコピーライトの変更と書き方\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Ch2\u003Eテンプレートのカスタマイズ\u003C\/h2\u003Eテンプレートのカスタマイズから行っている変更点です。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-X243aJOTMlE\/Usy-Uj5mjoI\/AAAAAAAABPs\/RDLcxPJOV8A\/s1600\/03.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-X243aJOTMlE\/Usy-Uj5mjoI\/AAAAAAAABPs\/RDLcxPJOV8A\/s1600\/03.png\" height=\"109\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nまず、シンプルテンプレートを使用して、幅の調整でブログ全体の幅を1000ピクセル、右側のサイドバーを350ピクセルに変更しています。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-Zxq7nxqL6F4\/Usy-2hBO6-I\/AAAAAAAABP0\/L_NQacCx0rk\/s1600\/04.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-Zxq7nxqL6F4\/Usy-2hBO6-I\/AAAAAAAABP0\/L_NQacCx0rk\/s1600\/04.png\" height=\"66\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n上級者向けのCSSを追加で下記コードを追加しています。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\n\/* フォント変更 *\/\n* { font-family:\"meiryo\",\"メイリオ\",\"ヒラギノ角ゴ Pro W3\", \"ＭＳ Ｐゴシック\", sans-serif; } \n\nh2 { font-family:\"meiryo\",\"メイリオ\",\"ヒラギノ角ゴ Pro W3\", \"ＭＳ Ｐゴシック\", sans-serif; } \n\n\/* h2-h4の背景 *\/\nh2 {\nclear:both; \/* 回り込み *\/\ncolor:#464646;\nfont-size:16px;\nbackground-image: url(http:\/\/icon.png);\nbackground-repeat: no-repeat;\nbackground-position: left center;\npadding: 0px 0px 0px 20px;\nmargin: 0px 0px 5px 0px ;\n}\n\n\/* 記事タイトル *\/\nh3 {\npadding: 15px 0px 0px 30px;\nborder-bottom: 1px solid #eee;\n}\n\n\/* 記事タイトルリンク *\/\n.entry-title a{\ncolor: #464646;\n}\n\n.entry-title a:hover{\ncolor: #fc4f08;\n}\n\n\/* 記事内のh2 *\/\nh2.main{\nfont-size:16px;\nmargin:30px 0px 20px -40px;\npadding: 5px 0px 3px 40px;\ncolor:#fff;\nbackground:#464646;\ntext-decoration: none;\nborder-bottom: 2px solid #fc4f08;\nborder-right: 2px solid #fc4f08;\nborder-top: 2px solid #464646;\nborder-left: 2px solid #464646;\nwidth: 104%;\nbackground-image: none;\n}\n\n\/* 記事内のh3 *\/\nh3.main{\nmargin:0.5em 0;\nborder-left: 6px ridge #464646;\npadding: 2px 10px;\n}\n\n\/* 記事内 *\/\nh4{\nmargin:0.5em 0;\n}\n\n\/* 検索タイトルなど *\/\nh2.title{\nfont-size:14px;\nborder-bottom: none;\n}\n\n\/* フッターの色と横幅いっぱい *\/\nfooter{\nmargin: 0 -3%;\n}\n\n\/*CSS メニューバー*\/\n#topmenu ul{\nmargin: 0px 0px 0px -58px;\nborder-bottom: 1px  solid #eee;\ndisplay: block;\n}\n\n#topmenu li {\nfloat: left;\ntext-align: center;\nwidth: 165px;\n}\n\n#topmenu li a {\ncolor:#464646;\ntext-decoration: none;\ndisplay: block;\nborder-left: 1px groove #eee;\n}\n\n#topmenu li a:hover, \n#topmenu li.active {\ncolor:#fff;\nbackground: #464646;\n}\n\n\/*続きを読む背景*\/\n.jump-link{\ntext-align: center;\nline-height: 220%;\nwidth: 150px;\nmargin: 0px 0px 0px 450px ;\n}\n\n.jump-link a{\ndisplay: block;\ncolor:#464646;\nbackground:#eee;\nborder-left: 2px solid #fc4f08;\n}\n\n.jump-link a:hover{\ndisplay: block;\ntext-align: center;\ncolor:#fff;\nbackground:#464646;\ntext-decoration: none;\nborder-left: 2px solid #fc4f08;\n}\n\n\/*ラベルの設定*\/\n.post-footer{\nbackground:Transparent;\nmargin: 0px 0px 0px 20px;\nwidth: 90%;\n}\n\n\/* 表 ①よく使う用*\/\n.table{\n width: 100%;\n}\n\ntable {\n margin: 0 0 2em 2px;\n}\n\n.table td {\n padding: 10px;\n border: 1px solid #CCC;\n background-color: #FFF;\n}\n\n.table td.tb {\n width: 30%;\n background-color: #F8F5EF;\n}\n\n\/* 表 ②もくじ用*\/\n.sample_01{\nwidth: 100%;\nborder-spacing: 2px 0px;\n}\n.sample_01 th{\nwidth: 50%;\npadding: 6px;\ntext-align: left;\nvertical-align: top;\ncolor: #333;\nbackground-color: #eee;\nborder: 1px solid #b9b9b9;\n}\n.sample_01 td{\npadding: 6px;\nbackground-color: #fff;\nborder: 1px solid #b9b9b9;\n}\n\n\/* レンサバ用テーブル *\/\n.table010 {\nwidth: 100%;\n\u0026nbsp; \u0026nbsp; \u0026nbsp;background-color: #ffffff;\n\u0026nbsp; \u0026nbsp; \u0026nbsp;border-width: 1px;\n\u0026nbsp; \u0026nbsp; \u0026nbsp;border-style: solid;\n\u0026nbsp; \u0026nbsp; \u0026nbsp;border-collapse: collapse;\n\u0026nbsp; \u0026nbsp; \u0026nbsp;border-color: #464646;\n}\n\n.table010 td,.table010 th {\n\u0026nbsp; \u0026nbsp; \u0026nbsp;border-width: 1px;\n\u0026nbsp; \u0026nbsp; \u0026nbsp;border-style: solid;\n\u0026nbsp; \u0026nbsp; \u0026nbsp;padding: 5px;\n\u0026nbsp; \u0026nbsp; \u0026nbsp;border-color: #464646;\n\u0026nbsp; \u0026nbsp; \u0026nbsp;width: 25%;\n\u0026nbsp; \u0026nbsp; \u0026nbsp;text-align:center;\n}\n\n.table010 th {\n\u0026nbsp; \u0026nbsp; \u0026nbsp;background-color: #464646;\n\u0026nbsp; \u0026nbsp; \u0026nbsp;color: #ffffff;\n\u0026nbsp; \u0026nbsp; \u0026nbsp;border-color: #777;\n}\n\n\n\/* メインカラムの位置 *\/\n#main{\nbackground: #fff;\nwidth: 115%;\nmargin: -20px -30px 0px -30px;\n-moz-border-radius: 5px;    \/* Firefox *\/\n-webkit-border-radius: 5px; \/* Safari,Chrome *\/\nborder-radius: 5px;         \/* CSS3 *\/\nborder: 1px #aaa solid;     \/* 枠線の装飾 *\/\n}\n\n\/* 右サイドバーの位置 *\/\n#sidebar-right-1{\nmargin: -150px -40px 0px 60px;\n}\n\n\/* SNSボタンの位置 *\/\n.ninja_onebutton{\nmargin: 0px 0px -15px 10px;\n}\n\n\/* ヘッダーの位置 *\/\nheader{\nmargin: -25px -40px;\n}\n\n\/* 引用装飾 *\/\nblockquote{\nborder-left:5px solid #ddd;\nbackground: #eee;\npadding: 10px;\nfont-size:12px;\n}\n\n\/* コード装飾 *\/\npre{\nfont-size:13px;\nborder:1px solid #aaa;\nbackground:#eee;\npadding:0.5em;\nwidth:90%;\nmax-height:100px;\noverflow: auto;\n}\n\n\/* 記事内の幅 *\/\n.entry-content{\nwidth: 90%;\nmargin: 0px 0px 0px 30px ;\n}\n\n\/* 日付の装飾 *\/\n.date-header{\nbackground-image: none;\nfont-size: 12px;\nfont-weight: normal;\nmargin: 5px 0px -25px 5px ;\n}\n\n\/* ラベル検索位置 *\/\n.status-msg-wrap{\nmargin-top: 0px;\nborder:1px solid #fff;\n}\n\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\n見出しの装飾や、テーブルの装飾などをここに追加しています。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"reference\"\u003E[追記：2017年2月]\u003Cbr \/\u003E\n現在は、レスポンシブデザインに対応しているテンプレートを使用しています。\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/www.memorou.com\/2016\/06\/bloggervaster2.html\"\u003EBloggerの無料日本語レスポンシブテンプレート「Vaster2」のカスタマイズ\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/1089770248057648776"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/1089770248057648776"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2014\/01\/blogger201418.html","title":"Bloggerでやっているカスタマイズのほぼ全ての記録（シンプルテンプレート2014年1月8日版）"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-uBwQ1pBJccw\/Usy4kSBgSPI\/AAAAAAAABPY\/iAJNlhdJ15c\/s72-c\/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-5650919063428550162"},"published":{"$t":"2013-12-16T11:30:00.000+09:00"},"updated":{"$t":"2017-02-25T16:53:27.359+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"}],"title":{"type":"text","$t":"Bloggerに忍者おまとめボタンを簡単に設置する方法"},"content":{"type":"html","$t":"ブログタイトルの横にスペースがあって、もったいないのでSNSボタンを設置することにしました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n設置するのは忍者おまとめボタンで、選べるボタンの種類はTwitterのツイートボタン、Facebookのいいねボタン、はてブ、ぐぐたすボタンなど全部で100種類以上あります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n完成時の画像はこのようになります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-PM6gZkZRwnc\/Uq5UKbbADNI\/AAAAAAAAA8I\/N-QjH3D4aAM\/s1600\/0.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-PM6gZkZRwnc\/Uq5UKbbADNI\/AAAAAAAAA8I\/N-QjH3D4aAM\/s320\/0.png\" height=\"127\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ch2\u003E忍者まとめボタンの作成\u003C\/h2\u003Eまず、\u003Ca href=\"http:\/\/www.ninja.co.jp\/omatome\/\" target=\"_blank\" rel=\"nofollow\"\u003Ehttp:\/\/www.ninja.co.jp\/omatome\/\u003C\/a\u003Eにアクセスして、画面右上の「新規ユーザー登録」から仮登録をします。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-iA0jz2YKwUk\/Uq5XkZVDssI\/AAAAAAAAA8U\/WnpidCzgTCY\/s1600\/1.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-iA0jz2YKwUk\/Uq5XkZVDssI\/AAAAAAAAA8U\/WnpidCzgTCY\/s320\/1.png\" height=\"73\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eすでに登録済みのかたは、横の「ログイン」から。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n新規ユーザー登録をクリックすると、仮登録画面になるので、メールアドレスを入力して「この内容を送信」ボタンをクリックします。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nすると、入力したメールアドレスに本登録のURLが記載されたメールが届きます。\u003Cbr \/\u003E\n本登録のURLをクリックして必要事項を入力し登録を完了させます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n次に、設置するWebサイトでBloggerを選択します。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-gUQzhQ1xoDw\/Uq5Z_HpWspI\/AAAAAAAAA8o\/QcKoASrNxLU\/s1600\/3.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-gUQzhQ1xoDw\/Uq5Z_HpWspI\/AAAAAAAAA8o\/QcKoASrNxLU\/s320\/3.png\" height=\"104\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eおすすめセットボタンが表示されるので、好みのセットがあれば選択して「次へ」ボタンをクリックします。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n好みのセットがない場合は、「自分でカスタマイズして選ぶ」ボタンをクリックします。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-Qo4CsFjUiJY\/Uq5ao9zuLVI\/AAAAAAAAA8w\/HPObI14eTWs\/s1600\/4.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-Qo4CsFjUiJY\/Uq5ao9zuLVI\/AAAAAAAAA8w\/HPObI14eTWs\/s320\/4.png\" height=\"320\" width=\"293\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ch3\u003E自分でカスタマイズして選ぶ\u003C\/h3\u003Eボタンを選択すると下にプレビューが表示されます。\u003Cbr \/\u003E\n並び順は、ドラッグアンドドロップで変更できるので、ひとまず気に入ったボタンがあったら選択しておきます。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-2aYArCFzXlo\/Uq5dDgcLHXI\/AAAAAAAAA88\/V-pIdOGzHbQ\/s1600\/5.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-2aYArCFzXlo\/Uq5dDgcLHXI\/AAAAAAAAA88\/V-pIdOGzHbQ\/s320\/5.png\" height=\"154\" width=\"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\u003Ch2\u003Eブログタイトル横に忍者おまとめボタンを設置する方法\u003C\/h2\u003Eレイアウトからガジェットの追加をクリックして、「HTML\/JavaScript」を選択します。\u003Cbr \/\u003E\nそこに、上で取得したスクリプトコードを貼り付けて「保存」ボタンをクリックします。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n次に、テンプレートのカスタマイズをします。\u003Cbr \/\u003E\n上級者向けのCSSを追加で、サイドバーの表示位置を調節します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n調節方法は、\u003Ca href=\"http:\/\/www.memorou.com\/2013\/11\/blogger_29.html\"\u003EBloggerのサイト内検索をメニューバーに表示する方法\u003C\/a\u003Eの下の方に書いてます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n下のガジェットとの余白の調整は、下記の記述でできます。\u003Cbr \/\u003E\n\u003Cpre\u003E\/* SNSボタンの位置 *\/\n.ninja_onebutton{\nmargin: 0px 0px -25px 0px;\n}\n\u003C\/pre\u003E数字はレイアウトによって適宜変更してください。 \u003Cbr \/\u003E\n\u003Cbr \/\u003E\nIEやGCなどブラウザによって表示位置が異なるので注意が必要です。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/5650919063428550162"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/5650919063428550162"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2013\/12\/blogger_16.html","title":"Bloggerに忍者おまとめボタンを簡単に設置する方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-PM6gZkZRwnc\/Uq5UKbbADNI\/AAAAAAAAA8I\/N-QjH3D4aAM\/s72-c\/0.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-469258560316076817"},"published":{"$t":"2013-12-13T11:18:00.000+09:00"},"updated":{"$t":"2017-02-25T17:08:57.368+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"AdSense"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"}],"title":{"type":"text","$t":"Bloggerの記事タイトル下と記事下にアドセンス広告を設置する方法"},"content":{"type":"html","$t":"通常、Bloggerにアドセンスを設置する場合は、収益からブログ上に広告を表示で「はい」を選択します。\u003Cbr \/\u003E\nその後、レイアウトからガジェットをクリックして、広告を表示したい場所に移動します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-QokAZY_doU4\/UqgyoljHR_I\/AAAAAAAAA7M\/CRNldGO4vG0\/s1600\/1.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"162\" src=\"http:\/\/1.bp.blogspot.com\/-QokAZY_doU4\/UqgyoljHR_I\/AAAAAAAAA7M\/CRNldGO4vG0\/s320\/1.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nしかし、この方法でアドセンスを設置すると、タイトルの下に表示することができません。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n今回は、HTMLを編集して表示させたので、そのときの手順や、注意することを記録します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nHTMLを編集する場合は、念のためバックアップをとっておきます。バックアップ方法がわからない場合は、\u003Ca href=\"http:\/\/www.memorou.com\/2015\/01\/blogger_11.html\"\u003Eテンプレートのバックアップ\u003C\/a\u003Eを参考にしてください。\u003Cbr \/\u003E\n\u003Ch2\u003Eアドセンス広告を設置する前の準備\u003C\/h2\u003EガジェットのHTML\/JavaScriptにアドセンス広告コードを貼り付ける場合とは異なり、HTMLに直接追加する場合は、コードをエンティティ化（実態参照化）する必要があります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n変換するのは、「\u0026lt;」と「\u0026gt;」と「\"」の３種類でそれぞれ下記のように書き換えます。\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt; を \u0026amp;lt;\n\u0026gt; を \u0026amp;gt;\n\" を \u0026amp;quot;\n\u003C\/pre\u003E１つずつ書き換えるのは非常に面倒なので、変換ツールを使用させてもらいます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n広告コードをコピーしたら、\u003Ca href=\"http:\/\/labs.m-logic.jp\/html2text\/\" target=\"_blank\" rel=\"nofollow\"\u003EHTML2TEXT\u003C\/a\u003Eの元の文章の部分にペーストして、「上から下へ変換」ボタンをクリックします。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nすると、下に変換されたコードが表示されるので、それをコピーしてHTMLに貼り付けます。\u003Cbr \/\u003E\nコードを貼り付ける場所は、表示させる場所によって変わります。\u003Cbr \/\u003E\n\u003Ch2\u003E記事タイトルの下にアドセンスを表示する方法\u003C\/h2\u003EテンプレートからHTMLの編集をクリックします。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-fDeQk7X_MF0\/UqkaK89fp8I\/AAAAAAAAA7o\/_Hye0qTtZG0\/s1600\/5.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"214\" src=\"http:\/\/2.bp.blogspot.com\/-fDeQk7X_MF0\/UqkaK89fp8I\/AAAAAAAAA7o\/_Hye0qTtZG0\/s320\/5.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003EHTMLから下記の記述を探します。\u003Cbr \/\u003E\n\u003Cpre\u003Ediv class='post-header-line-1\n\u003C\/pre\u003Eシンプルテンプレートでは、2つ見つけることができるので、2個目の下に変換したコードを貼り付けます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n貼り付けたら、テンプレートを保存ボタンをクリックして完成です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこれで、記事タイトルの下に表示されるようになりますが、トップページに表示したくない場合は、 \u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;b:if cond=\"data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;\"\u0026gt;\nここに変換したコード\n\u0026lt;\/b:if\u0026gt;\n\u003C\/pre\u003Eのように変換したコードを挟みます。 \u003Cbr \/\u003E\nこれで、個別ページにのみ広告が表示されるようになります。 \u003Cbr \/\u003E\n\u003Ch3\u003E検索の方法\u003C\/h3\u003Eテンプレートを編集の枠内で、どこでもいいので一度クリックして、Ctrlキー+Fを押すと検索窓が開くので、そこに検索したい文字を入力もしくは貼り付けます。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-i4CPrGSGYoo\/UqkgliEPFaI\/AAAAAAAAA74\/UT_sry6pFY4\/s1600\/6.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"181\" src=\"http:\/\/4.bp.blogspot.com\/-i4CPrGSGYoo\/UqkgliEPFaI\/AAAAAAAAA74\/UT_sry6pFY4\/s320\/6.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003Eすると、検索した文字がハイライト表示されます。\u003Cbr \/\u003E\n\u003Ch2\u003E記事の下にアドセンスを表示する方法\u003C\/h2\u003E記事タイトルの下にアドセンスを表示する方法と同様に、テンプレートからHTMLの編集をクリックし、下記の記述を探します。 \u003Cbr \/\u003E\n\u003Cpre\u003Edata:post.body\n\u003C\/pre\u003Eシンプルテンプレートでは、3つ見つけることができるので、2個目の下に変換したコードを貼り付けます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n貼り付けたら、テンプレートを保存ボタンをクリックして完成です。 \u003Cbr \/\u003E\n\u003Cbr \/\u003E\n個別ページの記事下のみ表示させる場合は、上記と同じように「if」で挟みます。\u003Cbr \/\u003E\n\u003Ch2\u003Eタイトルや記事の下に設置するときの注意点\u003C\/h2\u003E例えば、すでに「ガジェットを追加」でAdSenseを1つ設置して、HTML\/JavaScriptで2つ設置していた場合、この時点で合計3つの広告が表示されることになります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n通常、Bloggerでは、4つ目以降の広告は白い空白となって、広告が表示されないように自動的に制御されます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nしかし、上記手順で記事タイトルの下と記事の下にアドセンスを追加すると、元々設置していた3つと追加した2つで合計5つ表示されてしまいます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n理由はわかりませんが、この場合自動的に制御されず、\u003Ca href=\"https:\/\/support.google.com\/adsense\/answer\/48182?hl=ja\" target=\"_blank\" rel=\"nofollow\"\u003EAdSenseプログラムポリシー\u003C\/a\u003Eに違反することになりかねません。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nまた、広告（スポンサーリンク）と記入するか、スペースやラインを入れるなどして、広告であるということをわかるようにしておいたほうが無難です。\u003Cbr \/\u003E\n\u003Ch3\u003E広告表示位置の修正\u003C\/h3\u003E広告が思っていた高さに表示されない場合や、少し右に寄せたい場合など、位置を修正する方法です。\u003Cbr \/\u003E\n\u003Cpre\u003E\u0026lt;div style=\"margin : 10px 0px 20px 40px\"\u0026gt;\nここに変換した広告コード\n\u0026lt;\/div\u0026gt;\n\u003C\/pre\u003E上記のようにマージンで調整します。\u003Cbr \/\u003E\n左から、上、右、下、左からの距離です。自分のブログデザインに合わせて調節します。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/469258560316076817"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/469258560316076817"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2013\/12\/blogger.html","title":"Bloggerの記事タイトル下と記事下にアドセンス広告を設置する方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-QokAZY_doU4\/UqgyoljHR_I\/AAAAAAAAA7M\/CRNldGO4vG0\/s72-c\/1.png","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":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"メニューバー"},{"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='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\nまだメニューバー（グローバルバー）を設置していない方は、\u003Ca href=\"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=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-ThyCAmBmavA\/UpgW8GJrjRI\/AAAAAAAAA1U\/nWqmYcYMyW0\/s1600\/1.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"179\" src=\"http:\/\/3.bp.blogspot.com\/-ThyCAmBmavA\/UpgW8GJrjRI\/AAAAAAAAA1U\/nWqmYcYMyW0\/s320\/1.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E上級者向けのタブのテキストをクリックして、フォントの下の数字を大きくすると、メニューバーの高さがが高くなります。変更したらブログに適用を押します。\u003Cbr \/\u003E\n今回は、16pxにしました。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-b5ScyiOwMaE\/UpgZF5oA_LI\/AAAAAAAAA1g\/qoeJOSFw-JM\/s1600\/2.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"120\" src=\"http:\/\/4.bp.blogspot.com\/-b5ScyiOwMaE\/UpgZF5oA_LI\/AAAAAAAAA1g\/qoeJOSFw-JM\/s320\/2.png\" width=\"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=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-9SRkfVyQmlI\/UpgcsqOYz7I\/AAAAAAAAA1s\/Hft_gppmKIw\/s1600\/3.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"65\" src=\"http:\/\/1.bp.blogspot.com\/-9SRkfVyQmlI\/UpgcsqOYz7I\/AAAAAAAAA1s\/Hft_gppmKIw\/s320\/3.png\" width=\"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=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-kB7ZXHd375A\/Upghr69ZJPI\/AAAAAAAAA18\/nbyOITxHoQA\/s1600\/4.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"165\" src=\"http:\/\/1.bp.blogspot.com\/-kB7ZXHd375A\/Upghr69ZJPI\/AAAAAAAAA18\/nbyOITxHoQA\/s320\/4.png\" width=\"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=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-mDJ4KUefQTg\/UpgsS3OhipI\/AAAAAAAAA2M\/LiOkrTZxjps\/s1600\/6.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"115\" src=\"http:\/\/3.bp.blogspot.com\/-mDJ4KUefQTg\/UpgsS3OhipI\/AAAAAAAAA2M\/LiOkrTZxjps\/s320\/6.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nこの方法の応用で、ヘッダー内に検索ボックスやバナー広告、SNSボタンなどを表示することができます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca href=\"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=\"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":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"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-2459213062240280265"},"published":{"$t":"2013-11-27T16:04:00.002+09:00"},"updated":{"$t":"2017-02-25T20:14:18.318+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"css"}],"title":{"type":"text","$t":"Bloggerの表示位置とCSSコードの対応"},"content":{"type":"html","$t":"Bloggerで、『記事をちょっと上に移動したいんだけど、CSSでどう指定するんだっけ？』『色を変えたいんだけど』というときに、役に立つかもしれないCSSコードの記録です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Ch2\u003E表示位置とCSSコードの対応\u003C\/h2\u003Eテンプレートはシンプルで、2カラムの右サイドバーを基準にしています。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-hnmOnLU_t7M\/UpWCfHxEpjI\/AAAAAAAAA0M\/OL1hocWcSmg\/s1600\/6.jpg\" imageanchor=\"1\" style=\"clear: left; float: left; margin-bottom: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-hnmOnLU_t7M\/UpWCfHxEpjI\/AAAAAAAAA0M\/OL1hocWcSmg\/s400\/6.jpg\" height=\"337\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E図にすると上の画像のような感じです。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n①ブログタイトル\u003Cbr \/\u003E\n#Header1\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n②ヘッダー\u003Cbr \/\u003E\n#header\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n③メニューバー（ナビゲーションバー）\u003Cbr \/\u003E\n.tabs\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n④日付\u003Cbr \/\u003E\n.date-header\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n⑤記事タイトル\u003Cbr \/\u003E\nh3\u003Cbr \/\u003E\n.entry-title\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n⑥記事\u003Cbr \/\u003E\n#main\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n⑦続きを読む\u003Cbr \/\u003E\n.jump-link\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n⑧SNSボタンなど\u003Cbr \/\u003E\n.post-footer\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n⑨ウィジェットタイトル\u003Cbr \/\u003E\nh2\u003Cbr \/\u003E\n検索など一部のウィジェットタイトル\u003Cbr \/\u003E\nh2.title\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n⑩右サイドバー\u003Cbr \/\u003E\n#sidebar-right-1\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n⑪メイン\u003Cbr \/\u003E\n#main\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n⑫フッター\u003Cbr \/\u003E\nfooter\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n⑬ボディ\u003Cbr \/\u003E\nbody\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n⑭ボディ？\u003Cbr \/\u003E\n不明\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n左カラムの場合は大体、rightの部分がleftに変わるだけだったり、カラム数が増えると1だったのが2になるだけだったりします。\u003Cbr \/\u003E\n\u003Ch2\u003Eコードの探し方\u003C\/h2\u003E\u003Ch3\u003EGoogleChrome系ブラウザの場合\u003C\/h3\u003E調べたい場所で右クリックすると、下の画像のように表示されるので、要素の検証をクリックする。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-vUztu9iYJoo\/UpWT0Jvx2ZI\/AAAAAAAAA0c\/2jzB1ehmRjQ\/s1600\/1.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-vUztu9iYJoo\/UpWT0Jvx2ZI\/AAAAAAAAA0c\/2jzB1ehmRjQ\/s1600\/1.jpg\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ch3\u003EFirefoxの場合\u003C\/h3\u003E調べたい場所で右クリックすると、下の画像のように表示されるので、要素の調査をクリックする。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-qjqFmjm8u2k\/UpWUbMbfM2I\/AAAAAAAAA0k\/7gqnROJVgCk\/s1600\/2.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-qjqFmjm8u2k\/UpWUbMbfM2I\/AAAAAAAAA0k\/7gqnROJVgCk\/s1600\/2.jpg\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/2459213062240280265"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/2459213062240280265"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2013\/11\/bloggercss.html","title":"Bloggerの表示位置とCSSコードの対応"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-hnmOnLU_t7M\/UpWCfHxEpjI\/AAAAAAAAA0M\/OL1hocWcSmg\/s72-c\/6.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-1597336072305246989"},"published":{"$t":"2013-11-25T11:51:00.000+09:00"},"updated":{"$t":"2017-02-25T20:25:37.554+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"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":"Bloggerの基本フォントは、Arialなど約70種類（数えてない）くらいから選べるが、残念ながらメイリオやMSPゴシックが入っていないので、表示できるように変更した記録です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n変更できるのは、記事、記事+記事タイトル、記事+ウィジェットタイトル、ウィジェットタイトル、全てのテキストの5パターンです。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nHTMLの変更をすることなく、全てコピペで変更できます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Ch2\u003Eフォント変更の基本\u003C\/h2\u003Eテンプレートからカスタマイズをクリックする。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-slEP3L2nd1E\/UpKxbpV3p6I\/AAAAAAAAAw0\/hZhxxnLIefM\/s1600\/01.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"218\" src=\"https:\/\/1.bp.blogspot.com\/-slEP3L2nd1E\/UpKxbpV3p6I\/AAAAAAAAAw0\/hZhxxnLIefM\/s320\/01.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nテンプレートデザイナー画面になるので、上級者向けをクリックする。\u003Cbr \/\u003E\n下にスクロールして、CSSを追加をクリックする。\u003Cbr \/\u003E\n右側にCSSを入力できるので、コピーしたものを貼り付けます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n貼り付けたら、右上のブログに適用を押し忘れないように注意する。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-cdMY774nrJY\/UpKynSiNwSI\/AAAAAAAAAw8\/HEQ1q95rplM\/s1600\/02.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"97\" src=\"https:\/\/2.bp.blogspot.com\/-cdMY774nrJY\/UpKynSiNwSI\/AAAAAAAAAw8\/HEQ1q95rplM\/s320\/02.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nどの部分のテキストをメイリオに変えたいかによって、貼り付けるものが変わってきます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n①\u003Cbr \/\u003E\n\u003Cpre\u003Ebody { font-family:\"meiryo\",\"メイリオ\",\"ＭＳ Ｐゴシック\",sans-serif; }\n\u003C\/pre\u003E\u003Cbr \/\u003E\n②\u003Cbr \/\u003E\n\u003Cpre\u003E* { font-family:\"meiryo\",\"メイリオ\",\"ＭＳ Ｐゴシック\",sans-serif; }\n\u003C\/pre\u003E\u003Cbr \/\u003E\n③\u003Cbr \/\u003E\n\u003Cpre\u003Eh2 { font-family:\"meiryo\",\"メイリオ\",\"ＭＳ Ｐゴシック\",sans-serif; }\n\u003C\/pre\u003E\u003Cbr \/\u003E\n基本となるのはこの3種類だけなので、簡単に変更できます。 \u003Cbr \/\u003E\n\u003Ch3\u003E記事だけを変更する\u003C\/h3\u003E記事タイトルとウィジェットタイトルを変更したくない場合は、①だけを貼り付けます。\u003Cbr \/\u003E\n\u003Ch3\u003E記事+記事タイトルを変更する\u003C\/h3\u003Eウィジェットタイトルを変更したくない場合は、②だけを貼り付けます。\u003Cbr \/\u003E\n\u003Ch3\u003Eウィジェットタイトルを変更する\u003C\/h3\u003E記事や記事タイトルを変更したくない場合は、③だけを貼り付けます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこのように、①,②,③それぞれ指定している場所が異なるので、変更したい場所に合わせて組み合わせていきます。\u003Cbr \/\u003E\n\u003Ch3\u003E記事+ウィジェットタイトルを変更する\u003C\/h3\u003E記事タイトルだけ変更したくない場合は、①と③を貼り付けます。\u003Cbr \/\u003E\n\u003Ch3\u003E全てを変更する\u003C\/h3\u003Eブログ内の全てのテキストを変更する場合は、②と③を貼り付けます。\u003Cbr \/\u003E\n\u003Ch2\u003EAwesome Inc.テンプレートのブログタイトル以外をメイリオにする方法\u003C\/h2\u003E（2016年2月10日に追記）（2016年2月12日に加筆）\u003Cbr \/\u003E\n「Awesome Inc.」でメイリオにしようとすると上記の方法だけでは、トップページのブログタイトルと記事ページのブログタイトルのフォントが統一されません。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nそこで、上記の②と③を追加後、さらに下記を追加します。\u003Cbr \/\u003E\n④\u003Cbr \/\u003E\n\u003Cpre\u003Eh3.post-title, h4 { font-family:\"meiryo\",\"メイリオ\",\"ＭＳ Ｐゴシック\",sans-serif; }\n\u003C\/pre\u003E\u003Cbr \/\u003E\n⑤\u003Cbr \/\u003E\n\u003Cpre\u003E.Header h1 a { font: normal normal 48px Georgia, Utopia, 'Palatino Linotype', Palatino, serif; }\n\u003C\/pre\u003E\u003Cbr \/\u003E\n⑥\u003Cbr \/\u003E\n\u003Cpre\u003Eh3.post-title a { font-family:\"meiryo\",\"メイリオ\",\"ＭＳ Ｐゴシック\",sans-serif; }\n\u003C\/pre\u003E\u003Cbr \/\u003E\n④は記事ページのコメント部分で、⑤が記事ページのブログタイトル、⑥がトップページの記事タイトルです。 \u003Cbr \/\u003E\n①以外を追加した状態で、ブログタイトルがデフォルト、それ以外がメイリオになります。\u003Cbr \/\u003E\nフォントサイズは適宜変更してください。\u003Cbr \/\u003E\n\u003Ch3\u003E記事タイトルをデフォルトに\u003C\/h3\u003E記事タイトルとブログタイトルをデフォルトにする場合は、②③⑤を追加後に下記を追加する。\u003Cbr \/\u003E\n⑦\u003Cbr \/\u003E\n\u003Cpre\u003Eh4 { font-family:\"meiryo\",\"メイリオ\",\"ＭＳ Ｐゴシック\",sans-serif; }\n\u003C\/pre\u003E\u003Ch3\u003Eブログタイトルもメイリオに\u003C\/h3\u003Eブログタイトルもメイリオに変更する場合は、②③④⑥を追加後に下記を追加する。\u003Cbr \/\u003E\n⑧\u003Cbr \/\u003E\n\u003Cpre\u003E.Header h1 { font-family:\"meiryo\",\"メイリオ\",\"ＭＳ Ｐゴシック\",sans-serif; }\u003C\/pre\u003E\u003Ch2\u003Eメイリオに変更して気付いたこと\u003C\/h2\u003E変更する前は、Arialを使っていて、記事タイトルなどキレイに一行で収まっていたものが、メイリオに変更後二行になってしまったところもあります。\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\/1597336072305246989"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/1597336072305246989"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2013\/11\/blogger_25.html","title":"Bloggerのフォントをメイリオに変更する方法　記事タイトル対応 ※追記あり"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-slEP3L2nd1E\/UpKxbpV3p6I\/AAAAAAAAAw0\/hZhxxnLIefM\/s72-c\/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-6470308854103130723"},"published":{"$t":"2013-10-04T15:41:00.001+09:00"},"updated":{"$t":"2017-02-25T23:17:33.913+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"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='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-owdL8wABleQ\/UuiSjj0VUyI\/AAAAAAAABc0\/4qTeuvmN_eU\/s1600\/%E8%89%B2%E9%89%9B%E7%AD%86.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/3.bp.blogspot.com\/-owdL8wABleQ\/UuiSjj0VUyI\/AAAAAAAABc0\/4qTeuvmN_eU\/s320\/%E8%89%B2%E9%89%9B%E7%AD%86.jpg\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ch2\u003Eフッターに背景色をつける方法\u003C\/h2\u003E上級者向けの背景で、外側の背景、メインの背景、ヘッダーの背景はあるのにフッターは無かったので、CSSに追加してフッターの背景に色をつけることにしました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nCSSへの記述は簡単で以下のとおりです。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\n\/* フッターの色 *\/\nfooter{\nbackground-color:#FF0000;\n}\n\u003C\/code\u003E\n\u003C\/pre\u003E今回はわかりやすくするために、背景の色を赤にしてあるが、カラーコードを書き換えるだけで好きな色に変更できます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n広げないでそのままでいいときはここまで。\u003Cbr \/\u003E\n\u003Ch2\u003Eフッターをブラウザ画面いっぱいに広げる方法\u003C\/h2\u003Eブログやホームページでよく見るデザインです。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nCSSへの記述\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\nhtml {\noverflow: auto;\n}\n\nbody{\noverflow: hidden; \/*はみ出た部分をどうするか*\/\n}\n\nfooter{\nmargin: 0 -200%; \/* マージンを追記 *\/\npadding: 0 200%; \/* マージンで横にはみ出した部分を戻す *\/\n}\n\u003C\/code\u003E\n\u003C\/pre\u003Eまず、bodyではみ出た部分を表示しないように設定する。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nその後で、フッターの幅を広げてあげます。\u003Cbr \/\u003E\n今回は、200%にしているが、250%でも300%でも500%でも大きければ問題ないようです。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n同様にヘッダーやメニューバーも広げることが出来る。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/6470308854103130723"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/6470308854103130723"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2013\/10\/blog-post_4.html","title":"フッターに背景色をつけてブラウザ画面いっぱいに広げる方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-owdL8wABleQ\/UuiSjj0VUyI\/AAAAAAAABc0\/4qTeuvmN_eU\/s72-c\/%E8%89%B2%E9%89%9B%E7%AD%86.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-4170876602915976441"},"published":{"$t":"2013-10-02T12:49:00.000+09:00"},"updated":{"$t":"2017-02-25T23:08:16.312+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"画像"}],"title":{"type":"text","$t":"マウスオーバーで画像を半透明にする方法"},"content":{"type":"html","$t":"画像にマウスを乗せたときに画像を薄くする。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこれは、バナー広告にも適用されるのでリンクがあることを目立たせることが出来る。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-42_Fnyg4HfU\/Ut34_cEX7TI\/AAAAAAAABYM\/3SfVsJkuT7o\/s1600\/%E3%82%B0%E3%83%A9%E3%82%B9.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-42_Fnyg4HfU\/Ut34_cEX7TI\/AAAAAAAABYM\/3SfVsJkuT7o\/s1600\/%E3%82%B0%E3%83%A9%E3%82%B9.jpg\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\ncssの記述は以下の通り\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003E\n\/* マウスオーバーで画像半透明 *\/\na img {\nfilter:alpha(opacity=100);\n-moz-opacity: 1;\np; opacity: 1;\n}\n\na:hover img {\nfilter:alpha(opacity=70);\n-moz-opacity: 0.7;\nopacity: 0.7;\n}\n\n\u003C\/code\u003E\u003C\/pre\u003Eと記述するだけでOK\u003Cbr \/\u003E\nそれぞれ、IE、firefox、chromeなどに対応しているので、ブラウザで確認しながら変更していくこと。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\na imgが何もしていないときの表示\u003Cbr \/\u003E\na:hover imgがマウスを画像に乗せたときの表示\u003Cbr \/\u003E\nopacityの後の数字が透明度になっていて、大きくなるほど濃くなっていく。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nまた、背景に画像を使っていると、背景の画像が透けて見えることがあるので、注意が必要。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nそんなときは、CSSでclassを指定して背景を白にすると見えやすくなる。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/4170876602915976441"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/4170876602915976441"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2013\/10\/blog-post.html","title":"マウスオーバーで画像を半透明にする方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-42_Fnyg4HfU\/Ut34_cEX7TI\/AAAAAAAABYM\/3SfVsJkuT7o\/s72-c\/%E3%82%B0%E3%83%A9%E3%82%B9.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-1009249492912750879"},"published":{"$t":"2013-03-02T14:24:00.000+09:00"},"updated":{"$t":"2017-02-25T23:47:31.199+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"ワードプレスとブロガーのリンクの色を変更する方法"},"content":{"type":"html","$t":"通常、スタイルシート(style.css)を編集して変更するが、ワードプレスの一部のテーマ（例えば「Leaf」）やブロガーの場合はもっと簡単に変更できるので、それぞれの変更方法をメモする。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Ch2\u003Eワードプレスのリンク色の変更\u003C\/h2\u003Eまず、ダッシュボードの外観から「LeafOption」を選択し一番下にある「Custom CSS」に下記のCSSを入力してSave All Changesをクリックしたら変更ができる。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-2s33j0magbk\/UTGJo3wFslI\/AAAAAAAAADE\/3bnYmANAJyU\/s1600\/leafopcss.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-2s33j0magbk\/UTGJo3wFslI\/AAAAAAAAADE\/3bnYmANAJyU\/s320\/leafopcss.jpg\" height=\"144\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nCSSへの記述\u003Cbr \/\u003E\n\u003Cpre\u003E\/* 通常時のリンクカラー *\/\na:link {\ncolor: #0000ff;\n}\n\/* クリック後のリンクカラー *\/\na:visited {\ncolor: #cc00cc;\n}\n\/* クリックした瞬間のリンクカラー *\/\na:active {\ncolor: #ff3366;\n}\n\/* カーソルを乗せたときのリンクカラー *\/\na:hover {\ncolor: #ff3366;\n}\n\u003C\/pre\u003E赤文字の英数字を自分の好きなカラーコードに変更する。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nもちろんスタイルシート(style.css)を直接編集してもいいが、ここに入力するほうがミスしたときなどに簡単に元に戻すことが出来る。\u003Cbr \/\u003E\n\u003Ch2\u003Eブロガーのリンクの色を変更する方法\u003C\/h2\u003Eテンプレートの、ＨＴＭＬの編集からリンクカラーを変更する方法もあるが、今回はカスタマイズから変更する方法をメモする。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nまずは、マイブログのテンプレートからカスタマイズを選択する。\u003Cbr \/\u003E\nその後、上級者向けの中からリンクを選択し、リンクの色、表示済みの色、カーソルを合わせたときの色の３種類を選択できるので、自分の好きな色に変更する。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-MhwKin5b5DQ\/UTaQ7DhOvFI\/AAAAAAAAADU\/fGQvdSta_9o\/s1600\/%E3%83%96%E3%83%AD%E3%82%AC%E3%83%BC%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%82%AB%E3%82%B9.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-MhwKin5b5DQ\/UTaQ7DhOvFI\/AAAAAAAAADU\/fGQvdSta_9o\/s320\/%E3%83%96%E3%83%AD%E3%82%AC%E3%83%BC%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%82%AB%E3%82%B9.jpg\" height=\"181\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\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\/1009249492912750879"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/1009249492912750879"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2013\/03\/blog-post_294.html","title":"ワードプレスとブロガーのリンクの色を変更する方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-2s33j0magbk\/UTGJo3wFslI\/AAAAAAAAADE\/3bnYmANAJyU\/s72-c\/leafopcss.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":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"メニューバー"}],"title":{"type":"text","$t":"Bloggerにメニューバー（グローバルバー）を設置し色を変更する方法"},"content":{"type":"html","$t":"このブログの上部（ヘッダーの下）にもあるメニューバーを表示して、その色を変更する方法です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nこのメニューバーはどのページに移動しても表示されるので、訪問者が迷うことなくサイト内を行き来できるようになります。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\n\u003Ch2\u003Eメニューバーの設置方法\u003C\/h2\u003Eまず、メニューバーをつけたいブログのページを開いて上部のタブを選択する。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nその後、新しいページをクリックしてウェブアドレスを選択する。 \u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"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=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"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=\"169\" width=\"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=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"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=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"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=\"142\" width=\"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=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"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=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"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=\"181\" width=\"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":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"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"}}]}});