gdata.io.handleScriptLoaded({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$georss":"http://www.georss.org/georss","xmlns$thr":"http://purl.org/syndication/thread/1.0","xmlns$blogger":"http://schemas.google.com/blogger/2008","id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100"},"updated":{"$t":"2023-03-13T11:23:17.127+09:00"},"category":[{"term":"レビュー"},{"term":"宅建"},{"term":"リダイレクト"},{"term":"ブログ"},{"term":"Windows エクスペリエンス インデックス"},{"term":"アップデート"},{"term":"アナリティクス"},{"term":"WordPress"},{"term":"A8"},{"term":"光・モバイル回線"},{"term":"拡張機能"},{"term":"外注記事"},{"term":"メニューバー"},{"term":"ウェブマスターツール"},{"term":"禁煙に失敗した人の話"},{"term":"動画"},{"term":"WordPressカスタマイズ"},{"term":"Hatch"},{"term":"画像の圧縮"},{"term":"プラグイン"},{"term":"URL"},{"term":"ネームサーバー"},{"term":"STINGER"},{"term":"Seesaaカスタマイズ"},{"term":"Vista"},{"term":"Chrome"},{"term":"テラダモケイ"},{"term":"FREETEL"},{"term":"ファビコン"},{"term":"サブメニュー"},{"term":"ドメイン"},{"term":"AdSense"},{"term":"子テーマ"},{"term":"amazon"},{"term":"Bloggerカスタマイズ"},{"term":"css"},{"term":"NURO光"},{"term":"カテゴリー"},{"term":"バリューコマース"},{"term":"JavaScript"},{"term":"nofollow"},{"term":"マネークリップ"},{"term":"LinkWithin"},{"term":"サチコ"},{"term":"KIWAMI"},{"term":"プロフィール"},{"term":"ツイッター連携"},{"term":"totoBIG"},{"term":"ランサーズ"},{"term":"プロジェクター"},{"term":"Seesaa"},{"term":"キャッシュ"},{"term":"サイドバー"},{"term":"投稿ページ"},{"term":"グラボ"},{"term":"GIMP"},{"term":"Skitch"},{"term":"サイトマップ"},{"term":".exeファイル"},{"term":"Picasa"},{"term":"ウィンドウエアコン"},{"term":"テーマ"},{"term":"固定ページ"},{"term":"テンプレート"},{"term":"格安SIM"},{"term":"関連記事"},{"term":"スコアカード"},{"term":"禁煙に成功した人の話"},{"term":"連絡フォーム"},{"term":"禁煙の効果"},{"term":"艦これ"},{"term":"Google+"},{"term":"コピーライト"},{"term":"Linux"},{"term":"パーマリンク設定"},{"term":"トップページ"},{"term":"ミニバード"},{"term":"ペイント"},{"term":"Blogger"},{"term":"ドメインキング"},{"term":"Inkscape"},{"term":"圧縮"},{"term":"くじ"},{"term":"禁煙"},{"term":"ダウンロード"},{"term":"gzip"},{"term":"フォント"},{"term":"バナー広告"},{"term":"Googleアカウント"},{"term":"レンタルサーバー"},{"term":"画像"},{"term":"MesoColumn"},{"term":"窓用エアコン"},{"term":"クロスドメイントラッキング"},{"term":"パソコン"},{"term":"月次報告"},{"term":"MVNO"},{"term":"注目の投稿"},{"term":"禁煙のコツ"},{"term":"ページ内リンク"},{"term":"検索"},{"term":"タバコの害"}],"title":{"type":"text","$t":"メモロウ"},"subtitle":{"type":"html","$t":"メモロウ（旧はじめてのWordPressとBlogger+Seesaa）は、ブログ作成スキルゼロだった管理人が、WordPress・Blogger・Seesaaで実際に行ったカスタマイズの備忘録を中心に、日々の生活で気になった情報や話題を投稿しています。"},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/-/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88?alt\u003djson-in-script\u0026max-results\u003d9999"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/-/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88?alt\u003djson-in-script\u0026max-results\u003d9999"},{"rel":"alternate","type":"text/html","href":"http://www.memorou.com/search/label/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"generator":{"version":"7.00","uri":"https://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"7"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"9999"},"entry":[{"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\u003d\"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\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nダウンロードは、\u003ca href\u003d\"http://toumaswitch.com/vaster2/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eトーマスイッチ\u003c/a\u003eさんのブログからお願いします。\u003cbr /\u003e\nちなみにトーマスイッチさんのブログは、Bloggerの「Vaster2」ではなく、WordPressの「STINGER5」です。\u003cbr /\u003e\n\u003cbr /\u003e\nカスタマイズの前には必ずバックアップを取りましょう。データのバックアップやCSSの追加、ガジェットの追加方法は「\u003ca href\u003d\"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\u003d\"mokuji\"\u003e\u003cdiv class\u003d\"mokuji-title\"\u003eもくじ\u003c/div\u003e\u003cul\u003e\u003cli\u003e\u003ca href\u003d\"#moku1\"\u003eレイアウトの変更\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku2\"\u003eヘッダーのカスタマイズ\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku3\"\u003eメニューバーの変更\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku4\"\u003eパンくずリストの上の空白を狭く\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku5\"\u003eサイドバーのカスタマイズ\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku6\"\u003e月間アーカイブの変更\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku7\"\u003eテキスト・見出しの変更\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku8\"\u003eSNSボタンの変更\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku9\"\u003e関連記事のカスタマイズ\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku10\"\u003e人気記事のカスタマイズ\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku11\"\u003eトップページのカスタマイズ\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku12\"\u003e記事ページのカスタマイズ\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku13\"\u003eフッターのカスタマイズ\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku14\"\u003eレスポンシブ表示時のカスタマイズ\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku15\"\u003e表示速度を早くする\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku16\"\u003eVaster2を使うときの注意\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku17\"\u003eお問い合わせページの追加\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku18\"\u003eアドセンスを関連記事下に追加\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#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\u003d\"moku1\"\u003e\u003c/a\u003e\u003ch3\u003eレイアウトの変更\u003c/h3\u003eレイアウトから不要なガジェットを削除し、表示位置がずれてしまったガジェットを移動します。\u003cbr /\u003e\n\u003ca name\u003d\"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\u003d\"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\u003d\"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\u003d\"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\u003d\"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\u003d\"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\u003d\"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\u003d'data:blog.pageType \u003d\u003d \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\u003d\"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\u003d\"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\u003d8\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\u003d200:x　x\u003d133.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\u003d\"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\u003d\"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\u003d'Feed1' locked\u003d'false' title\u003d'新着記事' type\u003d'Feed' version\u003d'1' visible\u003d'true'\u0026gt;\n\u0026lt;b:includable id\u003d'main'\u0026gt;\n\u0026lt;h2\u0026gt;\u0026lt;data:title/\u0026gt;\u0026lt;/h2\u0026gt;\n\u0026lt;div class\u003d'widget-content' expr:id\u003d'data:widget.instanceId + \u0026amp;quot;_feedItemListDisplay\u0026amp;quot;'\u0026gt;\n\u0026lt;span style\u003d'filter: alpha(25); opacity: 0.25;'\u0026gt;\n\u0026lt;a expr:href\u003d'data:feedUrl'\u0026gt;\u0026lt;data:loadingMsg/\u0026gt;\u0026lt;/a\u0026gt;\n\u0026lt;/span\u0026gt;\n\u0026lt;/div\u0026gt;\n\u0026lt;b:include name\u003d'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\u003d'data:blog.url !\u003d 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\u003d\"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\u003d\"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\u003d\"grobal-navi\"\u0026gt;\n \u0026lt;ul class\u003d\"footer-nav\"\u0026gt;\n  \u0026lt;li\u0026gt;\n   \u0026lt;a href\u003d\"リンク先URL\"\u0026gt;\n   テキスト\n   \u0026lt;/a\u0026gt;\n  \u0026lt;/li\u0026gt;\n  \u0026lt;li\u0026gt;\n   \u0026lt;a href\u003d\"リンク先URL\"\u0026gt;\n   テキスト\n   \u0026lt;/a\u0026gt;\n  \u0026lt;/li\u0026gt;\n \u0026lt;/ul\u0026gt;\n\u0026lt;/nav\u0026gt;\n\u0026lt;div class\u003d\"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\u003d\"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\u003d\"moku15\"\u003e\u003c/a\u003e\u003ch2\u003e表示速度を早くする\u003c/h2\u003e「Vaster2」で少し残念なのは、シンプルなデザインなのにページの表示スピードが遅い（重い）というところだ。\u003ca href\u003d\"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\u003d\"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\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"https://1.bp.blogspot.com/-YbHCUB3Axp0/V3zEpBc1k0I/AAAAAAAAC_0/bxcpDDhmSZsPur55O1kHkx2wrD6OF3jzgCLcB/s1600/002.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"56\" src\u003d\"https://1.bp.blogspot.com/-YbHCUB3Axp0/V3zEpBc1k0I/AAAAAAAAC_0/bxcpDDhmSZsPur55O1kHkx2wrD6OF3jzgCLcB/s320/002.jpg\" width\u003d\"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\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"https://3.bp.blogspot.com/-hS68fBsuHFY/V3zIlbnoSSI/AAAAAAAADAA/lMAlKk99bnEW1o-3WreaMTXS3cBdkUQ6QCLcB/s1600/003.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"81\" src\u003d\"https://3.bp.blogspot.com/-hS68fBsuHFY/V3zIlbnoSSI/AAAAAAAADAA/lMAlKk99bnEW1o-3WreaMTXS3cBdkUQ6QCLcB/s320/003.jpg\" width\u003d\"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\u003d'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type\u003d'text/javascript'/\u0026gt;\n\u0026lt;link href\u003d'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel\u003d'stylesheet'/\u0026gt;\u003c/code\u003e\u003c/pre\u003eとなっていたところを、\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;script src\u003d'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type\u003d'text/javascript'/\u0026gt;\u003c/code\u003e\u003c/pre\u003eだけ切り取って、\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;/div\u0026gt;\n\u0026lt;script src\u003d'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type\u003d'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\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"https://3.bp.blogspot.com/-kFbNoPG2Lmg/V3zPEFVboWI/AAAAAAAADAQ/gYImazJv-Sssew6LVsaUtmRNCv79bshRQCLcB/s1600/004.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"53\" src\u003d\"https://3.bp.blogspot.com/-kFbNoPG2Lmg/V3zPEFVboWI/AAAAAAAADAQ/gYImazJv-Sssew6LVsaUtmRNCv79bshRQCLcB/s320/004.jpg\" width\u003d\"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\u003d\"https://developers.google.com/+/web/follow/\"\u003eGoogle+ Follow Button\u003c/a\u003e」で作成したボタンを設置した。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"https://1.bp.blogspot.com/-W4WWDqpJwDY/V4htCIwSUaI/AAAAAAAADEI/Of0H6870faks6ggXWDAFUJwkgoXTtNaygCKgB/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"https://1.bp.blogspot.com/-W4WWDqpJwDY/V4htCIwSUaI/AAAAAAAADEI/Of0H6870faks6ggXWDAFUJwkgoXTtNaygCKgB/s320/05.png\" width\u003d\"320\" height\u003d\"181\" /\u003e\u003c/a\u003e\u003c/div\u003e詳細オプションのタグを解析で「任意のタイミング」を選択すると、読み込みを遅らせることができる。右側に表示される「ウィジェットを――」と「レンダリングを――」のコードをガジェットの追加で「HTML/JavaScript」に貼り付ければ表示できる。\u003cbr /\u003e\n\u003cbr /\u003e\nこの結果トップページ（今までは個別ページ）の表示速度は、\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"https://4.bp.blogspot.com/-Uq1bweBN29c/V4hv2TtAviI/AAAAAAAADEY/Zq0MvwooDbIBdaH1ttGiUzUOiVaWTL-WACLcB/s1600/06.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"https://4.bp.blogspot.com/-Uq1bweBN29c/V4hv2TtAviI/AAAAAAAADEY/Zq0MvwooDbIBdaH1ttGiUzUOiVaWTL-WACLcB/s320/06.jpg\" width\u003d\"320\" height\u003d\"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\u003d\"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\u003d\"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\u003d\"moku17\"\u003e\u003c/a\u003e\u003ch3\u003eお問い合わせページの追加\u003c/h3\u003eページに連絡フォームを使ったお問い合わせページを追加します。\u003cbr /\u003e\nHTMLの編集なしで、コピペで簡単に設置できます。\u003cbr /\u003e\n\u003cbr /\u003e\n現在、サイドバーやフッターに連絡フォームを設置している方にもオススメです。\u003cbr /\u003e\n詳しくは「\u003ca href\u003d\"http://www.memorou.com/2016/09/bloggerhtmlscript.html\"\u003eお問い合わせページの追加\u003c/a\u003e」へ\u003cbr /\u003e\n\u003ca name\u003d\"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\u003d'clear'/\u0026gt;\n\u0026lt;/b:if\u0026gt;\nここに下のコードを追加\n\u0026lt;div class\u003d'post-footer'/\u0026gt;\n                    \u0026lt;!--関連記事ここまで--\u0026gt;\u003c/code\u003e\u003c/pre\u003e上の「ここに下のコードを追加」部分に下記のコードを追加します。\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;b:if cond\u003d'data:blog.pageType \u003d\u003d \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\u003d\"Bloggerの記事タイトル下と記事下にアドセンス広告を設置する方法\"\u003eBloggerの記事タイトル下と記事下にアドセンス広告を設置する方法\u003c/a\u003e」を参考にしてください。\u003cbr /\u003e\n\u003ca name\u003d\"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":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"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-7436532436588168986"},"published":{"$t":"2015-12-07T18:01:00.000+09:00"},"updated":{"$t":"2016-11-19T19:27:25.527+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テンプレート"},{"scheme":"http://www.blogger.com/atom/ns#","term":"トップページ"}],"title":{"type":"text","$t":"Blogger トップページにカテゴリ別の記事一覧を表示できるテンプレート"},"content":{"type":"html","$t":"トップページにカテゴリ別の記事一覧を表示できるBlogger用のテンプレート。\u003cbr /\u003e\n\u003cbr /\u003e\n一般的なブログでよく見る、上から記事が更新順に並ぶのではなく、カテゴリ別に記事一覧を表示できるデザインのテンプレート7選。\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003c/div\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-_NUdnZjj3eg/VmTubqqVjwI/AAAAAAAAC5Q/bVkwsVwSb_o/s1600/00.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"176\" src\u003d\"http://2.bp.blogspot.com/-_NUdnZjj3eg/VmTubqqVjwI/AAAAAAAAC5Q/bVkwsVwSb_o/s320/00.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n\u003cspan id\u003d\"goog_1817077652\"\u003e\u003c/span\u003e\u003cspan id\u003d\"goog_1817077653\"\u003e\u003c/span\u003eテンプレートの変更方法は「\u003ca href\u003d\"http://www.memorou.com/2014/07/blogger_3.html\"\u003eBloggerテンプレートをレスポンシブＷｅｂデザインに変えたときにやったこと\u003c/a\u003e」を参考に\u003cbr /\u003e\n\u003ch2\u003eトップページにカテゴリ別の記事一覧を表示できるテンプレート7選\u003c/h2\u003e\u003ch3\u003eBright Mag \u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-ndwgpz0CUzA/VmE3IJm8RzI/AAAAAAAAC4Q/iaJu3fRFKV0/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"320\" src\u003d\"http://1.bp.blogspot.com/-ndwgpz0CUzA/VmE3IJm8RzI/AAAAAAAAC4Q/iaJu3fRFKV0/s320/02.png\" width\u003d\"305\" /\u003e\u003c/a\u003e\u003c/div\u003eトップページ上部の大きなスライダー（スライドショー）が目を引くテンプレート。最上部にはニュース速報が流れる。\u003cbr /\u003e\n記事下とサイドバーにSNSボタンを完備。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://blogtemplate4u.com/2014/08/bright-magazine-blogger-template/\" rel\u003d\"nofollow\" target\u003d\"_blank\"\u003eBright Mag\u003c/a\u003e\u003cbr /\u003e\n\u003ch3\u003eViewer \u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-ab0wkICT8nA/VmE3whrRkqI/AAAAAAAAC4Y/mhqFWp-M_EE/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"320\" src\u003d\"http://3.bp.blogspot.com/-ab0wkICT8nA/VmE3whrRkqI/AAAAAAAAC4Y/mhqFWp-M_EE/s320/03.png\" width\u003d\"275\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nトップページは、カテゴリーごとに色が分かれていてわかりやすいだけでなく、カラフルでおしゃれ。タイトル横に728×90、サイドバーに336×280の広告を設置できる。\u003cbr /\u003e\n記事下のSNSボタンにマウスオーバーしたときの動きもかっこいい。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://blogtemplate4u.com/2015/09/viewer-magazine-blogger-template/\" rel\u003d\"nofollow\" target\u003d\"_blank\"\u003eViewer\u003c/a\u003e\u003cbr /\u003e\n\u003ch3\u003eGaps\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-E-QWUSV9DQI/VmE4P23hAuI/AAAAAAAAC4g/v8jtQLQMJSg/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"315\" src\u003d\"http://1.bp.blogspot.com/-E-QWUSV9DQI/VmE4P23hAuI/AAAAAAAAC4g/v8jtQLQMJSg/s320/04.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eトップページの画像にマウスオーバーすると絶妙にズームする。最上部にはニュース速報が流れます。\u003cbr /\u003e\nタブ付きウィジェットにより、サイドバーをスッキリさせられる。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://blogtemplate4u.com/2014/07/gaps-magazine-blogger-template/\" rel\u003d\"nofollow\" target\u003d\"_blank\"\u003eGaps\u003c/a\u003e\u003cbr /\u003e\n\u003ch3\u003eAres\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-a495LfMPbDI/VmE43NrDxqI/AAAAAAAAC4o/MYgpp0p6azU/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"320\" src\u003d\"http://1.bp.blogspot.com/-a495LfMPbDI/VmE43NrDxqI/AAAAAAAAC4o/MYgpp0p6azU/s320/05.png\" width\u003d\"279\" /\u003e\u003c/a\u003e\u003c/div\u003eトップページのスライダー、右上のSNSボタンや検索ボックスにマウスを乗せてみてほしい。マウスオーバーしたときの動きがかっこいい。\u003cbr /\u003e\nタイトル横には728×90の広告を設置可能。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://blogtemplate4u.com/2014/07/ares-magazine-blogger-template/\" rel\u003d\"nofollow\" target\u003d\"_blank\"\u003eAres\u003c/a\u003e\u003cbr /\u003e\n\u003ch3\u003eOlive\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-D9uNu7NJZZA/VmE5Vtafk_I/AAAAAAAAC4w/eEsR7qE6e5g/s1600/06.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"320\" src\u003d\"http://2.bp.blogspot.com/-D9uNu7NJZZA/VmE5Vtafk_I/AAAAAAAAC4w/eEsR7qE6e5g/s320/06.png\" width\u003d\"278\" /\u003e\u003c/a\u003e\u003c/div\u003eズームしたり、モノクロになったり、上にずれたり、小さくなったりと、画像ホバー効果がいっぱい。\u003cbr /\u003e\nカテゴリページは、画像と記事の抜粋が2列で表示される。\u003cbr /\u003e\nサイドバーに300×250の広告を設置できる。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://blogtemplate4u.com/2014/11/olive-magazine-blogger-template/\" rel\u003d\"nofollow\" target\u003d\"_blank\"\u003eOlive\u003c/a\u003e\u003cbr /\u003e\n\u003ch3\u003eRevoli\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-zyE7Zz7x8Zo/VmE5xMylR9I/AAAAAAAAC44/5HUWMo1_J9I/s1600/07.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"320\" src\u003d\"http://4.bp.blogspot.com/-zyE7Zz7x8Zo/VmE5xMylR9I/AAAAAAAAC44/5HUWMo1_J9I/s320/07.png\" width\u003d\"295\" /\u003e\u003c/a\u003e\u003c/div\u003eトップページ上部のスライダー（スライドショー）が印象的なテンプレート。カテゴリ別の記事画像にマウスオーバーすると、ねじれながらズームする。\u003cbr /\u003e\nカテゴリページは、画像と記事の抜粋が3列で表示される。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://blogtemplate4u.com/2014/08/revoli-magazine-blogger-template/\" rel\u003d\"nofollow\" target\u003d\"_blank\"\u003eRevoli\u003c/a\u003e\u003cbr /\u003e\n\u003ch3\u003eMinimalia\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-TwDf8lv9KxI/VmE6IsQxC8I/AAAAAAAAC5A/4eIeqYdhTmc/s1600/08.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"312\" src\u003d\"http://4.bp.blogspot.com/-TwDf8lv9KxI/VmE6IsQxC8I/AAAAAAAAC5A/4eIeqYdhTmc/s320/08.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eトップページ上部の画像にマウスオーバーするとゆっくりズームする。記事タイトルにマウスをのせるとカテゴリーごとの色に変化する。\u003cbr /\u003e\nカテゴリ別のページは更新順に1列で表示される。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://blogtemplate4u.com/2014/06/minimalia-multi-layout-blogger-template/\" rel\u003d\"nofollow\" target\u003d\"_blank\"\u003eMinimalia\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eまとめ\u003c/h2\u003eトップページ上部にスライドショーを搭載したテンプレートが多い。また、ほとんどのテンプレートで何らかの画像ホバー効果があった。\u003cbr /\u003e\n\u003cbr /\u003e\nここで紹介したテンプレートはすべてレスポンシブデザイン対応となっている。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2014/09/bloggerlinezap.html\"\u003eBlogger無料レスポンシブテンプレートのLinezapをカスタマイズ\u003c/a\u003e"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7436532436588168986"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7436532436588168986"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2015/12/blogger.html","title":"Blogger トップページにカテゴリ別の記事一覧を表示できるテンプレート"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://2.bp.blogspot.com/-_NUdnZjj3eg/VmTubqqVjwI/AAAAAAAAC5Q/bVkwsVwSb_o/s72-c/00.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\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-AeNkHn_LUog/VHUxhh-c2VI/AAAAAAAACc4/je7OfXC6vDg/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"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\u003d'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\u003d'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\u003d'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\u003d'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\u003d'mobile-index-title entry-title' itemprop\u003d'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\u003d'post-title entry-title' itemprop\u003d'name'\u0026gt;\n\u0026lt;b:if cond\u003d'data:post.link'\u0026gt;\n\u0026lt;a expr:href\u003d'data:post.link'\u0026gt;\u0026lt;data:post.title/\u0026gt;\u0026lt;/a\u0026gt;\n\u0026lt;b:else/\u0026gt;\n\u0026lt;b:if cond\u003d'data:post.url'\u0026gt;\n\u0026lt;b:if cond\u003d'data:blog.url !\u003d data:post.url'\u0026gt;\n\u0026lt;a expr:href\u003d'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":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://1.bp.blogspot.com/-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\u003d\"http://www.bloggertemplatestore.com/linezap-multipurpose-template.html\" rel\u003d\"nofollow\" target\u003d\"_blank\"\u003eLinezap\u003c/a\u003eからテンプレートのダウンロードとデモの確認ができます。\u003cbr /\u003e\n下の編集をすることにより、Linezapの良さが失われる可能性があります。\u003cbr /\u003e\n適度に必要な部分だけを編集してください。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-rcCbQx0e9wk/VCPbEF2Z0VI/AAAAAAAACOU/2w_1m5W-mmc/s1600/01.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-rcCbQx0e9wk/VCPbEF2Z0VI/AAAAAAAACOU/2w_1m5W-mmc/s200/01.jpg\" height\u003d\"201\" width\u003d\"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\u003d\"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\u003d'author-box'\u0026gt;\n                        \u0026lt;div class\u003d'block-head'\u0026gt;\n                          \u0026lt;h3\u0026gt;\n                            About \n                            \u0026lt;data:post.author/\u0026gt;\n                          \u0026lt;/h3\u0026gt;\n                          \u0026lt;div class\u003d'stripe-line'/\u0026gt;\n                        \u0026lt;/div\u0026gt;\n                        \u0026lt;div class\u003d'post-listing'\u0026gt;\n                          \u0026lt;div class\u003d'author-avatar'\u0026gt;\n                            \u0026lt;script src\u003d'/feeds/posts/default?alt\u003djson-in-script\u0026amp;amp;callback\u003dauthorshow'/\u0026gt;\n                          \u0026lt;/div\u0026gt;\n                          \u0026lt;div class\u003d'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\u003d'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\u003d'top-comment'\u0026gt;\u003c/code\u003e\u003c/pre\u003eを \u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;div id\u003d'top-comment' style\u003d'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\u003d3を検索して、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\u003d\"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":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://3.bp.blogspot.com/-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\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nBloggerのサイトをスマホなどで見ると、URLの後ろに?m\u003d1が自動で追加されて、モバイル専用テンプレートを読み込みます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-VoKR4ia5ZpI/U7UdPeyIn1I/AAAAAAAAB7w/knTjI0fBqJ0/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-VoKR4ia5ZpI/U7UdPeyIn1I/AAAAAAAAB7w/knTjI0fBqJ0/s1600/01.png\" height\u003d\"192\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nテンプレートのモバイル画像の下にある歯車ボタンをクリックし、\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-ld7Ny4ExbJ4/U7UO1jhnlyI/AAAAAAAAB7U/kjXeIZk-J1w/s1600/07.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-ld7Ny4ExbJ4/U7UO1jhnlyI/AAAAAAAAB7U/kjXeIZk-J1w/s1600/07.png\" height\u003d\"110\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cblockquote\u003eいいえ。携帯端末で PC テンプレートを表示する。\u003c/blockquote\u003eを選択してスマホで見たときに、サイドバーのレイアウトが崩れてしまったため、\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-6cotwqwKiLs/U7UQQASJhcI/AAAAAAAAB7c/QCllOfL-jpI/s1600/08.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-6cotwqwKiLs/U7UQQASJhcI/AAAAAAAAB7c/QCllOfL-jpI/s1600/08.png\" height\u003d\"307\" width\u003d\"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\u003d'sidebar1' id\u003d'sidebar1' preferred\u003d'yes'\u0026gt;\u003c/pre\u003eサイドバー丸ごと表示できれば簡単だと思ったけど、これではだめだったためウィジェット単位で表示させた。\u003cbr /\u003e\nそれぞれの後ろに\u003cb\u003emobile\u003d'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\u003d'CustomSearch1'\u003c/pre\u003e\u003cbr /\u003e\n\u003cb\u003e最新の記事\u003c/b\u003e\u003cbr /\u003e\n\u003cpre\u003e\u0026nbsp;\u0026lt;b:widget id\u003d'Feed1'\u003c/pre\u003e\u003cbr /\u003e\n\u003cb\u003e忍者まとめ\u003c/b\u003e\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;b:widget id\u003d'HTML8'\u003c/pre\u003e\u003cbr /\u003e\n\u003cb\u003e人気記事\u003c/b\u003e\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;b:widget id\u003d'PopularPosts2'\u003c/pre\u003e\u003cbr /\u003e\n\u003cb\u003eAdSense（サイドバー）\u003c/b\u003e\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;b:widget id\u003d'HTML3'\u003c/pre\u003e\u003cbr /\u003e\n\u003cb\u003eAdSense（メイン下）\u003c/b\u003e\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;b:widget id\u003d'HTML4'\u003c/pre\u003e\u003cbr /\u003e\n\u003cb\u003eAdSense（メイン上）\u003c/b\u003e\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;b:widget id\u003d'HTML2'\u003c/pre\u003e\u003cbr /\u003e\n変更後のHTMLはこのようになります。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-o5O90x3fVak/U7UYbz2O0pI/AAAAAAAAB7o/QXwyUV-uKko/s1600/10.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-o5O90x3fVak/U7UYbz2O0pI/AAAAAAAAB7o/QXwyUV-uKko/s1600/10.png\" height\u003d\"104\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e黄色でハイライトされた部分が、追加した\u003cb\u003emobile\u003d'yes'\u003c/b\u003eです。\u003cbr /\u003e\nこれで、スマホなどで見たときも、記事の下にサイドバーが表示されるようになります。\u003cbr /\u003e\n\u003ch2\u003eモバイル表示の確認方法\u003c/h2\u003e実際に、スマホなどの携帯端末でアクセスする方法のほかに、URLの後ろに?m\u003d1をつける方法とBloggerのプレビュー機能を使う方法や、GoogleChromeの拡張機能を使う方法があります。\u003cbr /\u003e\n\u003ch3\u003eURLに?m\u003d1を追加\u003c/h3\u003eこのブログのトップページを確認する場合は、http://www.memorou.com/?m\u003d1となります。\u003cbr /\u003e\n\u003ch3\u003eBloggerのモバイルプレビュー機能\u003c/h3\u003eテンプレートのモバイル画像の下にある歯車ボタンをクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-5a-1riUNes4/U7Ug-RUFAVI/AAAAAAAAB74/ZOLWZqod-j4/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"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\u003d\"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":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://1.bp.blogspot.com/-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\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nBloggerのテンプレートは、日本語サイトではほとんど配布されていないため、「blogger template」で検索すると数多くの海外テンプレート配布サイトが見つかります。\u003cbr /\u003e\n\u003cbr /\u003e\n今回は、\u003ca href\u003d\"http://www.bloggertemplatestore.com/johny-ribet-responsive-blogger-template.html\" target\u003d\"_blank\" rel\u003d\"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\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-JNLo_OWlIBg/U7S_llLT3lI/AAAAAAAAB6M/kFvPTl_EyiM/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"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\u003d\"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\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-gVfpkljTdp0/U7TDEGCxenI/AAAAAAAAB6U/GtN57SrCx1A/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-gVfpkljTdp0/U7TDEGCxenI/AAAAAAAAB6U/GtN57SrCx1A/s1600/04.png\" height\u003d\"177\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eファイルを選択をクリックして、解凍したXMLファイルをアップロードします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-ZYxhdswrw1M/U7TD9bhp1pI/AAAAAAAAB6c/rg86PbG2Pks/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-ZYxhdswrw1M/U7TD9bhp1pI/AAAAAAAAB6c/rg86PbG2Pks/s1600/05.png\" height\u003d\"162\" width\u003d\"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\u003d\"Apple-interchange-newline\" /\u003e 今までの設定その他で追加しても機能していなかった。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-BVJbLawiAU4/U7Jjl1wFq2I/AAAAAAAAB58/Ac6ejv2OfDI/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-BVJbLawiAU4/U7Jjl1wFq2I/AAAAAAAAB58/Ac6ejv2OfDI/s1600/01.png\" height\u003d\"44\" width\u003d\"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\u003d\"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\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-qOL7OrNy4Ps/U7ElAKsiQGI/AAAAAAAAB5s/6EmxB4alStc/s1600/noimage.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"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\u003d'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\u003d'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\u003d\"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\u003d\"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":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://2.bp.blogspot.com/-JNLo_OWlIBg/U7S_llLT3lI/AAAAAAAAB6M/kFvPTl_EyiM/s72-c/03.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\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nほとんどが、今まで記事にしてきた内容の実践です。\u003cbr /\u003e\n\u003ch2\u003e現在のデザインとレイアウト\u003c/h2\u003e上からブログタイトル、メニューバー、ブログの投稿で、右サイドバーに忍者おまとめボタン、サイト内検索、AdSense（レクタングル中）、新着記事です。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-uBwQ1pBJccw/Usy4kSBgSPI/AAAAAAAABPY/iAJNlhdJ15c/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-uBwQ1pBJccw/Usy4kSBgSPI/AAAAAAAABPY/iAJNlhdJ15c/s1600/01.png\" height\u003d\"196\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e忍者おまとめボタンはヘッダーを分割しているのではなく、右サイドバーを上に移動してヘッダー内にあるように見せています。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/12/blogger_16.html\"\u003eBloggerに忍者おまとめボタンを簡単に設置する方法\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\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\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-7hzEUUfPcfA/Usy89x7HC9I/AAAAAAAABPk/8wH7tJP08xk/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-7hzEUUfPcfA/Usy89x7HC9I/AAAAAAAABPk/8wH7tJP08xk/s1600/02.png\" height\u003d\"157\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e一番下にコピーライトを書いています。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"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\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-X243aJOTMlE/Usy-Uj5mjoI/AAAAAAAABPs/RDLcxPJOV8A/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-X243aJOTMlE/Usy-Uj5mjoI/AAAAAAAABPs/RDLcxPJOV8A/s1600/03.png\" height\u003d\"109\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nまず、シンプルテンプレートを使用して、幅の調整でブログ全体の幅を1000ピクセル、右側のサイドバーを350ピクセルに変更しています。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-Zxq7nxqL6F4/Usy-2hBO6-I/AAAAAAAABP0/L_NQacCx0rk/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-Zxq7nxqL6F4/Usy-2hBO6-I/AAAAAAAABP0/L_NQacCx0rk/s1600/04.png\" height\u003d\"66\" width\u003d\"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\u003d\"reference\"\u003e[追記：2017年2月]\u003cbr /\u003e\n現在は、レスポンシブデザインに対応しているテンプレートを使用しています。\u003cbr /\u003e\n\u003ca href\u003d\"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":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://4.bp.blogspot.com/-uBwQ1pBJccw/Usy4kSBgSPI/AAAAAAAABPY/iAJNlhdJ15c/s72-c/01.png","height":"72","width":"72"}}]}});