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/-/WordPress%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA?alt\u003djson-in-script\u0026max-results\u003d9999"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/-/WordPress%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA?alt\u003djson-in-script\u0026max-results\u003d9999"},{"rel":"alternate","type":"text/html","href":"http://www.memorou.com/search/label/WordPress%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"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":"23"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"9999"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-3573074546339285370"},"published":{"$t":"2016-11-26T16:31:00.000+09:00"},"updated":{"$t":"2017-04-22T22:28:25.642+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ドメイン"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ミニバード"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"ミニバードで1つのデータベースにWordPressを複数インストールする方法"},"content":{"type":"html","$t":"1つのデータベースに複数のWordPressをインストールする手順です。\u003cbr /\u003e\n\u003cbr /\u003e\n「サイトネットワーク管理」で1つのワードプレスで複数のサイト（マルチサイト）を動かしたかったのですが、動作しなかったため、1つのデータベースで複数のワードプレスをインストールすることにしました。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"reference\"\u003e「サイトネットワーク管理」でサイトを追加するところまでは問題なくできていたので、ワードプレスをインストールした後は、ここからログインすることもできます。\u003cbr /\u003e\n\u003cbr /\u003e\nマルチサイトの設定は\u003ca href\u003d\"https://wpdocs.osdn.jp/%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%AE%E4%BD%9C%E6%88%90\" target\u003d\"_blank\"\u003eネットワークの作成\u003c/a\u003eを参考にしてください。\u003cbr /\u003e\n\u003cbr /\u003e\nもちろんネットワークを作成しなくても管理できます。\u003c/div\u003e\u003cbr /\u003e\nということで、「サイトネットワーク管理」を設定できてもマルチサイトでワードプレスが動作しない人限定で、どうしても「サイトネットワーク管理」からサブドメインにログインしたい場合の設定方法です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nワードプレスのインストールには「簡単インストール」を利用します。そのため、データベースに1つ以上空きがあることが条件です。インストール後は削除するので5つとも使用可能です。\u003cbr /\u003e\n\u003cbr /\u003e\n手動でインストールできる人はデータベースに空きがなくてもOKです。「\u003ca href\u003d\"#moku1\"\u003eデータベースとテーブル接頭辞の変更\u003c/a\u003e」へ進んでください。\u003cbr /\u003e\n\u003cbr /\u003e\n既存のワードプレスに使用しているデータベースの「データベーステーブル接頭辞」を変更して、ワードプレスをインストールします。\u003cbr /\u003e\n\u003ch2\u003eサブドメインにワードプレスをインストール\u003c/h2\u003eサブドメインを追加して、ワードプレスを自動インストールします。\u003cbr /\u003e\n\u003ch3\u003eサブドメインの追加\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"https://4.bp.blogspot.com/-V68xVZyawaw/WDk2jxOWujI/AAAAAAAADV8/7PbW1JYTRHAC5VTnh1xhzp2YFS--pUwjgCLcB/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"https://4.bp.blogspot.com/-V68xVZyawaw/WDk2jxOWujI/AAAAAAAADV8/7PbW1JYTRHAC5VTnh1xhzp2YFS--pUwjgCLcB/s320/01.png\" width\u003d\"286\" height\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\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\"https://3.bp.blogspot.com/-7HIFhsm0STs/WDk2tEfC77I/AAAAAAAADWA/O-Nn8AzfzjcAnH0B1EMrN31jfaIoY-EPwCLcB/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"https://3.bp.blogspot.com/-7HIFhsm0STs/WDk2tEfC77I/AAAAAAAADWA/O-Nn8AzfzjcAnH0B1EMrN31jfaIoY-EPwCLcB/s320/02.png\" width\u003d\"320\" height\u003d\"198\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n\u003cdiv class\u003d\"reference\"\u003e確定後、「FTPアカウント設定」でログインすると、サブドメインのフォルダが追加されています。\u003c/div\u003e\u003ch3\u003eワードプレスのインストール\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"https://3.bp.blogspot.com/-5V8tEKyW69U/WDk3HR66-KI/AAAAAAAADWE/xhXDNtglDFkKxw-mroF9W4_4HES0nngzQCLcB/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"https://3.bp.blogspot.com/-5V8tEKyW69U/WDk3HR66-KI/AAAAAAAADWE/xhXDNtglDFkKxw-mroF9W4_4HES0nngzQCLcB/s320/05.png\" width\u003d\"320\" height\u003d\"317\" /\u003e\u003c/a\u003e\u003c/div\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\"https://2.bp.blogspot.com/-bGi7tqA7bD0/WDk3LxGIipI/AAAAAAAADWI/jccRyoH16rYd4uyryoYKozmYs4QsdFA2ACLcB/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"https://2.bp.blogspot.com/-bGi7tqA7bD0/WDk3LxGIipI/AAAAAAAADWI/jccRyoH16rYd4uyryoYKozmYs4QsdFA2ACLcB/s320/04.png\" width\u003d\"311\" height\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n\u003cdiv class\u003d\"reference\"\u003eワードプレスのログイン画面が表示されない場合は、追加したサブドメインのフォルダをクリックして、「index.html」と「default_page.png」を削除してください。\u003c/div\u003e\u003cbr /\u003e\nここで\u003cb\u003e一度、ワードプレスにログイン\u003c/b\u003eしてください。ログインできることを確認後、データベースとテーブル接頭辞を変更してください。\u003cbr /\u003e\n※ログインせずに次の手順に進むと「インストール画面」が表示されません。\u003cbr /\u003e\n\u003ca name\u003d\"moku1\"\u003e\u003c/a\u003e\u003ch2\u003eデータベースとテーブル接頭辞の変更\u003c/h2\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\"https://1.bp.blogspot.com/-ZWLWdjtlZZU/WDk3tI0tEqI/AAAAAAAADWM/1paGsJhC7jsegVBgPWjCQ2XzWdxO50cNACLcB/s1600/06.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"https://1.bp.blogspot.com/-ZWLWdjtlZZU/WDk3tI0tEqI/AAAAAAAADWM/1paGsJhC7jsegVBgPWjCQ2XzWdxO50cNACLcB/s320/06.png\" width\u003d\"320\" height\u003d\"44\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nサイドバーの「FTPアカウント設定」をクリック＞独自ドメインを「選択」＞WebFTPにログイン＞「wp-config.php」を編集モードでファイルを開く＞表示された中身（下記）をコピーする。\u003cbr /\u003e\n\u003cpre\u003e/** WordPress のためのデータベース名 */\ndefine('DB_NAME', '***');\n\n/** MySQL データベースのユーザー名 */\ndefine('DB_USER', '***');\n\n/** MySQL データベースのパスワード */\ndefine('DB_PASSWORD', '***');\u003c/pre\u003e※***はデータベースごとに異なります。\u003cbr /\u003e\n\u003ch3\u003eサブドメインのデータベースを変更\u003c/h3\u003e上記の部分をサブドメインの「wp-config.php」に貼り付け（置き換え）します。この時（貼り付け前）のデータベース名をメモしておいてください。あとで削除します。\u003cbr /\u003e\n\u003cbr /\u003e\n次に、\u003cbr /\u003e\n\u003cpre\u003e$table_prefix  \u003d 'wp_';\u003c/pre\u003eのwp_（テーブル接頭辞）の部分を任意の文字列に変更します。\u003cbr /\u003e\n\u003cbr /\u003e\n今回は、wp_2に変更し、\u003cbr /\u003e\n\u003cpre\u003e$table_prefix  \u003d 'wp_2';\u003c/pre\u003eとしました。\u003cbr /\u003e\n\u003cbr /\u003e\n接頭辞は半角英数字と下線が使えるので、動作の快適性を無視すれば、ほぼ無限に作成することができます。\u003cbr /\u003e\n\u003ch2\u003eワードプレスにログイン\u003c/h2\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"https://4.bp.blogspot.com/-mk8s-93VjFE/WDk4Cn2WLUI/AAAAAAAADWU/Ua6aPO6_WrgHJTFQMhXGupXKEUXq30kqACLcB/s1600/07.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"https://4.bp.blogspot.com/-mk8s-93VjFE/WDk4Cn2WLUI/AAAAAAAADWU/Ua6aPO6_WrgHJTFQMhXGupXKEUXq30kqACLcB/s320/07.png\" width\u003d\"320\" height\u003d\"292\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nログインページにアクセスするとインストール画面に移行します。\u003cbr /\u003e\n\u003cbr /\u003e\n「サイトのタイトル」「ユーザー名」「パスワード」「メールアドレス」を入力して「WordPressをインストール」をクリックします。\u003cbr /\u003e\n\u003cbr /\u003e\n「成功しました」ページが表示されたら完了です。\u003cbr /\u003e\n\u003ch2\u003eデータベースの削除\u003c/h2\u003eワードプレスにログインできることを確認したら、データベースを削除します。\u003cbr /\u003e\n\u003cbr /\u003e\n上でメモしたデータベースを削除します。\u003cbr /\u003e\n\u003cbr /\u003e\n削除して空いた分は、別のデータベースを作成してワードプレスをインストールできます。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3573074546339285370"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3573074546339285370"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2016/11/1wordpress.html","title":"ミニバードで1つのデータベースにWordPressを複数インストールする方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https://4.bp.blogspot.com/-V68xVZyawaw/WDk2jxOWujI/AAAAAAAADV8/7PbW1JYTRHAC5VTnh1xhzp2YFS--pUwjgCLcB/s72-c/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-8710789488620121465"},"published":{"$t":"2015-09-29T17:48:00.000+09:00"},"updated":{"$t":"2017-02-18T19:35:11.573+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":"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\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-Bqh2_oAxMv4/Vgoprl5a42I/AAAAAAAAC2Y/V5i5aMdzGmo/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"40\" src\u003d\"http://4.bp.blogspot.com/-Bqh2_oAxMv4/Vgoprl5a42I/AAAAAAAAC2Y/V5i5aMdzGmo/s320/01.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n「テキスト」に広告コードをを貼り付け、「ビジュアル」で表示を確認。その後「テキスト」に戻るとコードが勝手に書き換えられています。\u003cbr /\u003e\n\u003cbr /\u003e\nWordPressには自動整形という機能があり、改行（shift+enter）や段落（enter）など入れるときには非常に便利です。\u003cbr /\u003e\n\u003cbr /\u003e\nしかし、たいていのASPはコードの書き換えを禁止しているため、広告を貼るときには注意が必要です。※この自動整形により変更されたコードで報酬が支払われるのか、支払われないのかは確認していません。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch2\u003e自動整形機能を無効化\u003c/h2\u003e自動整形機能を無効化する方法は、プラグインを使う方法とfunctions.phpにコードを追加する方法があります。\u003cbr /\u003e\n\u003cbr /\u003e\n今回はfunctions.phpにコードを追加する方法を試してみました。\u003cbr /\u003e\n参考にしたのは「\u003ca href\u003d\"http://webkikaku.co.jp/staff/wordpress/wordpress-automatic-forming-control/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eWordPressでエディタに自動生成されるタグ(＜p＞とか＜br＞)を制御する方法まとめ\u003c/a\u003e」です。\u003cbr /\u003e\n\u003cbr /\u003e\nまずは、書かれているとおりfunctions.phpにコードを追加します。\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003eremove_filter('the_content', 'wpautop'); // 記事の自動整形を無効にする\nremove_filter('the_excerpt', 'wpautop'); // 抜粋の自動整形を無効にする\n\u003c/code\u003e\u003c/pre\u003e\u003cbr /\u003e\nこの際、「// 記事の自動整形を無効にする」と「// 抜粋の自動整形を無効にする」の前にある全角スペースを\u003cb\u003e半角スペース\u003c/b\u003eに変更します。※上記は半角に変更済み\u003cbr /\u003e\n\u003cbr /\u003e\nこれをやらずにファイルを更新してしまうとエラーが出てしまいます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-6rcKe3xAwHo/VgoxPQ3jBkI/AAAAAAAAC2o/PEnzUaGGjiI/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"26\" src\u003d\"http://3.bp.blogspot.com/-6rcKe3xAwHo/VgoxPQ3jBkI/AAAAAAAAC2o/PEnzUaGGjiI/s320/02.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eエラーの内容は、「functions.phpの23行目に構文エラーがある」といった感じです。\u003cbr /\u003e\n\u003cbr /\u003e\nこのエラーが出るとWordPressの「テーマの編集」からはファイルが更新できなくなるだけでなく、サイト自体も表示されなくなります。\u003cbr /\u003e\n\u003ch2\u003eエラーが出てしまったら\u003c/h2\u003eうっかり全角のままファイルを更新してしまった場合は、ffftpなどのフリーソフトを使うか、レンタルサーバーに搭載されている機能を使いコードを書き換えます。\u003cbr /\u003e\n\u003ch3\u003eミニバードの場合\u003c/h3\u003eどのレンタルサーバーでも似たような操作でエラーが解除できます。\u003cbr /\u003e\n\u003cbr /\u003e\n「FTPアカウント設定」クリックして、対象のドメインを選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-9AwcuuusLvw/Vgo2r3nwUnI/AAAAAAAAC24/eINwVwHPo0Y/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"140\" src\u003d\"http://2.bp.blogspot.com/-9AwcuuusLvw/Vgo2r3nwUnI/AAAAAAAAC24/eINwVwHPo0Y/s320/03.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n次に、WebFTPのログインをクリックします。\u003cbr /\u003e\nファイルマネージャ画面になるので、左側のディレクトリーツリーのwp-contentをクリックします。\u003cbr /\u003e\n以降、themes＞テーマを選択＞functions.phpから変更可能です。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-S3KyQgU20gQ/Vgo37L3KWbI/AAAAAAAAC3A/JKT1KehldhU/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"47\" src\u003d\"http://4.bp.blogspot.com/-S3KyQgU20gQ/Vgo37L3KWbI/AAAAAAAAC3A/JKT1KehldhU/s320/04.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n既存サイトに適用する場合は、この変更によってスタイルが崩れる場合があります。 \u003cbr /\u003e\n\u003ch2\u003etableタグが自動整形されてしまう場合\u003c/h2\u003e上記の方法で自動整形機能を無効化してもtableタグは自動整形されてしまう場合があります。\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/-oz-BjTxSHWo/VgpFdUc1NKI/AAAAAAAAC3Q/m48jvw8VAyI/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"174\" src\u003d\"http://1.bp.blogspot.com/-oz-BjTxSHWo/VgpFdUc1NKI/AAAAAAAAC3Q/m48jvw8VAyI/s320/05.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eユーザー＞あなたのプロフィールのビジュアルエディターにチェックを入れて、プロフィールを更新します。\u003cbr /\u003e\n\u003ch3\u003e自動で改行や段落は入れてほしいけどtableはいじってほしくない\u003c/h3\u003eそんなときは、functions.phpには何も追加せず、ビジュアルエディターにチェックを入れる。もしくは、そもそも記事作成時に「ビジュアル」をクリックしない。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/8710789488620121465"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/8710789488620121465"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2015/09/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/-Bqh2_oAxMv4/Vgoprl5a42I/AAAAAAAAC2Y/V5i5aMdzGmo/s72-c/01.png","height":"72","width":"72"}},{"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-6496831326755244928"},"published":{"$t":"2015-03-18T13:42:00.001+09:00"},"updated":{"$t":"2017-02-18T19:54:43.194+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"STINGER"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"WordPress無料レスポンシブテーマSTINGER5のカスタマイズ【その2】"},"content":{"type":"html","$t":"この投稿は、「\u003ca href\u003d\"http://www.memorou.com/2015/02/wordpressstinger5.html\"\u003eWordPress無料レスポンシブテーマSTINGER5のカスタマイズ\u003c/a\u003e」の補足や、書ききれなかったカスタマイズの続きです。\u003cbr /\u003e\n\u003cbr /\u003e\nここでは、style.css以外は親テーマを編集することが多々あります。親テーマを編集するか、子テーマを編集するかはあなた次第。\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003cdiv class\u003d\"mokuji\"\u003e\u003cdiv class\u003d\"mokuji-title\"\u003eもくじ\u003c/div\u003e\u003cul\u003e\u003cli\u003e\u003ca href\u003d\"#moku1\"\u003eトップ（ホーム）ページの抜粋の長さを変更\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku2\"\u003eトップ（ホーム）ページの記事タイトルを変更\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku3\"\u003eNEXTとPREVを次へと前へに変更する\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku4\"\u003eサイトタイトルの文字サイズや色を変更\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku5\"\u003eサイト説明の文字サイズや色を変更\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku6\"\u003e関連記事を2列や3列表示にカスタマイズ\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku7\"\u003e更新日だけを削除\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\u003c/div\u003e\u003ca name\u003d\"moku1\"\u003e\u003c/a\u003e  \u003ch2\u003eトップ（ホーム）ページの抜粋の長さを変更\u003c/h2\u003e親テーマのfunctions.phpを変更\u003cbr /\u003e\n\u003cpre\u003e// 抜粋の長さを変更する\nfunction custom_excerpt_length( $length ) {\n     return 80; \n}\n\u003c/pre\u003eの数字を変更する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku2\"\u003e\u003c/a\u003e  \u003ch2\u003eトップ（ホーム）ページの記事タイトルを変更\u003c/h2\u003e変更箇所は、以下の4点\u003cbr /\u003e\n\u003cul\u003e\u003cli\u003e太字からノーマル\u003c/li\u003e\n\u003cli\u003eタイトルの下に薄い線を引く\u003c/li\u003e\n\u003cli\u003eどこでもクリックできるようにする\u003c/li\u003e\n\u003cli\u003e文字サイズを小さくする\u003c/li\u003e\n\u003c/ul\u003e子テーマのstyle.cssに\u003cbr /\u003e\n\u003cpre\u003eh3 a {\nfont-weight: normal;\nborder-bottom: 1px solid #eee;\ndisplay: block;\n}\n\n#topnews dd h3 {\nfont-size: 16px;\nline-height: 25px;\n}\u003c/pre\u003eを追加する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku3\"\u003e\u003c/a\u003e  \u003ch2\u003eNEXTとPREVを次へと前へに変更する\u003c/h2\u003e親テーマのsingle.phpの\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;dt\u0026gt;PREV \u0026lt;/dt\u0026gt;\u003c/pre\u003eと\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;dt\u0026gt;NEXT \u0026lt;/dt\u0026gt;\u003c/pre\u003eを\u003cbr /\u003e\n「前へ」と「次へ」に変更する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003dname\u003d\"moku4\"\u003e\u003c/a\u003e  \u003ch2\u003eサイトタイトルの文字サイズや色を変更\u003c/h2\u003e\u003cdiv\u003e子テーマのstyle.cssに\u003c/div\u003e\u003cpre\u003e/* サイトタイトル */\nheader .sitename {\nfont-size: 28px;\n}\nheader .sitename a {\ncolor: #444 !important;\nfont-weight: normal;\n}\u003c/pre\u003eを追加する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku5\"\u003e\u003c/a\u003e  \u003ch2\u003eサイト説明の文字サイズや色を変更\u003c/h2\u003e\u003cdiv\u003e子テーマのstyle.cssに\u003c/div\u003e\u003cpre\u003e/* サイト説明 */\nheader .descr {\nfont-size: 16px;\ncolor: #555;\n}\u003c/pre\u003eを追加する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku6\"\u003e\u003c/a\u003e  \u003ch2\u003e関連記事を2列や3列表示にカスタマイズ\u003c/h2\u003e\u003ch3\u003e2列表示1\u003c/h3\u003eこのブログの関連記事のように、アイキャッチ画像の上に文字を表示させています。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-yiD8AHvy8WA/VObr3ki-KcI/AAAAAAAACrE/eFs7XHYQe2Y/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-yiD8AHvy8WA/VObr3ki-KcI/AAAAAAAACrE/eFs7XHYQe2Y/s1600/01.png\" height\u003d\"302\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n子テーマのstyle.cssに追加する\u003cbr /\u003e\n\u003cpre\u003e/*--------------------------------\n関連記事表示部分\n---------------------------------*/\n#kanren dl{\n float: left;\n padding-left: 20px;\n width: 250px;\n height: 250px;\n}\n\n#kanren dd h5 {\n font-size: 16px;\n font-weight: normal;\n padding: 0px;\n margin-bottom: 5px;\n height: 44px;\n overflow: hidden;\n}\n\n#kanren .clearfix dd h5 a {\n display: block;\n color:#fefefe;\n background: #000;\n position: absolute;\n height: 70px;\n width: 240px;\n overflow: hidden;\n padding: 5px;\n opacity: 0.7;\n}\n\n#kanren dt {\n width: 250px;\n height:170px;\n}\n\n#kanren dt img {\n width: 250px;\n height:250px\n}\n\n#kanren dd {\n clear: both;\n padding-left:0px;\n}\u003c/pre\u003e画像サイズを250×250に変更して、タイトルを3行まで表示（PC時）するようにしています。\u003cbr /\u003e\n\u003cbr /\u003e\n記事の抜粋を非表示にするのを忘れずに。\u003cbr /\u003e\n\u003cbr /\u003e\n画像が暗いため微妙ですが、文字の色と背景色を逆にすると全体的に明るくなります。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-oNMRIEC86Kc/VObsaBlzHaI/AAAAAAAACrM/z9Aj2BpDObQ/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-oNMRIEC86Kc/VObsaBlzHaI/AAAAAAAACrM/z9Aj2BpDObQ/s1600/02.png\" height\u003d\"286\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e画像のサイズや透過率を変えることで、また違った印象になります。\u003cbr /\u003e\n\u003ch3\u003e2列でアイキャッチ画像の右に記事タイトルを表示\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-pzwzT9LoaZ4/VOhHMiM3H7I/AAAAAAAACrc/Sue3TWFNJRY/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-pzwzT9LoaZ4/VOhHMiM3H7I/AAAAAAAACrc/Sue3TWFNJRY/s1600/01.png\" height\u003d\"265\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e画像サイズは150×150で右に記事タイトルを表示させています。\u003c/div\u003e\u003cdiv\u003ePCとタブレットでは最大6行までタイトルが見えるようになっています。スマホでは約7.5行まで見えます。\u003c/div\u003e\u003cdiv\u003e画像・タイトルのどちらにマウスを乗せても背景色が変わります。また、文字のないところでもクリック（タップ）ができます。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003e新着記事が2列になったときは、画像の青い数字の順で新しい記事が並びます。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003e子テーマのstyle.cssに追加する\u003c/div\u003e\u003cpre\u003e/*--------------------------------\n関連記事表示部分\n---------------------------------*/\n#kanren dl {\nfloat: left;\npadding-left: 0px;\nwidth: 300px;\nheight: 150px;\n}\n\n#kanren dt {\nwidth: 300px;\nheight: 0px;\n}\n\n#kanren dt img {\nwidth: 150px;\nheight: 150px;\n}\n\n#kanren dd {\npadding-left: 150px;\n}\n\n#kanren dd h5 {\nfont-size: 16px;\nfont-weight: normal;\npadding: 0px;\nmargin-bottom: 5px;\noverflow: hidden;\n}\n\n#kanren .clearfix dd h5 a {\ndisplay: block;\nposition: absolute;\nheight: 140px;\nwidth: 140px;\noverflow: hidden;\npadding: 5px 0 5px 5px;\n}\n\n#kanren dl a:hover {\ndisplay: block;\nbackground: #fffff0;\n}\n\n/* 抜粋文字 */\n#kanren .clearfix dd p {\n display:none;\n}\n\n/* 前次 */\n.p-navi dl dt {\n clear: both;\n}\n.p-navi dl dd {\n clear: both;\npadding-left:0px;\n}\n\n/* ウィジェットタイトル */\naside h4 {\n clear: both;\n}\n\n/* メインの幅 */\nmain {\npadding: 20px 20px;\n}\u003c/pre\u003eすでにメインの幅が600pxを越えている場合は、最後の部分は不要です。\u003cbr /\u003e\n\u003cbr /\u003e\n画面のサイズによって1列や2列に切り替わります。（横幅は300pxで固定です。）\u003cbr /\u003e\n676px以下は1列、677～779pxは2列、780px～1056pxは1列、1057px以上で2列表示になります。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku7\"\u003e\u003c/a\u003e \u003ch2\u003e更新日だけを削除\u003c/h2\u003e親テーマsingle.phpの\u003cbr /\u003e\n\u003cpre\u003e\u0026amp;nbsp;\n                \u0026lt;?php if ($mtime \u003d get_mtime('Y/m/d')) echo ' \u0026lt;i class\u003d\"fa fa-repeat\"\u0026gt;\u0026lt;/i\u0026gt;\u0026amp;nbsp; ' , $mtime; ?\u0026gt;\n\u003c/pre\u003eを削除する。 \u003cbr /\u003e\n\u003cbr /\u003e\n投稿日も同時に非表示にする場合は、子テーマのstyle.cssに\u003cbr /\u003e\n\u003cpre\u003e.blogbox {\nbackground: #ffffff;\ndisplay: none;\n}\n\u003c/pre\u003eを追加する。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6496831326755244928"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6496831326755244928"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2015/03/wordpressstinger52.html","title":"WordPress無料レスポンシブテーマSTINGER5のカスタマイズ【その2】"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://3.bp.blogspot.com/-yiD8AHvy8WA/VObr3ki-KcI/AAAAAAAACrE/eFs7XHYQe2Y/s72-c/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-2167315540070885031"},"published":{"$t":"2015-02-19T12:09:00.000+09:00"},"updated":{"$t":"2015-02-19T19:42:40.965+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"STINGER"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"STINGER5をスマホで見ると横ずれするのはRSSと検索フォームが原因だった"},"content":{"type":"html","$t":"WordPress+STINGER5を使用したサイトをスマホで見てみると、横スクロールしないはずなのにカクッと右にスクロールしてしまいました。以前に書いた\u003ca href\u003d\"http://www.memorou.com/2015/02/wordpressstinger5.html\"\u003eSTINGER5のカスタマイズ\u003c/a\u003eでは、自分で追加したコードのせいで横にずれるようになってしまったと思っていましたが、どうやら違ったようです。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e何が原因か検索したところ、STINGER5で横にずれるのは「広告がはみ出ているから」「画像がはみ出してるから」などが挙げられていました。しかし、どれも自分のブログには当てはまりませんでした。\u003cbr /\u003e\n\u003cbr /\u003e\n何より、その原因の解決策を載せているブログを、下記のスマホで表示してみると横ずれしています。さらに調べたところ、ほとんどのサイトで横ずれが発生していました。\u003cbr /\u003e\n\u003ch2\u003e\n検証環境\u003c/h2\u003e\nテーマはstinger5ver20141227です。スマホは、android2.3.4、解像度480×800（ドット）、DensityDPIは240（High）で、テキストサイズと倍率は共に「中」です。\u003cbr /\u003e\n\u003cbr /\u003e\n現在この機種と同等のスペックの機種が、どれほどのシェア率があるかはわかりませんが、気になったので修正することにしました。\u003cbr /\u003e\n\u003ch2\u003e\nスマホで横ずれする原因と解決策\u003c/h2\u003e\n広告も画像もはみ出していないのに、横ずれする場合はこれが原因かもしれません。\u003cbr /\u003e\n\u003cul\u003e\n\u003cli\u003e「RSS購読する」のボタン\u003c/li\u003e\n\u003cli\u003e検索フォーム\u003c/li\u003e\n\u003c/ul\u003e\nこの二つが、デフォルトの状態でもはみ出しているため、横ずれしていました。\u003cbr /\u003e\n\u003cbr /\u003e\n解決策は、子テーマのstyle.cssに下記を追加します。\u003cbr /\u003e\n\u003cpre\u003easide #search {\noverflow: hidden;\n}\n\n.rssbox {\noverflow: hidden;\n}\u003c/pre\u003e\nこれではみ出しは解消されます。（本当ははみ出していても表示しないようになります。）\u003cbr /\u003e\n\u003cbr /\u003e\nもしこれでもはみ出るなら、SNSボタンが原因かもしれません。SNSボタンのデザインを変更したらはみ出さなくなりました。\u003cbr /\u003e\n\u003ch3\u003e\n検索ボタンのサイズ変更\u003c/h3\u003e\nスマホで見ると、検索ボタンだけ小さくなってタップし辛かったため、ボタンのサイズもボックスの高さに合うように変更します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://1.bp.blogspot.com/-uPAZOsaoKOg/VOVPuk0rvRI/AAAAAAAACq0/18RXqoAENRA/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-uPAZOsaoKOg/VOVPuk0rvRI/AAAAAAAACq0/18RXqoAENRA/s1600/01.png\" height\u003d\"123\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\n上の画像はイメージですが、スマホで見るとボタンが小さくなっていました。修正後は少し縦長になります。\u003cbr /\u003e\n\u003cbr /\u003e\n子テーマのstyle.cssに下記を追加します。\u003cbr /\u003e\n\u003cpre\u003e#searchsubmit {\nheight: 100%;\n}\u003c/pre\u003e\nアスペクト比が多少おかしくなるので、元の方がよければそのままで。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/2167315540070885031"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/2167315540070885031"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2015/02/stinger5rss.html","title":"STINGER5をスマホで見ると横ずれするのはRSSと検索フォームが原因だった"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://1.bp.blogspot.com/-uPAZOsaoKOg/VOVPuk0rvRI/AAAAAAAACq0/18RXqoAENRA/s72-c/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-7496770927743391457"},"published":{"$t":"2015-02-13T12:52:00.000+09:00"},"updated":{"$t":"2016-07-11T13:14:25.490+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"STINGER"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"メニューバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"STINGER5のスマホとタブレットサイズ表示時のメニューバーをカスタマイズ"},"content":{"type":"html","$t":"STINGER5のスマホとタブレットサイズで表示したときのメニューバーのカスタマイズです。\u003cbr /\u003e\nデフォルトでは、シンプルなデザインになっているため、どこをクリック（タップ）してもクリックできるように、大きなボタン型に変更しました。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003eカスタマイズは、CSSにコピペするだけで完了します。\u003cbr /\u003e\n\u003cbr /\u003e\nPC表示時のメニューバーカスタマイズは、「\u003ca href\u003d\"http://www.memorou.com/2015/02/wordpressstinger5.html\"\u003eWordPress無料レスポンシブテーマSTINGER5のカスタマイズ\u003c/a\u003e」の10を参考にしてください。\u003cbr /\u003e\n\u003ch2\u003e表示タイプは、1列・2列・3列の3パターン\u003c/h2\u003eタブレットとスマホの列を同じにした場合は3パターン、それぞれ別にしたときは6パターンで、合計9パターンになります。\u003cbr /\u003e\n\u003cbr /\u003e\nMENUをクリックしたときの、それぞれの見た目は画像で確認してください。\u003cbr /\u003e\n\u003cbr /\u003e\nスマホ表示の横幅を320px、タブレットサイズの横幅を779pxとし、2列表示のコードを基準としています。※横幅がぶれる（スクロールする）場合は%を少しずつ下げていってください。\u003cbr /\u003e\n\u003ch3\u003e2列表示\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-i6IR5Shsk0E/VNyDMflGtXI/AAAAAAAACpo/HZ5_tMfcpD4/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-i6IR5Shsk0E/VNyDMflGtXI/AAAAAAAACpo/HZ5_tMfcpD4/s1600/03.png\" height\u003d\"106\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n子テーマのstyle.cssに以下を追加します。\u003cbr /\u003e\n\u003cpre\u003e/*media Queries タブレットサイズ以下のメニュー\n----------------------------------------------------*/\n@media only screen and (max-width: 780px) {\n.acordion_tree li {\nfont-size: 14px;\nborder: 1px solid #ccc;\nmargin-bottom: 1px;\nmargin-left: 1px;\npadding: 0px;\nwidth: 48%;\nborder-radius: 5px;\nbackground-color: #fefefe;\nline-height: 40px;\ntext-align: center;\n}\n\n.acordion_tree li a {\nwidth: 100%;\n}\n.acordion_tree li a:hover {\nbackground-color: #e1dfc0;\nborder-radius: 5px;\n}\n}\n/*タブレットサイズ以下のメニュー　　ここまで\n----------------------------------------------------*/\u003c/pre\u003eフォントサイズやカラーなどは自由に変更可能です。\u003cbr /\u003e\n1列・3列表示の場合は、48%の部分を変更してください。\u003cbr /\u003e\n\u003ch3\u003e1列表示\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-xVwIJ4zNZvs/VNyPxGTgbMI/AAAAAAAACp4/lb3Uy-QISzA/s1600/06.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-xVwIJ4zNZvs/VNyPxGTgbMI/AAAAAAAACp4/lb3Uy-QISzA/s1600/06.png\" height\u003d\"157\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e2列表示の、48%の部分を98%に変えて追加してください。\u003cbr /\u003e\n\u003ch3\u003e3列表示\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-PF3lsuZ7lPA/VNyS7eV7ATI/AAAAAAAACqE/iIbejrkrwsQ/s1600/09.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-PF3lsuZ7lPA/VNyS7eV7ATI/AAAAAAAACqE/iIbejrkrwsQ/s1600/09.png\" height\u003d\"86\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e2列表示の、48%の部分を32%に変えて追加してください。\u003cbr /\u003e\n\u003cbr /\u003e\nスマホサイズで見ると、1つずつのボタンの幅が狭くなるため、文字数が多い場合は2行になって見た目が悪くなることがあります。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-VkOitIu-amE/VN1UVGqLfnI/AAAAAAAACqU/BUuFDLASNwY/s1600/10.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-VkOitIu-amE/VN1UVGqLfnI/AAAAAAAACqU/BUuFDLASNwY/s1600/10.png\" /\u003e\u003c/a\u003e\u003c/div\u003e上の画像（横幅320px）のように、2行になることによって空白ができてしまいます。\u003cbr /\u003e\n\u003cbr /\u003e\n2，3文字程度なら、文字の大きさを小さくしたり、スマホ表示時だけ2列にすることで対応できます。\u003cbr /\u003e\n\u003ch2\u003eスマホサイズの時だけ2列表示\u003c/h2\u003e\u003cdiv\u003e上の3列表示のコードの下に、以下を追加します。\u003c/div\u003e\u003cdiv\u003e\u003cpre\u003e/*media Queries スマホサイズのメニュー\n----------------------------------------------------*/\n@media only screen and (max-width: 380px) {\n.acordion_tree li {\nfont-size: 12px;\nwidth: 48%;\n}\n}\n/*スマホサイズのメニュー　　ここまで\n----------------------------------------------------*/\u003c/pre\u003e\u003c/div\u003e\u003cdiv\u003e横幅が380px以下で、2列表示に切り替わるようになっています。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003e文字サイズも14pxから12pxに変更して、見た目は下の画像のようになります。\u003c/div\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-absSPKzMyTo/VN1dgxK_UhI/AAAAAAAACqk/MCqW9qr4Oq0/s1600/11.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-absSPKzMyTo/VN1dgxK_UhI/AAAAAAAACqk/MCqW9qr4Oq0/s1600/11.png\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e文字数が多くて2行になっていたのが、横幅320pxでも1行できれいにおさまるようになりました。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003eスマホサイズの時だけ1列にする場合は、48%の部分を98%に変えて追加してください。\u003c/div\u003e"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7496770927743391457"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7496770927743391457"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2015/02/stinger5.html","title":"STINGER5のスマホとタブレットサイズ表示時のメニューバーをカスタマイズ"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://4.bp.blogspot.com/-i6IR5Shsk0E/VNyDMflGtXI/AAAAAAAACpo/HZ5_tMfcpD4/s72-c/03.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-3656944126658889274"},"published":{"$t":"2015-02-10T14:48:00.001+09:00"},"updated":{"$t":"2017-02-18T20:02:53.734+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"STINGER"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テーマ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"WordPress無料レスポンシブテーマSTINGER5のカスタマイズ"},"content":{"type":"html","$t":"WordPress国産無料テーマで有名なSTINGERシリーズに、レスポンシブwebデザインテーマSTINGER5が登場して約半年。今までは、3を使わせていただいていましたが5に変更したため、カスタマイズしたポイントをメモします。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003ca href\u003d\"http://wp-fun.com/dl/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eSTINGER5ダウンロード\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\nカスタマイズ時は、WordPress4.1、stinger5ver20141227です。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_446.html\"\u003e子テーマを作成\u003c/a\u003eしてからカスタマイズしています。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"mokuji\"\u003e\u003cdiv class\u003d\"mokuji-title\"\u003eもくじ\u003c/div\u003e\u003col\u003e\u003cli\u003e\u003ca href\u003d\"#moku1\"\u003eタイトルロゴ・ヘッダー画像・色など\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku2\"\u003e検索フォームの変更\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku3\"\u003eRSSボタン・検索フォーム・最近の投稿の削除\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku4\"\u003eSNSボタンの削除からの忍者まとめボタンの追加\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku5\"\u003eファビコンの変更\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku6\"\u003e見出しh2の装飾（吹き出しを解除）\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku7\"\u003e「NEW POST」を「新着記事」に変更\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku8\"\u003e「Message」を「コメント」に変更\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku9\"\u003eリンクテキストのカラーとアンダーライン\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku10\"\u003eメニューバーのカスタマイズ（PC）\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku11\"\u003e「ページトップへ」ボタンのカスタマイズ\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku12\"\u003e関連記事の画像を大きくして抜粋を非表示\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku13\"\u003eNEW POSTの画像を大きくして抜粋を非表示\u003c/a\u003e\u003c/li\u003e\n\u003c/ol\u003e\u003c/div\u003eここになければ\u003ca href\u003d\"http://www.memorou.com/2015/03/wordpressstinger52.html\"\u003eSTINGER5のカスタマイズ【その2】\u003c/a\u003eにあるかも\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku1\"\u003e\u003c/a\u003e \u003ch2\u003e外観＞カスタマイズ\u003c/h2\u003eWordPressのバージョンも上がってカスタマイズしやすくなったのか、外観のカスタマイズから簡単に変更できる箇所が結構ありました。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-ZOyUfAqZZC0/VNGxTKqW-vI/AAAAAAAACn0/ec2kPQLRHFU/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-ZOyUfAqZZC0/VNGxTKqW-vI/AAAAAAAACn0/ec2kPQLRHFU/s1600/01.png\" height\u003d\"212\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eロゴ画像\u003c/h3\u003eタイトルをロゴ画像に変更するときはここから。ロゴ画像をクリックして、画像を選択するだけで完了します。\u003cbr /\u003e\n\u003cbr /\u003e\nスマホ表示のことを考え、サイズは300×60で作成しました。\u003cbr /\u003e\nロゴの作成は、\u003ca href\u003d\"http://www.memorou.com/2014/03/blog-post.html\" target\u003d\"\"\u003eブログを書くときに使ってる役立つ無料ソフト（ツール）\u003c/a\u003eで作成しています。\u003cbr /\u003e\n\u003ch3\u003eサイトタイトルとキャッチフレーズ\u003c/h3\u003eサイトタイトルとキャッチフレーズは、設定の一般からも変更可能です。\u003cbr /\u003e\n\u003ch3\u003e基本色（キーカラー）\u003c/h3\u003e基本色では、H2の文字や背景、検索やRSS（購読するの部分）などの色を変更できる。トップページだけではなく、個別ページなど好きなページに移動でき、実際に色の変化を見ながら変更できます。\u003cbr /\u003e\n\u003cbr /\u003e\nRSSと検索バーは、変更後にデフォルトに戻すと、元の色と違う色になってしまいます。実際のデフォルトカラーは、RSSが#87BF31、検索バーが#CCCです。\u003cbr /\u003e\n\u003ch3\u003eヘッダー画像\u003c/h3\u003eヘッダー画像を非表示にしたり、変更したりできます。推奨サイズは980×250\u003cbr /\u003e\n\u003ch3\u003eウィジェット\u003c/h3\u003eウィジェットは、外観のウィジェットからも変更可能です。\u003cbr /\u003e\n必要のないものは削除したり、順番を移動したりできます。ひとまず、最近の投稿と検索バーは二つ必要ないので削除します。\u003cbr /\u003e\n\u003cbr /\u003e\n追加で、プロフィールと人気の投稿を表示します。人気の投稿は、「WordPress Popular Posts」というプラグインを使って表示させます。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/10/blog-post_20.html\"\u003eワードプレスのサイドバーにプロフィールを表示する方法\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku2\"\u003e\u003c/a\u003e \u003ch2\u003e外観＞テーマの編集\u003c/h2\u003e\u003cdiv\u003e外観のテーマの編集からカスタマイズします。\u003c/div\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-JpxY3bTIi4A/VNL5yCkfIVI/AAAAAAAACoY/dMznkHrNVYI/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-JpxY3bTIi4A/VNL5yCkfIVI/AAAAAAAACoY/dMznkHrNVYI/s1600/03.png\" height\u003d\"205\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e特別な記載がない限り、子テーマフォルダ内のファイルを編集します。\u003cbr /\u003e\n\u003ch2\u003e検索フォームの変更\u003c/h2\u003eデフォルトでは、おしゃれな検索ボックスになっています。それをよく見る地味なデザインに変更します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-UZRYxSpkfh4/VNL46s_EqmI/AAAAAAAACoQ/xlDxNNXwlT4/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-UZRYxSpkfh4/VNL46s_EqmI/AAAAAAAACoQ/xlDxNNXwlT4/s1600/02.png\" height\u003d\"31\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n目指すのは上の画像です。基本色の検索バーで#FFFにしておきます。\u003cbr /\u003e\n用意するものは、50×32の検索ボタン（png画像）です。子テーマのimagesフォルダに入れておきます。\u003cbr /\u003e\n\u003cbr /\u003e\nstyle.cssに\u003cbr /\u003e\n\u003cpre\u003e#s {\n border:1px\u0026nbsp;solid #ccc;\n}\u003c/pre\u003eを追加します。\u003cbr /\u003e\n\u003cbr /\u003e\n子テーマに、親テーマのsearchform.phpをまるまるコピーして貼り付けます。searchform.php内の\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;input type\u003d\"image\" src\u003d\"\u0026lt;?php echo get_template_directory_uri(); ?\u0026gt;\u003c/pre\u003eの部分を\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;input type\u003d\"image\" src\u003d\"\u0026lt;?php echo get_stylesheet_directory_uri(); ?\u0026gt;\u003c/pre\u003eに書き換えます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku3\"\u003e\u003c/a\u003e \u003ch2\u003eRSSボタン・検索フォーム・最近の投稿の削除\u003c/h2\u003e\u003cdiv\u003e親テーマを編集します。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e親テーマのsidebar.php内の\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;!-- RSSボタンです --\u0026gt;\n  \u0026lt;div class\u003d\"rssbox\"\u0026gt; \u0026lt;a href\u003d\"\u0026lt;?php echo home_url(); ?\u0026gt;/?feed\u003drss2\"\u0026gt;\u0026lt;i class\u003d\"fa fa-rss-square\"\u0026gt;\u0026lt;/i\u0026gt;\u0026amp;nbsp;購読する\u0026lt;/a\u0026gt; \u0026lt;/div\u0026gt;\n  \u0026lt;!-- RSSボタンここまで --\u0026gt;\n  \u0026lt;?php get_search_form(); //検索フォーム表示  ?\u0026gt;\n  \u0026lt;!-- 最近のエントリ --\u0026gt;\n  \u0026lt;h4 class\u003d\"menu_underh2\"\u0026gt; NEW POST\u0026lt;/h4\u0026gt;\n  \u0026lt;?php get_template_part('newpost');?\u0026gt;\n  \u0026lt;!-- /最近のエントリ --\u0026gt;\u003c/pre\u003eの部分を削除します。\u003cbr /\u003e\n\u003cbr /\u003e\nこれで、外観のウィジェットから追加して、好きな位置に並び替えることができます。\u003cbr /\u003e\nただし、デザインは検索フォーム以外変わってしまいます。そのままのデザインがいい場合は、sidebar.phpで順番を入れ替えてください。\u003cbr /\u003e\n\u003cbr /\u003e\nsidebar.phpで追加した方が、ウィジェットで追加した方より上にきます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku4\"\u003e\u003c/a\u003e \u003ch2\u003eSNSボタンの削除からの忍者まとめボタンの追加\u003c/h2\u003e親テーマを編集します。\u003cbr /\u003e\n\u003ch3\u003e単一記事\u003c/h3\u003e単一記事の投稿の\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;/div\u0026gt;\n\u0026lt;?php get_template_part('sns'); //ソーシャルボタン読み込み ?\u0026gt;\n\u0026lt;?php endwhile; else: ?\u0026gt;\u003c/pre\u003e部分の\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;?php get_template_part('sns'); //ソーシャルボタン読み込み ?\u0026gt;\u003c/pre\u003eを削除するだけ。\u003cbr /\u003e\n\u003cbr /\u003e\nここに忍者おまとめボタンを追加します。\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;!-- SNSボタンです --\u0026gt;\n忍者おまとめボタンのコード\n  \u0026lt;!-- SNSボタンここまで --\u0026gt;\u003c/pre\u003eを追加します。\u003cbr /\u003e\n\u003cbr /\u003e\n記事タイトルの下に入れるなら、\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;/h1\u0026gt;\u003c/pre\u003eの下にコードを追加します。\u003cbr /\u003e\n\u003cbr /\u003e\nサイドバーアドセンスの下に入れるなら、\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;!-- RSSボタンです --\u0026gt;\u003c/pre\u003eの上にコードを追加します。\u003cbr /\u003e\n\u003ch3\u003eホームページ\u003c/h3\u003e単一記事の投稿の\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;!-- /section --\u0026gt; \n\u0026lt;?php get_template_part('sns-top'); //ソーシャルボタン読み込み ?\u0026gt; \n        \u0026lt;!-- ページナビ --\u0026gt;\u003c/pre\u003e部分の\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;?php get_template_part('sns'); //ソーシャルボタン読み込み ?\u0026gt;\u003c/pre\u003eを削除するだけ。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku5\"\u003e\u003c/a\u003e \u003ch2\u003eファビコンの変更\u003c/h2\u003e親テーマを編集します。\u003cbr /\u003e\n\u003cbr /\u003e\n用意するのはlogo.icoとapple-touch-icon-precomposed.png（75×75）にFTPソフトです。FTPソフトは、フリーで配布されています。また、サーバーを借りている人は、用意する必要はないかもしれません。\u003cbr /\u003e\n\u003cbr /\u003e\nファビコンの作成までは、\u003ca href\u003d\"http://www.memorou.com/2013/10/wordpressstinger_19.html\"\u003eファビコン用素材の作り方\u003c/a\u003eを参考にしてください。完成したら、名前をlogoに変更します。\u003cbr /\u003e\n\u003cbr /\u003e\nこれを、親テーマのimagesフォルダのファイルと置き換えます。（この時点で元のファイルは消えるため、必要に応じてバックアップを取っておいてください。）\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-uAMLvk0uPKE/VNRHUcj7Q7I/AAAAAAAACoo/qe0OKN8Xv2E/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-uAMLvk0uPKE/VNRHUcj7Q7I/AAAAAAAACoo/qe0OKN8Xv2E/s1600/05.png\" height\u003d\"275\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eこれで完成です。\u003cbr /\u003e\n更新しても変わらないときは、ブラウザのキャッシュを削除してください。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku6\"\u003e\u003c/a\u003e \u003ch2\u003e見出しh2の装飾（吹き出しを解除）\u003c/h2\u003e親テーマを編集します。\u003cbr /\u003e\n\u003cbr /\u003e\n親テーマのstyle.cssのh2を、コメントアウトまたは削除します。\u003cbr /\u003e\nコメントアウトするのは、h2で検索した2,3個目と5,6個目です。\u003cbr /\u003e\n\u003cpre\u003e/* 中見出し */\n\nh2 {\n position: relative;\n background: #f3f3f3;\n color: #1a1a1a;\n font-size: 20px;\n line-height: 27px;\n margin-bottom: 20px;\n padding-top: 10px;\n padding-right: 20px;\n padding-bottom: 10px;\n padding-left: 20px;\n}\n/*\nh2:after {\n content: '';\n position: absolute;\n border-top: 10px solid #f3f3f3;\n border-right: 10px solid transparent;\n border-left: 10px solid transparent;\n bottom: -10px;\n left: 30px;\n border-radius: 2px;\n}\nh2:before {\n content: '';\n position: absolute;\n border-top: 10px solid #f3f3f3;\n border-right: 10px solid transparent;\n border-left: 10px solid transparent;\n bottom: -10px;\n left: 30px;\n}\n*/\n\u003c/pre\u003eこのように、afterとbeforeの部分をコメントアウトします。同様に、5,6個目もコメントアウトします。\u003cbr /\u003e\n\u003cbr /\u003e\n記事内のh2を装飾するときは、子テーマのstyle.cssに.post h2と追加する。\u003cbr /\u003e\n\u003cbr /\u003e\nh4の背景が何をやっても背景色が変わらないときは、外観カスタマイズの基本色で変更すると変わるかもしれません。公開日時、コメント、関連記事などにも対応しているため注意が必要です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku7\"\u003e\u003c/a\u003e \u003ch2\u003e「NEW POST」を「新着記事」に変更\u003c/h2\u003e親テーマを編集します。\u003cbr /\u003e\n\u003cbr /\u003e\n親テーマのsidebar.phpの\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;h4 class\u003d\"menu_underh2\"\u0026gt; NEW POST\u0026lt;/h4\u0026gt;\u003c/pre\u003eの、NEW POSTを新着記事に変更します。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku8\"\u003e\u003c/a\u003e \u003ch2\u003e「Message」を「コメント」に変更\u003c/h2\u003e親テーマを編集します。\u003cbr /\u003e\n\u003cbr /\u003e\n親テーマのcomments.phpの\u003cbr /\u003e\n\u003cpre\u003e$args\u003darray('title_reply' \u003d\u0026gt; 'Message',\u003c/pre\u003eの、Messageをコメントに変更します。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku9\"\u003e\u003c/a\u003e \u003ch2\u003eリンクテキストのカラーとアンダーライン\u003c/h2\u003e\u003cdiv\u003e途中まで親テーマを編集します。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003e子テーマに追加したけど変わらなかったため、親テーマを編集しました。\u003c/div\u003e\u003cdiv\u003eリンクテキストにマウスを乗せたときの色は、デフォルトが#b22222になっているので、変えたい場所のコードを変更する。\u003c/div\u003e\u003cbr /\u003e\n\u003cdiv\u003eマウスを乗せたときの基本になる色を変更するときは、\u003c/div\u003e\u003cdiv\u003e\u003cpre\u003e/* リンクにマウスオーバーした時の色 */\na:hover {\n color: #b22222;\n}\u003c/pre\u003e\u003c/div\u003e\u003cdiv\u003eのコードを変更する。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003e関連記事とNEW POSTの記事タイトルにマウスを乗せたときの色を変更するときは、\u003c/div\u003e\u003cdiv\u003e\u003cpre\u003e#kanren .clearfix dd h5 a:hover {\n color: #b22222;\n}\u003c/pre\u003e\u003c/div\u003e\u003cdiv\u003eのコードを変更する。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003eリンクにマウスを乗せる前のアンダーラインをすべて消します。\u003c/div\u003e\u003cdiv\u003e子テーマのstyle.cssに\u003c/div\u003e\u003cdiv\u003e\u003cpre\u003e/* リンクのアンダーライン */\na {\n text-decoration: none;\n}\u003c/pre\u003e\u003c/div\u003e\u003cdiv\u003eを追加する。\u003c/div\u003e\u003cbr /\u003e\n\u003ca name\u003d\"moku10\"\u003e\u003c/a\u003e \u003ch2\u003eメニューバーのカスタマイズ（PC）\u003c/h2\u003e外観のメニューから、、表示させたいページやカテゴリを追加します。詳しくは、\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_6.html\"\u003eメニューバーにカテゴリーと固定ページを表示させる方法\u003c/a\u003eを参考にしてください。\u003cbr /\u003e\nスマホとタブレットのメニューバーカスタマイズは、\u003ca href\u003d\"http://www.memorou.com/2015/02/stinger5.html\"\u003eSTINGER5のスマホとタブレットサイズ表示時のメニューバーをカスタマイズ\u003c/a\u003eを参考にしてください。\u003cbr /\u003e\n\u003cbr /\u003e\n※STINGER5でメニューに階層を付けると、そのまま表示されてしまいます。ドロップ（プル）ダウンメニューにしたい場合は、カスタマイズが必要です。このとき、\u003ca href\u003d\"https://support.google.com/adsense/answer/1346295?hl\u003dja\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003e広告の配置に関するポリシー\u003c/a\u003eの「許可されない配置方法の例」をみたらわかるとおり、メニューの下にアドセンスを設置する場合は、ポリシー違反にならないように注意しなくてはなりません。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-tgrQZKCsGD4/VNWaw7xNsZI/AAAAAAAACo4/DMK2K_mMPos/s1600/06.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-tgrQZKCsGD4/VNWaw7xNsZI/AAAAAAAACo4/DMK2K_mMPos/s1600/06.png\" height\u003d\"15\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e目指すのは上の画像です。上記の理由により、ドロップダウンメニューには対応していません。\u003cbr /\u003e\n子テーマのstyle.cssに追加します。\u003cbr /\u003e\n\u003cpre\u003e/*media Queries PCサイズ\n----------------------------------------------------*/\n@media only screen and (min-width: 780px) {\nnav {\n background-color: #fafafa;\n padding: 2px 0;\n border: 1px solid #ccc;\n border-radius: 5px;\n -webkit-border-radius: 5px;\n -moz-border-radius: 5px;\n}\n\nnav li {\n border-right: 1px solid #ccc;\n border-left: none;\n}\n\nnav li a {\n line-height: 30px;\n display: block;\n margin: -7px -8px;\n padding: 0 8px;\n}\n\nnav li a:hover {\n background-color: #fff;\n}\n}\u003c/pre\u003e色やサイズ、線の太さなど自由に変更可能です。\u003cbr /\u003e\n枠の角丸をなくしたいときは、rediusの3箇所を削除する。\u003cbr /\u003e\n文字にマウスを乗せたときだけ見た目を変えたいなら、display:blockを削除する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku11\"\u003e\u003c/a\u003e \u003ch2\u003e「ページトップへ」ボタンのカスタマイズ\u003c/h2\u003e変更するのは以下\u003cbr /\u003e\n\u003cul\u003e\u003cli\u003eボタンを大きく\u003c/li\u003e\n\u003cli\u003eボタンを丸く\u003c/li\u003e\n\u003cli\u003eマウスオーバーで色を濃く\u003c/li\u003e\n\u003cli\u003e矢印を大きく\u003c/li\u003e\n\u003c/ul\u003e子テーマのstyle.cssに追加します。\u003cbr /\u003e\n\u003cpre\u003e/* ページトップ */\n#page-top {\nfont-size: 32px;\n}\n\n#page-top a {\nborder-radius: 50%;\n}\n\n#page-top a:hover {\nbackground: #000;\n}\n\n.fa-angle-up:before {\ncontent: \"\\f077\" !important;\n}\u003c/pre\u003e\u003cbr /\u003e\nまたは、footer.phpの\u003cbr /\u003e\n\u003cpre\u003eclass\u003d\"fa fa-angle-up\"\u003c/pre\u003eを\u003cbr /\u003e\n\u003cpre\u003eclass\u003d\"fa fa-arrow-up\"\u003c/pre\u003eなどに書き換える\u003cbr /\u003e\nアイコンは\u003ca href\u003d\"http://fortawesome.github.io/Font-Awesome/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eFont Awesome\u003c/a\u003eから選びます。 \u003cbr /\u003e\n色の濃さも、style.cssのopacityの数字（デフォルトでは0.3）を大きくしていくと濃くなっていきます。\u003cbr /\u003e\n\u003cbr /\u003e\nどちらの方法が正しいかわかりませんが、どちらの方法でも変更は可能です。 \u003cbr /\u003e\n\u003ca name\u003d\"moku12\"\u003e\u003c/a\u003e \u003ch2\u003e関連記事の画像を大きくして抜粋を非表示\u003c/h2\u003e\u003cdiv\u003eNEW POSTのデザインも同時に変化します。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e変更後の完成予想図はこんな感じです。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-E_WKl3Eevys/VNmB5HDaM9I/AAAAAAAACpI/embcj4l5hSQ/s1600/07.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-E_WKl3Eevys/VNmB5HDaM9I/AAAAAAAACpI/embcj4l5hSQ/s1600/07.png\" height\u003d\"320\" width\u003d\"226\" /\u003e\u003c/a\u003e\u003c/div\u003e記事の抜粋を非表示にして、280×200の画像を最大で6件表示するようにしました。上の画像の数字は、画像本来のサイズです。\u003cbr /\u003e\n\u003cbr /\u003e\n画像は、ブラウザの横幅が1067px以上で2列、780px～1066pxで1列、689px～779pxで2列、686px以下で1列になります。\u003cbr /\u003e\n\u003ch3\u003e抜粋を非表示\u003c/h3\u003e抜粋を表示させておきたい場合は、ここを飛ばしてください。ただし、次に指定する高さを変更する必要があります。\u003cbr /\u003e\n\u003cbr /\u003e\n子テーマのstyle.cssに追加します。\u003cbr /\u003e\n\u003cpre\u003e/* 抜粋非表示 */\n#kanren .clearfix dd p {\n display:none;\n}\u003c/pre\u003e\u003ch3\u003e画像サイズの変更\u003c/h3\u003e子テーマのstyle.cssに追加します。（無駄なコードが合ったら削除してください。）\u003cbr /\u003e\n\u003cpre\u003e/*--------------------------------\n関連記事表示部分\n---------------------------------*/\n#kanren dl{\n float: left;\n padding-left: 5px;\n width: 280px;\n height: 250px;\n}\n/* タイトル名 */\n#kanren dd h5 {\n font-size: 16px;\n font-weight: bold;\n padding: 0px;\n margin-bottom: 5px;\n}\n#kanren dt {\n width: 280px;\n height:210px;\n}\n#kanren dt img {\n width: 280px;\n height:200px\n}\n#kanren dd {\n clear: both;\n padding-left:0px;\n}\u003c/pre\u003e抜粋を非表示にしていない場合は、250pxの部分を変更してください。\u003cbr /\u003e\nもう少し画像を小さくして3つ並べたいときなどは、下の画像を参考に、サイズを変更してください。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-ztcth_Yj5_w/VNmNd3DSnuI/AAAAAAAACpY/toBEBJI70jI/s1600/08.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-ztcth_Yj5_w/VNmNd3DSnuI/AAAAAAAACpY/toBEBJI70jI/s1600/08.png\" height\u003d\"169\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n次に、親テーマのfunctions.phpのアイキャッチサムネイルに、\u003cbr /\u003e\n\u003cpre\u003eadd_image_size('thumb280',280,200,true);\u003c/pre\u003eを追加します。\u003cbr /\u003e\n今回は、280×200の画像にしたいので280，200としています。\u003cbr /\u003e\n\u003cbr /\u003e\n続いて、親テーマのkanren.phpを編集します。（これは、子テーマを作成してもOKです。やることは一緒です。）\u003cbr /\u003e\n\u003cpre\u003e'posts_per_page'\u003d\u0026gt; 10,\u003c/pre\u003eの10を6に変更します。これは関連記事を表示する件数です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;?php the_post_thumbnail( 'thumb150' ); ?\u0026gt;\u003c/pre\u003eの150を280に変更します。これはfunctions.phpに追加した名前です。\u003cbr /\u003e\n例えば、functions.phpで('abc123',560,400,true)としたなら、\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;?php the_post_thumbnail( 'abc123' ); ?\u0026gt;\u003c/pre\u003eとします。\u003cbr /\u003e\n\u003cbr /\u003e\n関連記事のカスタマイズはここまでです。この変更に伴い、PREV・NEXTの表示とサイドバーが崩れることがあります。\u003cbr /\u003e\n\u003cbr /\u003e\nそうならないように、子テーマのstyle.cssに追加してください。\u003cbr /\u003e\n\u003cpre\u003e/* PREV NEXT */\n.p-navi dl dt {\n clear: both;\n}\n.p-navi dl dd {\n clear: both;\npadding-left:0px;\n}\n\n/* ウィジェットタイトル */\naside h4 {\n clear: both;\n}\u003c/pre\u003e\u003cbr /\u003e\n\u003cstrike\u003e※旧型のAndroid（バージョン2.3.4 解像度800×480）で確認したところ、横幅が足りず横にスクロールしてしまい、画面内にすべてがおさまらなくなったため、現在改善策を検討中です。\u003c/strike\u003e原因はこれではありませんでした。詳しくは\u003ca href\u003d\"http://www.memorou.com/2015/02/stinger5rss.html\"\u003eSTINGER5をスマホで見ると横ずれするのはRSSと検索フォームが原因だった\u003c/a\u003eへ\u003cbr /\u003e\n\u003cbr /\u003e\n【追記】\u003cbr /\u003e\n記事タイトルが長くて2行以内におさまらないときに、3行目以降を省略する場合は、上の#kanren dd h5に下記を追加してください。\u003cbr /\u003e\n\u003cpre\u003eheight: 44px;\noverflow: hidden;\n\u003c/pre\u003e文字の大きさを変えた場合は、44pxも変更してください。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku13\"\u003e\u003c/a\u003e \u003ch2\u003eNEW POSTの画像を大きくして抜粋を非表示\u003c/h2\u003e親テーマのnewpost.phpを編集します。（これは、子テーマを作成してもOKです。やることは一緒です。）\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;?php the_post_thumbnail( 'thumb150' ); ?\u0026gt;\u003c/pre\u003eの150を280に変更します。\u003cbr /\u003e\n\u003cbr /\u003e\n詳しくは、上の\u003ca href\u003d\"#moku12\"\u003e関連記事の画像を大きくして抜粋を非表示\u003c/a\u003eを参考にしてください。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3656944126658889274"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3656944126658889274"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2015/02/wordpressstinger5.html","title":"WordPress無料レスポンシブテーマSTINGER5のカスタマイズ"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://3.bp.blogspot.com/-ZOyUfAqZZC0/VNGxTKqW-vI/AAAAAAAACn0/ec2kPQLRHFU/s72-c/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-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-81502998863240631"},"published":{"$t":"2014-05-22T11:29:00.000+09:00"},"updated":{"$t":"2017-02-19T22:43:40.820+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ページ内リンク"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"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\u003ca href\u003d\"http://www.memorou.com/2013/11/wordpress_21.html\" target\u003d\"_blank\"\u003eサンプル1\u003c/a\u003e　\u003ca href\u003d\"http://www.memorou.com/2014/04/wordpress-hatch.html\" target\u003d\"_blank\"\u003eサンプル2\u003c/a\u003e\u003cbr /\u003e\n上記2つは、このブログで実際にページ内リンクを使って目次を作っている記事です。\u003cbr /\u003e\n\u003ch2\u003e基本コード\u003c/h2\u003eサンプル1の1～3を見出しa、見出しb、見出しcとするとこうなります。\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;a href\u003d\"#mokuji1\"\u0026gt;見出しa\u0026lt;/a\u0026gt;\n\u0026lt;a href\u003d\"#mokuji2\"\u0026gt;見出しb\u0026lt;/a\u0026gt;\n\u0026lt;a href\u003d\"#mokuji3\"\u0026gt;見出しc\u0026lt;/a\u0026gt;\n\u003c/code\u003e\u003c/pre\u003eこれをリンク元とします。\u003cbr /\u003e\n\u003cbr /\u003e\n次はリンク先です。\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;a name\u003d\"mokuji1\"\u0026gt;\u0026lt;/a\u0026gt;\n\u0026lt;a name\u003d\"mokuji2\"\u0026gt;\u0026lt;/a\u0026gt;\n\u0026lt;a name\u003d\"mokuji3\"\u0026gt;\u0026lt;/a\u0026gt;\n\u003c/code\u003e\u003c/pre\u003emokuji1,2,3の部分は、半角英数字で任意のアンカー名をつけられます。\u003cbr /\u003e\n\u003cbr /\u003e\nこれが基本となります。\u003cbr /\u003e\n\u003ch2\u003e設置例\u003c/h2\u003e実際に設置してみると\u003cbr /\u003e\n\u003ca name\u003d\"mokuji\"\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch3\u003e目次\u003c/h3\u003e\u003col\u003e\u003cli\u003e\u003ca href\u003d\"#mokuji1\"\u003e見出しa\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#mokuji2\"\u003e見出しb\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#mokuji3\"\u003e見出しc\u003c/a\u003e\u003c/li\u003e\n\u003c/ol\u003e\u003ch2 id\u003d\"mokuji1\"\u003e見出しaです\u003c/h2\u003e見出しaの文章…\u003cbr /\u003e\n見出しaの文章…\u003cbr /\u003e\n\u003ch2 id\u003d\"mokuji2\"\u003e見出しbです\u003c/h2\u003e見出しbの文章…\u003cbr /\u003e\n見出しbの文章…\u003cbr /\u003e\n\u003ch2 id\u003d\"mokuji3\"\u003e見出しcです\u003c/h2\u003e見出しcの文章…\u003cbr /\u003e\n見出しcの文章…\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"#mokuji\"\u003e目次へ戻る\u003c/a\u003e  \u003cbr /\u003e\n\u003ch2\u003e設置例のコード\u003c/h2\u003e設置例の「目次」から「目次へ戻る」までのコードです。\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;h3 id\u003d\"mokuji\"\u0026gt;目次\u0026lt;/h3\u0026gt;\n\u0026lt;ol\u0026gt;\n\u0026lt;li\u0026gt;\u0026lt;a href\u003d\"#mokuji1\"\u0026gt;見出しa\u0026lt;/a\u0026gt;\u0026lt;/li\u0026gt;\n\u0026lt;li\u0026gt;\u0026lt;a href\u003d\"#mokuji2\"\u0026gt;見出しb\u0026lt;/a\u0026gt;\u0026lt;/li\u0026gt;\n\u0026lt;li\u0026gt;\u0026lt;a href\u003d\"#mokuji3\"\u0026gt;見出しc\u0026lt;/a\u0026gt;\u0026lt;/li\u0026gt;\n\u0026lt;/ol\u0026gt;\n\n\u0026lt;h2 id\u003d\"mokuji1\"\u0026gt;\n見出しaです\u0026lt;/h2\u0026gt;\n\u0026lt;p\u0026gt;見出しaの文章…\u0026lt;/p\u0026gt;\n\u0026lt;p\u0026gt;見出しaの文章…\u0026lt;/p\u0026gt;\n\n\u0026lt;h2 id\u003d\"mokuji2\"\u0026gt;\n見出しbです\u0026lt;/h2\u0026gt;\n\u0026lt;p\u0026gt;見出しbの文章…\u0026lt;/p\u0026gt;\n\u0026lt;p\u0026gt;見出しbの文章…\u0026lt;/p\u0026gt;\n\n\u0026lt;h2 id\u003d\"mokuji3\"\u0026gt;\n見出しcです\u0026lt;/h2\u0026gt;\n\u0026lt;p\u0026gt;見出しcの文章…\u0026lt;/p\u0026gt;\n\u0026lt;p\u0026gt;見出しcの文章…\u0026lt;/p\u0026gt;\n\n\u0026lt;a href\u003d\"#mokuji\"\u0026gt;目次へ戻る\u0026lt;/a\u0026gt;\n\u003c/code\u003e\u003c/pre\u003eこのコードを使う場合、Bloggerなら「HTML」モード、WordPressなら「テキスト」モードを選択してください。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-v7cmciPqq-o/U3wqNXQV0uI/AAAAAAAABzc/aVfXfoe8qsI/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/-v7cmciPqq-o/U3wqNXQV0uI/AAAAAAAABzc/aVfXfoe8qsI/s320/01.png\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch2\u003e自動目次作成プラグイン\u003c/h2\u003eWordPressには自動で目次を作成してくれる便利なプラグインがあります。\u003cbr /\u003e\n「Table of Contents Plus」を使うと簡単に目次が設置できます。\u003cbr /\u003e\n\u003ch2\u003eサイト内の別ページの特定の場所にリンク\u003c/h2\u003e自サイト内の、他ページの特定の場所にジャンプさせる方法\u003cbr /\u003e\nアンカー（ジャンプの着地点）側を \u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;div id\u003d\"a01\"\u0026gt;ジャンプ\u0026lt;/div\u0026gt;\n\u003c/code\u003e\u003c/pre\u003eとします。divやa01の部分は変更可能です。\u003cbr /\u003e\nジャンプのスタート地点は \u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;a href\u003d\"ページのURL#a01\"\u0026gt;ジャンプ\u0026lt;/a\u0026gt;\u003c/code\u003e\u003c/pre\u003eとなります。\u003cbr /\u003e\nこのとき、別タブで開かせたいときは \u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;a href\u003d\"ページのURL#a01\" target\u003d\"_blank\"\u0026gt;ジャンプ\u0026lt;/a\u0026gt;\u003c/code\u003e\u003c/pre\u003eとします。ページのURLは着地点のページURLを入力します。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/81502998863240631"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/81502998863240631"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/05/blog-post_22.html","title":"ページ内リンクで目次を設置する方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"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/-v7cmciPqq-o/U3wqNXQV0uI/AAAAAAAABzc/aVfXfoe8qsI/s72-c/01.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-3889869096010717021"},"published":{"$t":"2013-11-21T17:27:00.000+09:00"},"updated":{"$t":"2017-02-19T22:54:26.632+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"STINGER"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"バナー広告"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"AdSense"}],"title":{"type":"text","$t":"WordPressのヘッダーや記事下など好きな位置にアドセンスを設置する方法"},"content":{"type":"html","$t":"WordPressのヘッダー内のタイトル横やサイドバー、記事の下やメニューバーの下など全部で6箇所にアドセンス広告を貼る方法です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nコンテンツ向けのAdSenseユニットは1ページに3つまで配置できます。\u003cbr /\u003e\nまた、リンクユニットも1ページに3つまで配置できるので、自分のサイトにあった配置や、サイズ、スタイルを考えます。 \u003cbr /\u003e\n\u003cbr /\u003e\n効果的な配置やデザインのヒントなどは\u003ca href\u003d\"https://support.google.com/adsense/answer/2973336?hl\u003dja\u0026amp;ref_topic\u003d1250106\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eAdSenseを最大限に活用する\u003c/a\u003eで確認できます。\u003cbr /\u003e\n\u003cbr /\u003e\nWordPressのバージョンは3.6.1で、テーマはSTINGER3を使用しています。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2015/02/wordpressstinger5.html\"\u003eSTINGER5のカスタマイズはこちら\u003c/a\u003e\u003cbr /\u003e\n\u003cdiv class\u003d\"mokuji\"\u003e\u003cdiv class\u003d\"mokuji-title\"\u003eもくじ\u003c/div\u003e\u003col\u003e\u003cli\u003e\u003ca href\u003d\"#moku1\"\u003eヘッダー(タイトル横)にAdSense広告を貼る方法\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku2\"\u003eサイドバーにAdSense広告を貼る方法\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku3\"\u003e記事の下にAdSense広告を貼る方法\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku4\"\u003e関連記事の下にAdSense広告を貼る方法\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku5\"\u003e固定ページにAdSense広告を貼る方法\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href\u003d\"#moku6\"\u003eメニューバーの下にAdSense広告を貼る方法\u003c/a\u003e\u003c/li\u003e\n\u003c/ol\u003e\u003c/div\u003e\u003ca name\u003d\"moku1\"\u003e\u003c/a\u003e  \u003ch2\u003eヘッダー(タイトル横)にAdSense広告を貼る方法\u003c/h2\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-A6NFxZaax6U/Uo247B0Y_HI/AAAAAAAAAlo/Bph_57_Bevk/s1600/%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%A8%AA_2.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"83\" src\u003d\"https://4.bp.blogspot.com/-A6NFxZaax6U/Uo247B0Y_HI/AAAAAAAAAlo/Bph_57_Bevk/s320/%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%A8%AA_2.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n以前にも記事にした、タイトルロゴの横にアドセンスなどのバナー広告を貼る方法の別バージョンの記録です。\u003cbr /\u003e\n\u003cbr /\u003e\nSEOやPageSpeed Insightsのパフォーマンスなどを考えずに、とにかくヘッダー部分に広告を貼ることだけを考えました。\u003cbr /\u003e\n\u003ch3\u003estyle.cssへの記述\u003c/h3\u003e子テーマのstyle.cssへ以下の記述を追加します。\u003cbr /\u003e\n\u003cpre\u003e/*-----------------------------\nヘッダー分割\n-----------------------------*/\n#container #header #header-in #h-l {\npadding-top: 10px;\npadding-right: 0px;\npadding-bottom: 10px;\npadding-left: 0px;\nfloat: left;\nwidth: 50%;\n}\n\n#container #header #header-in #h-2 {\npadding-top: 10px;\npadding-bottom: 10px;\npadding-right: 0px;\npadding-left: 0px;\ntext-align: left;\nfloat: right;\nwidth: 468px;\n}\n\u003c/pre\u003eまず、画像の回り込みの指定をしたあと、ヘッダーを分割するためにh-lの横幅を50%にして左半分だけを使うようにしました。(ちなみに、ｴｲﾁｰｲﾁではなく、ｴｲﾁｰｴﾙです。)\u003cbr /\u003e\nタイトルに使っている画像やテキストが大きかった場合のどうなるかは試していません。\u003cbr /\u003e\n\u003cbr /\u003e\n次に、h-2でヘッダー右側の位置や横幅を指定します。\u003cbr /\u003e\n\u003cbr /\u003e\nCSS側の設定はこれで終わりなので、「ファイルを更新」をクリックして今度はheader.phpを開きます。\u003cbr /\u003e\n\u003ch3 class\u003d\"main\"\u003eheader.phpへの記述\u003c/h3\u003eまずは、子テーマのheader.phpで、\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;!-- /#header --\u0026gt;\n\u0026lt;div id\u003d\"gazou\"\u0026gt;\n\u003c/pre\u003eを探します。\u003cbr /\u003e\n見つけたら、\u0026lt;!-- /#header --\u0026gt;の前（上）に以下の記述を追加します。\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;div id\u003d\"header-in\"\u0026gt;\n\u0026lt;div id\u003d\"h-2\"\u0026gt;広告のソースコード\n\u0026lt;!-- /#h-2 --\u0026gt;\u0026lt;/div\u0026gt;\n\u0026lt;!-- /#header-in --\u0026gt;\u0026lt;/div\u0026gt;\n\u003c/pre\u003e次に、貼り付けたいソースコードを用意（コピー）します。大きさはヘッダーの横幅の半分よりも小さいものを選びます。今回は468×60の横長のものにしました。\u003cbr /\u003e\n用意ができたら、広告のソースコードと書かれた場所に貼り付け（ペースト）ます。\u003cbr /\u003e\n\u003cbr /\u003e\n「ファイルを更新」をクリックしたら完成です。\u003cbr /\u003e\n\u003cbr /\u003e\nこの作業を応用してタイトルの横に検索ボックスや、SNSボタンなどを設置することが可能です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2015/05/wordpress.html\"\u003eタイトル横に広告が設置できる人気のWordPressテーマ8選\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku2\"\u003e\u003c/a\u003e \u003ch2\u003eサイドバーにAdSense広告を貼り付ける方法\u003c/h2\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-yc8AcDXqK54/UoxGZRk6eEI/AAAAAAAAAfQ/5yUdgavQlkI/s1600/%E3%82%B5%E3%82%A4%E3%83%89ad.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"176\" src\u003d\"https://4.bp.blogspot.com/-yc8AcDXqK54/UoxGZRk6eEI/AAAAAAAAAfQ/5yUdgavQlkI/s320/%E3%82%B5%E3%82%A4%E3%83%89ad.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nこの方法は、STINGER3でウィジェットの「Googleアドセンス用」を使用せずに、サイドバーの好きな位置に表示する方法の記録です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003eサイドバーの一番上にAdSense広告を表示する方法\u003c/h3\u003eまずは、子テーマのsidebar.phpの一番上の方から下記の記述を探します。\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;?php get_template_part('ad');?\u0026gt;\n\u0026lt;?php endif; ?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u0026lt;?php get_search_form(); ?\u0026gt;\n\u0026lt;div class\u003d\"kizi02\"\u0026gt;\n\u0026lt;!--最近のエントリ--\u0026gt;\n\u003c/pre\u003e見つけたら、\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;?php get_search_form(); ?\u0026gt;\n\u003c/pre\u003eの前（上）にAdSenseコードを貼り付けます。「ファイルを更新」を押したら完成です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003eサイドバーのその他の場所に表示する方法\u003c/h3\u003eSTINGER3では、デフォルトでサイト内検索と新着記事が表示されるようになっている関係で、「Googleアドセンス用」を使わずに一番上に広告を表示したい場合は、上記のような方法をとりましたが、その他の場所（検索の下を除く）に表示したい場合はウィジェットを使うことにより簡単に表示することができます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003eウィジェットの追加\u003c/h3\u003eまず、外観からウィジェット選択します。ウィジェットの選択画面になるので、「利用できるウィジェット」から「テキスト」を探して、「サイドバー1」の広告を表示させたい場所へドラッグアンドドロップします。\u003cbr /\u003e\n\u003cbr /\u003e\n次に、AdSenseコードをテキストウィジェットに貼り付けて「保存」を押したら完成です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku3\"\u003e\u003c/a\u003e \u003ch2\u003e記事の下にAdSense広告を貼り付ける方法\u003c/h2\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-S9OvMXGmnz0/Uow8s_b5cCI/AAAAAAAAAe0/vjXUlfcQ8wM/s1600/%E8%A8%98%E4%BA%8B%E4%B8%8Bad.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"195\" src\u003d\"https://1.bp.blogspot.com/-S9OvMXGmnz0/Uow8s_b5cCI/AAAAAAAAAe0/vjXUlfcQ8wM/s320/%E8%A8%98%E4%BA%8B%E4%B8%8Bad.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n上の画像のように記事の下に左寄せでAdSense広告を表示します。\u003cbr /\u003e\n\u003cbr /\u003e\nCSSへの記述は特にないので、子テーマのsingle.phpへAdSenseコードを直接貼り付けます。\u003cbr /\u003e\nまず、single.phpで下記の記述を探します。\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;/p\u0026gt;\n\u0026lt;/div\u0026gt;\n\u0026lt;?php the_content(); ?\u0026gt;\n\u0026lt;?php wp_link_pages(); ?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u0026lt;div style\u003d\"padding:20px 0px;\"\u0026gt;\n\u0026lt;?php get_template_part('ad');?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u0026lt;?php get_template_part('sns');?\u0026gt;\n\u0026lt;?php endwhile; else: ?\u0026gt;\n\u0026lt;p\u0026gt;記事がありません\u0026lt;/p\u0026gt;\u003c/pre\u003e見つけたら、\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;div style\u003d\"padding:20px 0px;\"\u0026gt;\n\u0026lt;?php get_template_part('ad');?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u003c/pre\u003eの部分を消してAdSenseコード貼るか、その前（上）に貼り付けたら完成です。\u003cbr /\u003e\n「ファイルを更新」を押すのを忘れずに。\u003cbr /\u003e\n\u003cbr /\u003e\nここは、STINGER3でウィジェットの「Googleアドセンス用」を使用した場合にデフォルトで広告が表示される場所です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku4\"\u003e\u003c/a\u003e  \u003ch2\u003e関連記事の下にAdSense広告を貼る方法\u003c/h2\u003e関連記事とコメントの間に表示させる方法です。\u003cbr /\u003e\nこちらも同じく、子テーマのsingle.phpへAdSenseコードを直接貼り付けます。\u003cbr /\u003e\nまず、single.phpで下記の記述を探します。\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;!--/kizi--\u0026gt; \n\u0026lt;!--/関連記事--\u0026gt;\n\u0026lt;div style\u003d\"padding:20px 0px;\"\u0026gt;\n\u0026lt;?php get_template_part('ad');?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u0026lt;?php comments_template(); ?\u0026gt;\n\u0026lt;!--ページナビ--\u0026gt;\n\u003c/pre\u003e見つけたら、\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;div style\u003d\"padding:20px 0px;\"\u0026gt;\n\u0026lt;?php get_template_part('ad');?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u003c/pre\u003eの部分を消してAdSenseコード貼るか、その前（上）に貼り付けたら完成です。\u003cbr /\u003e\n「ファイルを更新」を押すのを忘れずに。\u003cbr /\u003e\n\u003cbr /\u003e\nここも、STINGER3でウィジェットの「Googleアドセンス用」を使用した場合にデフォルトで広告が表示される場所です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku5\"\u003e\u003c/a\u003e  \u003ch2\u003e固定ページにAdSense広告を貼り付ける方法\u003c/h2\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-S9OvMXGmnz0/Uow8s_b5cCI/AAAAAAAAAe4/PxxR1lV5EuQ/s1600/%25E8%25A8%2598%25E4%25BA%258B%25E4%25B8%258Bad.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"195\" src\u003d\"https://4.bp.blogspot.com/-S9OvMXGmnz0/Uow8s_b5cCI/AAAAAAAAAe4/PxxR1lV5EuQ/s320/%25E8%25A8%2598%25E4%25BA%258B%25E4%25B8%258Bad.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n上の画像のように固定ページの記事下にAdSense広告を表示する方法を記録します。\u003cbr /\u003e\n\u003cbr /\u003e\nまず、page.phpで下記の記述を探します。\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;/h1\u0026gt;\n\u0026lt;?php the_content(); ?\u0026gt;\n\u0026lt;?php wp_link_pages(); ?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u0026lt;div style\u003d\"padding:20px 0px;\"\u0026gt;\n\u0026lt;?php get_template_part('ad');?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u003c/pre\u003e見つけたら、\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;div style\u003d\"padding:20px 0px;\"\u0026gt;\n\u0026lt;?php get_template_part('ad');?\u0026gt;\n\u0026lt;/div\u0026gt;\n\u003c/pre\u003eの部分を消してAdSenseコード貼るか、その前（上）に貼り付けたら完成です。\u003cbr /\u003e\n「ファイルを更新」を押すのを忘れずに。\u003cbr /\u003e\n\u003cbr /\u003e\nSTINGER3でウィジェットの「Googleアドセンス用」を使用した場合にデフォルトで広告が表示される場所です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d\"moku6\"\u003e\u003c/a\u003e  \u003ch2 class\u003d\"main\"\u003eメニューバーの下にAdSenseを貼る方法\u003c/h2\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-6CoDHJY9daY/UoxDxWukJVI/AAAAAAAAAfE/a1wczSM0I7Q/s1600/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E4%B8%8B.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"116\" src\u003d\"https://4.bp.blogspot.com/-6CoDHJY9daY/UoxDxWukJVI/AAAAAAAAAfE/a1wczSM0I7Q/s320/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E4%B8%8B.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n上の画像のようにメニューバーの下にセンターリングをしてAdSense広告を表示します。\u003cbr /\u003e\n\u003cbr /\u003e\nまずは、子テーマのstyle.cssに下記を追加します。\u003cbr /\u003e\n\u003cpre\u003e.centerad{\ntext-align: center;\npadding-top: 10px;\npadding-right: 0px;\npadding-bottom: 0px;\npadding-left: 0px;\nmargin-left : auto ;/*-----IE用-----*/\nmargin-right : auto ;/*-----IE用-----*/\n}\n\u003c/pre\u003e追加したら「ファイルを更新」をクリックしてcssの変更は完了です。\u003cbr /\u003e\n真ん中に表示したくない場合は、text-alignの行とIE用の2行の、合わせて3行を消してください。\u003cbr /\u003e\n\u003cbr /\u003e\n次に子テーマのheader.phpの一番下にある下記の記述を探します。\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;!--/pcnavi--\u0026gt;\n\u0026lt;?php\n}\n?\u0026gt;\n\u0026lt;div id\u003d\"wrap\"\u0026gt;\n\u0026lt;div id\u003d\"wrap-in\"\u0026gt;\n\u0026lt;div id\u003d\"main\"\u0026gt;\n\u003c/pre\u003e見つけたら、pcnaviの下の行（phpの上の行）に下記の記述を追加します。\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;div class\u003d\"centerad\"\u0026gt;\nここにアドセンスコードを貼り付ける\n\u0026lt;/div\u0026gt;\n\u003c/pre\u003e次に、貼り付けたいソースコードを用意（コピー）します。サイトのレイアウトにもよりますが、ビッグバナーなどの横長の広告がいいでしょう。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3889869096010717021"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3889869096010717021"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/11/wordpress_21.html","title":"WordPressのヘッダーや記事下など好きな位置にアドセンスを設置する方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https://4.bp.blogspot.com/-A6NFxZaax6U/Uo247B0Y_HI/AAAAAAAAAlo/Bph_57_Bevk/s72-c/%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%A8%AA_2.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-6788413370287980579"},"published":{"$t":"2013-11-15T22:48:00.000+09:00"},"updated":{"$t":"2017-02-25T20:29:04.647+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"amazon"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"WordPressにamazonアソシエイトのPublisher Studio β版を設置してみた"},"content":{"type":"html","$t":"どうやら、8月くらいからあったらしい「Publisher Studio β版」に、今更気付いたので試しに設置してみました。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nこのPublisher Studioは、従来のamazonアソシエイトとは異なり、自分のサイト上で商品リンクの作成ができるようです。\u003cbr /\u003e\n\u003ch2\u003ePublisher Studioの登録方法\u003c/h2\u003e早速、新規サイトの登録をしてみます。\u003cbr /\u003e\n\u003cbr /\u003e\nまずは従来どおりアソシエイトにサインインします。\u003cbr /\u003e\nPublisher Studio βタブをクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-2RBUfWNA_hk/UoxU738XsDI/AAAAAAAAAgs/STdCDGYUUCI/s1600/1.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-2RBUfWNA_hk/UoxU738XsDI/AAAAAAAAAgs/STdCDGYUUCI/s320/1.png\" height\u003d\"40\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nPublisher Studioの管理画面になるので、下のほうにある新規サイトの登録の「サイト/サービス名」に登録するサイト名を入力して「JavaScriptを生成する」ボタンをクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-K5MhgJb2tp4/UoxWHglebOI/AAAAAAAAAg0/i4RVNHs4p2M/s1600/2.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-K5MhgJb2tp4/UoxWHglebOI/AAAAAAAAAg0/i4RVNHs4p2M/s320/2.png\" height\u003d\"103\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nすると、JavaScriptコードが表示されるので、そのコードをコピーして、サイトのフッターに貼り付けます。\u003cbr /\u003e\n\u003ch3\u003eWordPressのフッターにコードを貼り付ける方法\u003c/h3\u003e現在使用しているテーマはSTINGER３ですが、どのテーマでも貼り付ける場所にそれほど差はないと思われます。\u003cbr /\u003e\n\u003cbr /\u003e\n外観のテーマの編集から、footer.phpを選択します。\u003cbr /\u003e\nphpの一番下までいき、\u003cbr /\u003e\n\u003cpre\u003e\u0026lt;/body\u0026gt;\u0026lt;/html\u0026gt;\n\u003c/pre\u003eの上にJavaScriptコードを貼り付けて「ファイルを更新」をクリックしたら完成です。\u003cbr /\u003e\n\u003ch2\u003ePublisher Studioの設定\u003c/h2\u003eJavaScriptを生成した時点で登録済みサイトに「あれこれ」が作成されますので、非表示になっていたら表示に切り替えます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-pxW8JNJ0GUk/UoxW5yPpoYI/AAAAAAAAAg8/ryg4MPIKnPI/s1600/3.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-pxW8JNJ0GUk/UoxW5yPpoYI/AAAAAAAAAg8/ryg4MPIKnPI/s320/3.png\" height\u003d\"68\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n次に「ツールバーを有効にする」をクリックします。\u003cbr /\u003e\nこれで、登録したサイトを見てみると、画面上部にamazon\u0026nbsp;Publisher Studioのツールバーが表示されます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-0N2fwlJaJ4c/UoxXCrPb8VI/AAAAAAAAAhE/uvu_xuDevCE/s1600/4.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-0N2fwlJaJ4c/UoxXCrPb8VI/AAAAAAAAAhE/uvu_xuDevCE/s320/4.png\" height\u003d\"49\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eログイン前のツールバーの説明\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-pTuIORNPtdk/UoxXLuJx1VI/AAAAAAAAAhM/LYmHNbpi-x4/s1600/5.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-pTuIORNPtdk/UoxXLuJx1VI/AAAAAAAAAhM/LYmHNbpi-x4/s320/5.png\" height\u003d\"41\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cul\u003e\u003cli\u003eオレンジで囲った「amazon\u0026nbsp;Publisher Studio」をクリックすると、amazonアソシエイト画面に移動します。\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\u003ch3\u003eログイン後のツールバーの説明\u003c/h3\u003eログイン後はツールバーが下の画像のように変化します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-u0K7559vVEk/UoxXXSejrXI/AAAAAAAAAhU/-r9EF-S0nfs/s1600/6.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-u0K7559vVEk/UoxXXSejrXI/AAAAAAAAAhU/-r9EF-S0nfs/s320/6.png\" height\u003d\"36\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cul\u003e\u003cli\u003eピンクで囲った「タグ」をクリックして、商品リンクを作成します。テキストリンクを作成する場合は、ページモードを選択します。\u003c/li\u003e\n\u003cli\u003e緑で囲った「お問合せ」からメールが送れます。\u003c/li\u003e\n\u003cli\u003e青で囲った歯車ボタンから設定が出来ます。\u003c/li\u003e\n\u003c/ul\u003e\u003ch2\u003e商品リンク作成方法\u003c/h2\u003eテキストに商品リンクを作成してみます。\u003cbr /\u003e\n\u003cbr /\u003e\nまずは、「タグ」にマウスを乗せて、ページモードを選択します。\u003cbr /\u003e\nリンクを作成したいテキストをサイト上で選択します。今回は試しに「テレビ」で試します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-shdzeuTUMqQ/UoxXi_AvsbI/AAAAAAAAAhc/aLH28k6Ik_Q/s1600/7.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-shdzeuTUMqQ/UoxXi_AvsbI/AAAAAAAAAhc/aLH28k6Ik_Q/s320/7.png\" height\u003d\"48\" 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://2.bp.blogspot.com/-Epw0DDErcxo/UoxXqXEcRrI/AAAAAAAAAhk/7SQ6twOiPXo/s1600/8.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-Epw0DDErcxo/UoxXqXEcRrI/AAAAAAAAAhk/7SQ6twOiPXo/s320/8.png\" height\u003d\"279\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n緑で囲った部分で、検索内容の絞込みが可能です。\u003cbr /\u003e\n\u003cbr /\u003e\n1ページ目にないときは、右下のピンクで囲った矢印をクリックします。\u003cbr /\u003e\n\u003cbr /\u003e\nリンクしたい商品が見つかったら、その商品をクリックします。\u003cbr /\u003e\n\u003cbr /\u003e\n商品の選択が完了すると、画面右上に「テキストリンクが追加されました」と表示さて完成です。\u003cbr /\u003e\n\u003cbr /\u003e\n試したページはこちらです。\u003cstrike\u003ehttp://arecore.tk/gundam/\u003c/strike\u003e\u003cbr /\u003e\nしっかりとリンクされていました。\u003cbr /\u003e\n\u003ch3\u003eリンクの表示と非表示\u003c/h3\u003eリンクの表示は個別に解除する方法と、まとめて解除する方法があります。\u003cbr /\u003e\n\u003cbr /\u003e\n全体をまとめて非表示にする場合は、上の「Publisher Studioの設定」で説明した「表示」を「非表示」に変更します。\u003cbr /\u003e\nこれは、非表示になるだけで、表示にするとまたリンクが有効になります。\u003cbr /\u003e\n\u003cbr /\u003e\n個別に非表示にする場合は、リンクした文字にマウスを乗せて、ゴミ箱マークをクリックします。\u003cbr /\u003e\nこの非表示はリンク自体が解除されます。\u003cbr /\u003e\n\u003cbr /\u003e\nツールバーの消し方は、JavaScriptコードの削除以外、残念ながらわかりません。\u003cbr /\u003e\n消し方がわかる方は教えてください。 "},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6788413370287980579"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6788413370287980579"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/11/wordpressamazonpublisher-studio.html","title":"WordPressにamazonアソシエイトのPublisher Studio β版を設置してみた"}],"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/-2RBUfWNA_hk/UoxU738XsDI/AAAAAAAAAgs/STdCDGYUUCI/s72-c/1.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-8129441217237620875"},"published":{"$t":"2013-10-30T06:03:00.000+09:00"},"updated":{"$t":"2017-02-25T20:39:07.536+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":"Google+"},{"scheme":"http://www.blogger.com/atom/ns#","term":"プロフィール"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"プロフィールなどにGoogle+のフォローボタンを設置する方法"},"content":{"type":"html","$t":"Google+に登録してあることを前提に話を進めます。\u003cbr /\u003e\n\u003cbr /\u003e\nまず、\u003ca href\u003d\"https://developers.google.com/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eGoogle Developers\u003c/a\u003eにアクセスします。\u003cbr /\u003e\nMaster our APIs and TechnologiesからGoogle+を選択します。\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://4.bp.blogspot.com/-Jn2IZcZ5gao/Uow5H7NFNPI/AAAAAAAAAeQ/xlxpUezENIQ/s1600/01.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"99\" src\u003d\"http://4.bp.blogspot.com/-Jn2IZcZ5gao/Uow5H7NFNPI/AAAAAAAAAeQ/xlxpUezENIQ/s320/01.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n左サイドバーのWebsitesをクリックします。\u003cbr /\u003e\n\u003cul\u003e\u003cli\u003e\u003cspan style\u003d\"color: red;\"\u003e+1 button\u003c/span\u003e\u003c/li\u003e\n\u003cli\u003e\u003cspan style\u003d\"color: red;\"\u003eBadge\u003c/span\u003e\u003c/li\u003e\n\u003cli\u003eEmbedded posts\u003c/li\u003e\n\u003cli\u003e\u003cspan style\u003d\"color: red;\"\u003eFollow button\u003c/span\u003e\u003c/li\u003e\n\u003cli\u003eInteractive posts\u003c/li\u003e\n\u003cli\u003ePeople and profiles\u003c/li\u003e\n\u003cli\u003eContent recommendations\u003c/li\u003e\n\u003c/ul\u003eの７つの項目があるのですが、今回は上から1,2,4番目でどのデザインがいいか選びます。\u003cbr /\u003e\n\u003ch2\u003eデザインの選択\u003c/h2\u003e基本的に左側でデザインのカスタムをして、右側のコードを設置したい場所に貼り付けます。プレビューも見れるので表示を確認しながら設定できます。\u003cbr /\u003e\n\u003ch3\u003e+1 button\u003c/h3\u003e\u003cspan style\u003d\"color: #339966;\"\u003eSize\u003c/span\u003e：ボタンのサイズ、４つから選べます。\u003cbr /\u003e\n\u003cspan style\u003d\"color: #339966;\"\u003eAnnotation\u003c/span\u003e：+1した人の人数の表示の仕方\u003cbr /\u003e\n\u003cspan style\u003d\"color: #339966;\"\u003eWidth\u003c/span\u003e：全体の幅\u003cbr /\u003e\n\u003cspan style\u003d\"color: #339966;\"\u003eLanguage\u003c/span\u003e：表示する言語\u003cbr /\u003e\n\u003cbr /\u003e\n設定ができたら右下のコードをコピーして貼り付ける。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-mxxwmBoEyRE/Uow6KKFs80I/AAAAAAAAAeY/XH6zxxfmpEs/s1600/+1.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"163\" src\u003d\"http://1.bp.blogspot.com/-mxxwmBoEyRE/Uow6KKFs80I/AAAAAAAAAeY/XH6zxxfmpEs/s320/+1.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eGoogle+ Badge\u003c/h3\u003e\u003cspan style\u003d\"color: #339966;\"\u003eGoogle+ user\u003c/span\u003e：ユーザーの表示\u003cbr /\u003e\n\u003cspan style\u003d\"color: #339966;\"\u003eFeatures\u003c/span\u003e：アイコンにするかバッジにするか\u003cbr /\u003e\n\u003cspan style\u003d\"color: #339966;\"\u003eLayout\u003c/span\u003e：レイアウト、Landscapeにするとシンプルになります。\u003cbr /\u003e\n\u003cspan style\u003d\"color: #339966;\"\u003eWidth\u003c/span\u003e：全体のサイズ、Widthになっているが高さも変わります。\u003cbr /\u003e\n\u003cspan style\u003d\"color: #339966;\"\u003eColor theme\u003c/span\u003e：背景色\u003cbr /\u003e\n\u003cspan style\u003d\"color: #339966;\"\u003eCover Photo\u003c/span\u003e：上に表示されている背景を使うかどうか\u003cbr /\u003e\n\u003cspan style\u003d\"color: #339966;\"\u003eTagline\u003c/span\u003e：キャッチコピー？\u003cbr /\u003e\n\u003cspan style\u003d\"color: #339966;\"\u003eLanguage\u003c/span\u003e：使用する言語\u003cbr /\u003e\n\u003cbr /\u003e\n設定ができたら右下のコードをコピーして貼り付ける。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-kSmi0_OvGaA/Uow6WpCX2aI/AAAAAAAAAeg/oDwaVOOROG4/s1600/badge.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"240\" src\u003d\"http://1.bp.blogspot.com/-kSmi0_OvGaA/Uow6WpCX2aI/AAAAAAAAAeg/oDwaVOOROG4/s320/badge.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eGoogle+ Follow button\u003c/h3\u003e\u003cspan style\u003d\"color: #339966;\"\u003eGoogle+ user\u003c/span\u003e：ユーザーの表示\u003cbr /\u003e\n\u003cspan style\u003d\"color: #339966;\"\u003eButton size\u003c/span\u003e：ボタンのサイズ、３種類から選べます。\u003cbr /\u003e\n\u003cspan style\u003d\"color: #339966;\"\u003eAnnotation\u003c/span\u003e：フォローしている人数の表示方法、横に並べるか、縦に並べるか\u003cbr /\u003e\n\u003cspan style\u003d\"color: #339966;\"\u003eLanguage\u003c/span\u003e：使用する言語\u003cbr /\u003e\n\u003cbr /\u003e\n設定ができたら右下のコードをコピーして貼り付ける。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-ucK-zfWPS9k/Uow6e_jDxRI/AAAAAAAAAeo/E121Pox_1mA/s1600/+follow.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"175\" src\u003d\"http://2.bp.blogspot.com/-ucK-zfWPS9k/Uow6e_jDxRI/AAAAAAAAAeo/E121Pox_1mA/s320/+follow.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch2\u003eGoogle+ボタンの利用方法\u003c/h2\u003e上記で取得したコードを自作のプロフィールで利用する方法を説明します。\u003cbr /\u003e\n\u003ch3\u003eプロフィールの作成方法\u003c/h3\u003e手順は３工程です。\u003cbr /\u003e\n\u003col\u003e\u003cli\u003eテキストウィジェットの設置\u003c/li\u003e\n\u003cli\u003e画像のアップロード\u003c/li\u003e\n\u003cli\u003e画像URLと+1ボタンコードの貼り付け\u003c/li\u003e\n\u003c/ol\u003e簡単な流れとしてはこのようになります。Google+1ボタンと同じようにツイッターボタンをプロフィールに設置することも出来ます。\u003cbr /\u003e\n\u003cbr /\u003e\n基本的には、以前別のサイトで書いた記事と同じなので、そちらを参考にしてください。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/10/blog-post_20.html\"\u003eワードプレスのサイドバーにプロフィールを表示する方法\u003c/a\u003e"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/8129441217237620875"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/8129441217237620875"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/10/google.html","title":"プロフィールなどにGoogle+のフォローボタンを設置する方法"}],"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/-Jn2IZcZ5gao/Uow5H7NFNPI/AAAAAAAAAeQ/xlxpUezENIQ/s72-c/01.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-5015450257959902164"},"published":{"$t":"2013-10-20T22:45:00.000+09:00"},"updated":{"$t":"2017-02-25T20:43:28.977+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":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"ワードプレスのサイドバーにプロフィールを表示する方法"},"content":{"type":"html","$t":"今回はタイトルのとおり、サイドバーにプロフィールを表示する方法を記録するが、この方法はプラグインを使わずにHTMLを記述して作成します。\u003cbr /\u003e\n\u003cbr /\u003e\n手順は簡単で、たったの3工程でできます。プラグインを使うと重くなるから使いたくないなと思っている方は試してみてください。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n先に完成画像を載せておきます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-Ru1QwZ_zOao/UmPb9Vd42ZI/AAAAAAAAAVc/-b5CU2AKqoU/s1600/%E3%83%86%E3%82%B9%E3%83%88%E3%83%97%E3%83%AD%E3%83%95.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"83\" src\u003d\"https://1.bp.blogspot.com/-Ru1QwZ_zOao/UmPb9Vd42ZI/AAAAAAAAAVc/-b5CU2AKqoU/s320/%E3%83%86%E3%82%B9%E3%83%88%E3%83%97%E3%83%AD%E3%83%95.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch2\u003eプロフィール作成の準備\u003c/h2\u003eダッシュボードの外観からウィジェットを選択します。ウィジェットの選択画面になるので、右側の逆三角形をクリックして、テキストウィジェットを移動します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-FEjxggh_aMw/UmPRh_cF1EI/AAAAAAAAAVI/QKyXSYsThM8/s1600/%E3%82%A6%E3%82%A3%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88%E7%A7%BB%E5%8B%95.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"145\" src\u003d\"https://1.bp.blogspot.com/-FEjxggh_aMw/UmPRh_cF1EI/AAAAAAAAAVI/QKyXSYsThM8/s320/%E3%82%A6%E3%82%A3%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88%E7%A7%BB%E5%8B%95.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e移動するとテキストウィジェットが開くので、タイトルとプロフィールに表示する内容を書き込んでいきます。書き込むときにHTMLで以下のように書き込みます。\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;img src\u003d\"画像のURL\" align\u003d\"left\" vapace\u003d\"5\" hspace\u003d\"5\"\u0026gt;\n性別：男\u0026lt;br /\u0026gt;\n年齢：秘密\u0026lt;br /\u0026gt;\nHTML、CSS、PHP初心者。\u0026lt;br /\u0026gt;\u003c/code\u003e\u003c/pre\u003e箇条書きではなく文章にしてもいいです。書き込む内容は任意で変更してください。\u003cbr /\u003e\n画像のURLは後で取得して置き換えます。\u003cbr /\u003e\n\u003ch3\u003eul liで作るプロフィール\u003c/h3\u003eまた、上記はbrで改行していますが、liを使う方法もあります。\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;img src\u003d\"画像のURL\" align\u003d\"left\" vapace\u003d\"5\" hspace\u003d\"5\"\u0026gt;\n\u0026lt;ul\u0026gt;\n\u0026lt;li\u0026gt;性別：男\u0026lt;/li\u0026gt;\n\u0026lt;li\u0026gt;年齢：秘密\u0026lt;/li\u0026gt;\n\u0026lt;li\u0026gt;HTML、CSS、PHP初心者。\u0026lt;/li\u0026gt;\n\u0026lt;/ul\u0026gt;\u003c/code\u003e\u003c/pre\u003eCSSで装飾する場合は、classを追加しておきます。\u003cbr /\u003e\n\u003ch3\u003eツイッターボタンの設置\u003c/h3\u003eツイッターボタンを設置する場合は下のサイトでソースコードを取得後に、テキストウィジェットに貼り付けます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-R_VYTyhgOaI/UmPaIhvMuEI/AAAAAAAAAVU/8bzjaW5VIs4/s1600/%E3%83%84%E3%82%A4%E3%83%83%E3%82%BF%E3%83%BC%E3%83%9C%E3%82%BF%E3%83%B3.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"239\" src\u003d\"https://3.bp.blogspot.com/-R_VYTyhgOaI/UmPaIhvMuEI/AAAAAAAAAVU/8bzjaW5VIs4/s320/%E3%83%84%E3%82%A4%E3%83%83%E3%82%BF%E3%83%BC%E3%83%9C%E3%82%BF%E3%83%B3.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n\u003ca href\u003d\"https://twitter.com/about/resources/buttons\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eツイートボタン\u003c/a\u003e作成\u003cbr /\u003e\n\u003ch2\u003eプロフィールに使う画像をアップする\u003c/h2\u003eまずは、アップロードする画像を用意します。\u003cbr /\u003e\nサイズは100px前後で十分でしょう。今回は84px×84pxの画像を使いました。\u003cbr /\u003e\n用意ができたらワードプレスにアップロードします。\u003cbr /\u003e\n\u003ch3\u003e画像のアップロード方法\u003c/h3\u003eダッシュボードのメディアから新規追加を選択します。\u003cbr /\u003e\n\u003cbr /\u003e\nメディアのアップロード画面になり、ここにファイルをドロップまたはファイルを選択と出るので好きなほうを選んでください。\u003cbr /\u003e\nファイルを選択をクリックするとブラウザが開くのでアップロードしたい画像を選んで開くボタンを押します。\u003cbr /\u003e\n\u003cbr /\u003e\nすると、メディアのアップロード画面の下の方に、今アップした画像が小さく出るので右側にある編集をクリックします。\u003cbr /\u003e\nメディアの編集画面になるので、ファイルのURLをコピーして、上の「画像のURL」部分に貼り付けます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/10/google.html\"\u003eプロフィールなどにGoogle+のフォローボタンを設置する方法\u003c/a\u003e"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/5015450257959902164"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/5015450257959902164"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/10/blog-post_20.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":"https://1.bp.blogspot.com/-Ru1QwZ_zOao/UmPb9Vd42ZI/AAAAAAAAAVc/-b5CU2AKqoU/s72-c/%E3%83%86%E3%82%B9%E3%83%88%E3%83%97%E3%83%AD%E3%83%95.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-6470308854103130723"},"published":{"$t":"2013-10-04T15:41:00.001+09:00"},"updated":{"$t":"2017-02-25T23:17:33.913+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"フッターに背景色をつけてブラウザ画面いっぱいに広げる方法"},"content":{"type":"html","$t":"今回はフッターに背景色をつけた後に、フッター全体をブラウザ画面いっぱいまで広げる方法の記録です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-owdL8wABleQ/UuiSjj0VUyI/AAAAAAAABc0/4qTeuvmN_eU/s1600/%E8%89%B2%E9%89%9B%E7%AD%86.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-owdL8wABleQ/UuiSjj0VUyI/AAAAAAAABc0/4qTeuvmN_eU/s320/%E8%89%B2%E9%89%9B%E7%AD%86.jpg\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch2\u003eフッターに背景色をつける方法\u003c/h2\u003e上級者向けの背景で、外側の背景、メインの背景、ヘッダーの背景はあるのにフッターは無かったので、CSSに追加してフッターの背景に色をつけることにしました。\u003cbr /\u003e\n\u003cbr /\u003e\nCSSへの記述は簡単で以下のとおりです。\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\n/* フッターの色 */\nfooter{\nbackground-color:#FF0000;\n}\n\u003c/code\u003e\n\u003c/pre\u003e今回はわかりやすくするために、背景の色を赤にしてあるが、カラーコードを書き換えるだけで好きな色に変更できます。\u003cbr /\u003e\n\u003cbr /\u003e\n広げないでそのままでいいときはここまで。\u003cbr /\u003e\n\u003ch2\u003eフッターをブラウザ画面いっぱいに広げる方法\u003c/h2\u003eブログやホームページでよく見るデザインです。\u003cbr /\u003e\n\u003cbr /\u003e\nCSSへの記述\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\nhtml {\noverflow: auto;\n}\n\nbody{\noverflow: hidden; /*はみ出た部分をどうするか*/\n}\n\nfooter{\nmargin: 0 -200%; /* マージンを追記 */\npadding: 0 200%; /* マージンで横にはみ出した部分を戻す */\n}\n\u003c/code\u003e\n\u003c/pre\u003eまず、bodyではみ出た部分を表示しないように設定する。\u003cbr /\u003e\n\u003cbr /\u003e\nその後で、フッターの幅を広げてあげます。\u003cbr /\u003e\n今回は、200%にしているが、250%でも300%でも500%でも大きければ問題ないようです。\u003cbr /\u003e\n\u003cbr /\u003e\n同様にヘッダーやメニューバーも広げることが出来る。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6470308854103130723"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6470308854103130723"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/10/blog-post_4.html","title":"フッターに背景色をつけてブラウザ画面いっぱいに広げる方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"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/-owdL8wABleQ/UuiSjj0VUyI/AAAAAAAABc0/4qTeuvmN_eU/s72-c/%E8%89%B2%E9%89%9B%E7%AD%86.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-4170876602915976441"},"published":{"$t":"2013-10-02T12:49:00.000+09:00"},"updated":{"$t":"2017-02-25T23:08:16.312+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"画像"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"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\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-42_Fnyg4HfU/Ut34_cEX7TI/AAAAAAAABYM/3SfVsJkuT7o/s1600/%E3%82%B0%E3%83%A9%E3%82%B9.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-42_Fnyg4HfU/Ut34_cEX7TI/AAAAAAAABYM/3SfVsJkuT7o/s1600/%E3%82%B0%E3%83%A9%E3%82%B9.jpg\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\ncssの記述は以下の通り\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\n/* マウスオーバーで画像半透明 */\na img {\nfilter:alpha(opacity\u003d100);\n-moz-opacity: 1;\np; opacity: 1;\n}\n\na:hover img {\nfilter:alpha(opacity\u003d70);\n-moz-opacity: 0.7;\nopacity: 0.7;\n}\n\n\u003c/code\u003e\u003c/pre\u003eと記述するだけでOK\u003cbr /\u003e\nそれぞれ、IE、firefox、chromeなどに対応しているので、ブラウザで確認しながら変更していくこと。\u003cbr /\u003e\n\u003cbr /\u003e\na imgが何もしていないときの表示\u003cbr /\u003e\na:hover imgがマウスを画像に乗せたときの表示\u003cbr /\u003e\nopacityの後の数字が透明度になっていて、大きくなるほど濃くなっていく。\u003cbr /\u003e\n\u003cbr /\u003e\nまた、背景に画像を使っていると、背景の画像が透けて見えることがあるので、注意が必要。\u003cbr /\u003e\n\u003cbr /\u003e\nそんなときは、CSSでclassを指定して背景を白にすると見えやすくなる。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/4170876602915976441"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/4170876602915976441"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/10/blog-post.html","title":"マウスオーバーで画像を半透明にする方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://1.bp.blogspot.com/-42_Fnyg4HfU/Ut34_cEX7TI/AAAAAAAABYM/3SfVsJkuT7o/s72-c/%E3%82%B0%E3%83%A9%E3%82%B9.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-1975545265298435785"},"published":{"$t":"2013-04-05T15:10:00.001+09:00"},"updated":{"$t":"2017-02-25T23:31:06.796+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カスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"AdSense"}],"title":{"type":"text","$t":"ワードプレス　サイドバーにバナー広告を貼る方法"},"content":{"type":"html","$t":"昔からどのサイトでもよく見かける、サイドバーの上部にバナー広告を表示する方法です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eワードプレスのサイドバーにバナー広告を貼る方法\u003c/h2\u003e先に完成時のイメージ画像を載せておきます。\u003cbr /\u003e\n\u003cbr /\u003e\n下の画像のように、サイドバーの一番上、メニューバーの下に設置します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-_h5Ft9bngAE/UV5qavyp6tI/AAAAAAAAAJA/CgfLZFGK0BI/s1600/%E3%82%B5%E3%82%A4%E3%83%89%E5%BA%83%E5%91%8A.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-_h5Ft9bngAE/UV5qavyp6tI/AAAAAAAAAJA/CgfLZFGK0BI/s320/%E3%82%B5%E3%82%A4%E3%83%89%E5%BA%83%E5%91%8A.jpg\" height\u003d\"166\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n慣れれば一分程度の時間で設置できるようになります。\u003cbr /\u003e\n\u003cbr /\u003e\nまず、ダッシュボードの外観からウィジェットを選択する。\u003cbr /\u003e\n利用できるウィジェットの中からテキストウィジェットを右のsidebar内の好きな位置へ移動する。好きな位置というのは、自分の表示ささせたい場所のことで、完成イメージの場合は一番上にしてある。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-St4B55pc-YU/UV5npeovXoI/AAAAAAAAAIo/II5f6sBRev0/s1600/%E3%82%B5%E3%82%A4%E3%83%89%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E7%A7%BB%E5%8B%95.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-St4B55pc-YU/UV5npeovXoI/AAAAAAAAAIo/II5f6sBRev0/s320/%E3%82%B5%E3%82%A4%E3%83%89%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E7%A7%BB%E5%8B%95.jpg\" height\u003d\"111\" 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改めて記事を書き直しました。\u003ca href\u003d\"http://www.memorou.com/2013/11/wordpress_21.html\"\u003eWordPressのヘッダーや記事下など好きな位置にアドセンスを設置する方法\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\nタイトルの横にバナー広告を貼りたい場合\u003ca href\u003d\"http://www.memorou.com/2013/03/blog-post.html\"\u003eここ\u003c/a\u003eでも説明しています。\u003cbr /\u003e\n\u003ch2\u003eBloggerのサイドバーにバナー広告を貼る方法\u003c/h2\u003e完成時のイメージはワードプレスのときと一緒なので一枚目の画像を参照。\u003cbr /\u003e\n\u003cbr /\u003e\nまず、マイブログのレイアウトからガジェットを追加をクリックする。\u003cbr /\u003e\nその中のHTML/JavaScriptをテキストか、＋ボタンをクリックする。\u003cbr /\u003e\nHTML/JavaScriptの設定が開くので、そこにタイトルとコンテンツを入力する。\u003cbr /\u003e\n\u003cbr /\u003e\n今回はバナーを入れるので、コンテンツ部分にソースコードを貼り付けるのだが、「リッチテキスト形式」と、「HTMLの編集」の2種類あるので、入力してから画像がちゃんと表示されるかどうか、クリックして確認して「保存」を押す。\u003cbr /\u003e\n\u003cbr /\u003e\nタイトルは入力しなくても問題なく表示されるので、任意で入力する。\u003cbr /\u003e\n保存を押すと、ガジェットを追加した部分の一番上に配置されるので、問題が無ければ「配置を保存」を押す。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/1975545265298435785"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/1975545265298435785"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/04/blog-post_5.html","title":"ワードプレス　サイドバーにバナー広告を貼る方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://3.bp.blogspot.com/-_h5Ft9bngAE/UV5qavyp6tI/AAAAAAAAAJA/CgfLZFGK0BI/s72-c/%E3%82%B5%E3%82%A4%E3%83%89%E5%BA%83%E5%91%8A.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-6311714474584219793"},"published":{"$t":"2013-03-27T12:39:00.000+09:00"},"updated":{"$t":"2017-02-25T23:37:08.257+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"サブメニュー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"メニューバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"ワードプレス　マウスオーバーでサブメニューが自動開閉するメニューバー"},"content":{"type":"html","$t":"企業ホームページなどでよく目にする、マウスオーバーで開閉するメニューバーの作成方法は、カテゴリーと固定ページをメニューバーに表示させる方法の応用である。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eサブメニューが自動開閉するメニューバーの作成\u003c/h2\u003eまず、マウスオーバーで自動開閉させるには、親となるカテゴリーか固定ページと、子となるカテゴリーか固定ページの、最低でも2個以上どちらかを作成する必要がある。\u003cbr /\u003e\n\u003cbr /\u003e\n次に、上で作ったカテゴリーか固定ページを、階層をつけてメニューバーに表示する。\u003cbr /\u003e\n\u003cbr /\u003e\nカテゴリーの作成方法とメニューバーに表示させる方法はこちらで説明している。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/03/blog-post_13.html\"\u003eワードプレス　カテゴリーをメニューバーに表示する方法\u003c/a\u003eを参照\u003cbr /\u003e\n固定ページの作成方法とメニューバーに表示させる方法はこちらで説明している。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/03/blog-post_11.html\"\u003eワードプレス　固定ページをメニューバーに表示する方法\u003c/a\u003eを参照\u003cbr /\u003e\n\u003cbr /\u003e\n追記：\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_6.html\"\u003eWordPressメニューバーにカテゴリーと固定ページを表示させる方法\u003c/a\u003eの記事を追加しました。\u003cbr /\u003e\n\u003ch3\u003e親子 属性 階層のつけ方\u003c/h3\u003e今回はカテゴリーで説明する。\u003cbr /\u003e\n\u003cbr /\u003e\n例えば、メニューに表示させたいテキストを「テスト カテゴリー」とする。\u003cbr /\u003e\nマウスオーバーで表示させるテキストを「テスト①」、「テスト②」とする。\u003cbr /\u003e\nメニューに追加した後に「テスト①」と「テスト②」をドラッグ＆ドロップで少しずらす。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-zGxmQk8qH_8/UVJg_NWKiTI/AAAAAAAAAHo/-w1FpEBUxzk/s1600/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E9%9A%8E%E5%B1%A4%E2%91%A0.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"113\" src\u003d\"http://1.bp.blogspot.com/-zGxmQk8qH_8/UVJg_NWKiTI/AAAAAAAAAHo/-w1FpEBUxzk/s320/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E9%9A%8E%E5%B1%A4%E2%91%A0.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nこうしてずらすことによって階層ができる。 \u003cbr /\u003e\n\u003cbr /\u003e\nこのとき、さらに階層をつけたい場合はそれぞれに同じ要領でカテゴリーを追加する。\u003cbr /\u003e\n「メニューを保存」を忘れないようにする。\u003cbr /\u003e\n\u003cbr /\u003e\nすると、「テストカテゴリー」にマウスを乗せると、「テスト①」と「テスト②」が開き、\u003cbr /\u003e\n「テスト①」にマウスを乗せると、「テスト①A」と「テスト②B」が順番に開いていきます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-DgLoIZnQCKs/UVJmcDuIOjI/AAAAAAAAAIQ/2q-c3Q9fX_4/s1600/%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"71\" src\u003d\"http://1.bp.blogspot.com/-DgLoIZnQCKs/UVJmcDuIOjI/AAAAAAAAAIQ/2q-c3Q9fX_4/s320/%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n複数のメニューを作成した場合は表示させるメニューを、外観のテーマからカスタマイズを選択する。\u003cbr /\u003e\n次に、ナビゲーションのPrimary Menuからテストメニューを選択する。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6311714474584219793"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6311714474584219793"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/03/blog-post_27.html","title":"ワードプレス　マウスオーバーでサブメニューが自動開閉するメニューバー"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://1.bp.blogspot.com/-zGxmQk8qH_8/UVJg_NWKiTI/AAAAAAAAAHo/-w1FpEBUxzk/s72-c/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E9%9A%8E%E5%B1%A4%E2%91%A0.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-6483914135243275621"},"published":{"$t":"2013-03-13T11:19:00.002+09:00"},"updated":{"$t":"2017-02-25T23:42:13.583+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"メニューバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"カテゴリー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"ワードプレス　カテゴリーをメニューバーに表示する方法"},"content":{"type":"html","$t":"カテゴリーを指定して記事を書くと関連記事を探すときなどに便利なほか、メニューバーを作るときも非常に便利である。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_6.html\"\u003eWordPressメニューバーにカテゴリーと固定ページを表示させる方法\u003c/a\u003eに改めて書き直しました。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eカテゴリーを作る方法\u003c/h2\u003eまず、ダッシュボードの投稿からカテゴリーを選択する。\u003cbr /\u003e\n次に、新規カテゴリーを追加の名前にカテゴリー名を入力し、新規カテゴリーを追加をクリックする。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-0g7X07Dw234/UT58x6K0cJI/AAAAAAAAAGo/5pQ-HpLfIb0/s1600/%E3%82%AB%E3%83%86%E6%96%B0%E8%A6%8F.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"320\" src\u003d\"http://3.bp.blogspot.com/-0g7X07Dw234/UT58x6K0cJI/AAAAAAAAAGo/5pQ-HpLfIb0/s320/%E3%82%AB%E3%83%86%E6%96%B0%E8%A6%8F.jpg\" width\u003d\"313\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nこのとき親カテゴリーを指定すると、カテゴリーに階層をつけることができる。\u003cbr /\u003e\n特に指定しない場合はなしを選択する。\u003cbr /\u003e\n親を指定しない場合は、このとき作ったカテゴリーが親になる。\u003cbr /\u003e\n\u003cbr /\u003e\nスラッグも特に指定しない場合カテゴリー名が使用される。\u003cbr /\u003e\nまた、投稿ページから直接カテゴリーを作ることもできる。\u003cbr /\u003e\n\u003ch3\u003e投稿ページからカテゴリーを作成\u003c/h3\u003e投稿の新規追加か、投稿一覧から編集する。 \u003cbr /\u003e\n\u003cbr /\u003e\n投稿ページの右下のほうにある＋新規カテゴリーの追加をクリックして、空欄にカテゴリー名を入力する。\u003cbr /\u003e\n\u003cbr /\u003e\nここでも親カテゴリーの指定ができるので任意で選択する。\u003cbr /\u003e\n新規カテゴリーを追加をクリックして公開もしくは下書きとして保存する。\u003cbr /\u003e\n\u003ch2\u003eカテゴリーをメニューバーに表示\u003c/h2\u003eダッシュボードの外観からメニューを選択する。\u003cbr /\u003e\n\u003cbr /\u003e\nカテゴリー一覧のすべて表示から、メニューバーに表示させたいカテゴリー名を選択する。\u003cbr /\u003e\n\u003cbr /\u003e\nボックスにチェックを入れてメニューに追加すると、右側に表示されるのでメニューを保存したらメニューバーに表示されるようになる。\u003cbr /\u003e\n\u003cbr /\u003e\nここで注意するのが、新しくカテゴリーを作ると「よく使うもの」ではなく、「すべて表示」にしないと選択できないところ。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6483914135243275621"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6483914135243275621"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/03/blog-post_13.html","title":"ワードプレス　カテゴリーをメニューバーに表示する方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://3.bp.blogspot.com/-0g7X07Dw234/UT58x6K0cJI/AAAAAAAAAGo/5pQ-HpLfIb0/s72-c/%E3%82%AB%E3%83%86%E6%96%B0%E8%A6%8F.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-2850871672018111502"},"published":{"$t":"2013-03-11T10:18:00.000+09:00"},"updated":{"$t":"2017-02-25T23:43:56.776+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"メニューバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"固定ページ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"ワードプレス　固定ページをメニューバーに表示する方法"},"content":{"type":"html","$t":"会社概要、お問い合わせなど、常に同じ情報を公開しておく時に便利な固定ページをメニューバーに表示させる方法の記録です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_6.html\"\u003eWordPressメニューバーにカテゴリーと固定ページを表示させる方法\u003c/a\u003eに改めて書き直しました。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003e固定ページの作り方\u003c/h2\u003eまず、ダッシュボードの固定ページから新規追加を選択します。\u003cbr /\u003e\nそこで、タイトルと記事を書いたら公開します。\u003cbr /\u003e\nこのときに、ページ属性を指定したい場合は、変更してから公開します。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-W6h0806xSg8/UT0ueskCvxI/AAAAAAAAAF8/rvPEpQmy6Vc/s1600/%25E5%259B%25BA%25E5%25AE%259A%25E6%2596%25B0%25E8%25A6%258F.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"97\" src\u003d\"http://2.bp.blogspot.com/-W6h0806xSg8/UT0ueskCvxI/AAAAAAAAAF8/rvPEpQmy6Vc/s320/%25E5%259B%25BA%25E5%25AE%259A%25E6%2596%25B0%25E8%25A6%258F.jpg\" style\u003d\"cursor: move;\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eページ属性について\u003c/h3\u003eページ属性は、固定ページやブログの投稿ページに親子関係（階層）を作ることができて、メニューバーをプルダウン形式で表示するときなどに使えます。\u003cbr /\u003e\n\u003cbr /\u003e\nプルダウン形式のメニューバーに関してはこちらで説明しています。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/03/blog-post_27.html\"\u003eワードプレス マウスオーバーでサブメニューが自動開閉するメニューバー\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\nまた、固定ページは個別にテンプレートも変更できるので、それぞれ好きなデザインに変えることができます。\u003cbr /\u003e\n\u003ch2\u003e固定ページをメニューバーに表示\u003c/h2\u003e公開したら、ダッシュボードの外観からメニューを選択する。\u003cbr /\u003e\n\u003cbr /\u003e\nすると、固定ページの欄にさっき作ったタイトルが追加されています。\u003cbr /\u003e\n\u003cbr /\u003e\nここで、タイトルの横のボックスにチェックを入れてメニューに追加をクリックすると、右側に表示されるのでメニューを保存したらメニューバーに表示されるようになります。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/2850871672018111502"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/2850871672018111502"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/03/blog-post_11.html","title":"ワードプレス　固定ページをメニューバーに表示する方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://2.bp.blogspot.com/-W6h0806xSg8/UT0ueskCvxI/AAAAAAAAAF8/rvPEpQmy6Vc/s72-c/%25E5%259B%25BA%25E5%25AE%259A%25E6%2596%25B0%25E8%25A6%258F.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-1009249492912750879"},"published":{"$t":"2013-03-02T14:24:00.000+09:00"},"updated":{"$t":"2017-02-25T23:47:31.199+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Bloggerカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Blogger"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"}],"title":{"type":"text","$t":"ワードプレスとブロガーのリンクの色を変更する方法"},"content":{"type":"html","$t":"通常、スタイルシート(style.css)を編集して変更するが、ワードプレスの一部のテーマ（例えば「Leaf」）やブロガーの場合はもっと簡単に変更できるので、それぞれの変更方法をメモする。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eワードプレスのリンク色の変更\u003c/h2\u003eまず、ダッシュボードの外観から「LeafOption」を選択し一番下にある「Custom CSS」に下記のCSSを入力してSave All Changesをクリックしたら変更ができる。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-2s33j0magbk/UTGJo3wFslI/AAAAAAAAADE/3bnYmANAJyU/s1600/leafopcss.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-2s33j0magbk/UTGJo3wFslI/AAAAAAAAADE/3bnYmANAJyU/s320/leafopcss.jpg\" height\u003d\"144\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nCSSへの記述\u003cbr /\u003e\n\u003cpre\u003e/* 通常時のリンクカラー */\na:link {\ncolor: #0000ff;\n}\n/* クリック後のリンクカラー */\na:visited {\ncolor: #cc00cc;\n}\n/* クリックした瞬間のリンクカラー */\na:active {\ncolor: #ff3366;\n}\n/* カーソルを乗せたときのリンクカラー */\na:hover {\ncolor: #ff3366;\n}\n\u003c/pre\u003e赤文字の英数字を自分の好きなカラーコードに変更する。\u003cbr /\u003e\n\u003cbr /\u003e\nもちろんスタイルシート(style.css)を直接編集してもいいが、ここに入力するほうがミスしたときなどに簡単に元に戻すことが出来る。\u003cbr /\u003e\n\u003ch2\u003eブロガーのリンクの色を変更する方法\u003c/h2\u003eテンプレートの、ＨＴＭＬの編集からリンクカラーを変更する方法もあるが、今回はカスタマイズから変更する方法をメモする。\u003cbr /\u003e\n\u003cbr /\u003e\nまずは、マイブログのテンプレートからカスタマイズを選択する。\u003cbr /\u003e\nその後、上級者向けの中からリンクを選択し、リンクの色、表示済みの色、カーソルを合わせたときの色の３種類を選択できるので、自分の好きな色に変更する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-MhwKin5b5DQ/UTaQ7DhOvFI/AAAAAAAAADU/fGQvdSta_9o/s1600/%E3%83%96%E3%83%AD%E3%82%AC%E3%83%BC%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%82%AB%E3%82%B9.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-MhwKin5b5DQ/UTaQ7DhOvFI/AAAAAAAAADU/fGQvdSta_9o/s320/%E3%83%96%E3%83%AD%E3%82%AC%E3%83%BC%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%82%AB%E3%82%B9.jpg\" height\u003d\"181\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nおすすめの色などに変更したい色がない場合は、カラーコードを直接入力することも出来る。\u003cbr /\u003e\n\u003cbr /\u003e\n変更が終わったら右上のブログに適用を押して完了。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/1009249492912750879"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/1009249492912750879"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/03/blog-post_294.html","title":"ワードプレスとブロガーのリンクの色を変更する方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://1.bp.blogspot.com/-2s33j0magbk/UTGJo3wFslI/AAAAAAAAADE/3bnYmANAJyU/s72-c/leafopcss.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-8997738933613874377"},"published":{"$t":"2013-03-01T12:50:00.000+09:00"},"updated":{"$t":"2017-02-25T23:53:44.940+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カスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"AdSense"}],"title":{"type":"text","$t":"ワードプレス　タイトルの横にバナー広告を貼る方法"},"content":{"type":"html","$t":"どうせ貼るならバナー広告は目立つところにスッキリと貼りたい。\u003cbr /\u003e\nと、いうことで今回はサイトタイトルの横にバナー広告を貼る方法をメモする。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nTwenty Twelveなどはカスタム性能に優れていて、カスタムの方法などを紹介しているサイトも多くあるが、HTMLが理解できていないとカスタムしていくのが難しく初心者向きではない感じがした。\u003cbr /\u003e\n\u003ch2\u003eタイトル横にバナー広告を貼る方法\u003c/h2\u003e先に完成時のイメージ画像を載せておく。\u003cbr /\u003e\n下の画像のように、タイトルの真横辺りに設置するイメージである。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-KJ5qBLgRMOw/UTAj_YGr1fI/AAAAAAAAACs/wZF-RpcSmFU/s1600/%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%A8%AA.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"99\" src\u003d\"http://3.bp.blogspot.com/-KJ5qBLgRMOw/UTAj_YGr1fI/AAAAAAAAACs/wZF-RpcSmFU/s320/%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%A8%AA.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n今回使用したテーマは「Leaf バージョン 1.0.4」\u003cbr /\u003e\nテーマの変更やインストールの方法は、\u003ca href\u003d\"http://www.memorou.com/2013/02/blog-post_27.html\"\u003eワードプレス　子テーマの作り方　プラグイン\u003c/a\u003eで説明している。\u003cbr /\u003e\n\u003cbr /\u003e\nLeafの場合は3分もあれば簡単に設置できる。\u003cbr /\u003e\nまずは、ダッシュボードの外観からウィジェットを選択する。\u003cbr /\u003e\n\u003cbr /\u003e\n右にあるHeader Widgetの中に、利用できるウィジェットからテキストウィジェットを選択して入れる。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-_UZaxhqwvVs/UTAfYljkCGI/AAAAAAAAACM/g5Bn6A_sgEU/s1600/%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%82%A6%E3%82%A3%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"133\" src\u003d\"http://4.bp.blogspot.com/-_UZaxhqwvVs/UTAfYljkCGI/AAAAAAAAACM/g5Bn6A_sgEU/s320/%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%82%A6%E3%82%A3%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nその選択したテキストウィジェットに、広告ソースコードを貼り付けて保存をクリックする。\u003cbr /\u003e\nタイトルは入力しなくても表示されるので、入れても入れなくてもどちらでもかまわない。\u003cbr /\u003e\n\u003cbr /\u003e\n特につまずくようなところもなく、たったこれだけで完成タイトルの横に設置することができた。\u003cbr /\u003e\n\u003cbr /\u003e\n改めて記事を書き直しました。\u003ca href\u003d\"http://www.memorou.com/2013/11/wordpress_21.html\"\u003eWordPressのヘッダーや記事下など好きな位置にアドセンスを設置する方法\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\nまた、\u003ca href\u003d\"http://www.memorou.com/2015/05/wordpress.html\"\u003eタイトル横に広告が設置できる人気のWordPressテーマ\u003c/a\u003eもある。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/8997738933613874377"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/8997738933613874377"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/03/blog-post.html","title":"ワードプレス　タイトルの横にバナー広告を貼る方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://3.bp.blogspot.com/-KJ5qBLgRMOw/UTAj_YGr1fI/AAAAAAAAACs/wZF-RpcSmFU/s72-c/%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E6%A8%AA.jpg","height":"72","width":"72"}}]}});