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%BC%E3%83%9E?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%BC%E3%83%9E?alt\u003djson-in-script\u0026max-results\u003d9999"},{"rel":"alternate","type":"text/html","href":"http://www.memorou.com/search/label/%E3%83%86%E3%83%BC%E3%83%9E"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"generator":{"version":"7.00","uri":"https://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"8"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"9999"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-8041069137712903422"},"published":{"$t":"2015-08-13T11:25:00.000+09:00"},"updated":{"$t":"2017-02-18T19:38:09.538+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テーマ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"バズ部が提供する無料のワードプレステーマ「Xeory Base」をカスタマイズ"},"content":{"type":"html","$t":"現在、無料で使用できるテーマは、「Xeory Base」と「Xeory Extension」の2種類。どちらもレスポンシブデザインとなっている。\u003cbr /\u003e\n\u003cbr /\u003e\n今回カスタマイズするのは、コンテンツマーケティング用のブログ型テーマ「Xeory Base」だ。\u003cbr /\u003e\n\u003cbr /\u003e\n本格的なカスタマイズは公式サイトで依頼できる。テーマのダウンロードや初期設定なども、\u003ca href\u003d\"https://xeory.jp/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eXeory\u003c/a\u003eに詳しく書かれているのでそちらを参考に。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n※2015年8月13日の最新バージョンは、XeoryBase Ver0.1.7、XeoryExtension Ver0.1.7です。ここでカスタマイズするバージョンは無印です。\u003cbr /\u003e\n\u003ch2\u003eXeoryBaseのカスタマイズ\u003c/h2\u003eカラー設定をデフォルト、レイアウトは左サイドバーの2カラムに設定している。\u003cbr /\u003e\n特別な記載がない限り子テーマを編集する。（\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_446.html\"\u003e子テーマの作り方\u003c/a\u003e）\u003cbr /\u003e\n\u003ch3\u003e忍者おまとめボタンを設置\u003c/h3\u003eXeory Baseには、「フェイスブック」「ツイッター」「グーグル+1」「はてブ」の4つのボタンが用意されている。\u003cbr /\u003e\n\u003cbr /\u003e\nデフォルトでは、投稿ページのタイトルの下と記事の下の2箇所。アーカイブページの記事下に表示される。この表示を消すために、初期設定＞その他の設定からソーシャルボタン設定にチェックを入れる。\u003cbr /\u003e\n\u003cbr /\u003e\nあとはおまとめボタンを表示したい場所にコードを貼り付ける。\u003cbr /\u003e\n\u003cbr /\u003e\n忍者おまとめボタンの作成については「\u003ca href\u003d\"http://www.memorou.com/2013/12/blogger_16.html\"\u003e忍者おまとめボタンを簡単に設置する方法\u003c/a\u003e」を参考に\u003cbr /\u003e\n\u003cbr /\u003e\nここでは、記事下とアーカイブページに表示するように変更します。\u003cbr /\u003e\nsingle.phpの\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;footer class\u003d\"post-footer\"\u0026gt;\n\u003c/pre\u003eと\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;?php social_buttons();?\u0026gt;\n\u003c/pre\u003eの間に\u003cbr /\u003e\nコードを追加する。 \u003cbr /\u003e\n\u003cbr /\u003e\n同様にarchive.phpの間にもコードを追加する。\u003cbr /\u003e\n\u003ch3\u003eアーカイブページのコメントアイコンを非表示\u003c/h3\u003estyle.cssの\u003cbr /\u003e\n\u003cpre\u003e.post-loop-wrap .post-footer .loop-comment-icon {\n  float: right;\n}\n\u003c/pre\u003eに\u003cbr /\u003e\n\u003cpre\u003edisplay: none;\n\u003c/pre\u003eを追加する。または、\u003cbr /\u003e\narchive.phpの\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;div class\u003d\"loop-comment-icon\"\u0026gt;\n          \u0026lt;i class\u003d\"fa fa-comments\"\u0026gt;\u0026lt;/i\u0026gt; \u0026lt;span class\u003d\"count\"\u0026gt;\u0026lt;?php comments_number('0', '1', '%'); ?\u0026gt;\u0026lt;/span\u0026gt;\n        \u0026lt;/div\u0026gt;\n\u003c/pre\u003eを削除する。\u003cbr /\u003e\n\u003ch3\u003eSNSでもご購読できます。の文字を変更\u003c/h3\u003esingle.phpの\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;h4 class\u003d\"post-share-title\"\u0026gt;SNSでもご購読できます。\u0026lt;/h4\u0026gt;\n\u003c/pre\u003eを書き換える。\u003cbr /\u003e\n\u003cbr /\u003e\n文字の色や大きさなどは、style.cssの\u003cbr /\u003e\n\u003cpre\u003e.post-share .post-share-title {\n  font-size: 20px;\n  padding: 10px 0;\n  margin-bottom: 0;\n  color: #fff;\n  background-color: #57585A;\n  text-align: center;\n  margin-left: -45px;\n  margin-right: -45px;\n}\n\u003c/pre\u003eを変更する。\u003cbr /\u003e\n\u003cbr /\u003e\nSNSでもご購読できます。を消したい場合は、single.phpの\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;h4 class\u003d\"post-share-title\"\u0026gt;SNSでもご購読できます。\u0026lt;/h4\u0026gt;\n      \u0026lt;?php if(  is_active_sidebar('under_post_area') ){\n        dynamic_sidebar('under_post_area');\n      } ?\u0026gt;\n\u003c/pre\u003eを削除する。\u003cbr /\u003e\n\u003cbr /\u003e\n消すと下の画像のようになります。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-YDbMqra9kdU/VX1mOuGwLkI/AAAAAAAAC1Q/xfNS_9UpZmc/s1600/001.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"144\" src\u003d\"http://4.bp.blogspot.com/-YDbMqra9kdU/VX1mOuGwLkI/AAAAAAAAC1Q/xfNS_9UpZmc/s320/001.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eプロフィール表示を変更\u003c/h3\u003eSNSボタン下のプロフィール画像や表示名を変更する。\u003cbr /\u003e\nユーザー＞あなたのプロフィールから変更できる。\u003cbr /\u003e\n\u003cbr /\u003e\nプロフィール情報を入力するとニックネームの下（画像の横）に情報が表示される。\u003cbr /\u003e\n\u003cbr /\u003e\nプロフィールを表示したくない場合は、single.phpの\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;?php show_avatar();?\u0026gt;\n\u003c/pre\u003eを削除する。\u003cbr /\u003e\n\u003cbr /\u003e\nプロフィールを消したときのSNSボタン下のラインを追加。\u003cbr /\u003e\nstyle.cssの\u003cbr /\u003e\n\u003cpre\u003e.post-sns {\n  border-top: 1px #eee solid;\n  margin: 0 -45px -30px;\n  padding: 0;\n}\n\u003c/pre\u003eに\u003cbr /\u003e\n\u003cpre\u003eborder-bottom: 1px #eee solid;\n\u003c/pre\u003eを追加する。\u003cbr /\u003e\n\u003cbr /\u003e\nプロフィールを消したときは、上の画像のようになります。\u003cbr /\u003e\n\u003ch3\u003eグローバルナビの変更\u003c/h3\u003eメニューの設定は「\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_6.html\"\u003eWordPressメニューバーにカテゴリーと固定ページを表示させる方法\u003c/a\u003e」を参考に\u003cbr /\u003e\n\u003cbr /\u003e\n変更はstyle.cssの\u003cbr /\u003e\n\u003cpre\u003e#gnav li a {\n  display: block;\n  border-top: 1px #efefef solid;\n  margin-top: -1px;\n  padding: 20px 0px;\n  color: #2B2D2D;\n  background: #fff;\n  text-decoration: none;\n  -webkit-transition: background .3s ease-in-out;\n          transition: background .3s ease-in-out;\n}\n#gnav li a:hover {\n  color: #2B2D2D;\n  border-top: 1px #2581c4 solid;\n}\n\u003c/pre\u003eを変更する。\u003cbr /\u003e\n\u003cbr /\u003e\nここでは、メニューの高さを低く、マウスを乗せたときの線の太さを太くする。\u003cbr /\u003e\n変更するのは\u003cbr /\u003e\n\u003cpre\u003e#gnav li a {\n  padding: 15px 0px;\n}\n#gnav li a:hover {\n  border-top: 2px #2581c4 solid;\n  padding: 14px 0px 15px;\n}\n\u003c/pre\u003eとする。\u003cbr /\u003e\n\u003ch3\u003e続きを読むの表示を少し下げる\u003c/h3\u003e記事の途中にmoreタグを入れたとき、そのままだと記事とかぶってしまう。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-061hq4iSbek/VayM1o6FDxI/AAAAAAAAC18/jAFhblKnoJQ/s1600/1.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"156\" src\u003d\"http://2.bp.blogspot.com/-061hq4iSbek/VayM1o6FDxI/AAAAAAAAC18/jAFhblKnoJQ/s320/1.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eこのかぶりを解消するためには、記事作成時に上に改行を入れるか、cssを編集する必要がある。\u003cbr /\u003e\n\u003cbr /\u003e\n変更はstyle.cssの\u003cbr /\u003e\n\u003cpre\u003e.more-link\u003c/pre\u003e内の \u003cbr /\u003e\n\u003cpre\u003eline-height:\u003c/pre\u003eを26pxから42pxに変更する。上にスペースを入れる場合は特に変更する必要はない。\u003cbr /\u003e\nできればmarginでスペースを作りたかったが、うまくいかなかったのでこの方法をとっている。1カラムになったときに、ボタンの高さが無駄に高くなってしまうので注意。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/8041069137712903422"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/8041069137712903422"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2015/08/xeory-base.html","title":"バズ部が提供する無料のワードプレステーマ「Xeory Base」をカスタマイズ"}],"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/-YDbMqra9kdU/VX1mOuGwLkI/AAAAAAAAC1Q/xfNS_9UpZmc/s72-c/001.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-1017038834287772106"},"published":{"$t":"2015-05-26T20:48:00.000+09:00"},"updated":{"$t":"2016-07-25T17:00:10.975+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"バナー広告"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テーマ"}],"title":{"type":"text","$t":"タイトル横に広告が設置できる人気のWordPressテーマ"},"content":{"type":"html","$t":"タイトル横にウィジェットを追加できる人気のテーマ8選です。\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横にウィジェットを追加すると、広告だけではなく、SNSボタンやサイト内検索、お問い合わせの電話番号などを簡単に設置できます。\u003cbr /\u003e\n\u003cbr /\u003e\nここで紹介するテーマはすべて無料で利用でき、外観＞テーマから検索することができます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nテーマの変更方法がわからない場合は、「\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_4901.html\"\u003eWordPressテーマ（テンプレート）の変更と編集方法\u003c/a\u003e」を参考にしてください。\u003cbr /\u003e\n\u003cbr /\u003e\n※タイトル横に広告が設置できるかどうかのみ確認しています。その他の動作、テーマのご利用に関しては自己責任でお願いいたします。\u003cbr /\u003e\n\u003ch2\u003eタイトル横に728×90の広告が設置できるテーマ8選\u003c/h2\u003e\u003ch3\u003eRedWaves Lite\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-fvib38HPHeI/VWQ-Ii2CkWI/AAAAAAAACzQ/qLNqWJMmx20/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"244\" src\u003d\"http://4.bp.blogspot.com/-fvib38HPHeI/VWQ-Ii2CkWI/AAAAAAAACzQ/qLNqWJMmx20/s320/01.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n作者：Asmi Khalil\u003cbr /\u003e\nバージョン：1.0.6\u003cbr /\u003e\n\u003cbr /\u003e\n赤を基調とした、右サイドバー（2カラム）のシンプルなデザインです。\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横に広告を設置するためには、ウィジェットの「Header Widget-area」にテキストを追加して広告を設置します。\u003cbr /\u003e\n\u003ch3\u003eProMax\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-fE2STznBkqM/VWREy3yETZI/AAAAAAAACzg/ZsTRTUgqdEQ/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"204\" src\u003d\"http://1.bp.blogspot.com/-fE2STznBkqM/VWREy3yETZI/AAAAAAAACzg/ZsTRTUgqdEQ/s320/02.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n作者：sandy786\u003cbr /\u003e\nバージョン：1.5\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横に広告を設置するためには、外観＞ProMax Options＞Ads Managementと進み、「Paste Ads code for header」内にコードを貼り付けます。\u003cbr /\u003e\n\u003ch3\u003eProfitMag\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-P_0K3rhVw-A/VWRIr0XAVpI/AAAAAAAACzs/EmfiMwH6K24/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"243\" src\u003d\"http://4.bp.blogspot.com/-P_0K3rhVw-A/VWRIr0XAVpI/AAAAAAAACzs/EmfiMwH6K24/s320/03.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n作者：wpgaint\u003cbr /\u003e\nバージョン：1.06\u003cbr /\u003e\n\u003cbr /\u003e\nマガジン系のテーマです。\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横に広告を設置するためには、外観＞Theme Options＞Advertisingと進み、「Header Ads」内にコード貼り付けます。\u003cbr /\u003e\n\u003ch3\u003ePepMagazine\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-Alhdk0iaDts/VWRMc1cJUbI/AAAAAAAACz4/ZPCbS3_BTqA/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"244\" src\u003d\"http://4.bp.blogspot.com/-Alhdk0iaDts/VWRMc1cJUbI/AAAAAAAACz4/ZPCbS3_BTqA/s320/04.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n作者：emkal\u003cbr /\u003e\nバージョン：1.1.0\u003cbr /\u003e\n\u003cbr /\u003e\n黒を基調とした、右サイドバー（2カラム）のシンプルなデザインです。\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横に広告を設置するためには、ウィジェットの「Top Banner」にテキストを追加して広告を設置します。\u003cbr /\u003e\n\u003ch3\u003eJustWrite\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/--y3thdHmGSM/VWRO8Dw6FaI/AAAAAAAAC0E/4mPZ2WeJJU8/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"244\" src\u003d\"http://4.bp.blogspot.com/--y3thdHmGSM/VWRO8Dw6FaI/AAAAAAAAC0E/4mPZ2WeJJU8/s320/05.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n作者：acosmin\u003cbr /\u003e\nバージョン：1.0.9.1\u003cbr /\u003e\n\u003cbr /\u003e\nサイドバーが左右にある3カラムのテーマです。\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横に広告を設置するためには、外観＞Theme Options＞Advertisingと進み、「728x90px Ad HTML Code」内にコード貼り付け、上の「Show this banner. Add the code in the following box」にチェックを入れます。\u003cbr /\u003e\n\u003ch3\u003eOxygen\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-TlFT9XsJXQ4/VWRR1j7Y2oI/AAAAAAAAC0Q/BBIKgpiBmqQ/s1600/06.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"237\" src\u003d\"http://1.bp.blogspot.com/-TlFT9XsJXQ4/VWRR1j7Y2oI/AAAAAAAAC0Q/BBIKgpiBmqQ/s320/06.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n作者：griden\u003cbr /\u003e\nバージョン：0.5.4\u003cbr /\u003e\n\u003cbr /\u003e\n投稿ページは、サイドバーが左右にある3カラムのテーマです。\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横に広告を設置するためには、ウィジェットの「Header」にテキストを追加して広告を設置します。\u003cbr /\u003e\nちなみに、「Secondary」が右サイドバーです。\u003cbr /\u003e\n\u003ch3\u003eWP FanZone\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-8mKrYBSS_yE/VWRUlwxxrnI/AAAAAAAAC0c/QmgitCQ_gSU/s1600/07.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"243\" src\u003d\"http://2.bp.blogspot.com/-8mKrYBSS_yE/VWRUlwxxrnI/AAAAAAAAC0c/QmgitCQ_gSU/s320/07.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n作者：hostmarks\u003cbr /\u003e\nバージョン：2.1\u003cbr /\u003e\n\u003cbr /\u003e\nトップページや投稿ページ、固定ページなどのサイドバーに設置するウィジェットを、簡単に切り替えられるようになっているテーマです。\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横に広告を設置するためには、ウィジェットの「Banner Widget」にテキストを追加して広告を設置します。\u003cbr /\u003e\n\u003ch3\u003eNews Mix Light\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-I14KOR_LWGw/VWRXt7Eg1MI/AAAAAAAAC0o/wHAuC3izlO4/s1600/08.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"243\" src\u003d\"http://1.bp.blogspot.com/-I14KOR_LWGw/VWRXt7Eg1MI/AAAAAAAAC0o/wHAuC3izlO4/s320/08.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n作者：kopatheme\u003cbr /\u003e\nバージョン：1.0.3\u003cbr /\u003e\n\u003cbr /\u003e\nTheme Optionsからサイドバーのレイアウトを選択できるテーマです。\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横に広告を設置するためには、外観＞Theme Options＞General Settingと進み、「Top Banner」内にコード貼り付けます。\u003cbr /\u003e\n\u003ch2\u003eまとめ\u003c/h2\u003e今回紹介したテーマは、基本的にレスポンシブデザイン対応となっております。\u003cbr /\u003e\n\u003cbr /\u003e\n広告の設置時にショートコードを使う場合は、「\u003ca href\u003d\"http://www.memorou.com/2014/06/wordpressmesocolumn.html\"\u003eWordPress無料レスポンシブテーマMesoColumnのカスタム\u003c/a\u003e」の広告の設置を参考にしてください。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/1017038834287772106"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/1017038834287772106"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2015/05/wordpress.html","title":"タイトル横に広告が設置できる人気のWordPressテーマ"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://4.bp.blogspot.com/-fvib38HPHeI/VWQ-Ii2CkWI/AAAAAAAACzQ/qLNqWJMmx20/s72-c/01.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-865527872562427223"},"published":{"$t":"2014-06-04T10:30:00.000+09:00"},"updated":{"$t":"2017-02-19T22:29:45.825+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"MesoColumn"},{"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無料レスポンシブテーマMesoColumnのカスタム"},"content":{"type":"html","$t":"無料レスポンシブWebデザインテーマの「MesoColumn」を使って、サイトを作成したときのカスタマイズの記録です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nテーマの特徴などに関しては、『\u003ca href\u003d\"http://wp-themetank.com/wordpress-theme-free-portal-blog-mesocolumn/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eテーマタンク：当サイトおすすめ。満を持して登場の本格派WP無料テーマ「Mesocolumn」\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/-j1KOupAHgKo/U452TRMILjI/AAAAAAAAB18/f0UAP-pDCuA/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-j1KOupAHgKo/U452TRMILjI/AAAAAAAAB18/f0UAP-pDCuA/s320/02.png\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch2\u003eカスタマイズポイント\u003c/h2\u003eカスタマイズした場所を個別に解説していきます。コードは、特に記載がない限りCustom CSSに追加しています。\u003cbr /\u003e\n\u003cbr /\u003e\n追加してもスタイルが変わらない場合は、最後に「!important」を追加する。\u003cbr /\u003e\n＜例＞記事中のH2の文字の太さを変えたい場合\u003cbr /\u003e\n\u003cpre\u003e.post-content h2 {font-weight: 400 !important;}\u003c/pre\u003eこうすることで優先順位が変わり、太文字から通常の文字に変わります。400の部分はnormalでも同じです。 \u003cbr /\u003e\n\u003ch3\u003eヘッダーを画像に変更\u003c/h3\u003eおすすめの画像サイズは、タイトル横に728×90の広告を使用するなら225×90、468×60の広告を使用するなら250～300×60です。これは画面を縮めたときや、スマホで見たときの表示も考慮しています。\u003cbr /\u003e\n\u003cbr /\u003e\n変更方法は、外観のヘッダーからではなく、ThemeOptionsから変更します。メディアの追加後、Header SettingsのSite LogoにファイルのURLを貼り付けます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-JaHRBoUvIAc/U45132AJSJI/AAAAAAAAB10/SV7po_U318I/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/-JaHRBoUvIAc/U45132AJSJI/AAAAAAAAB10/SV7po_U318I/s320/01.png\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nファビコンは、プラグインを使用して変更しているため、Favourite Iconは使用していませんが、Site Logo同様ファイルのURLを貼り付けるだけで変更できそうです。\u003cbr /\u003e\n\u003cbr /\u003e\nちなみに、プラグインは「Favicon Rotator」を使用しています。\u003cbr /\u003e\n\u003ch3\u003e記事タイトル文字サイズ\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003e#post-entry article.post-single h1.post-title, h1.folio{ font-size: 2.5em; }\u003c/code\u003e\u003c/pre\u003e好みのサイズに変更\u003cbr /\u003e\n\u003ch3\u003eヘッダー下にライン\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003e#header{ border-bottom: solid 1px #111; }\u003c/code\u003e\u003c/pre\u003eメリハリをつけるならこれ\u003cbr /\u003e\n\u003ch3\u003eタイトル横のバナー\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003e#topbanner { padding-left: 1px; }\u003c/code\u003e\u003c/pre\u003eバナーが下に回りこむときに、タイトルとの幅を狭くする\u003cbr /\u003e\n\u003ch3\u003eサイドバーとメインの横幅を変更\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003e#right-sidebar{ width: 32%; }\n\n.content{ width: 65%; }\u003c/code\u003e\u003c/pre\u003e割合を考えて数値を変える\u003cbr /\u003e\n\u003ch3\u003e関連記事の横幅\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003e#post-related .feat-cat-meta { width: 30%; }\u003c/code\u003e\u003c/pre\u003e上で幅を変えて、サイズが合わなくなったときは変更する\u003cbr /\u003e\n2個なら47%、3個なら30%がきれいに収まる。\u003cbr /\u003e\n\u003ch3\u003e続きを読むを右にする\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003e#post-entry article .post-more a { float: right; }\u003c/code\u003e\u003c/pre\u003e\u003ch3\u003eページナビの文字の大きさ\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003e#post-navigator-single.post-nav-archive {\u0026nbsp;font-size: 1.5em;\u0026nbsp;}\u003c/code\u003e\u003c/pre\u003e\u003ch3\u003eモバイルナビの右を消す\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003e#mobile-nav .select-pri.sec{\u0026nbsp;display:none;\u0026nbsp;}\u003c/code\u003e\u003c/pre\u003e\u003ch3\u003eモバイルナビの左を消す\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003e#mobile-nav .select-pri{\u0026nbsp;display:none;\u0026nbsp;}\u003c/code\u003e\u003c/pre\u003e\u003ch3\u003e引用の文字\u003c/h3\u003e\u003cpre\u003eblockquote{font-size:1em;font-family:serif;}\u003c/pre\u003e\u003ch3\u003eトップナビ　マウスオーバー\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003e#top-navigation .sf-menu li a:hover{\nbackground-color:#ddd;\ncolor:#444;\n}\n\u003c/code\u003e\u003c/pre\u003eマウスを乗せる前の色はTheme Optionsで変更できる \u003cbr /\u003e\n\u003ch3\u003eその他\u003c/h3\u003e\u003cpre\u003e\u003ccode\u003easide.home-feat-cat .feat-title a{\u0026nbsp;/* \u0026nbsp;ホーム記事タイトル\u0026nbsp;*/\u0026nbsp;}\n\nimg.home-feat-rss {\u0026nbsp;/* \u0026nbsp;ホームRSS\u0026nbsp;*/\u0026nbsp;}\n\naside.home-feat-cat .feat-meta {\u0026nbsp;/* ホーム日付など\u0026nbsp;*/\u0026nbsp;}\n\naside.home-feat-cat .feat-content {\u0026nbsp;/* ホーム記事抜粋\u0026nbsp;*/\u0026nbsp;}\n\naside.home-feat-cat .apost .feat-content { /* ホーム記事抜粋2個目以降 */ }\n\n.entry-date{\u0026nbsp;/* 個別記事の日付\u0026nbsp;*/\u0026nbsp;}\n\u003c/code\u003e\u003c/pre\u003e\u003ch3\u003eサンプル\u003c/h3\u003e追記：現在サンプルサイトはありません。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-D3L5GjqHwiE/U9BygH-TbCI/AAAAAAAACDY/c6hT6ipFDqA/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/-D3L5GjqHwiE/U9BygH-TbCI/AAAAAAAACDY/c6hT6ipFDqA/s1600/10.png\" height\u003d\"186\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n試しに作ったサイトがあるので、時間があれば見てみてください。\u003cbr /\u003e\n\u003cbr /\u003e\nPCでは、サイドバーの新着記事一覧の下あたり、スマホでは記事下の人気記事の下あたりにリンクがあります。\u003cbr /\u003e\nデフォルトのデモとは大分違いますが、上のカスタマイズで変更できる部分を変更しています。\u003cbr /\u003e\n\u003ch2\u003e広告の設置\u003c/h2\u003eMesoColumnにはオプションで広告を表示する機能があります。Advertisement Settingsに8箇所コードを入力できます。上から順に1～8とします。\u003cbr /\u003e\n\u003col\u003e\u003cli\u003eサイトタイトルの横\u003c/li\u003e\n\u003cli\u003eカテゴリーページの下\u003c/li\u003e\n\u003cli\u003e\u003cbr /\u003e\n\u003c/li\u003e\n\u003cli\u003e個別記事の記事タイトル下\u003c/li\u003e\n\u003cli\u003e個別記事の記事下（関連記事の上）\u003c/li\u003e\n\u003cli\u003e\u003cbr /\u003e\n\u003c/li\u003e\n\u003cli\u003eトップメニューの上\u003c/li\u003e\n\u003cli\u003eフッターの下\u003c/li\u003e\n\u003c/ol\u003eここにアドセンスコードを貼り付けるとうまく表示されません。（a8などのコードはそのまま貼り付けられます。）そこで、ショートコードでアドセンス広告を表示させます。\u003cbr /\u003e\n\u003cbr /\u003e\n子テーマfunctions.phpに以下のコード追加します。\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003efunction googlead_shortcode() {\n$adsensecode \u003d 'ここにアドセンスコードを貼る';\nreturn $adsensecode;\n}\nadd_shortcode('ショートコード名', 'googlead_shortcode');\n\u003c/code\u003e\u003c/pre\u003e例えば、ショートコード名をadsenseとしたら、表示させたいところに、[adsense]と入力します。\u003cbr /\u003e\n\u003cbr /\u003e\n2箇所以上に設置する場合は、googlead_shortcodeの部分を好きな文字に変更する必要がある。例えば、topバナーの場合、googlead2_shortcodeとし、ショートコード名もadsensetopにする。googlead_shortcodeの部分が1つ目と同じだとエラーで表示されなくなるので注意が必要です。\u003cbr /\u003e\nこの場合、表示させたい場所に[adsensetop]と入力します。\u003cbr /\u003e\n\u003cbr /\u003e\nせっかくのレスポンシブWebデザインテーマなのでアドセンスもレスポンシブ広告ユニット（ベータ版）を使うことにしました。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2014/06/wordpress.html\"\u003eWordPressにレスポンシブ広告ユニットの設定\u003c/a\u003e"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/865527872562427223"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/865527872562427223"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/06/wordpressmesocolumn.html","title":"WordPress無料レスポンシブテーマMesoColumnのカスタム"}],"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/-j1KOupAHgKo/U452TRMILjI/AAAAAAAAB18/f0UAP-pDCuA/s72-c/02.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-1433744794694797511"},"published":{"$t":"2014-04-10T12:58:00.000+09:00"},"updated":{"$t":"2017-02-20T22:37:49.884+09:00"},"category":[{"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":"画像"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テーマ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Hatch"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"無料写真素材サイトをWordPressで作りたい Hatch編"},"content":{"type":"html","$t":"無料写真素材（フリーストックフォト）サイトを作りたいと思い、どのように作ればいいのか、何で作ればいいのか、ゼロから調べた備忘録です。\u003cbr /\u003e\n\u003cbr /\u003e\n今回は、WordPressのHatch（テーマ）をメインにした、ダウンロードボタンの設置方法などを記録します。\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\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\"\u003e画像投稿時の表示\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku4\"\u003e画像のダウンロード方法（3種類）\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku5\"\u003e肖像権や著作権\u003c/a\u003e\u003c/li\u003e\n\u003c/ol\u003e\u003c/div\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-8LYuZDbxv-I/U0YIUre5hmI/AAAAAAAABqM/yjOrAJC6hLg/s1600/00.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-8LYuZDbxv-I/U0YIUre5hmI/AAAAAAAABqM/yjOrAJC6hLg/s1600/00.png\" height\u003d\"271\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eHatch：\u003ca href\u003d\"http://alienwp.com/themes/hatch/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ehttp://alienwp.com/themes/hatch/\u003c/a\u003e（英語） \u003cbr /\u003e\n\u003ca href\u003d\"\" name\u003d\"moku1\"\u003e\u003c/a\u003e  \u003ch2\u003eテーマの選び方\u003c/h2\u003e選考基準は、写真（画像）がメインになること。シンプルであること。サーバー代とドメイン代を賄えるだけの広告を載せられるスペースがあること。無料テーマであること。大まかにこんなところです。\u003cbr /\u003e\n\u003cbr /\u003e\nそして、候補に挙がったのが、\u003cbr /\u003e\n\u003cul\u003e\u003cli\u003eHatch\u003c/li\u003e\n\u003cli\u003eMixfolio\u003c/li\u003e\n\u003cli\u003eBirdSITE\u003c/li\u003e\n\u003cli\u003ePhotologger\u003c/li\u003e\n\u003c/ul\u003eの4テーマです。どれも、WordPressのテーマ検索から無料でインストールすることができます。\u003cbr /\u003e\n\u003cbr /\u003e\n参考：\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_4901.html\"\u003eWordPressテーマ（テンプレート）の変更と編集方法\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\nですが、基本的にギャラリーサイト用のテンプレート（テーマ）ならば、どれでも、シンプルで写真が際立つようにできているようです。\u003cbr /\u003e\nなので、あとは好みや最終的にどのようなレイアウトにしたいのかが重要になると思います。\u003cbr /\u003e\n\u003cbr /\u003e\n上にも書いたとおり、今回はHatchで作成するので、インストールして子テーマを作成します。\u003cbr /\u003e\nちなみに、Hatchはレスポンシブデザインなのでスマホ表示にも対応しています。テーマの変更後ブラウザの幅を狭めると、横幅によって画像の大きさなどが自動で切り替わります。\u003cbr /\u003e\n\u003cbr /\u003e\n参考：\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_446.html\"\u003eWordPressで子テーマを作る理由と作り方\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n子テーマができたら、テーマの編集をしていきます。\u003cbr /\u003e\n\u003ca href\u003d\"\" name\u003d\"moku2\"\u003e\u003c/a\u003e \u003ch2\u003eテーマの編集箇所\u003c/h2\u003e\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\u003cli\u003e文字をメイリオに変更\u003c/li\u003e\n\u003c/ul\u003e\u003cbr /\u003e\n\u003ch3\u003eタイトルを画像に変更\u003c/h3\u003eタイトルにしたい画像をメディアの新規追加からアップロードします。\u003cbr /\u003e\n\u003cbr /\u003e\n参考：\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_9.html\" target\u003d\"_blank\"\u003eWordPress画像アップロード方法\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n子テーマのstyle.cssに\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e/* タイトルを画像に変更 */\n\n#header #site-title{ padding-left: 0px; }\n#site-description {padding-top: 0px;}\n\n#site-title a {\n height: 0px;\n display: block;\n overflow: hidden;\n width: 198px; /* 使用する画像の幅 */\n padding-top: 38px; /* 使用する画像の高さ */\n background: url( 画像のURL ) no-repeat left top;\n}\n\u003c/code\u003e\u003c/pre\u003eを追加する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003eキャッチフレーズを非表示にする\u003c/h3\u003e子テーマのstyle.cssに \u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e/* キャッチフレーズ非表示 */\n#site-description {\n display: none;\n}\n\u003c/code\u003e\u003c/pre\u003eを追加する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003eヘッダー画像横に検索（サーチ）ボックスを設置\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-vzTP1Q-jkqQ/U0YBJwwdEmI/AAAAAAAABps/V2vksG4Um1c/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/-vzTP1Q-jkqQ/U0YBJwwdEmI/AAAAAAAABps/V2vksG4Um1c/s1600/01.png\" height\u003d\"205\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eHatchのヘッダー横は、本来プロフィールの表示場所になっています。\u003cbr /\u003e\n\u003cbr /\u003e\n今回はそこに検索ボックスを設置します。\u003cbr /\u003e\n検索ボックスは、カテゴリやタグで絞込み検索をしたいのでプラグインを使用します。\u003cbr /\u003e\n\u003cbr /\u003e\nプラグインは、「WP Custom Search」です。\u003cbr /\u003e\n\u003cbr /\u003e\n参考：\u003ca href\u003d\"http://www.memorou.com/2013/10/wordpress_20.html\"\u003eWordPressプラグインのインストールと設定方法\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n有効化したら「WP Custom Search」の設定をします。\u003cbr /\u003e\nメニューの設定から「WP Custom Fields Search」を選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-1nf0QlCk82w/U0YDifjh6QI/AAAAAAAABp4/KZr1mqLSqhs/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-1nf0QlCk82w/U0YDifjh6QI/AAAAAAAABp4/KZr1mqLSqhs/s1600/02.png\" /\u003e\u003c/a\u003e\u003c/div\u003e「フィールドの追加」や「表示/非表示の設定」など自分の用途に合わせて設定後、子テーマhome.phpの\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;div id\u003d\"author-bio\"\u0026gt;\u0026lt;?php the_author_meta( 'description', $hatch_author_bio ); ?\u0026gt;ここに入れる\u0026lt;/div\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e「ここに入れる」部分に、プラグインコードを入れる。\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;?php if(function_exists('wp_custom_fields_search')) \n wp_custom_fields_search(); ?\u0026gt;\n\u003c/code\u003e\u003c/pre\u003eプラグインのコードは、設定のWP Custom Fields Searchに表示されています。 \u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-Vl_vZrZndm0/U0YHW-pabcI/AAAAAAAABqE/izSKJtn-OjA/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/-Vl_vZrZndm0/U0YHW-pabcI/AAAAAAAABqE/izSKJtn-OjA/s1600/03.png\" height\u003d\"186\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e記事内やウィジェットに表示する場合は、下のコードを貼り付ける。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003e検索ボックス背景の変更\u003c/h3\u003e子テーマstyle.cssに\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e/* 検索背景 */\n.custom_search {\npadding:30px 0px 0px 10px;\nbackground-image: url(\"使用する背景画像のURL\");\nbackground-repeat: no-repeat;\n}\n\u003c/code\u003e\u003c/pre\u003e使用する画像などによりpaddingは変更する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003e検索結果画面の表示変更\u003c/h3\u003e検索結果画面にサムネイル表示が出なかったため表示するように変更します。\u003cbr /\u003e\nhome.phpの\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\n\u0026lt;div class\u003d\"hfeed\"\u0026gt;\n   \n   \u0026lt;?php if ( have_posts() ) : ?\u0026gt;\n   \n    \u0026lt;?php $counter \u003d 1; ?\u0026gt;\n\n    \u0026lt;?php while ( have_posts() ) : the_post(); ?\u0026gt;\n\n      \u0026lt;?php do_atomic( 'before_entry' ); // hatch_before_entry ?\u0026gt;\n     \n      \u0026lt;?php if ( ( $counter % 4 ) \u003d\u003d 0 ) { ?\u0026gt;\n\n       \u0026lt;div id\u003d\"post-\u0026lt;?php the_ID(); ?\u0026gt;\" class\u003d\"\u0026lt;?php hybrid_entry_class(); ?\u0026gt; last\"\u0026gt;\n       \n      \u0026lt;?php } else { ?\u0026gt;\n      \n       \u0026lt;div id\u003d\"post-\u0026lt;?php the_ID(); ?\u0026gt;\" class\u003d\"\u0026lt;?php hybrid_entry_class(); ?\u0026gt;\"\u0026gt;\n      \n      \u0026lt;?php } ?\u0026gt;             \n \n        \u0026lt;?php do_atomic( 'open_entry' ); // hatch_open_entry ?\u0026gt;\n \n        \u0026lt;?php if ( current_theme_supports( 'get-the-image' ) ) {\n          \n         get_the_image( array( 'size' \u003d\u0026gt; 'archive-thumbnail', 'image_class' \u003d\u0026gt; 'featured', 'width' \u003d\u0026gt; 220, 'height' \u003d\u0026gt; 150, 'default_image' \u003d\u0026gt; get_template_directory_uri() . '/images/archive_image_placeholder.png' ) );\n          \n        } ?\u0026gt;     \n          \n        \u0026lt;?php echo apply_atomic_shortcode( 'entry_title', '[entry-title]' ); ?\u0026gt;      \n \n        \u0026lt;?php do_atomic( 'close_entry' ); // hatch_close_entry ?\u0026gt;       \n \n       \u0026lt;/div\u0026gt;\u0026lt;!-- .hentry --\u0026gt;\n\n      \u0026lt;?php do_atomic( 'after_entry' ); // hatch_after_entry ?\u0026gt;\n     \n     \u0026lt;?php $counter++; ?\u0026gt;\n\n    \u0026lt;?php endwhile; ?\u0026gt;\n\n   \u0026lt;?php else : ?\u0026gt;\n\n    \u0026lt;?php get_template_part( 'loop-error' ); // Loads the loop-error.php template. ?\u0026gt;\n\n   \u0026lt;?php endif; ?\u0026gt;\n\n  \u0026lt;/div\u0026gt;\u0026lt;!-- .hfeed --\u0026gt;\n\u003c/code\u003e\u003c/pre\u003eを、子テーマsearch.phpの \u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\n\u0026lt;div class\u003d\"hfeed\"\u0026gt;\n\n   \u0026lt;?php if ( have_posts() ) : ?\u0026gt;\n   \n    \u0026lt;?php $counter \u003d 1; ?\u0026gt;\n\n    \u0026lt;?php while ( have_posts() ) : the_post(); ?\u0026gt;\n\n     \u0026lt;?php do_atomic( 'before_entry' ); // hatch_before_entry ?\u0026gt;\n     \n     \u0026lt;?php if ( ( $counter % 2 ) \u003d\u003d 0 ) { ?\u0026gt;\n     \n      \u0026lt;div id\u003d\"post-\u0026lt;?php the_ID(); ?\u0026gt;\" class\u003d\"\u0026lt;?php hybrid_entry_class(); ?\u0026gt; last\"\u0026gt;\n      \n     \u0026lt;?php } else { ?\u0026gt;\n\n      \u0026lt;div id\u003d\"post-\u0026lt;?php the_ID(); ?\u0026gt;\" class\u003d\"\u0026lt;?php hybrid_entry_class(); ?\u0026gt;\"\u0026gt;\n      \n     \u0026lt;?php } ?\u0026gt;\n\n       \u0026lt;?php do_atomic( 'open_entry' ); // hatch_open_entry ?\u0026gt;\n\n       \u0026lt;?php echo apply_atomic_shortcode( 'entry_title', '[entry-title]' ); ?\u0026gt;\n\n       \u0026lt;?php echo apply_atomic_shortcode( 'byline', '\u0026lt;div class\u003d\"byline\"\u0026gt;' . __( '[entry-published] [entry-author]', 'hatch' ) . '\u0026lt;/div\u0026gt;' ); ?\u0026gt;\n\n       \u0026lt;div class\u003d\"entry-summary\"\u0026gt;\n        \u0026lt;?php the_excerpt(); ?\u0026gt;\n        \u0026lt;?php wp_link_pages( array( 'before' \u003d\u0026gt; '\u0026lt;p class\u003d\"page-links\"\u0026gt;' . __( 'Pages:', 'hatch' ), 'after' \u003d\u0026gt; '\u0026lt;/p\u0026gt;' ) ); ?\u0026gt;\n       \u0026lt;/div\u0026gt;\u0026lt;!-- .entry-summary --\u0026gt;\n\n       \u0026lt;?php do_atomic( 'close_entry' ); // hatch_close_entry ?\u0026gt;\n\n      \u0026lt;/div\u0026gt;\u0026lt;!-- .hentry --\u0026gt;\n\n     \u0026lt;?php do_atomic( 'after_entry' ); // hatch_after_entry ?\u0026gt;\n     \n     \u0026lt;?php $counter++; ?\u0026gt;\n\n    \u0026lt;?php endwhile; ?\u0026gt;\n\n   \u0026lt;?php else : ?\u0026gt;\n\n    \u0026lt;?php get_template_part( 'loop-error' ); // Loads the loop-error.php template. ?\u0026gt;\n\n   \u0026lt;?php endif; ?\u0026gt;\n\n  \u0026lt;/div\u0026gt;\u0026lt;!-- .hfeed --\u0026gt;\n\u003c/code\u003e\u003c/pre\u003eに貼り付ける（置き換える）。 \u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003e文字をメイリオに変更\u003c/h3\u003eメニューの外観から「Theme Settings」を選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-X99bRvt3kSg/U0YUf-h6B3I/AAAAAAAABqc/FTnFr1ILhmg/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-X99bRvt3kSg/U0YUf-h6B3I/AAAAAAAABqc/FTnFr1ILhmg/s1600/04.png\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nCustom CSSに \u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e* { font-family:\"meiryo\",\"メイリオ\",\"ＭＳ Ｐゴシック\",sans-serif; }\n\u003c/code\u003e\u003c/pre\u003eと入力して「Update Settings」をクリックします。 \u003cbr /\u003e\nここでは他にも文字サイズやコピーライトの変更などができます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003eメニューバーの位置調整\u003c/h3\u003e子テーマstyle.cssに \u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e/* メニューバーの位置 */\n#menu-primary {\n margin: 10px 10px 10px 10px;\n}\n\u003c/code\u003e\u003c/pre\u003e数値は任意で変更する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003eその他メモ\u003c/h3\u003ephp文字化け\u003cbr /\u003e\n保存するときにUTF-8（BOMなし）にしたら直った。\u003cbr /\u003e\n\u003cbr /\u003e\nコメント欄の日本語化\u003cbr /\u003e\n親テーマに入っているfunctions.phpを削除して、子テーマのfunctions.phpを編集する\u003cbr /\u003e\n\u003cbr /\u003e\n検索結果が見つからないときの画面編集　文字と検索ボックスの設置\u003cbr /\u003e\nloop-error.phpを編集する\u003cbr /\u003e\nphpにbrタグを入れて改行する\u003cbr /\u003e\n\u003ch2\u003eウィジェットの設置場所\u003c/h2\u003ePrimary：固定ページの右サイドバー\u003cbr /\u003e\nSubsidiary：投稿ページのコピーライト表示の上\u003cbr /\u003e\nAfter Singular：投稿ページのコメント表示の上\u003cbr /\u003e\n\u003ca href\u003d\"\" name\u003d\"moku3\"\u003e\u003c/a\u003e  \u003ch2\u003e画像投稿時の表示\u003c/h2\u003eHatchで画像を投稿した場合、大きく分けて3パターンになります。\u003cbr /\u003e\n\u003ch3\u003eアイキャッチ画像なし\u003c/h3\u003e「メディアを追加」で画像を追加して、アイキャッチ画像を追加しなかった場合\u003cbr /\u003e\n上にアイキャッチ画像部分がグレーに、「メディアを追加」で追加した画像が下に表示されます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-KrIWMnFZIjY/U1CUtheVuAI/AAAAAAAABuw/zOwKgnj9nxo/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/-KrIWMnFZIjY/U1CUtheVuAI/AAAAAAAABuw/zOwKgnj9nxo/s1600/02.png\" height\u003d\"270\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eアイキャッチ画像と「メディアを追加」の画像\u003c/h3\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/-mihqMhZzTZU/U1CULMtZdJI/AAAAAAAABuo/8PDB6Al8U8E/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/-mihqMhZzTZU/U1CULMtZdJI/AAAAAAAABuo/8PDB6Al8U8E/s1600/03.png\" height\u003d\"281\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eアイキャッチ画像のみ\u003c/h3\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/-91e98OEI148/U1CVbkS_T4I/AAAAAAAABu4/j1xfnx9zxdc/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/-91e98OEI148/U1CVbkS_T4I/AAAAAAAABu4/j1xfnx9zxdc/s1600/04.png\" height\u003d\"187\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n今回は、最後のアイキャッチ画像だけ追加して無料写真素材サイトを作ることにしました。\u003cbr /\u003e\n\u003cbr /\u003e\nしかし、このアイキャッチ画像はクリックで拡大表示ができないので、元のサイズで表示の確認をしてもらう場合は、「メディアを追加」で画像を追加するか、画像ファイルへのリンクを作る必要があります。\u003cbr /\u003e\n\u003cbr /\u003e\n「メディアを追加」で画像を追加した場合、画像をクリックするとライトボックス表示されます。\u003cbr /\u003e\n\u003ca href\u003d\"\" name\u003d\"moku4\"\u003e\u003c/a\u003e  \u003ch2\u003e画像のダウンロード方法\u003c/h2\u003e今回は、右クリックで「名前を付けて画像を保存」する方法と、ダウンロードボタンなどを設置してクリックするだけで保存する方法の2つを試してみました。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003e右クリックで保存\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-KFM6dFJevJU/U1C29BENzfI/AAAAAAAABvI/1jrjF64u7Cg/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/-KFM6dFJevJU/U1C29BENzfI/AAAAAAAABvI/1jrjF64u7Cg/s1600/05.png\" height\u003d\"159\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e画像の上で右クリックして保存してもらいます。\u003cbr /\u003e\n\u003cbr /\u003e\nアイキャッチ画像の上で右クリックで保存すると、元の画像サイズではなくアイキャッチ画像のサイズで保存されます。\u003cbr /\u003e\n\u003cbr /\u003e\n元の画像サイズでダウンロードしてもらう場合は、「メディアを追加」で画像を追加するか、画像ファイルへのリンクを作る必要があります。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003eダウンロードボタンをクリックで保存\u003c/h3\u003e元の画像サイズでダウンロードしてもらいたかったので、今回この方法を採用しました。\u003cbr /\u003e\n\u003ch4\u003eダウンロードボタンの準備\u003c/h4\u003eダウンロードボタンを用意します。テキストリンクでいい場合は読み飛ばしてください。\u003cbr /\u003e\n\u003cbr /\u003e\n「ダウンロードボタン　素材　無料」で検索するといっぱい出てきます。気に入ったボタンがなければ自分で作成することも可能です。\u003cbr /\u003e\n\u003cbr /\u003e\n自分で作る場合は、「Inkscape」や「GIMP」などのフリーソフトを使って作るか、無料生成サイトで作ると簡単です。\u003cbr /\u003e\n\u003cbr /\u003e\n「Inkscape」「GIMP」：\u003ca href\u003d\"http://www.memorou.com/2014/03/blog-post.html\"\u003eブログを書くときに使ってる役立つ無料ソフト\u003c/a\u003e\u003cbr /\u003e\nボタン素材 無料生成サイト：\u003ca href\u003d\"http://box.aflat.com/buttonmaker/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eButton Maker\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n作成したら、メディアの追加をしておきます。追加方法がわからない場合は、前回までの記事を参考にしてください。\u003cbr /\u003e\n\u003ch4\u003e画像の準備\u003c/h4\u003eダウンロードしてもらう画像（写真）の準備をします。\u003cbr /\u003e\nこの画像はzip形式に圧縮してメディアライブラリに追加します。\u003cbr /\u003e\n\u003ch4\u003e画像をzip形式に圧縮\u003c/h4\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-WvB7vxN6BoQ/U1m5mO7hFvI/AAAAAAAABvY/204IlO5rht4/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-WvB7vxN6BoQ/U1m5mO7hFvI/AAAAAAAABvY/204IlO5rht4/s1600/01.png\" height\u003d\"309\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n用意した画像アイコンの上で右クリックします。\u003cbr /\u003e\n\u003cbr /\u003e\n次に、送る（N）をクリックするかマウスを乗せます。\u003cbr /\u003e\n\u003cbr /\u003e\n最後に、圧縮（zip 形式）フォルダをクリックしたら完了です。\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/-x4lg8WRdSSQ/U1m6-NpjdBI/AAAAAAAABvg/GKfZzlwNzrk/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-x4lg8WRdSSQ/U1m6-NpjdBI/AAAAAAAABvg/GKfZzlwNzrk/s1600/02.png\" /\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://2.bp.blogspot.com/-a-Nzcb0Rvak/U1m8jV5BhnI/AAAAAAAABvs/MoWLkpeBu1I/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/-a-Nzcb0Rvak/U1m8jV5BhnI/AAAAAAAABvs/MoWLkpeBu1I/s1600/03.png\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nこの圧縮したフォルダをメディアライブラリに追加します。\u003cbr /\u003e\n\u003cbr /\u003e\n追加は、画像の追加方法と同じです。\u003cbr /\u003e\n\u003ch4\u003eダウンロードボタンの設置\u003c/h4\u003eメニューの投稿から新規追加を選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-w-C-ZLHMrhc/U2BMM7FYdiI/AAAAAAAABwk/7biZNcKfw8U/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-w-C-ZLHMrhc/U2BMM7FYdiI/AAAAAAAABwk/7biZNcKfw8U/s1600/04.png\" height\u003d\"245\" 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/-hcTWQNFdMrI/U2BPQqFwPBI/AAAAAAAABww/69vrXz6F5fM/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/-hcTWQNFdMrI/U2BPQqFwPBI/AAAAAAAABww/69vrXz6F5fM/s1600/05.png\" height\u003d\"30\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n投稿欄に次のコードを入力します。\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;a href\u003d\"zipのURL\"\u0026gt;\n\u0026lt;img src\u003d\"ダウンロードボタンのURL\"/\u0026gt;\u0026lt;/a\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e「zipのURL」は、画像の準備で圧縮して追加したダウンロードしてもらうフォルダのURLです。\u003cbr /\u003e\n「ダウンロードボタンのURL」は、ダウンロードボタンの準備で追加した画像のURLです。\u003cbr /\u003e\n\u003cbr /\u003e\nそれぞれのURLは、メニューのメディアからライブラリを選択して編集をクリック後、右側のファイルのURLから確認できます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-43IorpsUjms/U2BUQ0vP9cI/AAAAAAAABxA/yLDYuQ5pTQU/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/-43IorpsUjms/U2BUQ0vP9cI/AAAAAAAABxA/yLDYuQ5pTQU/s1600/06.png\" height\u003d\"202\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch4\u003eテキストリンクの場合\u003c/h4\u003e\u003cpre\u003e\u003ccode\u003e\u0026lt;a href\u003d\"zipのURL\"\u0026gt;\n写真をダウンロードする\u0026lt;/a\u0026gt;\n\u003c/code\u003e\u003c/pre\u003eテキストは自由に変更可能です。\u003cbr /\u003e\n\u003ch2\u003edownload属性を使ったダウンロード\u003c/h2\u003e\u003cpre\u003e\u003ccode\u003e\u0026lt;a href\u003d\"画像のURL\" download\u003d\"画像の名前\"\u0026gt;\n\u0026lt;img src\u003d\"ダウンロードボタンのURL\" /\u0026gt;\u0026lt;/a\u0026gt;\n\u003c/code\u003e\u003c/pre\u003eChrome系のブラウザのみ対応しているようです。 \u003cbr /\u003e\n\u003ca href\u003d\"\" name\u003d\"moku5\"\u003e\u003c/a\u003e  \u003ch2\u003e肖像権や著作権\u003c/h2\u003e写真サイトを作るとき、一番気になるのが肖像権や著作権の問題だと思います。\u003cbr /\u003e\n肖像権：\u003ca href\u003d\"http://ja.wikipedia.org/wiki/%E8%82%96%E5%83%8F%E6%A8%A9\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ehttp://ja.wikipedia.org/wiki/肖像権\u003c/a\u003e\u003cbr /\u003e\n著作権：\u003ca href\u003d\"http://ja.wikipedia.org/wiki/%E8%91%97%E4%BD%9C%E6%A8%A9\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ehttp://ja.wikipedia.org/wiki/著作権\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n更に細かい分類が素人にも比較的わかりやすく書かれています。\u003cbr /\u003e\n雑貨：\u003ca href\u003d\"http://okwave.jp/qa/q1018620.html\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ehttp://okwave.jp/qa/q1018620.html\u003c/a\u003e\u003cbr /\u003e\n建物：\u003ca href\u003d\"http://allabout.co.jp/gm/gc/54179/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ehttp://allabout.co.jp/gm/gc/54179/\u003c/a\u003e\u003cbr /\u003e\n電車：\u003ca href\u003d\"http://oshiete.goo.ne.jp/qa/43030.html\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ehttp://oshiete.goo.ne.jp/qa/43030.html\u003c/a\u003e\u003cbr /\u003e\n自動車：\u003ca href\u003d\"http://wonderdriving.com/archives/2012/07/car-photo-copyright.html\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ehttp://wonderdriving.com/\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ctable cellpadding\u003d\"0\" cellspacing\u003d\"0\" border\u003d\"0\" style\u003d\" border:1px solid #ccc; width:300px;\"\u003e\u003ctr style\u003d\"border-style:none;\"\u003e\u003ctd style\u003d\"vertical-align:top; border-style:none; padding:10px; width:140px;\"\u003e\u003ca href\u003d\"https://px.a8.net/svt/ejp?a8mat\u003d1NWEYZ+2TTKNM+249K+BWGDT\u0026a8ejpredirect\u003dhttps%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4778315006%2F%3Ftag%3Da8-affi-137614-22\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003e\u003cimg border\u003d\"0\" alt\u003d\"\" src\u003d\"https://images-fe.ssl-images-amazon.com/images/I/51drzkX75CL._SS160_.jpg\" /\u003e\u003c/a\u003e\u003c/td\u003e\u003ctd style\u003d\"font-size:12px; vertical-align:middle; border-style:none; padding:10px;\"\u003e\u003cp style\u003d\"padding:0; margin:0;\"\u003e\u003ca href\u003d\"https://px.a8.net/svt/ejp?a8mat\u003d1NWEYZ+2TTKNM+249K+BWGDT\u0026a8ejpredirect\u003dhttps%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4778315006%2F%3Ftag%3Da8-affi-137614-22\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003e写真著作権 第2版 (ユニ知的所有権ブックス NO.19)\u003c/a\u003e\u003c/p\u003e\u003cp style\u003d\"color:#cc0000; font-weight:bold; margin-top:10px;\"\u003e新品価格\u003cbr/\u003e￥2,592\u003cspan style\u003d\"font-weight:normal;\"\u003eから\u003c/span\u003e\u003cbr/\u003e\u003cspan style\u003d\"font-size:10px; font-weight:normal;\"\u003e(2017/2/20 22:36時点)\u003c/span\u003e\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\u003cimg border\u003d\"0\" width\u003d\"1\" height\u003d\"1\" src\u003d\"https://www19.a8.net/0.gif?a8mat\u003d1NWEYZ+2TTKNM+249K+BWGDT\" alt\u003d\"\"\u003e\u003cbr /\u003e\n\u003cbr /\u003e\nもし不安なら、弁護士に相談・確認するのが一番でしょう。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/1433744794694797511"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/1433744794694797511"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/04/wordpress-hatch.html","title":"無料写真素材サイトをWordPressで作りたい Hatch編"}],"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/-8LYuZDbxv-I/U0YIUre5hmI/AAAAAAAABqM/yjOrAJC6hLg/s72-c/00.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-7353254824070057320"},"published":{"$t":"2013-12-06T12:56:00.001+09:00"},"updated":{"$t":"2017-02-25T17:14:52.855+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テーマ"}],"title":{"type":"text","$t":"WordPressテーマ（テンプレート）の変更と編集方法"},"content":{"type":"html","$t":"WordPressのインストール完了後にログインをすると、ダッシュボード画面になります。\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\u003eWordPressでは、一般的なホームページやブログでいうテンプレートのことをテーマといいます。\u003cbr /\u003e\nデフォルトの状態では4つインストールされています。（2013年10月）\u003cbr /\u003e\n\u003cbr /\u003e\nこのテーマは自分で作成することも可能ですが、高機能で洗練されたデザインのものが無料で配布されています。\u003cbr /\u003e\n\u003cbr /\u003e\nまた、有料で提供しているものもあり、アフィリエイトサイトを運営されている方は有料のテーマを使用している場合も少なくありません。\u003cbr /\u003e\n\u003ch2\u003eテーマの変更方法\u003c/h2\u003eダッシュボードの「別のテーマに変更する」か、外観タブの「テーマ」を選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-1Z_swi_4eaY/UqE-1I3FFVI/AAAAAAAAA5k/glOJ8oQOc3o/s1600/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"105\" src\u003d\"http://2.bp.blogspot.com/-1Z_swi_4eaY/UqE-1I3FFVI/AAAAAAAAA5k/glOJ8oQOc3o/s320/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nテーマの管理画面になるので、利用可能なテーマの中に使用したいものがなければ「テーマのインストール」をクリックします。\u003cbr /\u003e\n\u003cbr /\u003e\n検索の方法はキーワード検索と特殊フィルター検索の2種類があります。\u003cbr /\u003e\nキーワードで検索する場合は文字を入力して「検索」をクリックします。たぶん英語でしか検索できないと思います。\u003cbr /\u003e\n\u003cbr /\u003e\n特殊フィルター検索にはテーマの色、カラム数、幅や機能といった見た目などから絞り込むことが可能です。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-SpOEZu8xDuw/UqE-7W92ImI/AAAAAAAAA5s/7iaz3kAYc4M/s1600/%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"205\" src\u003d\"http://2.bp.blogspot.com/-SpOEZu8xDuw/UqE-7W92ImI/AAAAAAAAA5s/7iaz3kAYc4M/s320/%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n試しに、「右サイドバーの2カラムにしたいなぁ」と思い検索すると、624種類もありました。プレビューを見ることができるので、どのようなサイトになるのかイメージしやすいと思います。\u003cbr /\u003e\n\u003cbr /\u003e\n使用したいテーマが見つかったら「今すぐインストール」をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-CMWaRvZup4Q/UqE-_4s6XfI/AAAAAAAAA50/zb4HpOta5Ak/s1600/%E6%A4%9C%E7%B4%A2%E7%B5%90%E6%9E%9C.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"167\" src\u003d\"http://1.bp.blogspot.com/-CMWaRvZup4Q/UqE-_4s6XfI/AAAAAAAAA50/zb4HpOta5Ak/s320/%E6%A4%9C%E7%B4%A2%E7%B5%90%E6%9E%9C.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nインストールが完了して、有効化するとテーマが変更されます。\u003cbr /\u003e\n\u003cbr /\u003e\nよほどのこだわりがない限り、ここで見つけられると思います。それでも見つからない場合は、Google検索で「ワードプレス　無料　テーマ」などと入力すると数え切れないほど出てきます。\u003cbr /\u003e\n\u003cbr /\u003e\nテーマをカスタマイズして使いたいけど、CSSやPHPがあまり得意ではないという方は、人気どころを使うとほかの方がカスタマイズ方法を記事にしていたりするので参考にできるかもしれません。\u003cbr /\u003e\n\u003ch2\u003eテーマの編集方法\u003c/h2\u003eテーマの編集方法は、FTPソフトで編集したCSSやPHPを更新する方法と、外観タブの「テーマ編集」から行う方法の二通りあります。\u003cbr /\u003e\n\u003cbr /\u003e\n外観タブの「テーマ編集」をクリックすると、現在使用中のテーマのテンプレートが右側に表示されます。\u003cbr /\u003e\n\u003cbr /\u003e\n例えば、ヘッダーを編集したい場合はheader.phpを、文字の種類・形・色など、スタイルを変えたい場合はstyle.cssを、といった感じで変更したい場所に応じたテンプレートを選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-KI-fgCVD2Ls/UqE_LH0YYPI/AAAAAAAAA58/XuDtvGugc-g/s1600/%E7%B7%A8%E9%9B%86.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"122\" src\u003d\"http://3.bp.blogspot.com/-KI-fgCVD2Ls/UqE_LH0YYPI/AAAAAAAAA58/XuDtvGugc-g/s320/%E7%B7%A8%E9%9B%86.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n編集が終わったら「ファイルを更新」を押し忘れないように注意する。\u003cbr /\u003e\n\u003cbr /\u003e\nテーマを編集する場合は、できるだけ子テーマを編集するようにします。\u003cbr /\u003e\n理由は、FTPソフトでの更新方法と一緒に、\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_446.html\"\u003eWordPressで子テーマ作る理由と作り方\u003c/a\u003eで説明します。\u003cbr /\u003e\nプラグインを使った子テーマの作り方は、\u003ca href\u003d\"http://www.memorou.com/2013/02/blog-post_27.html\"\u003eワードプレス 子テーマの作り方 プラグイン\u003c/a\u003eを参照してください。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7353254824070057320"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7353254824070057320"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/12/wordpress_4901.html","title":"WordPressテーマ（テンプレート）の変更と編集方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://2.bp.blogspot.com/-1Z_swi_4eaY/UqE-1I3FFVI/AAAAAAAAA5k/glOJ8oQOc3o/s72-c/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89.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"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-7210816236661198764"},"published":{"$t":"2013-02-27T11:07:00.000+09:00"},"updated":{"$t":"2017-02-26T00:08:36.108+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"子テーマ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テーマ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"プラグイン"}],"title":{"type":"text","$t":"ワードプレス　子テーマの作り方　プラグイン"},"content":{"type":"html","$t":"ワードプレスをはじめると、一度は耳にするテーマや子テーマという言葉。 ここでは、テーマや子テーマについての説明とその作り方です。\u003cbr /\u003e\n\u003cbr /\u003e\nさらに、子テーマを作るのに便利なプラグインも紹介します。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eテーマとは\u003c/h2\u003eWordPressのテーマは、他のブログなどでいうところのデザインテンプレートのことです。\u003cbr /\u003e\n\u003cbr /\u003e\nデフォルトで、twentytwelveやtwentyelevenなど3個くらいインストールされていて好きなデザインのテーマが選べます。\u003cbr /\u003e\n\u003cbr /\u003e\n他のデザインを使いたいときは、ダッシュボードの外観からテーマを選択すると、テーマの管理画面になるので、テーマのインストールから自分にあったデザインを検索できます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-FoPKcBaXUn8/USjQa2s_UUI/AAAAAAAAAAM/4W31UKhv73Q/s1600/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%83%86%E3%83%BC%E3%83%9E.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"132\" src\u003d\"http://2.bp.blogspot.com/-FoPKcBaXUn8/USjQa2s_UUI/AAAAAAAAAAM/4W31UKhv73Q/s320/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%83%86%E3%83%BC%E3%83%9E.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-WjHQ3zZ3WXw/USjQ7crXlwI/AAAAAAAAAAU/hT048Q-NNLc/s1600/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB.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/-WjHQ3zZ3WXw/USjQ7crXlwI/AAAAAAAAAAU/hT048Q-NNLc/s320/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch2\u003e子テーマとは\u003c/h2\u003e子テーマは上で選んだテーマ（親テーマ）を直接編集せずにカスタムできるようにするものです。\u003cbr /\u003e\n\u003cbr /\u003e\nなぜ直接いじらないのかというと、ワードプレスでテーマのバージョンアップがあったとき、アップグレードすると初期設定に戻ってしまうことがあるからです。\u003cbr /\u003e\n\u003cbr /\u003e\n初期設定に戻ると、時間をかけてカスタマイズしたものをまた1からやり直さなくてはなりません。\u003cbr /\u003e\nそうならないために、子テーマを作って編集するとバージョンアップがあっても、カスタムした部分はそのままの状態で表示されます。\u003cbr /\u003e\n\u003ch2\u003e子テーマを作る方法\u003c/h2\u003e子テーマを作る方法は一般的に自分でフォルダを作るのと、自動で作ってくれるプラグインを使う方法の2通りあります。\u003cbr /\u003e\n\u003ch3\u003e自分で子テーマのフォルダを作る方法\u003c/h3\u003eまず、任意のフォルダ名で「themes」の直下に子テーマフォルダを作る。（親テーマと同じ階層）\u003cbr /\u003e\nその子テーマフォルダ内に「style.css」を作成します。\u003cbr /\u003e\n\u003cbr /\u003e\nここで必要なのが子テーマの名前と親テーマのフォルダ名です。\u003cbr /\u003e\n詳しくは、\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_446.html\"\u003eWordPressで子テーマ作る理由と作り方\u003c/a\u003eを参照してください。\u003cbr /\u003e\n\u003ch3\u003e子テーマフォルダを自動で作ってくれるプラグインをインストールする方法\u003c/h3\u003eプラグインをインストールして、有効化して設定をします。\u003cbr /\u003e\n今回は「One-Click Child Theme」を使います。\u003cbr /\u003e\n\u003cbr /\u003e\nインストール方法はダッシュボードのプラグインから新規追加を選択し、プラグインのインストール画面で検索に「One-Click Child Theme」を入力してプラグインの検索をクリックする。\u003cbr /\u003e\n今すぐインストールでインストールして有効化する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-YKHQFBEEAKE/UStw0ISloOI/AAAAAAAAAAo/H-lbzyGcsgo/s1600/%25E3%2583%2580%25E3%2583%2583%25E3%2582%25B7%25E3%2583%25A5%25E3%2583%259C%25E3%2583%25BC%25E3%2583%2589%25E3%2583%2597%25E3%2583%25A9%25E3%2582%25B0%25E3%2582%25A4%25E3%2583%25B3%25E6%2596%25B0%25E8%25A6%258F.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"127\" src\u003d\"http://2.bp.blogspot.com/-YKHQFBEEAKE/UStw0ISloOI/AAAAAAAAAAo/H-lbzyGcsgo/s320/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E6%96%B0%E8%A6%8F.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-gTo4wnuh-xM/USt0_JbNEKI/AAAAAAAAAA4/uvFhsL4-hHc/s1600/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"158\" src\u003d\"http://4.bp.blogspot.com/-gTo4wnuh-xM/USt0_JbNEKI/AAAAAAAAAA4/uvFhsL4-hHc/s320/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eインストールが出来たら、ダッシュボードの外観からChild Themeの設定をする。\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/-N0b9yLBi7tA/USt40WmIRtI/AAAAAAAAABI/mQNuoioHwb4/s1600/%E5%A4%96%E8%A6%B3child.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"130\" src\u003d\"http://4.bp.blogspot.com/-N0b9yLBi7tA/USt40WmIRtI/AAAAAAAAABI/mQNuoioHwb4/s320/%E5%A4%96%E8%A6%B3child.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nそうすると、外観のテーマの管理に子テーマができるので、外観のテーマの編集から編集することができる。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7210816236661198764"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7210816236661198764"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/02/blog-post_27.html","title":"ワードプレス　子テーマの作り方　プラグイン"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://2.bp.blogspot.com/-FoPKcBaXUn8/USjQa2s_UUI/AAAAAAAAAAM/4W31UKhv73Q/s72-c/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%83%86%E3%83%BC%E3%83%9E.jpg","height":"72","width":"72"}}]}});