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/-/STINGER?alt\u003djson-in-script\u0026max-results\u003d9999"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/-/STINGER?alt\u003djson-in-script\u0026max-results\u003d9999"},{"rel":"alternate","type":"text/html","href":"http://www.memorou.com/search/label/STINGER"},{"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":"6"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"9999"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-6496831326755244928"},"published":{"$t":"2015-03-18T13:42:00.001+09:00"},"updated":{"$t":"2017-02-18T19:54:43.194+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"STINGER"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"WordPress無料レスポンシブテーマSTINGER5のカスタマイズ【その2】"},"content":{"type":"html","$t":"この投稿は、「\u003ca href\u003d\"http://www.memorou.com/2015/02/wordpressstinger5.html\"\u003eWordPress無料レスポンシブテーマSTINGER5のカスタマイズ\u003c/a\u003e」の補足や、書ききれなかったカスタマイズの続きです。\u003cbr /\u003e\n\u003cbr /\u003e\nここでは、style.css以外は親テーマを編集することが多々あります。親テーマを編集するか、子テーマを編集するかはあなた次第。\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\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\"\u003eNEXTとPREVを次へと前へに変更する\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関連記事を2列や3列表示にカスタマイズ\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku7\"\u003e更新日だけを削除\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\u003c/div\u003e\u003ca name\u003d\"moku1\"\u003e\u003c/a\u003e  \u003ch2\u003eトップ（ホーム）ページの抜粋の長さを変更\u003c/h2\u003e親テーマのfunctions.phpを変更\u003cbr /\u003e\n\u003cpre\u003e// 抜粋の長さを変更する\nfunction custom_excerpt_length( $length ) {\n     return 80; \n}\n\u003c/pre\u003eの数字を変更する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku2\"\u003e\u003c/a\u003e  \u003ch2\u003eトップ（ホーム）ページの記事タイトルを変更\u003c/h2\u003e変更箇所は、以下の4点\u003cbr /\u003e\n\u003cul\u003e\u003cli\u003e太字からノーマル\u003c/li\u003e\n\u003cli\u003eタイトルの下に薄い線を引く\u003c/li\u003e\n\u003cli\u003eどこでもクリックできるようにする\u003c/li\u003e\n\u003cli\u003e文字サイズを小さくする\u003c/li\u003e\n\u003c/ul\u003e子テーマのstyle.cssに\u003cbr /\u003e\n\u003cpre\u003eh3 a {\nfont-weight: normal;\nborder-bottom: 1px solid #eee;\ndisplay: block;\n}\n\n#topnews dd h3 {\nfont-size: 16px;\nline-height: 25px;\n}\u003c/pre\u003eを追加する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku3\"\u003e\u003c/a\u003e  \u003ch2\u003eNEXTとPREVを次へと前へに変更する\u003c/h2\u003e親テーマのsingle.phpの\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;dt\u0026gt;PREV \u0026lt;/dt\u0026gt;\u003c/pre\u003eと\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;dt\u0026gt;NEXT \u0026lt;/dt\u0026gt;\u003c/pre\u003eを\u003cbr /\u003e\n「前へ」と「次へ」に変更する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003dname\u003d\"moku4\"\u003e\u003c/a\u003e  \u003ch2\u003eサイトタイトルの文字サイズや色を変更\u003c/h2\u003e\u003cdiv\u003e子テーマのstyle.cssに\u003c/div\u003e\u003cpre\u003e/* サイトタイトル */\nheader .sitename {\nfont-size: 28px;\n}\nheader .sitename a {\ncolor: #444 !important;\nfont-weight: normal;\n}\u003c/pre\u003eを追加する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku5\"\u003e\u003c/a\u003e  \u003ch2\u003eサイト説明の文字サイズや色を変更\u003c/h2\u003e\u003cdiv\u003e子テーマのstyle.cssに\u003c/div\u003e\u003cpre\u003e/* サイト説明 */\nheader .descr {\nfont-size: 16px;\ncolor: #555;\n}\u003c/pre\u003eを追加する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku6\"\u003e\u003c/a\u003e  \u003ch2\u003e関連記事を2列や3列表示にカスタマイズ\u003c/h2\u003e\u003ch3\u003e2列表示1\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/-yiD8AHvy8WA/VObr3ki-KcI/AAAAAAAACrE/eFs7XHYQe2Y/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/-yiD8AHvy8WA/VObr3ki-KcI/AAAAAAAACrE/eFs7XHYQe2Y/s1600/01.png\" height\u003d\"302\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n子テーマのstyle.cssに追加する\u003cbr /\u003e\n\u003cpre\u003e/*--------------------------------\n関連記事表示部分\n---------------------------------*/\n#kanren dl{\n float: left;\n padding-left: 20px;\n width: 250px;\n height: 250px;\n}\n\n#kanren dd h5 {\n font-size: 16px;\n font-weight: normal;\n padding: 0px;\n margin-bottom: 5px;\n height: 44px;\n overflow: hidden;\n}\n\n#kanren .clearfix dd h5 a {\n display: block;\n color:#fefefe;\n background: #000;\n position: absolute;\n height: 70px;\n width: 240px;\n overflow: hidden;\n padding: 5px;\n opacity: 0.7;\n}\n\n#kanren dt {\n width: 250px;\n height:170px;\n}\n\n#kanren dt img {\n width: 250px;\n height:250px\n}\n\n#kanren dd {\n clear: both;\n padding-left:0px;\n}\u003c/pre\u003e画像サイズを250×250に変更して、タイトルを3行まで表示（PC時）するようにしています。\u003cbr /\u003e\n\u003cbr /\u003e\n記事の抜粋を非表示にするのを忘れずに。\u003cbr /\u003e\n\u003cbr /\u003e\n画像が暗いため微妙ですが、文字の色と背景色を逆にすると全体的に明るくなります。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-oNMRIEC86Kc/VObsaBlzHaI/AAAAAAAACrM/z9Aj2BpDObQ/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/-oNMRIEC86Kc/VObsaBlzHaI/AAAAAAAACrM/z9Aj2BpDObQ/s1600/02.png\" height\u003d\"286\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e画像のサイズや透過率を変えることで、また違った印象になります。\u003cbr /\u003e\n\u003ch3\u003e2列でアイキャッチ画像の右に記事タイトルを表示\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-pzwzT9LoaZ4/VOhHMiM3H7I/AAAAAAAACrc/Sue3TWFNJRY/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/-pzwzT9LoaZ4/VOhHMiM3H7I/AAAAAAAACrc/Sue3TWFNJRY/s1600/01.png\" height\u003d\"265\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e画像サイズは150×150で右に記事タイトルを表示させています。\u003c/div\u003e\u003cdiv\u003ePCとタブレットでは最大6行までタイトルが見えるようになっています。スマホでは約7.5行まで見えます。\u003c/div\u003e\u003cdiv\u003e画像・タイトルのどちらにマウスを乗せても背景色が変わります。また、文字のないところでもクリック（タップ）ができます。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003e新着記事が2列になったときは、画像の青い数字の順で新しい記事が並びます。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003e子テーマのstyle.cssに追加する\u003c/div\u003e\u003cpre\u003e/*--------------------------------\n関連記事表示部分\n---------------------------------*/\n#kanren dl {\nfloat: left;\npadding-left: 0px;\nwidth: 300px;\nheight: 150px;\n}\n\n#kanren dt {\nwidth: 300px;\nheight: 0px;\n}\n\n#kanren dt img {\nwidth: 150px;\nheight: 150px;\n}\n\n#kanren dd {\npadding-left: 150px;\n}\n\n#kanren dd h5 {\nfont-size: 16px;\nfont-weight: normal;\npadding: 0px;\nmargin-bottom: 5px;\noverflow: hidden;\n}\n\n#kanren .clearfix dd h5 a {\ndisplay: block;\nposition: absolute;\nheight: 140px;\nwidth: 140px;\noverflow: hidden;\npadding: 5px 0 5px 5px;\n}\n\n#kanren dl a:hover {\ndisplay: block;\nbackground: #fffff0;\n}\n\n/* 抜粋文字 */\n#kanren .clearfix dd p {\n display:none;\n}\n\n/* 前次 */\n.p-navi dl dt {\n clear: both;\n}\n.p-navi dl dd {\n clear: both;\npadding-left:0px;\n}\n\n/* ウィジェットタイトル */\naside h4 {\n clear: both;\n}\n\n/* メインの幅 */\nmain {\npadding: 20px 20px;\n}\u003c/pre\u003eすでにメインの幅が600pxを越えている場合は、最後の部分は不要です。\u003cbr /\u003e\n\u003cbr /\u003e\n画面のサイズによって1列や2列に切り替わります。（横幅は300pxで固定です。）\u003cbr /\u003e\n676px以下は1列、677～779pxは2列、780px～1056pxは1列、1057px以上で2列表示になります。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku7\"\u003e\u003c/a\u003e \u003ch2\u003e更新日だけを削除\u003c/h2\u003e親テーマsingle.phpの\u003cbr /\u003e\n\u003cpre\u003e\u0026amp;nbsp;\n                \u0026lt;?php if ($mtime \u003d get_mtime('Y/m/d')) echo ' \u0026lt;i class\u003d\"fa fa-repeat\"\u0026gt;\u0026lt;/i\u0026gt;\u0026amp;nbsp; ' , $mtime; ?\u0026gt;\n\u003c/pre\u003eを削除する。 \u003cbr /\u003e\n\u003cbr /\u003e\n投稿日も同時に非表示にする場合は、子テーマのstyle.cssに\u003cbr /\u003e\n\u003cpre\u003e.blogbox {\nbackground: #ffffff;\ndisplay: none;\n}\n\u003c/pre\u003eを追加する。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6496831326755244928"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6496831326755244928"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2015/03/wordpressstinger52.html","title":"WordPress無料レスポンシブテーマSTINGER5のカスタマイズ【その2】"}],"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/-yiD8AHvy8WA/VObr3ki-KcI/AAAAAAAACrE/eFs7XHYQe2Y/s72-c/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-2167315540070885031"},"published":{"$t":"2015-02-19T12:09:00.000+09:00"},"updated":{"$t":"2015-02-19T19:42:40.965+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"STINGER"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"STINGER5をスマホで見ると横ずれするのはRSSと検索フォームが原因だった"},"content":{"type":"html","$t":"WordPress+STINGER5を使用したサイトをスマホで見てみると、横スクロールしないはずなのにカクッと右にスクロールしてしまいました。以前に書いた\u003ca href\u003d\"http://www.memorou.com/2015/02/wordpressstinger5.html\"\u003eSTINGER5のカスタマイズ\u003c/a\u003eでは、自分で追加したコードのせいで横にずれるようになってしまったと思っていましたが、どうやら違ったようです。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e何が原因か検索したところ、STINGER5で横にずれるのは「広告がはみ出ているから」「画像がはみ出してるから」などが挙げられていました。しかし、どれも自分のブログには当てはまりませんでした。\u003cbr /\u003e\n\u003cbr /\u003e\n何より、その原因の解決策を載せているブログを、下記のスマホで表示してみると横ずれしています。さらに調べたところ、ほとんどのサイトで横ずれが発生していました。\u003cbr /\u003e\n\u003ch2\u003e\n検証環境\u003c/h2\u003e\nテーマはstinger5ver20141227です。スマホは、android2.3.4、解像度480×800（ドット）、DensityDPIは240（High）で、テキストサイズと倍率は共に「中」です。\u003cbr /\u003e\n\u003cbr /\u003e\n現在この機種と同等のスペックの機種が、どれほどのシェア率があるかはわかりませんが、気になったので修正することにしました。\u003cbr /\u003e\n\u003ch2\u003e\nスマホで横ずれする原因と解決策\u003c/h2\u003e\n広告も画像もはみ出していないのに、横ずれする場合はこれが原因かもしれません。\u003cbr /\u003e\n\u003cul\u003e\n\u003cli\u003e「RSS購読する」のボタン\u003c/li\u003e\n\u003cli\u003e検索フォーム\u003c/li\u003e\n\u003c/ul\u003e\nこの二つが、デフォルトの状態でもはみ出しているため、横ずれしていました。\u003cbr /\u003e\n\u003cbr /\u003e\n解決策は、子テーマのstyle.cssに下記を追加します。\u003cbr /\u003e\n\u003cpre\u003easide #search {\noverflow: hidden;\n}\n\n.rssbox {\noverflow: hidden;\n}\u003c/pre\u003e\nこれではみ出しは解消されます。（本当ははみ出していても表示しないようになります。）\u003cbr /\u003e\n\u003cbr /\u003e\nもしこれでもはみ出るなら、SNSボタンが原因かもしれません。SNSボタンのデザインを変更したらはみ出さなくなりました。\u003cbr /\u003e\n\u003ch3\u003e\n検索ボタンのサイズ変更\u003c/h3\u003e\nスマホで見ると、検索ボタンだけ小さくなってタップし辛かったため、ボタンのサイズもボックスの高さに合うように変更します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://1.bp.blogspot.com/-uPAZOsaoKOg/VOVPuk0rvRI/AAAAAAAACq0/18RXqoAENRA/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/-uPAZOsaoKOg/VOVPuk0rvRI/AAAAAAAACq0/18RXqoAENRA/s1600/01.png\" height\u003d\"123\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\n上の画像はイメージですが、スマホで見るとボタンが小さくなっていました。修正後は少し縦長になります。\u003cbr /\u003e\n\u003cbr /\u003e\n子テーマのstyle.cssに下記を追加します。\u003cbr /\u003e\n\u003cpre\u003e#searchsubmit {\nheight: 100%;\n}\u003c/pre\u003e\nアスペクト比が多少おかしくなるので、元の方がよければそのままで。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/2167315540070885031"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/2167315540070885031"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2015/02/stinger5rss.html","title":"STINGER5をスマホで見ると横ずれするのはRSSと検索フォームが原因だった"}],"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/-uPAZOsaoKOg/VOVPuk0rvRI/AAAAAAAACq0/18RXqoAENRA/s72-c/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-7496770927743391457"},"published":{"$t":"2015-02-13T12:52:00.000+09:00"},"updated":{"$t":"2016-07-11T13:14:25.490+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"STINGER"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"メニューバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"STINGER5のスマホとタブレットサイズ表示時のメニューバーをカスタマイズ"},"content":{"type":"html","$t":"STINGER5のスマホとタブレットサイズで表示したときのメニューバーのカスタマイズです。\u003cbr /\u003e\nデフォルトでは、シンプルなデザインになっているため、どこをクリック（タップ）してもクリックできるように、大きなボタン型に変更しました。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003eカスタマイズは、CSSにコピペするだけで完了します。\u003cbr /\u003e\n\u003cbr /\u003e\nPC表示時のメニューバーカスタマイズは、「\u003ca href\u003d\"http://www.memorou.com/2015/02/wordpressstinger5.html\"\u003eWordPress無料レスポンシブテーマSTINGER5のカスタマイズ\u003c/a\u003e」の10を参考にしてください。\u003cbr /\u003e\n\u003ch2\u003e表示タイプは、1列・2列・3列の3パターン\u003c/h2\u003eタブレットとスマホの列を同じにした場合は3パターン、それぞれ別にしたときは6パターンで、合計9パターンになります。\u003cbr /\u003e\n\u003cbr /\u003e\nMENUをクリックしたときの、それぞれの見た目は画像で確認してください。\u003cbr /\u003e\n\u003cbr /\u003e\nスマホ表示の横幅を320px、タブレットサイズの横幅を779pxとし、2列表示のコードを基準としています。※横幅がぶれる（スクロールする）場合は%を少しずつ下げていってください。\u003cbr /\u003e\n\u003ch3\u003e2列表示\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-i6IR5Shsk0E/VNyDMflGtXI/AAAAAAAACpo/HZ5_tMfcpD4/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-i6IR5Shsk0E/VNyDMflGtXI/AAAAAAAACpo/HZ5_tMfcpD4/s1600/03.png\" height\u003d\"106\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n子テーマのstyle.cssに以下を追加します。\u003cbr /\u003e\n\u003cpre\u003e/*media Queries タブレットサイズ以下のメニュー\n----------------------------------------------------*/\n@media only screen and (max-width: 780px) {\n.acordion_tree li {\nfont-size: 14px;\nborder: 1px solid #ccc;\nmargin-bottom: 1px;\nmargin-left: 1px;\npadding: 0px;\nwidth: 48%;\nborder-radius: 5px;\nbackground-color: #fefefe;\nline-height: 40px;\ntext-align: center;\n}\n\n.acordion_tree li a {\nwidth: 100%;\n}\n.acordion_tree li a:hover {\nbackground-color: #e1dfc0;\nborder-radius: 5px;\n}\n}\n/*タブレットサイズ以下のメニュー　　ここまで\n----------------------------------------------------*/\u003c/pre\u003eフォントサイズやカラーなどは自由に変更可能です。\u003cbr /\u003e\n1列・3列表示の場合は、48%の部分を変更してください。\u003cbr /\u003e\n\u003ch3\u003e1列表示\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-xVwIJ4zNZvs/VNyPxGTgbMI/AAAAAAAACp4/lb3Uy-QISzA/s1600/06.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-xVwIJ4zNZvs/VNyPxGTgbMI/AAAAAAAACp4/lb3Uy-QISzA/s1600/06.png\" height\u003d\"157\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e2列表示の、48%の部分を98%に変えて追加してください。\u003cbr /\u003e\n\u003ch3\u003e3列表示\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-PF3lsuZ7lPA/VNyS7eV7ATI/AAAAAAAACqE/iIbejrkrwsQ/s1600/09.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-PF3lsuZ7lPA/VNyS7eV7ATI/AAAAAAAACqE/iIbejrkrwsQ/s1600/09.png\" height\u003d\"86\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e2列表示の、48%の部分を32%に変えて追加してください。\u003cbr /\u003e\n\u003cbr /\u003e\nスマホサイズで見ると、1つずつのボタンの幅が狭くなるため、文字数が多い場合は2行になって見た目が悪くなることがあります。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-VkOitIu-amE/VN1UVGqLfnI/AAAAAAAACqU/BUuFDLASNwY/s1600/10.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-VkOitIu-amE/VN1UVGqLfnI/AAAAAAAACqU/BUuFDLASNwY/s1600/10.png\" /\u003e\u003c/a\u003e\u003c/div\u003e上の画像（横幅320px）のように、2行になることによって空白ができてしまいます。\u003cbr /\u003e\n\u003cbr /\u003e\n2，3文字程度なら、文字の大きさを小さくしたり、スマホ表示時だけ2列にすることで対応できます。\u003cbr /\u003e\n\u003ch2\u003eスマホサイズの時だけ2列表示\u003c/h2\u003e\u003cdiv\u003e上の3列表示のコードの下に、以下を追加します。\u003c/div\u003e\u003cdiv\u003e\u003cpre\u003e/*media Queries スマホサイズのメニュー\n----------------------------------------------------*/\n@media only screen and (max-width: 380px) {\n.acordion_tree li {\nfont-size: 12px;\nwidth: 48%;\n}\n}\n/*スマホサイズのメニュー　　ここまで\n----------------------------------------------------*/\u003c/pre\u003e\u003c/div\u003e\u003cdiv\u003e横幅が380px以下で、2列表示に切り替わるようになっています。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003e文字サイズも14pxから12pxに変更して、見た目は下の画像のようになります。\u003c/div\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-absSPKzMyTo/VN1dgxK_UhI/AAAAAAAACqk/MCqW9qr4Oq0/s1600/11.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-absSPKzMyTo/VN1dgxK_UhI/AAAAAAAACqk/MCqW9qr4Oq0/s1600/11.png\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e文字数が多くて2行になっていたのが、横幅320pxでも1行できれいにおさまるようになりました。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003eスマホサイズの時だけ1列にする場合は、48%の部分を98%に変えて追加してください。\u003c/div\u003e"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7496770927743391457"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7496770927743391457"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2015/02/stinger5.html","title":"STINGER5のスマホとタブレットサイズ表示時のメニューバーをカスタマイズ"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://4.bp.blogspot.com/-i6IR5Shsk0E/VNyDMflGtXI/AAAAAAAACpo/HZ5_tMfcpD4/s72-c/03.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-3656944126658889274"},"published":{"$t":"2015-02-10T14:48:00.001+09:00"},"updated":{"$t":"2017-02-18T20:02:53.734+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"STINGER"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テーマ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"WordPress無料レスポンシブテーマSTINGER5のカスタマイズ"},"content":{"type":"html","$t":"WordPress国産無料テーマで有名なSTINGERシリーズに、レスポンシブwebデザインテーマSTINGER5が登場して約半年。今までは、3を使わせていただいていましたが5に変更したため、カスタマイズしたポイントをメモします。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003ca href\u003d\"http://wp-fun.com/dl/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eSTINGER5ダウンロード\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\nカスタマイズ時は、WordPress4.1、stinger5ver20141227です。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_446.html\"\u003e子テーマを作成\u003c/a\u003eしてからカスタマイズしています。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"mokuji\"\u003e\u003cdiv class\u003d\"mokuji-title\"\u003eもくじ\u003c/div\u003e\u003col\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\"\u003eRSSボタン・検索フォーム・最近の投稿の削除\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku4\"\u003eSNSボタンの削除からの忍者まとめボタンの追加\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見出しh2の装飾（吹き出しを解除）\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku7\"\u003e「NEW POST」を「新着記事」に変更\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku8\"\u003e「Message」を「コメント」に変更\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メニューバーのカスタマイズ（PC）\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\"\u003eNEW POSTの画像を大きくして抜粋を非表示\u003c/a\u003e\u003c/li\u003e\n\u003c/ol\u003e\u003c/div\u003eここになければ\u003ca href\u003d\"http://www.memorou.com/2015/03/wordpressstinger52.html\"\u003eSTINGER5のカスタマイズ【その2】\u003c/a\u003eにあるかも\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku1\"\u003e\u003c/a\u003e \u003ch2\u003e外観＞カスタマイズ\u003c/h2\u003eWordPressのバージョンも上がってカスタマイズしやすくなったのか、外観のカスタマイズから簡単に変更できる箇所が結構ありました。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-ZOyUfAqZZC0/VNGxTKqW-vI/AAAAAAAACn0/ec2kPQLRHFU/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/-ZOyUfAqZZC0/VNGxTKqW-vI/AAAAAAAACn0/ec2kPQLRHFU/s1600/01.png\" height\u003d\"212\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eロゴ画像\u003c/h3\u003eタイトルをロゴ画像に変更するときはここから。ロゴ画像をクリックして、画像を選択するだけで完了します。\u003cbr /\u003e\n\u003cbr /\u003e\nスマホ表示のことを考え、サイズは300×60で作成しました。\u003cbr /\u003e\nロゴの作成は、\u003ca href\u003d\"http://www.memorou.com/2014/03/blog-post.html\" target\u003d\"\"\u003eブログを書くときに使ってる役立つ無料ソフト（ツール）\u003c/a\u003eで作成しています。\u003cbr /\u003e\n\u003ch3\u003eサイトタイトルとキャッチフレーズ\u003c/h3\u003eサイトタイトルとキャッチフレーズは、設定の一般からも変更可能です。\u003cbr /\u003e\n\u003ch3\u003e基本色（キーカラー）\u003c/h3\u003e基本色では、H2の文字や背景、検索やRSS（購読するの部分）などの色を変更できる。トップページだけではなく、個別ページなど好きなページに移動でき、実際に色の変化を見ながら変更できます。\u003cbr /\u003e\n\u003cbr /\u003e\nRSSと検索バーは、変更後にデフォルトに戻すと、元の色と違う色になってしまいます。実際のデフォルトカラーは、RSSが#87BF31、検索バーが#CCCです。\u003cbr /\u003e\n\u003ch3\u003eヘッダー画像\u003c/h3\u003eヘッダー画像を非表示にしたり、変更したりできます。推奨サイズは980×250\u003cbr /\u003e\n\u003ch3\u003eウィジェット\u003c/h3\u003eウィジェットは、外観のウィジェットからも変更可能です。\u003cbr /\u003e\n必要のないものは削除したり、順番を移動したりできます。ひとまず、最近の投稿と検索バーは二つ必要ないので削除します。\u003cbr /\u003e\n\u003cbr /\u003e\n追加で、プロフィールと人気の投稿を表示します。人気の投稿は、「WordPress Popular Posts」というプラグインを使って表示させます。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/10/blog-post_20.html\"\u003eワードプレスのサイドバーにプロフィールを表示する方法\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku2\"\u003e\u003c/a\u003e \u003ch2\u003e外観＞テーマの編集\u003c/h2\u003e\u003cdiv\u003e外観のテーマの編集からカスタマイズします。\u003c/div\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-JpxY3bTIi4A/VNL5yCkfIVI/AAAAAAAACoY/dMznkHrNVYI/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-JpxY3bTIi4A/VNL5yCkfIVI/AAAAAAAACoY/dMznkHrNVYI/s1600/03.png\" height\u003d\"205\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\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://3.bp.blogspot.com/-UZRYxSpkfh4/VNL46s_EqmI/AAAAAAAACoQ/xlDxNNXwlT4/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/-UZRYxSpkfh4/VNL46s_EqmI/AAAAAAAACoQ/xlDxNNXwlT4/s1600/02.png\" height\u003d\"31\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n目指すのは上の画像です。基本色の検索バーで#FFFにしておきます。\u003cbr /\u003e\n用意するものは、50×32の検索ボタン（png画像）です。子テーマのimagesフォルダに入れておきます。\u003cbr /\u003e\n\u003cbr /\u003e\nstyle.cssに\u003cbr /\u003e\n\u003cpre\u003e#s {\n border:1px\u0026nbsp;solid #ccc;\n}\u003c/pre\u003eを追加します。\u003cbr /\u003e\n\u003cbr /\u003e\n子テーマに、親テーマのsearchform.phpをまるまるコピーして貼り付けます。searchform.php内の\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;input type\u003d\"image\" src\u003d\"\u0026lt;?php echo get_template_directory_uri(); ?\u0026gt;\u003c/pre\u003eの部分を\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;input type\u003d\"image\" src\u003d\"\u0026lt;?php echo get_stylesheet_directory_uri(); ?\u0026gt;\u003c/pre\u003eに書き換えます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku3\"\u003e\u003c/a\u003e \u003ch2\u003eRSSボタン・検索フォーム・最近の投稿の削除\u003c/h2\u003e\u003cdiv\u003e親テーマを編集します。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e親テーマのsidebar.php内の\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;!-- RSSボタンです --\u0026gt;\n  \u0026lt;div class\u003d\"rssbox\"\u0026gt; \u0026lt;a href\u003d\"\u0026lt;?php echo home_url(); ?\u0026gt;/?feed\u003drss2\"\u0026gt;\u0026lt;i class\u003d\"fa fa-rss-square\"\u0026gt;\u0026lt;/i\u0026gt;\u0026amp;nbsp;購読する\u0026lt;/a\u0026gt; \u0026lt;/div\u0026gt;\n  \u0026lt;!-- RSSボタンここまで --\u0026gt;\n  \u0026lt;?php get_search_form(); //検索フォーム表示  ?\u0026gt;\n  \u0026lt;!-- 最近のエントリ --\u0026gt;\n  \u0026lt;h4 class\u003d\"menu_underh2\"\u0026gt; NEW POST\u0026lt;/h4\u0026gt;\n  \u0026lt;?php get_template_part('newpost');?\u0026gt;\n  \u0026lt;!-- /最近のエントリ --\u0026gt;\u003c/pre\u003eの部分を削除します。\u003cbr /\u003e\n\u003cbr /\u003e\nこれで、外観のウィジェットから追加して、好きな位置に並び替えることができます。\u003cbr /\u003e\nただし、デザインは検索フォーム以外変わってしまいます。そのままのデザインがいい場合は、sidebar.phpで順番を入れ替えてください。\u003cbr /\u003e\n\u003cbr /\u003e\nsidebar.phpで追加した方が、ウィジェットで追加した方より上にきます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku4\"\u003e\u003c/a\u003e \u003ch2\u003eSNSボタンの削除からの忍者まとめボタンの追加\u003c/h2\u003e親テーマを編集します。\u003cbr /\u003e\n\u003ch3\u003e単一記事\u003c/h3\u003e単一記事の投稿の\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;/div\u0026gt;\n\u0026lt;?php get_template_part('sns'); //ソーシャルボタン読み込み ?\u0026gt;\n\u0026lt;?php endwhile; else: ?\u0026gt;\u003c/pre\u003e部分の\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;?php get_template_part('sns'); //ソーシャルボタン読み込み ?\u0026gt;\u003c/pre\u003eを削除するだけ。\u003cbr /\u003e\n\u003cbr /\u003e\nここに忍者おまとめボタンを追加します。\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;!-- SNSボタンです --\u0026gt;\n忍者おまとめボタンのコード\n  \u0026lt;!-- SNSボタンここまで --\u0026gt;\u003c/pre\u003eを追加します。\u003cbr /\u003e\n\u003cbr /\u003e\n記事タイトルの下に入れるなら、\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;/h1\u0026gt;\u003c/pre\u003eの下にコードを追加します。\u003cbr /\u003e\n\u003cbr /\u003e\nサイドバーアドセンスの下に入れるなら、\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;!-- RSSボタンです --\u0026gt;\u003c/pre\u003eの上にコードを追加します。\u003cbr /\u003e\n\u003ch3\u003eホームページ\u003c/h3\u003e単一記事の投稿の\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;!-- /section --\u0026gt; \n\u0026lt;?php get_template_part('sns-top'); //ソーシャルボタン読み込み ?\u0026gt; \n        \u0026lt;!-- ページナビ --\u0026gt;\u003c/pre\u003e部分の\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;?php get_template_part('sns'); //ソーシャルボタン読み込み ?\u0026gt;\u003c/pre\u003eを削除するだけ。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku5\"\u003e\u003c/a\u003e \u003ch2\u003eファビコンの変更\u003c/h2\u003e親テーマを編集します。\u003cbr /\u003e\n\u003cbr /\u003e\n用意するのはlogo.icoとapple-touch-icon-precomposed.png（75×75）にFTPソフトです。FTPソフトは、フリーで配布されています。また、サーバーを借りている人は、用意する必要はないかもしれません。\u003cbr /\u003e\n\u003cbr /\u003e\nファビコンの作成までは、\u003ca href\u003d\"http://www.memorou.com/2013/10/wordpressstinger_19.html\"\u003eファビコン用素材の作り方\u003c/a\u003eを参考にしてください。完成したら、名前をlogoに変更します。\u003cbr /\u003e\n\u003cbr /\u003e\nこれを、親テーマのimagesフォルダのファイルと置き換えます。（この時点で元のファイルは消えるため、必要に応じてバックアップを取っておいてください。）\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-uAMLvk0uPKE/VNRHUcj7Q7I/AAAAAAAACoo/qe0OKN8Xv2E/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-uAMLvk0uPKE/VNRHUcj7Q7I/AAAAAAAACoo/qe0OKN8Xv2E/s1600/05.png\" height\u003d\"275\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eこれで完成です。\u003cbr /\u003e\n更新しても変わらないときは、ブラウザのキャッシュを削除してください。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku6\"\u003e\u003c/a\u003e \u003ch2\u003e見出しh2の装飾（吹き出しを解除）\u003c/h2\u003e親テーマを編集します。\u003cbr /\u003e\n\u003cbr /\u003e\n親テーマのstyle.cssのh2を、コメントアウトまたは削除します。\u003cbr /\u003e\nコメントアウトするのは、h2で検索した2,3個目と5,6個目です。\u003cbr /\u003e\n\u003cpre\u003e/* 中見出し */\n\nh2 {\n position: relative;\n background: #f3f3f3;\n color: #1a1a1a;\n font-size: 20px;\n line-height: 27px;\n margin-bottom: 20px;\n padding-top: 10px;\n padding-right: 20px;\n padding-bottom: 10px;\n padding-left: 20px;\n}\n/*\nh2:after {\n content: '';\n position: absolute;\n border-top: 10px solid #f3f3f3;\n border-right: 10px solid transparent;\n border-left: 10px solid transparent;\n bottom: -10px;\n left: 30px;\n border-radius: 2px;\n}\nh2:before {\n content: '';\n position: absolute;\n border-top: 10px solid #f3f3f3;\n border-right: 10px solid transparent;\n border-left: 10px solid transparent;\n bottom: -10px;\n left: 30px;\n}\n*/\n\u003c/pre\u003eこのように、afterとbeforeの部分をコメントアウトします。同様に、5,6個目もコメントアウトします。\u003cbr /\u003e\n\u003cbr /\u003e\n記事内のh2を装飾するときは、子テーマのstyle.cssに.post h2と追加する。\u003cbr /\u003e\n\u003cbr /\u003e\nh4の背景が何をやっても背景色が変わらないときは、外観カスタマイズの基本色で変更すると変わるかもしれません。公開日時、コメント、関連記事などにも対応しているため注意が必要です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku7\"\u003e\u003c/a\u003e \u003ch2\u003e「NEW POST」を「新着記事」に変更\u003c/h2\u003e親テーマを編集します。\u003cbr /\u003e\n\u003cbr /\u003e\n親テーマのsidebar.phpの\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;h4 class\u003d\"menu_underh2\"\u0026gt; NEW POST\u0026lt;/h4\u0026gt;\u003c/pre\u003eの、NEW POSTを新着記事に変更します。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku8\"\u003e\u003c/a\u003e \u003ch2\u003e「Message」を「コメント」に変更\u003c/h2\u003e親テーマを編集します。\u003cbr /\u003e\n\u003cbr /\u003e\n親テーマのcomments.phpの\u003cbr /\u003e\n\u003cpre\u003e$args\u003darray('title_reply' \u003d\u0026gt; 'Message',\u003c/pre\u003eの、Messageをコメントに変更します。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku9\"\u003e\u003c/a\u003e \u003ch2\u003eリンクテキストのカラーとアンダーライン\u003c/h2\u003e\u003cdiv\u003e途中まで親テーマを編集します。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003e子テーマに追加したけど変わらなかったため、親テーマを編集しました。\u003c/div\u003e\u003cdiv\u003eリンクテキストにマウスを乗せたときの色は、デフォルトが#b22222になっているので、変えたい場所のコードを変更する。\u003c/div\u003e\u003cbr /\u003e\n\u003cdiv\u003eマウスを乗せたときの基本になる色を変更するときは、\u003c/div\u003e\u003cdiv\u003e\u003cpre\u003e/* リンクにマウスオーバーした時の色 */\na:hover {\n color: #b22222;\n}\u003c/pre\u003e\u003c/div\u003e\u003cdiv\u003eのコードを変更する。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003e関連記事とNEW POSTの記事タイトルにマウスを乗せたときの色を変更するときは、\u003c/div\u003e\u003cdiv\u003e\u003cpre\u003e#kanren .clearfix dd h5 a:hover {\n color: #b22222;\n}\u003c/pre\u003e\u003c/div\u003e\u003cdiv\u003eのコードを変更する。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003eリンクにマウスを乗せる前のアンダーラインをすべて消します。\u003c/div\u003e\u003cdiv\u003e子テーマのstyle.cssに\u003c/div\u003e\u003cdiv\u003e\u003cpre\u003e/* リンクのアンダーライン */\na {\n text-decoration: none;\n}\u003c/pre\u003e\u003c/div\u003e\u003cdiv\u003eを追加する。\u003c/div\u003e\u003cbr /\u003e\n\u003ca name\u003d\"moku10\"\u003e\u003c/a\u003e \u003ch2\u003eメニューバーのカスタマイズ（PC）\u003c/h2\u003e外観のメニューから、、表示させたいページやカテゴリを追加します。詳しくは、\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_6.html\"\u003eメニューバーにカテゴリーと固定ページを表示させる方法\u003c/a\u003eを参考にしてください。\u003cbr /\u003e\nスマホとタブレットのメニューバーカスタマイズは、\u003ca href\u003d\"http://www.memorou.com/2015/02/stinger5.html\"\u003eSTINGER5のスマホとタブレットサイズ表示時のメニューバーをカスタマイズ\u003c/a\u003eを参考にしてください。\u003cbr /\u003e\n\u003cbr /\u003e\n※STINGER5でメニューに階層を付けると、そのまま表示されてしまいます。ドロップ（プル）ダウンメニューにしたい場合は、カスタマイズが必要です。このとき、\u003ca href\u003d\"https://support.google.com/adsense/answer/1346295?hl\u003dja\" target\u003d\"_blank\" rel\u003d\"nofollow\"\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://2.bp.blogspot.com/-tgrQZKCsGD4/VNWaw7xNsZI/AAAAAAAACo4/DMK2K_mMPos/s1600/06.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-tgrQZKCsGD4/VNWaw7xNsZI/AAAAAAAACo4/DMK2K_mMPos/s1600/06.png\" height\u003d\"15\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e目指すのは上の画像です。上記の理由により、ドロップダウンメニューには対応していません。\u003cbr /\u003e\n子テーマのstyle.cssに追加します。\u003cbr /\u003e\n\u003cpre\u003e/*media Queries PCサイズ\n----------------------------------------------------*/\n@media only screen and (min-width: 780px) {\nnav {\n background-color: #fafafa;\n padding: 2px 0;\n border: 1px solid #ccc;\n border-radius: 5px;\n -webkit-border-radius: 5px;\n -moz-border-radius: 5px;\n}\n\nnav li {\n border-right: 1px solid #ccc;\n border-left: none;\n}\n\nnav li a {\n line-height: 30px;\n display: block;\n margin: -7px -8px;\n padding: 0 8px;\n}\n\nnav li a:hover {\n background-color: #fff;\n}\n}\u003c/pre\u003e色やサイズ、線の太さなど自由に変更可能です。\u003cbr /\u003e\n枠の角丸をなくしたいときは、rediusの3箇所を削除する。\u003cbr /\u003e\n文字にマウスを乗せたときだけ見た目を変えたいなら、display:blockを削除する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku11\"\u003e\u003c/a\u003e \u003ch2\u003e「ページトップへ」ボタンのカスタマイズ\u003c/h2\u003e変更するのは以下\u003cbr /\u003e\n\u003cul\u003e\u003cli\u003eボタンを大きく\u003c/li\u003e\n\u003cli\u003eボタンを丸く\u003c/li\u003e\n\u003cli\u003eマウスオーバーで色を濃く\u003c/li\u003e\n\u003cli\u003e矢印を大きく\u003c/li\u003e\n\u003c/ul\u003e子テーマのstyle.cssに追加します。\u003cbr /\u003e\n\u003cpre\u003e/* ページトップ */\n#page-top {\nfont-size: 32px;\n}\n\n#page-top a {\nborder-radius: 50%;\n}\n\n#page-top a:hover {\nbackground: #000;\n}\n\n.fa-angle-up:before {\ncontent: \"\\f077\" !important;\n}\u003c/pre\u003e\u003cbr /\u003e\nまたは、footer.phpの\u003cbr /\u003e\n\u003cpre\u003eclass\u003d\"fa fa-angle-up\"\u003c/pre\u003eを\u003cbr /\u003e\n\u003cpre\u003eclass\u003d\"fa fa-arrow-up\"\u003c/pre\u003eなどに書き換える\u003cbr /\u003e\nアイコンは\u003ca href\u003d\"http://fortawesome.github.io/Font-Awesome/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eFont Awesome\u003c/a\u003eから選びます。 \u003cbr /\u003e\n色の濃さも、style.cssのopacityの数字（デフォルトでは0.3）を大きくしていくと濃くなっていきます。\u003cbr /\u003e\n\u003cbr /\u003e\nどちらの方法が正しいかわかりませんが、どちらの方法でも変更は可能です。 \u003cbr /\u003e\n\u003ca name\u003d\"moku12\"\u003e\u003c/a\u003e \u003ch2\u003e関連記事の画像を大きくして抜粋を非表示\u003c/h2\u003e\u003cdiv\u003eNEW POSTのデザインも同時に変化します。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e変更後の完成予想図はこんな感じです。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-E_WKl3Eevys/VNmB5HDaM9I/AAAAAAAACpI/embcj4l5hSQ/s1600/07.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-E_WKl3Eevys/VNmB5HDaM9I/AAAAAAAACpI/embcj4l5hSQ/s1600/07.png\" height\u003d\"320\" width\u003d\"226\" /\u003e\u003c/a\u003e\u003c/div\u003e記事の抜粋を非表示にして、280×200の画像を最大で6件表示するようにしました。上の画像の数字は、画像本来のサイズです。\u003cbr /\u003e\n\u003cbr /\u003e\n画像は、ブラウザの横幅が1067px以上で2列、780px～1066pxで1列、689px～779pxで2列、686px以下で1列になります。\u003cbr /\u003e\n\u003ch3\u003e抜粋を非表示\u003c/h3\u003e抜粋を表示させておきたい場合は、ここを飛ばしてください。ただし、次に指定する高さを変更する必要があります。\u003cbr /\u003e\n\u003cbr /\u003e\n子テーマのstyle.cssに追加します。\u003cbr /\u003e\n\u003cpre\u003e/* 抜粋非表示 */\n#kanren .clearfix dd p {\n display:none;\n}\u003c/pre\u003e\u003ch3\u003e画像サイズの変更\u003c/h3\u003e子テーマのstyle.cssに追加します。（無駄なコードが合ったら削除してください。）\u003cbr /\u003e\n\u003cpre\u003e/*--------------------------------\n関連記事表示部分\n---------------------------------*/\n#kanren dl{\n float: left;\n padding-left: 5px;\n width: 280px;\n height: 250px;\n}\n/* タイトル名 */\n#kanren dd h5 {\n font-size: 16px;\n font-weight: bold;\n padding: 0px;\n margin-bottom: 5px;\n}\n#kanren dt {\n width: 280px;\n height:210px;\n}\n#kanren dt img {\n width: 280px;\n height:200px\n}\n#kanren dd {\n clear: both;\n padding-left:0px;\n}\u003c/pre\u003e抜粋を非表示にしていない場合は、250pxの部分を変更してください。\u003cbr /\u003e\nもう少し画像を小さくして3つ並べたいときなどは、下の画像を参考に、サイズを変更してください。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-ztcth_Yj5_w/VNmNd3DSnuI/AAAAAAAACpY/toBEBJI70jI/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/-ztcth_Yj5_w/VNmNd3DSnuI/AAAAAAAACpY/toBEBJI70jI/s1600/08.png\" height\u003d\"169\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n次に、親テーマのfunctions.phpのアイキャッチサムネイルに、\u003cbr /\u003e\n\u003cpre\u003eadd_image_size('thumb280',280,200,true);\u003c/pre\u003eを追加します。\u003cbr /\u003e\n今回は、280×200の画像にしたいので280，200としています。\u003cbr /\u003e\n\u003cbr /\u003e\n続いて、親テーマのkanren.phpを編集します。（これは、子テーマを作成してもOKです。やることは一緒です。）\u003cbr /\u003e\n\u003cpre\u003e'posts_per_page'\u003d\u0026gt; 10,\u003c/pre\u003eの10を6に変更します。これは関連記事を表示する件数です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;?php the_post_thumbnail( 'thumb150' ); ?\u0026gt;\u003c/pre\u003eの150を280に変更します。これはfunctions.phpに追加した名前です。\u003cbr /\u003e\n例えば、functions.phpで('abc123',560,400,true)としたなら、\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;?php the_post_thumbnail( 'abc123' ); ?\u0026gt;\u003c/pre\u003eとします。\u003cbr /\u003e\n\u003cbr /\u003e\n関連記事のカスタマイズはここまでです。この変更に伴い、PREV・NEXTの表示とサイドバーが崩れることがあります。\u003cbr /\u003e\n\u003cbr /\u003e\nそうならないように、子テーマのstyle.cssに追加してください。\u003cbr /\u003e\n\u003cpre\u003e/* PREV NEXT */\n.p-navi dl dt {\n clear: both;\n}\n.p-navi dl dd {\n clear: both;\npadding-left:0px;\n}\n\n/* ウィジェットタイトル */\naside h4 {\n clear: both;\n}\u003c/pre\u003e\u003cbr /\u003e\n\u003cstrike\u003e※旧型のAndroid（バージョン2.3.4 解像度800×480）で確認したところ、横幅が足りず横にスクロールしてしまい、画面内にすべてがおさまらなくなったため、現在改善策を検討中です。\u003c/strike\u003e原因はこれではありませんでした。詳しくは\u003ca href\u003d\"http://www.memorou.com/2015/02/stinger5rss.html\"\u003eSTINGER5をスマホで見ると横ずれするのはRSSと検索フォームが原因だった\u003c/a\u003eへ\u003cbr /\u003e\n\u003cbr /\u003e\n【追記】\u003cbr /\u003e\n記事タイトルが長くて2行以内におさまらないときに、3行目以降を省略する場合は、上の#kanren dd h5に下記を追加してください。\u003cbr /\u003e\n\u003cpre\u003eheight: 44px;\noverflow: hidden;\n\u003c/pre\u003e文字の大きさを変えた場合は、44pxも変更してください。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku13\"\u003e\u003c/a\u003e \u003ch2\u003eNEW POSTの画像を大きくして抜粋を非表示\u003c/h2\u003e親テーマのnewpost.phpを編集します。（これは、子テーマを作成してもOKです。やることは一緒です。）\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;?php the_post_thumbnail( 'thumb150' ); ?\u0026gt;\u003c/pre\u003eの150を280に変更します。\u003cbr /\u003e\n\u003cbr /\u003e\n詳しくは、上の\u003ca href\u003d\"#moku12\"\u003e関連記事の画像を大きくして抜粋を非表示\u003c/a\u003eを参考にしてください。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3656944126658889274"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3656944126658889274"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2015/02/wordpressstinger5.html","title":"WordPress無料レスポンシブテーマSTINGER5のカスタマイズ"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://3.bp.blogspot.com/-ZOyUfAqZZC0/VNGxTKqW-vI/AAAAAAAACn0/ec2kPQLRHFU/s72-c/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-3889869096010717021"},"published":{"$t":"2013-11-21T17:27:00.000+09:00"},"updated":{"$t":"2017-02-19T22:54:26.632+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"STINGER"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"バナー広告"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"AdSense"}],"title":{"type":"text","$t":"WordPressのヘッダーや記事下など好きな位置にアドセンスを設置する方法"},"content":{"type":"html","$t":"WordPressのヘッダー内のタイトル横やサイドバー、記事の下やメニューバーの下など全部で6箇所にアドセンス広告を貼る方法です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nコンテンツ向けのAdSenseユニットは1ページに3つまで配置できます。\u003cbr /\u003e\nまた、リンクユニットも1ページに3つまで配置できるので、自分のサイトにあった配置や、サイズ、スタイルを考えます。 \u003cbr /\u003e\n\u003cbr /\u003e\n効果的な配置やデザインのヒントなどは\u003ca href\u003d\"https://support.google.com/adsense/answer/2973336?hl\u003dja\u0026amp;ref_topic\u003d1250106\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eAdSenseを最大限に活用する\u003c/a\u003eで確認できます。\u003cbr /\u003e\n\u003cbr /\u003e\nWordPressのバージョンは3.6.1で、テーマはSTINGER3を使用しています。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2015/02/wordpressstinger5.html\"\u003eSTINGER5のカスタマイズはこちら\u003c/a\u003e\u003cbr /\u003e\n\u003cdiv class\u003d\"mokuji\"\u003e\u003cdiv class\u003d\"mokuji-title\"\u003eもくじ\u003c/div\u003e\u003col\u003e\u003cli\u003e\u003ca href\u003d\"#moku1\"\u003eヘッダー(タイトル横)にAdSense広告を貼る方法\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku2\"\u003eサイドバーにAdSense広告を貼る方法\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku3\"\u003e記事の下にAdSense広告を貼る方法\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku4\"\u003e関連記事の下にAdSense広告を貼る方法\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku5\"\u003e固定ページにAdSense広告を貼る方法\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku6\"\u003eメニューバーの下にAdSense広告を貼る方法\u003c/a\u003e\u003c/li\u003e\n\u003c/ol\u003e\u003c/div\u003e\u003ca name\u003d\"moku1\"\u003e\u003c/a\u003e  \u003ch2\u003eヘッダー(タイトル横)にAdSense広告を貼る方法\u003c/h2\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-A6NFxZaax6U/Uo247B0Y_HI/AAAAAAAAAlo/Bph_57_Bevk/s1600/%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%A8%AA_2.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"83\" src\u003d\"https://4.bp.blogspot.com/-A6NFxZaax6U/Uo247B0Y_HI/AAAAAAAAAlo/Bph_57_Bevk/s320/%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%A8%AA_2.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n以前にも記事にした、タイトルロゴの横にアドセンスなどのバナー広告を貼る方法の別バージョンの記録です。\u003cbr /\u003e\n\u003cbr /\u003e\nSEOやPageSpeed Insightsのパフォーマンスなどを考えずに、とにかくヘッダー部分に広告を貼ることだけを考えました。\u003cbr /\u003e\n\u003ch3\u003estyle.cssへの記述\u003c/h3\u003e子テーマのstyle.cssへ以下の記述を追加します。\u003cbr /\u003e\n\u003cpre\u003e/*-----------------------------\nヘッダー分割\n-----------------------------*/\n#container #header #header-in #h-l {\npadding-top: 10px;\npadding-right: 0px;\npadding-bottom: 10px;\npadding-left: 0px;\nfloat: left;\nwidth: 50%;\n}\n\n#container #header #header-in #h-2 {\npadding-top: 10px;\npadding-bottom: 10px;\npadding-right: 0px;\npadding-left: 0px;\ntext-align: left;\nfloat: right;\nwidth: 468px;\n}\n\u003c/pre\u003eまず、画像の回り込みの指定をしたあと、ヘッダーを分割するためにh-lの横幅を50%にして左半分だけを使うようにしました。(ちなみに、ｴｲﾁｰｲﾁではなく、ｴｲﾁｰｴﾙです。)\u003cbr /\u003e\nタイトルに使っている画像やテキストが大きかった場合のどうなるかは試していません。\u003cbr /\u003e\n\u003cbr /\u003e\n次に、h-2でヘッダー右側の位置や横幅を指定します。\u003cbr /\u003e\n\u003cbr /\u003e\nCSS側の設定はこれで終わりなので、「ファイルを更新」をクリックして今度はheader.phpを開きます。\u003cbr /\u003e\n\u003ch3 class\u003d\"main\"\u003eheader.phpへの記述\u003c/h3\u003eまずは、子テーマのheader.phpで、\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;!-- /#header --\u0026gt;\n\u0026lt;div id\u003d\"gazou\"\u0026gt;\n\u003c/pre\u003eを探します。\u003cbr /\u003e\n見つけたら、\u0026lt;!-- /#header --\u0026gt;の前（上）に以下の記述を追加します。\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;div id\u003d\"header-in\"\u0026gt;\n\u0026lt;div id\u003d\"h-2\"\u0026gt;広告のソースコード\n\u0026lt;!-- /#h-2 --\u0026gt;\u0026lt;/div\u0026gt;\n\u0026lt;!-- /#header-in --\u0026gt;\u0026lt;/div\u0026gt;\n\u003c/pre\u003e次に、貼り付けたいソースコードを用意（コピー）します。大きさはヘッダーの横幅の半分よりも小さいものを選びます。今回は468×60の横長のものにしました。\u003cbr /\u003e\n用意ができたら、広告のソースコードと書かれた場所に貼り付け（ペースト）ます。\u003cbr /\u003e\n\u003cbr /\u003e\n「ファイルを更新」をクリックしたら完成です。\u003cbr /\u003e\n\u003cbr /\u003e\nこの作業を応用してタイトルの横に検索ボックスや、SNSボタンなどを設置することが可能です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2015/05/wordpress.html\"\u003eタイトル横に広告が設置できる人気のWordPressテーマ8選\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku2\"\u003e\u003c/a\u003e \u003ch2\u003eサイドバーにAdSense広告を貼り付ける方法\u003c/h2\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-yc8AcDXqK54/UoxGZRk6eEI/AAAAAAAAAfQ/5yUdgavQlkI/s1600/%E3%82%B5%E3%82%A4%E3%83%89ad.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"176\" src\u003d\"https://4.bp.blogspot.com/-yc8AcDXqK54/UoxGZRk6eEI/AAAAAAAAAfQ/5yUdgavQlkI/s320/%E3%82%B5%E3%82%A4%E3%83%89ad.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nこの方法は、STINGER3でウィジェットの「Googleアドセンス用」を使用せずに、サイドバーの好きな位置に表示する方法の記録です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003eサイドバーの一番上にAdSense広告を表示する方法\u003c/h3\u003eまずは、子テーマのsidebar.phpの一番上の方から下記の記述を探します。\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;?php get_template_part('ad');?\u0026gt;\n\u0026lt;?php endif; ?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u0026lt;?php get_search_form(); ?\u0026gt;\n\u0026lt;div class\u003d\"kizi02\"\u0026gt;\n\u0026lt;!--最近のエントリ--\u0026gt;\n\u003c/pre\u003e見つけたら、\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;?php get_search_form(); ?\u0026gt;\n\u003c/pre\u003eの前（上）にAdSenseコードを貼り付けます。「ファイルを更新」を押したら完成です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003eサイドバーのその他の場所に表示する方法\u003c/h3\u003eSTINGER3では、デフォルトでサイト内検索と新着記事が表示されるようになっている関係で、「Googleアドセンス用」を使わずに一番上に広告を表示したい場合は、上記のような方法をとりましたが、その他の場所（検索の下を除く）に表示したい場合はウィジェットを使うことにより簡単に表示することができます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003eウィジェットの追加\u003c/h3\u003eまず、外観からウィジェット選択します。ウィジェットの選択画面になるので、「利用できるウィジェット」から「テキスト」を探して、「サイドバー1」の広告を表示させたい場所へドラッグアンドドロップします。\u003cbr /\u003e\n\u003cbr /\u003e\n次に、AdSenseコードをテキストウィジェットに貼り付けて「保存」を押したら完成です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku3\"\u003e\u003c/a\u003e \u003ch2\u003e記事の下にAdSense広告を貼り付ける方法\u003c/h2\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-S9OvMXGmnz0/Uow8s_b5cCI/AAAAAAAAAe0/vjXUlfcQ8wM/s1600/%E8%A8%98%E4%BA%8B%E4%B8%8Bad.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"195\" src\u003d\"https://1.bp.blogspot.com/-S9OvMXGmnz0/Uow8s_b5cCI/AAAAAAAAAe0/vjXUlfcQ8wM/s320/%E8%A8%98%E4%BA%8B%E4%B8%8Bad.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n上の画像のように記事の下に左寄せでAdSense広告を表示します。\u003cbr /\u003e\n\u003cbr /\u003e\nCSSへの記述は特にないので、子テーマのsingle.phpへAdSenseコードを直接貼り付けます。\u003cbr /\u003e\nまず、single.phpで下記の記述を探します。\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;/p\u0026gt;\n\u0026lt;/div\u0026gt;\n\u0026lt;?php the_content(); ?\u0026gt;\n\u0026lt;?php wp_link_pages(); ?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u0026lt;div style\u003d\"padding:20px 0px;\"\u0026gt;\n\u0026lt;?php get_template_part('ad');?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u0026lt;?php get_template_part('sns');?\u0026gt;\n\u0026lt;?php endwhile; else: ?\u0026gt;\n\u0026lt;p\u0026gt;記事がありません\u0026lt;/p\u0026gt;\u003c/pre\u003e見つけたら、\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;div style\u003d\"padding:20px 0px;\"\u0026gt;\n\u0026lt;?php get_template_part('ad');?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u003c/pre\u003eの部分を消してAdSenseコード貼るか、その前（上）に貼り付けたら完成です。\u003cbr /\u003e\n「ファイルを更新」を押すのを忘れずに。\u003cbr /\u003e\n\u003cbr /\u003e\nここは、STINGER3でウィジェットの「Googleアドセンス用」を使用した場合にデフォルトで広告が表示される場所です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku4\"\u003e\u003c/a\u003e  \u003ch2\u003e関連記事の下にAdSense広告を貼る方法\u003c/h2\u003e関連記事とコメントの間に表示させる方法です。\u003cbr /\u003e\nこちらも同じく、子テーマのsingle.phpへAdSenseコードを直接貼り付けます。\u003cbr /\u003e\nまず、single.phpで下記の記述を探します。\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;!--/kizi--\u0026gt; \n\u0026lt;!--/関連記事--\u0026gt;\n\u0026lt;div style\u003d\"padding:20px 0px;\"\u0026gt;\n\u0026lt;?php get_template_part('ad');?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u0026lt;?php comments_template(); ?\u0026gt;\n\u0026lt;!--ページナビ--\u0026gt;\n\u003c/pre\u003e見つけたら、\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;div style\u003d\"padding:20px 0px;\"\u0026gt;\n\u0026lt;?php get_template_part('ad');?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u003c/pre\u003eの部分を消してAdSenseコード貼るか、その前（上）に貼り付けたら完成です。\u003cbr /\u003e\n「ファイルを更新」を押すのを忘れずに。\u003cbr /\u003e\n\u003cbr /\u003e\nここも、STINGER3でウィジェットの「Googleアドセンス用」を使用した場合にデフォルトで広告が表示される場所です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku5\"\u003e\u003c/a\u003e  \u003ch2\u003e固定ページにAdSense広告を貼り付ける方法\u003c/h2\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-S9OvMXGmnz0/Uow8s_b5cCI/AAAAAAAAAe4/PxxR1lV5EuQ/s1600/%25E8%25A8%2598%25E4%25BA%258B%25E4%25B8%258Bad.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"195\" src\u003d\"https://4.bp.blogspot.com/-S9OvMXGmnz0/Uow8s_b5cCI/AAAAAAAAAe4/PxxR1lV5EuQ/s320/%25E8%25A8%2598%25E4%25BA%258B%25E4%25B8%258Bad.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n上の画像のように固定ページの記事下にAdSense広告を表示する方法を記録します。\u003cbr /\u003e\n\u003cbr /\u003e\nまず、page.phpで下記の記述を探します。\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;/h1\u0026gt;\n\u0026lt;?php the_content(); ?\u0026gt;\n\u0026lt;?php wp_link_pages(); ?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u0026lt;div style\u003d\"padding:20px 0px;\"\u0026gt;\n\u0026lt;?php get_template_part('ad');?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u003c/pre\u003e見つけたら、\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;div style\u003d\"padding:20px 0px;\"\u0026gt;\n\u0026lt;?php get_template_part('ad');?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u003c/pre\u003eの部分を消してAdSenseコード貼るか、その前（上）に貼り付けたら完成です。\u003cbr /\u003e\n「ファイルを更新」を押すのを忘れずに。\u003cbr /\u003e\n\u003cbr /\u003e\nSTINGER3でウィジェットの「Googleアドセンス用」を使用した場合にデフォルトで広告が表示される場所です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku6\"\u003e\u003c/a\u003e  \u003ch2 class\u003d\"main\"\u003eメニューバーの下にAdSenseを貼る方法\u003c/h2\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-6CoDHJY9daY/UoxDxWukJVI/AAAAAAAAAfE/a1wczSM0I7Q/s1600/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E4%B8%8B.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"116\" src\u003d\"https://4.bp.blogspot.com/-6CoDHJY9daY/UoxDxWukJVI/AAAAAAAAAfE/a1wczSM0I7Q/s320/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E4%B8%8B.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n上の画像のようにメニューバーの下にセンターリングをしてAdSense広告を表示します。\u003cbr /\u003e\n\u003cbr /\u003e\nまずは、子テーマのstyle.cssに下記を追加します。\u003cbr /\u003e\n\u003cpre\u003e.centerad{\ntext-align: center;\npadding-top: 10px;\npadding-right: 0px;\npadding-bottom: 0px;\npadding-left: 0px;\nmargin-left : auto ;/*-----IE用-----*/\nmargin-right : auto ;/*-----IE用-----*/\n}\n\u003c/pre\u003e追加したら「ファイルを更新」をクリックしてcssの変更は完了です。\u003cbr /\u003e\n真ん中に表示したくない場合は、text-alignの行とIE用の2行の、合わせて3行を消してください。\u003cbr /\u003e\n\u003cbr /\u003e\n次に子テーマのheader.phpの一番下にある下記の記述を探します。\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;!--/pcnavi--\u0026gt;\n\u0026lt;?php\n}\n?\u0026gt;\n\u0026lt;div id\u003d\"wrap\"\u0026gt;\n\u0026lt;div id\u003d\"wrap-in\"\u0026gt;\n\u0026lt;div id\u003d\"main\"\u0026gt;\n\u003c/pre\u003e見つけたら、pcnaviの下の行（phpの上の行）に下記の記述を追加します。\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;div class\u003d\"centerad\"\u0026gt;\nここにアドセンスコードを貼り付ける\n\u0026lt;/div\u0026gt;\n\u003c/pre\u003e次に、貼り付けたいソースコードを用意（コピー）します。サイトのレイアウトにもよりますが、ビッグバナーなどの横長の広告がいいでしょう。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3889869096010717021"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3889869096010717021"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/11/wordpress_21.html","title":"WordPressのヘッダーや記事下など好きな位置にアドセンスを設置する方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https://4.bp.blogspot.com/-A6NFxZaax6U/Uo247B0Y_HI/AAAAAAAAAlo/Bph_57_Bevk/s72-c/%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%A8%AA_2.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-7304236474085845000"},"published":{"$t":"2013-10-16T23:01:00.000+09:00"},"updated":{"$t":"2017-02-25T21:35:17.215+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"STINGER"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テーマ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"AdSense"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ファビコン"}],"title":{"type":"text","$t":"WordPressテーマをSTINGER3に変更してカスタムしてみた"},"content":{"type":"html","$t":"新たにサイトを作成して、はじめての記事を書く前にStinger3にテーマを変更したので、変更前と変更後のアクセス数の差などはわからないが、サイト作成前から次に使うテーマはStingerにしようと決めていたので早速変更してみました。\u003cbr /\u003e\n\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://2.bp.blogspot.com/-6yeF7a8M0ck/Ut36BOArzDI/AAAAAAAABYU/4LmY6FZ9Sf0/s1600/stinger3.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-6yeF7a8M0ck/Ut36BOArzDI/AAAAAAAABYU/4LmY6FZ9Sf0/s1600/stinger3.png\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nダウンロードはこちらからできます。\u003cbr /\u003e\n\u003ca href\u003d\"http://stinger3.com/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eSTINGER3公式サイト\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eカスタム内容\u003c/h2\u003e今のところカスタムしたのはタイトルロゴ、メニューバー、続きを読むの背景、検索ボックスの色と枠、ファビコンです。\u003cbr /\u003e\n\u003ch3\u003eタイトルをテキストから画像に変更\u003c/h3\u003eここで説明しようと思ったのだが、自分でやった方法と違うやり方が公式サイトに詳しく書かれていたので、今回は省略します。\u003cbr /\u003e\n\u003ch3\u003eメニューバーをデコレーション\u003c/h3\u003eタイトルロゴの下のメニューバーを少し大きくして、マウスオーバーでアンダーライン？が出るようにしました。\u003cbr /\u003e\nstyle.css内のナビゲーションを探して変更しました。\u003cbr /\u003e\n\u003cbr /\u003e\nCSSへの記述は以下の通りです。 \u003cbr /\u003e\n\u003cpre\u003e/*---------------------\nナビゲーション\n-----------------------*/\n#navi-in li {\nposition: relative;\nfloat: left;\nfont-size: 18px;\ndisplay: block;\nborder-left-width: 1px;\nborder-left-style: groove;\nborder-left-color: #f3f3f3;\nmargin:-25px 0px 0px 0px;\ntext-align: center;\n}\n\n#navi-in li li {\nfloat: left;\nfont-size: 18px;\ndisplay: block;\nborder: none;\nmargin:-25px 0px 0px 0px;\nwidth: 150px;\nheight: 30px;\n}\n\n#navi-in li a {\nfloat: left;\ncolor: #333;\ntext-decoration: none;\ndisplay: block;\nwidth: 150px;\nheight: 30px;\n}\n\n.menu-navigation-container {\noverflow: hidden;\n}\n\n#navi-in li a:hover {\nborder-bottom: 3px solid #ff0000;\ntext-decoration: none;\ndisplay: block;\nmargin: 0px 0px -3px 0px;\n\u003c/pre\u003eまず、フォントサイズを13pxから18pxに変更して、区切りの線をくぼんだ線にして色を変更、横幅と高さを固定、マウスオーバーで3pxの赤いラインが出るようにした。このときに、marginで同じ分だけマイナスにすることにより表示がおかしくならないようにする。\u003cbr /\u003e\n\u003ch3\u003e続きを読むの枠を角丸に\u003c/h3\u003e元が背景色だけ指定されてたので、枠線を加えて角を丸くしました。\u003cbr /\u003e\nstyle.cssのmoreとmottoの部分に下記のcssを追加した。 \u003cbr /\u003e\n\u003cpre\u003ebackground:#f3f3f3; /*背景色 */\nborder-radius: 6px; /*角の丸み */\nborder: 1px solid #ccc; /*枠の太さと色 */\n\u003c/pre\u003eこれが記事本文の「続きを読む」（more）の記述で下がサイドバーの「もっと読む」の記述。\u003cbr /\u003e\n\u003cpre\u003eborder-radius: 6px; /*角の丸み */\nborder: 1px solid #ccc; /*枠の太さと色 */\n\u003c/pre\u003eそれぞれ枠線を追加して、角に丸みをもたせました。\u003cbr /\u003e\n\u003ch3\u003e検索ボックスの色の変更\u003c/h3\u003e検索ボックスの背景を白に変更して、枠線を追加しました。\u003cbr /\u003e\n検索フォームを探して、#sと#searchsubmitの部分に追加したのは以下の通り。 \u003cbr /\u003e\n\u003cpre\u003eborder: 1px solid #ccc; /*枠の太さと色 */\n\u003c/pre\u003eさらに、background-colorを#FFFに変更しました。\u003cbr /\u003e\n\u003cbr /\u003e\n今回のカスタムは、子テーマを作って変更しました。\u003cbr /\u003e\n他にもちょっとしたところを変更していますが、長くなってしまったので今回は省力します。\u003cbr /\u003e\n\u003ch2\u003eWordPressでファビコンを変更する方法\u003c/h2\u003eファビコンてなに？という方は、下の画像で確認してください。通常ですとブラウザ画面上の3箇所に表示されます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/--V-4WAYOA5o/UowXzVrrY0I/AAAAAAAAAbw/qHmOiUZ28Vo/s1600/favicon.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"112\" src\u003d\"http://3.bp.blogspot.com/--V-4WAYOA5o/UowXzVrrY0I/AAAAAAAAAbw/qHmOiUZ28Vo/s320/favicon.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n\u003cbr /\u003e\nURLの隣や、お気に入りの中のブックマークアイコン、ブラウザのタブに表示されます。\u003cbr /\u003e\nまずは、ファビコン用の素材を作るためにペイントツールを起動します。\u003cbr /\u003e\n\u003ch3\u003eファビコン用素材の作り方 win編\u003c/h3\u003eペイントツールを使ったことのない方は、スタートの検索から「ペイント」を入力すると出てきます。\u003cbr /\u003e\nファビコンにするサイズは16px、32px、48pxなので最初に大きいサイズを作っておきます。最初に作る画像が大きすぎると、縮小したときにぐちゃっとつぶれた感じになるので、程ほどの大きさで作るといい感じになります。\u003cbr /\u003e\n画像が出来たらそれぞれのサイズに縮小します。このときの拡張子をpngかgifかjpgのどれかで保存しておきます。\u003cbr /\u003e\n今度はこの出来た画像を、ファビコンの拡張子（.ico）に変更する必要があります。\u003cbr /\u003e\n画像をアップロードすると自動で変更してくれるサイトがあるのでそちらを使わせてもらいます。\u003cbr /\u003e\n\u003cbr /\u003e\nファビコン.icoを作ろう！（\u003ca href\u003d\"http://ao-system.net/favicon/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ehttp://ao-system.net/favicon/\u003c/a\u003e）\u003cbr /\u003e\n\u003cbr /\u003e\n「ファイルを選択」して「favicon.ico作成」をクリックしたらダウンロードして完了です。\u003cbr /\u003e\nこの出来たファビコンをWordPressにアップロードします。\u003cbr /\u003e\n\u003ch3\u003eSTINGER3でファビコンを簡単に変更する方法\u003c/h3\u003e念のためバックアップはとっておいてください。\u003cbr /\u003e\nSTINGER3の場合3分もかからずに変更できます。まずは、上で保存したファビコンの名前をrogoに変更しておきます。次に、FTPでthemesフォルダにあるstinger3ver***フォルダ内のimagesフォルダへrogoを上書き保存したら完了です。（***には自分で使ってるバージョンの数字を入力してください。）\u003cbr /\u003e\nこれで、3箇所同時に変更されます。\u003cbr /\u003e\n\u003cbr /\u003e\nファビコンはタブをたくさん開いているときや、ブックマークにたくさん入れているときに、パッと見で自分のサイトとわかってもらえるので、出来るだけ設置したほうが良いでしょう。\u003cbr /\u003e\n\u003ch2\u003eSTINGER3でGoogleAdsenseを使うときに気になったこと\u003c/h2\u003e\u003ch3\u003e追従するSNSボタンがAdSense広告にかぶる\u003c/h3\u003eまずSTINGER3を使っている方の大半は、ウィジェットの「Googleアドセンス用」に、広告のコードを貼り付けてますよね。\u003cbr /\u003e\nそして、追従するSNSボタンをそのまま表示しているとおもうのですが、ここで下の画像を見てもらいたい。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-wMZc4daeNWY/UowswhsmJKI/AAAAAAAAAdc/vgDhrIM1o4E/s1600/SNS.jpg\" imageanchor\u003d\"1\"\u003e\u003cimg border\u003d\"0\" height\u003d\"230\" src\u003d\"http://3.bp.blogspot.com/-wMZc4daeNWY/UowswhsmJKI/AAAAAAAAAdc/vgDhrIM1o4E/s1600/SNS.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n青い部分をレクタングル（大）と同じサイズで作ったのですが、記事を読んで下にスクロールしていくと、追従するSNSボタンが広告におもいっきりかぶってるけど大丈夫なのでしょうか？\u003cbr /\u003e\n\u003cbr /\u003e\nAdSenseプログラムポリシーの広告のプレースメントという部分を読んでみるとこう書かれていた。\u003cbr /\u003e\n\u003cblockquote\u003eGoogle 広告、検索ボックス、検索結果については、次の行為が禁止されています。\u003cbr /\u003e\nページ内のさまざまな要素によって隠すなど、わかりにくくすること。\u003cbr /\u003e\n\u003ca href\u003d\"https://support.google.com/adsense/answer/48182?hl\u003dja\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eAdSense プログラム ポリシー\u003c/a\u003e\u003c/blockquote\u003e\u003cbr /\u003e\n詳しくは自分で確認してもらいたいが、ドロップダウン式のメニューバーでAdSense広告が隠れるとアウトという記事をどこかで目にしたので、これも同じ理由でダメなのではないかと思っているのですが、どうなんですかね。\u003cbr /\u003e\nこれで間違って広告をクリックする人はいないとは思ったのですが、心配だったので追従するSNSボタンは削除することにしました。\u003cbr /\u003e\n\u003cbr /\u003e\n追従するSNSボタンの削除方法は\u003ca href\u003d\"http://stinger3.com/post-533/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eSTINGER3公式サイト\u003c/a\u003eを参考してください。\u003cbr /\u003e\n\u003cbr /\u003e\nまた、広告の位置を変更した際の「PAGE TOP」もかぶる可能性があります。\u003cbr /\u003e\n\u003ch3\u003eページトップボタンがAdSense広告にかぶる\u003c/h3\u003eこれは、ウィジェットの「Googleアドセンス用」に設置するのではなく、「サイドバー1」に設置した場合の話です。\u003cbr /\u003e\nSTINGER3は検索ボックスや新着記事といった必要な機能がデフォルトでついています。これにより、「サイドバー1」にAdSenseを設置すると自動的にサイドバーの下の方に追いやられてしまいす。\u003cbr /\u003e\nそうすると、画面をスクロールしていくと画面右下に出る「PAGE TOP」ボタンが広告にかぶってしまいます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-1XUCqNSN8OI/Uows2VtkgyI/AAAAAAAAAdk/ET_JrHVzXUY/s1600/%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%88%E3%83%83%E3%83%97ad.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"268\" src\u003d\"http://3.bp.blogspot.com/-1XUCqNSN8OI/Uows2VtkgyI/AAAAAAAAAdk/ET_JrHVzXUY/s320/%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%88%E3%83%83%E3%83%97ad.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n広告に対して「PAGE TOP」ボタンは小さいですが、どれくらい隠れるとダメですよという記述が見つけられなかったので、自分で判断するのは危険だと思いこちらも削除することにしました。\u003cbr /\u003e\n\u003cbr /\u003e\n通常通り「Googleアドセンス用」に設置していれば何の問題もありません。\u003cbr /\u003e\n\u003ch3\u003eページトップボタンを削除する方法\u003c/h3\u003e非常に簡単です。\u003cbr /\u003e\n\u003cbr /\u003e\nfooter.phpの\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;!-- ページトップへ戻る --\u0026gt;\n\u0026lt;div id\u003d\"page-top\"\u0026gt;\u0026lt;a href\u003d\"#wrapper\"\u0026gt;PAGE TOP ↑\u0026lt;/a\u0026gt;\u0026lt;/div\u0026gt;\n\u0026lt;!-- ページトップへ戻る　終わり --\u0026gt;\n\u003c/pre\u003eの部分を削除するだけです。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7304236474085845000"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7304236474085845000"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/10/wordpressstinger.html","title":"WordPressテーマをSTINGER3に変更してカスタムしてみた"}],"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/-6yeF7a8M0ck/Ut36BOArzDI/AAAAAAAABYU/4LmY6FZ9Sf0/s72-c/stinger3.png","height":"72","width":"72"}}]}});