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?alt\u003djson-in-script\u0026max-results\u003d9999"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/-/WordPress?alt\u003djson-in-script\u0026max-results\u003d9999"},{"rel":"alternate","type":"text/html","href":"http://www.memorou.com/search/label/WordPress"},{"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":"57"},"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-5186594232961208683"},"published":{"$t":"2016-05-23T18:34:00.000+09:00"},"updated":{"$t":"2016-05-23T18:34:06.553+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ネームサーバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ミニバード"}],"title":{"type":"text","$t":"WordPressインストール後にログイン画面を開いたら「ウェブページが見つかりません」となるときはネームサーバーを確認"},"content":{"type":"html","$t":"WordPressのインストールが終わって、ログイン画面を開くと「ウェブページが見つかりません」と表示された時は、「ネームサーバー」を確認する。\u003cbr /\u003e\n\u003cbr /\u003e\nWordPress導入直後にログイン画面が出ないときに確認する場所です。いままでログインできていたのに、急にログインできなくなったというときは別の場所に原因があるはずです。\u003cbr /\u003e\n\u003cbr /\u003e\n今回は、スタードメインで取得したドメインをミニバードで使いっていますが、どこで取得したドメインであっても、どこのレンタルサーバーであっても確認することは変わりません。\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"https://3.bp.blogspot.com/-nIMZraoOIhg/V0LMqPWdZGI/AAAAAAAAC8c/lwD-lvLipf0-ta8lJkp3GJGYcrqu19T-QCLcB/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"206\" src\u003d\"https://3.bp.blogspot.com/-nIMZraoOIhg/V0LMqPWdZGI/AAAAAAAAC8c/lwD-lvLipf0-ta8lJkp3GJGYcrqu19T-QCLcB/s320/01.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\n簡単インストールは、「\u003ca href\u003d\"http://www.memorou.com/2015/04/2wordpress.html\"\u003eミニバードにWordPressをインストールする手順\u003c/a\u003e」を見てもらえばわかりますが、スタードメインで取得したドメインなら数クリックで完了します。\u003cbr /\u003e\n\u003ch2\u003e\nネームサーバーの確認方法\u003c/h2\u003e\nドメインに設定されているネームサーバーは各運営会社により確認方法が異なります。\u003cbr /\u003e\n\u003cbr /\u003e\nお名前.comなら「Navi TOP」のネームサーバー下「変更する」ボタンから、「他のネームサーバーを利用」をクリックすると確認できます。\u003cbr /\u003e\n\u003cbr /\u003e\nスタードメインの場合「スタードメイン管理」から確認できます。\u003cbr /\u003e\n\u003ch2\u003e\nネームサーバーに入力する文字\u003c/h2\u003e\n入力する文字は、ミニバードなら「サーバー情報」から確認できます。そこに表示されている「ネームサーバー1」「ネームサーバー2」「ネームサーバー3」をそのまま上で確認したネームサーバー欄に入力します。\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\n\u003ca href\u003d\"https://4.bp.blogspot.com/-TqtXkglJOvk/V0LNhmQhP1I/AAAAAAAAC8k/fJ75bDblxh0EGiBvqvQlMxiPCmJGod0XQCLcB/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"320\" src\u003d\"https://4.bp.blogspot.com/-TqtXkglJOvk/V0LNhmQhP1I/AAAAAAAAC8k/fJ75bDblxh0EGiBvqvQlMxiPCmJGod0XQCLcB/s320/02.png\" width\u003d\"272\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/5186594232961208683"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/5186594232961208683"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2016/05/wordpress.html","title":"WordPressインストール後にログイン画面を開いたら「ウェブページが見つかりません」となるときはネームサーバーを確認"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https://3.bp.blogspot.com/-nIMZraoOIhg/V0LMqPWdZGI/AAAAAAAAC8c/lwD-lvLipf0-ta8lJkp3GJGYcrqu19T-QCLcB/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-1017038834287772106"},"published":{"$t":"2015-05-26T20:48:00.000+09:00"},"updated":{"$t":"2016-07-25T17:00:10.975+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"バナー広告"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テーマ"}],"title":{"type":"text","$t":"タイトル横に広告が設置できる人気のWordPressテーマ"},"content":{"type":"html","$t":"タイトル横にウィジェットを追加できる人気のテーマ8選です。\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横にウィジェットを追加すると、広告だけではなく、SNSボタンやサイト内検索、お問い合わせの電話番号などを簡単に設置できます。\u003cbr /\u003e\n\u003cbr /\u003e\nここで紹介するテーマはすべて無料で利用でき、外観＞テーマから検索することができます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nテーマの変更方法がわからない場合は、「\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_4901.html\"\u003eWordPressテーマ（テンプレート）の変更と編集方法\u003c/a\u003e」を参考にしてください。\u003cbr /\u003e\n\u003cbr /\u003e\n※タイトル横に広告が設置できるかどうかのみ確認しています。その他の動作、テーマのご利用に関しては自己責任でお願いいたします。\u003cbr /\u003e\n\u003ch2\u003eタイトル横に728×90の広告が設置できるテーマ8選\u003c/h2\u003e\u003ch3\u003eRedWaves Lite\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-fvib38HPHeI/VWQ-Ii2CkWI/AAAAAAAACzQ/qLNqWJMmx20/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"244\" src\u003d\"http://4.bp.blogspot.com/-fvib38HPHeI/VWQ-Ii2CkWI/AAAAAAAACzQ/qLNqWJMmx20/s320/01.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n作者：Asmi Khalil\u003cbr /\u003e\nバージョン：1.0.6\u003cbr /\u003e\n\u003cbr /\u003e\n赤を基調とした、右サイドバー（2カラム）のシンプルなデザインです。\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横に広告を設置するためには、ウィジェットの「Header Widget-area」にテキストを追加して広告を設置します。\u003cbr /\u003e\n\u003ch3\u003eProMax\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-fE2STznBkqM/VWREy3yETZI/AAAAAAAACzg/ZsTRTUgqdEQ/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"204\" src\u003d\"http://1.bp.blogspot.com/-fE2STznBkqM/VWREy3yETZI/AAAAAAAACzg/ZsTRTUgqdEQ/s320/02.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n作者：sandy786\u003cbr /\u003e\nバージョン：1.5\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横に広告を設置するためには、外観＞ProMax Options＞Ads Managementと進み、「Paste Ads code for header」内にコードを貼り付けます。\u003cbr /\u003e\n\u003ch3\u003eProfitMag\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-P_0K3rhVw-A/VWRIr0XAVpI/AAAAAAAACzs/EmfiMwH6K24/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"243\" src\u003d\"http://4.bp.blogspot.com/-P_0K3rhVw-A/VWRIr0XAVpI/AAAAAAAACzs/EmfiMwH6K24/s320/03.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n作者：wpgaint\u003cbr /\u003e\nバージョン：1.06\u003cbr /\u003e\n\u003cbr /\u003e\nマガジン系のテーマです。\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横に広告を設置するためには、外観＞Theme Options＞Advertisingと進み、「Header Ads」内にコード貼り付けます。\u003cbr /\u003e\n\u003ch3\u003ePepMagazine\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-Alhdk0iaDts/VWRMc1cJUbI/AAAAAAAACz4/ZPCbS3_BTqA/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"244\" src\u003d\"http://4.bp.blogspot.com/-Alhdk0iaDts/VWRMc1cJUbI/AAAAAAAACz4/ZPCbS3_BTqA/s320/04.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n作者：emkal\u003cbr /\u003e\nバージョン：1.1.0\u003cbr /\u003e\n\u003cbr /\u003e\n黒を基調とした、右サイドバー（2カラム）のシンプルなデザインです。\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横に広告を設置するためには、ウィジェットの「Top Banner」にテキストを追加して広告を設置します。\u003cbr /\u003e\n\u003ch3\u003eJustWrite\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/--y3thdHmGSM/VWRO8Dw6FaI/AAAAAAAAC0E/4mPZ2WeJJU8/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"244\" src\u003d\"http://4.bp.blogspot.com/--y3thdHmGSM/VWRO8Dw6FaI/AAAAAAAAC0E/4mPZ2WeJJU8/s320/05.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n作者：acosmin\u003cbr /\u003e\nバージョン：1.0.9.1\u003cbr /\u003e\n\u003cbr /\u003e\nサイドバーが左右にある3カラムのテーマです。\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横に広告を設置するためには、外観＞Theme Options＞Advertisingと進み、「728x90px Ad HTML Code」内にコード貼り付け、上の「Show this banner. Add the code in the following box」にチェックを入れます。\u003cbr /\u003e\n\u003ch3\u003eOxygen\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-TlFT9XsJXQ4/VWRR1j7Y2oI/AAAAAAAAC0Q/BBIKgpiBmqQ/s1600/06.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"237\" src\u003d\"http://1.bp.blogspot.com/-TlFT9XsJXQ4/VWRR1j7Y2oI/AAAAAAAAC0Q/BBIKgpiBmqQ/s320/06.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n作者：griden\u003cbr /\u003e\nバージョン：0.5.4\u003cbr /\u003e\n\u003cbr /\u003e\n投稿ページは、サイドバーが左右にある3カラムのテーマです。\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横に広告を設置するためには、ウィジェットの「Header」にテキストを追加して広告を設置します。\u003cbr /\u003e\nちなみに、「Secondary」が右サイドバーです。\u003cbr /\u003e\n\u003ch3\u003eWP FanZone\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-8mKrYBSS_yE/VWRUlwxxrnI/AAAAAAAAC0c/QmgitCQ_gSU/s1600/07.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"243\" src\u003d\"http://2.bp.blogspot.com/-8mKrYBSS_yE/VWRUlwxxrnI/AAAAAAAAC0c/QmgitCQ_gSU/s320/07.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n作者：hostmarks\u003cbr /\u003e\nバージョン：2.1\u003cbr /\u003e\n\u003cbr /\u003e\nトップページや投稿ページ、固定ページなどのサイドバーに設置するウィジェットを、簡単に切り替えられるようになっているテーマです。\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横に広告を設置するためには、ウィジェットの「Banner Widget」にテキストを追加して広告を設置します。\u003cbr /\u003e\n\u003ch3\u003eNews Mix Light\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-I14KOR_LWGw/VWRXt7Eg1MI/AAAAAAAAC0o/wHAuC3izlO4/s1600/08.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"243\" src\u003d\"http://1.bp.blogspot.com/-I14KOR_LWGw/VWRXt7Eg1MI/AAAAAAAAC0o/wHAuC3izlO4/s320/08.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n作者：kopatheme\u003cbr /\u003e\nバージョン：1.0.3\u003cbr /\u003e\n\u003cbr /\u003e\nTheme Optionsからサイドバーのレイアウトを選択できるテーマです。\u003cbr /\u003e\n\u003cbr /\u003e\nタイトル横に広告を設置するためには、外観＞Theme Options＞General Settingと進み、「Top Banner」内にコード貼り付けます。\u003cbr /\u003e\n\u003ch2\u003eまとめ\u003c/h2\u003e今回紹介したテーマは、基本的にレスポンシブデザイン対応となっております。\u003cbr /\u003e\n\u003cbr /\u003e\n広告の設置時にショートコードを使う場合は、「\u003ca href\u003d\"http://www.memorou.com/2014/06/wordpressmesocolumn.html\"\u003eWordPress無料レスポンシブテーマMesoColumnのカスタム\u003c/a\u003e」の広告の設置を参考にしてください。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/1017038834287772106"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/1017038834287772106"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2015/05/wordpress.html","title":"タイトル横に広告が設置できる人気のWordPressテーマ"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://4.bp.blogspot.com/-fvib38HPHeI/VWQ-Ii2CkWI/AAAAAAAACzQ/qLNqWJMmx20/s72-c/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-298213386643694174"},"published":{"$t":"2015-04-14T15:55:00.000+09:00"},"updated":{"$t":"2017-02-18T19:48:53.843+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"レンタルサーバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ミニバード"}],"title":{"type":"text","$t":"ミニバードに2個目のWordPressをインストールする手順"},"content":{"type":"html","$t":"月額250円で50GBの容量が使えるミニバードに、2個目のWordPressをインストールする手順です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ctable class\u003d\"minib\"\u003e\u003ctbody\u003e\n\u003ctr\u003e \u003cth\u003eディスク容量\u003c/th\u003e \u003ctd\u003e50GB\u003c/td\u003e \u003c/tr\u003e\n\u003ctr\u003e \u003cth\u003eドメイン\u003c/th\u003e \u003ctd\u003e50個\u003c/td\u003e \u003c/tr\u003e\n\u003ctr\u003e \u003cth\u003eサブドメイン\u003c/th\u003e \u003ctd\u003e1000個\u003c/td\u003e \u003c/tr\u003e\n\u003ctr\u003e \u003cth\u003eメールアドレス\u003c/th\u003e \u003ctd\u003e500個\u003c/td\u003e \u003c/tr\u003e\n\u003ctr\u003e \u003cth\u003eFTPアカウント\u003c/th\u003e \u003ctd\u003e2個\u003c/td\u003e \u003c/tr\u003e\n\u003ctr\u003e \u003cth\u003eMySQL\u003c/th\u003e \u003ctd\u003e5個\u003c/td\u003e \u003c/tr\u003e\n\u003c/tbody\u003e \u003c/table\u003e\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ca href\u003d\"https://px.a8.net/svt/ejp?a8mat\u003d2HDQMJ+56D4K2+1WTI+60OXE\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003e月額250円(税抜)からのレンタルサーバー、ミニバード\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cimg border\u003d\"0\" width\u003d\"1\" height\u003d\"1\" src\u003d\"https://www10.a8.net/0.gif?a8mat\u003d2HDQMJ+56D4K2+1WTI+60OXE\" alt\u003d\"\"\u003e\u003cbr /\u003e\nミニバードは、MySQLが5個使えるため余裕を持ってWordPressも複数インストールできます。（おすすめはされていないようですが、MySQLが1個しか使えないサーバーでもWordPressを複数インストールすることはできるようです）\u003cbr /\u003e\n\u003cbr /\u003e\n今回は、ドメインの追加が終わっていることを前提に話を進めます。まだの方は、「\u003ca href\u003d\"http://www.memorou.com/2015/04/com.html\"\u003eミニバードに他社（お名前.com）で取得したドメインを設定する方法\u003c/a\u003e」を参考にしてください。\u003cbr /\u003e\n\u003ch2\u003e2個目のWordPressをインストールする手順\u003c/h2\u003e\u003cdiv\u003eデータベースの追加→WordPressのインストールの順で進めていきます。\u003c/div\u003e\u003ch3\u003eデータベースの追加と設定\u003c/h3\u003eミニバードにログインして「データベース設定」をクリックします。\u003cbr /\u003e\n\u003cbr /\u003e\nMySQLデータベースの作成・管理画面になるので、「MySQLを追加」を選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-DXTtg0KohBE/VSyspc9ENrI/AAAAAAAACwM/qaAqhb5MVN0/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/-DXTtg0KohBE/VSyspc9ENrI/AAAAAAAACwM/qaAqhb5MVN0/s1600/01.png\" height\u003d\"157\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n任意のデータベース名を入力して、文字コードを「UTF-8」に変更し、確認画面へ進み「確定する」をクリックします。今回は2個目のWordPress用データベースなので、データベース名を「wp2」としました。\u003cbr /\u003e\n\u003cbr /\u003e\nMySQL一覧に追加したデータベースが表示されます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-QgClLjI1FjQ/VSyvb6w9XkI/AAAAAAAACwY/8emoS2qeDIY/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/-QgClLjI1FjQ/VSyvb6w9XkI/AAAAAAAACwY/8emoS2qeDIY/s1600/02.png\" height\u003d\"227\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n「権限追加」をクリックして、データベースを作成します。「権限削除」に変わればOKです。\u003cbr /\u003e\n\u003cbr /\u003e\n次に、「MySQLユーザー設定」を選択して、今追加したデータベース名（wp2）を入力し、データベースパスワードを設定します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-8aVhuJOJbrk/VSyx2aDyq_I/AAAAAAAACwk/OKcMq-XSnjA/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/-8aVhuJOJbrk/VSyx2aDyq_I/AAAAAAAACwk/OKcMq-XSnjA/s1600/03.png\" height\u003d\"233\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nデータベースパスワードは、すぐ必要になるのでメモしておきます。\u003cbr /\u003e\n\u003cbr /\u003e\n続いてWordPressのインストールです。\u003cbr /\u003e\n\u003ch3\u003eWordPressのインストール\u003c/h3\u003e\u003cdiv\u003e左メニューの「簡単インストール」をクリックして、WordPressを使用するドメインを選択します。\u003c/div\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-8cbyakftbxY/VSyyouANpwI/AAAAAAAACws/rBa6WnRwGLU/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-8cbyakftbxY/VSyyouANpwI/AAAAAAAACws/rBa6WnRwGLU/s1600/04.png\" height\u003d\"214\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e追加インストールを選択して、WordPressの「インストール設定」をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-_HTakG9B984/VSyzgow2ObI/AAAAAAAACw4/ccKfolTD1Gk/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-_HTakG9B984/VSyzgow2ObI/AAAAAAAACw4/ccKfolTD1Gk/s1600/05.png\" height\u003d\"258\" 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/-sUvHYeWye_g/VSy2vqfzNjI/AAAAAAAACxE/fQirxPEF5DI/s1600/06.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-sUvHYeWye_g/VSy2vqfzNjI/AAAAAAAACxE/fQirxPEF5DI/s1600/06.png\" height\u003d\"320\" width\u003d\"263\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nブログ情報を入力して、確認画面へ進み確定します。\u003cbr /\u003e\n\u003cbr /\u003e\nブログ情報のログインフォームからWordPressの管理画面にログインできたら完了です。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/298213386643694174"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/298213386643694174"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2015/04/2wordpress.html","title":"ミニバードに2個目の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/-DXTtg0KohBE/VSyspc9ENrI/AAAAAAAACwM/qaAqhb5MVN0/s72-c/01.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-8475367915499332884"},"published":{"$t":"2014-09-24T17:56:00.000+09:00"},"updated":{"$t":"2014-09-24T17:56:31.312+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"}],"title":{"type":"text","$t":"WordPressの公開済み記事を一括操作で下書きに戻す方法"},"content":{"type":"html","$t":"これで重複ペナルティを避けられるかは別として、WordPressで作成した記事に限らず、301リダイレクトするほどではないけど、他のサイトに記事を移動したいときなど、一度公開した記事を下書きに戻すことがあります。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003ch2\u003e\n下書きに戻す2つの方法\u003c/h2\u003e\n下書きにする方法は、\u003cbr /\u003e\n\u003cul\u003e\n\u003cli\u003e編集から1記事ずつ下書きに戻す方法\u003c/li\u003e\n\u003cli\u003e複数の記事をまとめて下書きに戻す方法\u003c/li\u003e\n\u003c/ul\u003e\nの2つが一般的です。\u003cbr /\u003e\n\u003ch3\u003e\n1記事ずつ下書きに戻す\u003c/h3\u003e\n\u003cdiv\u003e\n1記事ずつ下書きに戻す場合は、投稿一覧から下書きに戻す記事の編集をクリックします。\u003c/div\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://4.bp.blogspot.com/-7B4LWiJyPLM/VCJY85INZsI/AAAAAAAACNE/d8CWT2-l4iM/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/-7B4LWiJyPLM/VCJY85INZsI/AAAAAAAACNE/d8CWT2-l4iM/s1600/01.png\" height\u003d\"83\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003cdiv\u003e\n次に、タイトル横の公開にあるステータスの編集をクリックして、公開済みから下書きに変更して「OK」をクリックし、更新を押したら完了です。\u003c/div\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://2.bp.blogspot.com/-jUWmK-lWNAw/VCJZCUrUQ2I/AAAAAAAACNM/qhSo4g9aBwE/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/-jUWmK-lWNAw/VCJZCUrUQ2I/AAAAAAAACNM/qhSo4g9aBwE/s1600/02.png\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cdiv\u003e\n\u003cbr /\u003e\u003c/div\u003e\n\u003ch3\u003e\n複数の記事をまとめて下書きに戻す\u003c/h3\u003e\n複数記事をまとめて下書きに戻す場合は、日付やカテゴリーなどで絞り込むなどした後、下書きに戻す記事のタイトル横のチェックボックスにチェックを入れます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://3.bp.blogspot.com/-6B9iXrZ_o5M/VCJbsfweVMI/AAAAAAAACNY/XDFylfdKw2g/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/-6B9iXrZ_o5M/VCJbsfweVMI/AAAAAAAACNY/XDFylfdKw2g/s1600/03.png\" height\u003d\"320\" width\u003d\"237\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\nチェックを入れたら、一括操作をクリックして編集を選択し、横の「適用」をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://4.bp.blogspot.com/-8apVcYu3G2A/VCJdhyN1mLI/AAAAAAAACNk/iPfMkUUGr8M/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/-8apVcYu3G2A/VCJdhyN1mLI/AAAAAAAACNk/iPfMkUUGr8M/s1600/04.png\" height\u003d\"175\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\nすると、選択した記事一覧が表示されるので、ステータスから「下書き」を選択して更新をクリックしたら完了です。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\n\u003ca href\u003d\"http://4.bp.blogspot.com/-OaNfLNllFrc/VCJkD1Hk4AI/AAAAAAAACN0/-2XzAwpJJAw/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-OaNfLNllFrc/VCJkD1Hk4AI/AAAAAAAACN0/-2XzAwpJJAw/s1600/05.png\" height\u003d\"146\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\n\u003cbr /\u003e\n間違えて選択してしまった記事は、更新を押す前にタイトル横の×をクリックすることで消すことができます。\u003cbr /\u003e\n\u003cbr /\u003e\nコメントの許可なども同じように一括で操作できます。\n"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/8475367915499332884"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/8475367915499332884"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/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/-7B4LWiJyPLM/VCJY85INZsI/AAAAAAAACNE/d8CWT2-l4iM/s72-c/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-866379531776361634"},"published":{"$t":"2014-09-10T19:37:00.001+09:00"},"updated":{"$t":"2017-02-19T21:34:11.209+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ツイッター連携"}],"title":{"type":"text","$t":"Twitterの自動つぶやきプラグインの効果を検証"},"content":{"type":"html","$t":"今回検証したサイトの初投稿日は5月16日で、ウェブマスターツールにサイトマップを送信したのが6月1日です。\u003cbr /\u003e\n\u003cbr /\u003e\n7月29日までの投稿数は、個別記事が32、固定ページが6で、ウェブマスターツールの「インデックスに登録されているURL」は、31件です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003eサイトはWordPressで作成しているため、自動つぶやき（投稿）に「Tweetily」というプラグインを使用しました。\u003cbr /\u003e\n\u003ch2\u003eツイッター登録30日前\u003c/h2\u003e下の画像は、Googleアナリティクスのユーザーサマリーで、ツイッター連携前の1ヶ月の数値です。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-0QK4HmfX_-w/U9dC50cCzyI/AAAAAAAACEI/S0ys9qCv_fQ/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"83\" src\u003d\"http://3.bp.blogspot.com/-0QK4HmfX_-w/U9dC50cCzyI/AAAAAAAACEI/S0ys9qCv_fQ/s1600/01.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eページ/セッションが3.79、平均セッション時間は3：22、直帰率は45.07%と満足のいく数値ですが、ユーザー数が1日に平均で約2人と非常に少ない状態です。（\u003ca href\u003d\"http://www.memorou.com/2013/12/google_30.html\" target\u003d\"_blank\"\u003e自分のアクセスは除外\u003c/a\u003eしています。）\u003cbr /\u003e\n\u003cbr /\u003e\nこの数値がツイッターと連携して、自動つぶやきをすることにより、どのくらい改善されるのか、または変わらないのか検証します。\u003cbr /\u003e\n\u003cbr /\u003e\nツイッターの初投稿日は2014年7月29日で、フォロー、フォロワーともに0です。 \u003cbr /\u003e\n8月4日、投稿数（ツイート数）が7を超えたところで、10人フォローしました。\u003cbr /\u003e\n\u003ch2\u003e1日の最大フォロー数\u003c/h2\u003e一度にフォローしるぎるとツイッターアカウントが凍結される恐れがあります。\u003cbr /\u003e\n\u003cbr /\u003e\n1日に100人フォローすると凍結される（された）という人や、1000人までは大丈夫という人など詳しい人数がわからないため、1日の最大フォロー数は20人とし、基本フォロー数は10人とします。\u003cbr /\u003e\n\u003cbr /\u003e\nツイッターアカウントが凍結されると、フォロー数とフォロワー数が0になるようです。（※復活後）\u003cbr /\u003e\n\u003ch2\u003eツイッター登録から40日後\u003c/h2\u003e9月9日までの投稿数は、個別記事が38、固定ページが6で、ウェブマスターツールの「インデックスに登録されているURL」は、39件です。\u003cbr /\u003e\n\u003cbr /\u003e\n下の画像は、Googleアナリティクスのユーザーサマリーで、ツイッター連携後の1ヶ月の数値です。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/--TxfAQyF_io/VA_nqJLdwGI/AAAAAAAACHI/sdPb6xo5vnU/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"90\" src\u003d\"http://4.bp.blogspot.com/--TxfAQyF_io/VA_nqJLdwGI/AAAAAAAACHI/sdPb6xo5vnU/s1600/02.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n現時点でのツイート数は40で、フォロー数は124人、フォロワー数は62人です。\u003cbr /\u003e\n予定では、フォロー数が400人、フォロワー数が200人くらいになっているはずでしたが、アフィリエイトの勧誘と思われるフォローが非常に多く、ちょっと面倒になったのでこのような少ない人数になりました。\u003cbr /\u003e\n\u003cbr /\u003e\nこの程度の人数で検証してもほとんど意味はなく、記事にするかどうかも迷いましたが、これ以上続ける気がなくなってしまったためここで検証終了とし、どの程度ツイッターからアクセスがあったのかを発表します。\u003cbr /\u003e\n\u003ch2\u003eツイッターからのアクセス\u003c/h2\u003eツイッターからのアクセス数は、Googleアナリティクスの集客にある「すべてのトラフィック」を使用します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-BMskzHOvH_4/VBAN-2YrjoI/AAAAAAAACHU/nvA06DE3UPI/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-BMskzHOvH_4/VBAN-2YrjoI/AAAAAAAACHU/nvA06DE3UPI/s1600/03.png\" /\u003e\u003c/a\u003e\u003c/div\u003e結果は、以下のようになりました。\u003cbr /\u003e\n\u003ch3\u003eツイッター登録から30日\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-s3QhVfB3QeE/VBAbQtmD1lI/AAAAAAAACHg/6rWf-tcJ8LU/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"251\" src\u003d\"http://4.bp.blogspot.com/-s3QhVfB3QeE/VBAbQtmD1lI/AAAAAAAACHg/6rWf-tcJ8LU/s1600/04.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e全体のセッションが107あり、その内の8がツイッターからのアクセスでした。これは全体の7.48%にあたります。\u003cbr /\u003e\n\u003ch3\u003eツイッター登録から40日\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-NXXNE_UxKkk/VBAjLHA9naI/AAAAAAAACHs/gkliAaKFEZ4/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"151\" src\u003d\"http://3.bp.blogspot.com/-NXXNE_UxKkk/VBAjLHA9naI/AAAAAAAACHs/gkliAaKFEZ4/s1600/05.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e全体のセッションが188あり、その内の14がツイッターからのアクセスでした。これは全体の7.45%にあたります。 \u003cbr /\u003e\nまた、直帰率は57.14%でページ/セッションは2.50となり、決して悪くはない数値となりました。\u003cbr /\u003e\n\u003cbr /\u003e\n今回は、ツイート数もフォロー数もフォロワー数も少ない状態での検証結果ですが、各人数が10倍100倍になることで、アクセス数もそれに比例して増加していくのではないかと思われます。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/866379531776361634"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/866379531776361634"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/09/twitter.html","title":"Twitterの自動つぶやきプラグインの効果を検証"}],"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/-0QK4HmfX_-w/U9dC50cCzyI/AAAAAAAACEI/S0ys9qCv_fQ/s72-c/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-772564032738172610"},"published":{"$t":"2014-07-17T16:00:00.000+09:00"},"updated":{"$t":"2017-02-19T21:47:58.922+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"スコアカード"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ドメインキング"}],"title":{"type":"text","$t":"プラグインと.htaccessの編集で遅いWordPressの表示を高速化"},"content":{"type":"html","$t":"WordPressで作成したサイトの表示速度が半端じゃなく遅く、サイトに来た人がブラウザバックしてしまいそうだったため改善します。\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/-v--pdAk7iMM/U8OG-Nmu_XI/AAAAAAAAB_0/AOE_X2KYToA/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/-v--pdAk7iMM/U8OG-Nmu_XI/AAAAAAAAB_0/AOE_X2KYToA/s1600/00.png\" height\u003d\"113\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nPageSpeed Insightsの評価はひどいもので、モバイルが59、パソコンが65、ユーザーエクスペリエンスが99でした。しかも、広告など一切ない状態でこれです。ユーザーエクスペリエンスに関しては、レスポンシブWebデザインのテーマだけのことはあるなといった感じです。\u003cbr /\u003e\n\u003cbr /\u003e\nちなみに、Bloggerを使用しているこのブログの評価は、モバイルが70、パソコンが80、ユーザーエクスペリエンスが92でした。どちらも、トップページの計測値です。\u003cbr /\u003e\n\u003cbr /\u003e\nウェブマスターツールのサイトマップインデックスでエラーが出るくらいなので、サーバー側に問題がある可能性もありますが、サーバー移転を考える前に、自分でできることをやっていきます。\u003cbr /\u003e\n\u003ch2\u003ePageSpeed Insightsの使い方\u003c/h2\u003e非常に簡単で、\u003ca href\u003d\"https://developers.google.com/speed/pagespeed/insights/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ePageSpeed Insights\u003c/a\u003eにアクセスして、解析したいページのURLを入力後、分析を押すだけです。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-5AdRbcp1-Vw/U8OR5kUmysI/AAAAAAAACAE/d5j9d3UJ99E/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/-5AdRbcp1-Vw/U8OR5kUmysI/AAAAAAAACAE/d5j9d3UJ99E/s1600/04.png\" height\u003d\"98\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e数秒後、分析が終わると評価値とともに、改善方法が表示されます。この方法を参考にサイトパフォーマンスをあげることが可能です。\u003cbr /\u003e\n\u003ch2\u003eWordPressを高速表示するためのプラグイン\u003c/h2\u003eWordPressのバージョンは、3.9.1です。\u003cbr /\u003e\n\u003ch3\u003e画像を圧縮する\u003c/h3\u003e試したプラグインは、2つで、EWWW Image OptimizerとWP Smush.itです。\u003cbr /\u003e\n\u003cbr /\u003e\nEWWW Image Optimizerを有効化したところ、前回同様このようなエラーが出た。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-E_oyT8qYhzU/U8TSAdOrtBI/AAAAAAAACAU/SPvKXNgTYu8/s1600/05.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_oyT8qYhzU/U8TSAdOrtBI/AAAAAAAACAU/SPvKXNgTYu8/s1600/05.png\" height\u003d\"82\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eどうやら、使用しているサーバーとの関係上、パーミッションを調整したり、フォルダを作成したりしなければいけないようです。素人には少しハードルが高いので、EWWW Image Optimizerを停止して削除した後、次のプラグインを試してみました。\u003cbr /\u003e\n\u003cbr /\u003e\nWP Smush.itを有効化し、設定をします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-VUU6vO6DGGM/U8Tex0oPEwI/AAAAAAAACAk/q3WI3wHnVL0/s1600/07.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-VUU6vO6DGGM/U8Tex0oPEwI/AAAAAAAACAk/q3WI3wHnVL0/s1600/07.png\" height\u003d\"27\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nメディアのBulk Smush.itを選択します。画像を処理する枚数と、それに要する予想時間が表示されます。\u003cbr /\u003e\n「Run all my images through WP Smush.it right now」をクリックすると圧縮が開始されます。\u003cbr /\u003e\n\u003cbr /\u003e\nどの程度圧縮されるのかは、\u003ca href\u003d\"http://www.memorou.com/2013/10/wordpress-2.html\" target\u003d\"_blank\"\u003eWordPress 画像の圧縮 ページの読み込み時間のパフォーマンスを改善2\u003c/a\u003eを参考にしてください。\u003cbr /\u003e\n\u003cbr /\u003e\n今回行ったサイトは、画像が少なく効果は感じられなかったため、今のところ停止している。\u003cbr /\u003e\n\u003ch3\u003e画像の読み込みを後回しにする\u003c/h3\u003eLazy Loadを有効化したところ、PageSpeed Insightsに変化なしでした。\u003cbr /\u003e\nこのプラグインは現在使用している WordPress のバージョンではテストされていません。\u003cbr /\u003e\nバージョンのせいなのか、画像が少ないからなのかは不明だが、効果がなかったため停止中です。\u003cbr /\u003e\n\u003ch3\u003ehead内の記述を最適化\u003c/h3\u003eHead Cleanerを有効化したところ、PageSpeed Insightsに変化なしでした。\u003cbr /\u003e\nこのプラグインは現在使用している WordPress のバージョンではテストされていません。\u003cbr /\u003e\nこちらも現在停止中です。\u003cbr /\u003e\n\u003ch2\u003e.htaccessを編集して高速化\u003c/h2\u003e画像圧縮や画像の読み込みを後回しにしてくれるプラグインなどを導入してみましたが、現段階でPageSpeed Insightsのポイントが上がることはなかったため、「.htaccess」を編集して高速化することにしました。\u003cbr /\u003e\n\u003ch3\u003e.htaccessがある場所\u003c/h3\u003eドメインキングの場合\u003cbr /\u003e\nログイン後、ドメインから編集する.htaccessのドメイン名を選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-HwxjaxjzVh4/U8Y0oFRDW_I/AAAAAAAACA0/dR_92ZLX-Eo/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/-HwxjaxjzVh4/U8Y0oFRDW_I/AAAAAAAACA0/dR_92ZLX-Eo/s1600/01.png\" height\u003d\"63\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eウェブサイトとドメインからファイルマネージャを選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-JJ-L1IgjV0c/U8Y1U-BNLaI/AAAAAAAACA8/B-SLbOM5PWU/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/-JJ-L1IgjV0c/U8Y1U-BNLaI/AAAAAAAACA8/B-SLbOM5PWU/s1600/02.png\" height\u003d\"92\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eアイテムの中からhttpdocsをクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-NvROt5_bRAg/U8Y2QZBAguI/AAAAAAAACBI/8FeZ3SLiBiQ/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-NvROt5_bRAg/U8Y2QZBAguI/AAAAAAAACBI/8FeZ3SLiBiQ/s1600/03.png\" height\u003d\"229\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eその中に.htaccessがあるので、同じ行のペンマークをクリックして編集します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-rPK-u_a2OPg/U8Y3wSns_VI/AAAAAAAACBc/_JWSQLj7D0k/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/-rPK-u_a2OPg/U8Y3wSns_VI/AAAAAAAACBc/_JWSQLj7D0k/s1600/04.png\" height\u003d\"100\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nこのとき、.htaccessのユーザーが自分になっているか確認してください。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-e9P602lzqmw/U8dzF_UQk4I/AAAAAAAACCs/uNndKOF9ASU/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/-e9P602lzqmw/U8dzF_UQk4I/AAAAAAAACCs/uNndKOF9ASU/s1600/06.png\" height\u003d\"55\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n\u003ch3\u003e編集内容\u003c/h3\u003e編集内容は、\u003ca href\u003d\"http://nelog.jp/compress-components-with-gzip\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eリソースを圧縮して転送サイズを減らしブログを高速化する方法（CSS、JS、WEBフォントなどの圧縮）\u003c/a\u003eを参考にさせていただきました。\u003cbr /\u003e\n\u003cbr /\u003e\nリンク先の方法で、モバイルが59→66、パソコンが65→74に改善されました。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-AIW6zd6F0BI/U8c7ZPkmCaI/AAAAAAAACB8/ECYyxIEG1iM/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/-AIW6zd6F0BI/U8c7ZPkmCaI/AAAAAAAACB8/ECYyxIEG1iM/s1600/08.png\" height\u003d\"115\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\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/-zbBWQjnTc_E/U8Y4l0IXwhI/AAAAAAAACBk/tB9PwTq2kgw/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-zbBWQjnTc_E/U8Y4l0IXwhI/AAAAAAAACBk/tB9PwTq2kgw/s1600/05.png\" height\u003d\"30\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cblockquote class\u003d\"tr_bq\"\u003eエラー：ファイル/httpdocs/.htaccessを編集することができません\u003c/blockquote\u003eというエラーが出たら、ユーザーが「apache」になっていないか確認してください。管理者権限が自分になっていないとエラーで編集できません。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://memorou.com/2013/12/wordpress_24.html\"\u003eドメインキング\u003c/a\u003eで.htaccessを編集するときに、ユーザーが「apache」になっている場合は、お問い合わせから.htaccessを編集したいと伝えると変更してもらえます。\u003cbr /\u003e\n\u003cbr /\u003e\nまた、アップロードしたファイル等が管理者権限となってしまった場合は、変更以来の連絡をすると対応してもらえるようです。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/772564032738172610"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/772564032738172610"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/07/htaccesswordpress.html","title":"プラグインと.htaccessの編集で遅い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://3.bp.blogspot.com/-v--pdAk7iMM/U8OG-Nmu_XI/AAAAAAAAB_0/AOE_X2KYToA/s72-c/00.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-6582451147807677700"},"published":{"$t":"2014-06-19T12:03:00.000+09:00"},"updated":{"$t":"2017-02-19T22:15:01.694+09:00"},"category":[{"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":"レスポンシブWebデザインテーマを使っている場合、Google AdSenseのポリシーに違反しないために、レスポンシブ広告ユニットを設置することが多いと思います。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nしかし、デフォルトの設定でコードを貼ると、思っていたサイズの広告が表示されないことがあります。そんなときの設定方法です。\u003cbr /\u003e\n\u003ch2\u003e広告ユニットの追加\u003c/h2\u003eGoogle AdSenseにログイン後、広告の設定から「新しい広告ユニット」をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-L2GL3BTrepg/U5_vb8X5DXI/AAAAAAAAB3Y/Mn0EXG9dQmo/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"62\" src\u003d\"https://3.bp.blogspot.com/-L2GL3BTrepg/U5_vb8X5DXI/AAAAAAAAB3Y/Mn0EXG9dQmo/s1600/01.png\" 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://4.bp.blogspot.com/-LEcLSPJPFaA/U5_wV_OzRNI/AAAAAAAAB3g/by5iYxcKV9M/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"318\" src\u003d\"https://4.bp.blogspot.com/-LEcLSPJPFaA/U5_wV_OzRNI/AAAAAAAAB3g/by5iYxcKV9M/s1600/02.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e以下、好みの設定に変更後「保存してコードを取得」をクリックします。\u003cbr /\u003e\n\u003ch2\u003eレスポンシブ広告ユニットの設定\u003c/h2\u003e参考：\u003ca href\u003d\"https://support.google.com/adsense/answer/3213689\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eレスポンシブ広告ユニットについて\u003c/a\u003e\u003cbr /\u003e\n参考：\u003ca href\u003d\"https://support.google.com/adsense/answer/3543893\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eレスポンシブ広告ユニットを作成する\u003c/a\u003e\u003cbr /\u003e\nコード取得時に「スマートサイズ（推奨）」と「アドバンス（コード変更が必要）」のどちらかが選べます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ch3\u003eスマートサイズ（推奨）\u003c/h3\u003eスマートサイズは、デフォルトの状態だとautoになっています。最初はautoのままコードを貼り付けてどのような広告サイズが表示されるのか確認します。\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003edata-ad-format\u003d\"auto\"\n\u003c/code\u003e\u003c/pre\u003e気に入らなければautoの部分を、rectangle（レクタングル）、vertical（縦長）、horizontal（横長）に変更することにより、好みの形状の広告が表示されるようになります。\u003cbr /\u003e\n\u003cbr /\u003e\n最大幅580pxの記事下にスマートサイズのrectangleを貼ったところ、PCではレクタングル大とテキスト広告が重なるやつの表示が確認できました。\u003cbr /\u003e\nスマホではレクタングル中のみ確認できました。\u003cbr /\u003e\n\u003cbr /\u003e\n最大幅960px（広告スペース幅は730px）のサイトのタイトル横に、728×90の広告を表示させようとして、スマートサイズのhorizontalを貼ったところ、広告の表示は確認できなかった。これをアドバンスのコードに変更すると、PCではビッグバナーの表示が確認できました。原因は不明。\u003cbr /\u003e\nスマホではモバイルバナーが確認できました。\u003cbr /\u003e\n\u003ch3\u003eアドバンス（コード変更が必要）\u003c/h3\u003eアドバンスは、画面の大きさに合わせて、自分で広告のサイズを指定することができます。\u003cbr /\u003e\nデフォルトではこのようになっています。\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e.***** { width: 320px; height: 50px; }\n@media(min-width: 500px) { .***** { width: 468px; height: 60px; } }\n@media(min-width: 800px) { .***** { width: 728px; height: 90px; } }\n\u003c/code\u003e\u003c/pre\u003eこのwidthとheightの数値をそれぞれ変更することにより、広告のサイズが変わります。\u003cbr /\u003e\n\u003cbr /\u003e\nカスタム広告ユニットには、サイズ制限があります。\u003cbr /\u003e\n参考：\u003ca href\u003d\"http://www.memorou.com/2014/01/google-adsense.html\"\u003eGoogle AdSenseのサイズを変更できる「カスタム広告ユニット」を設置\u003c/a\u003e\u003cbr /\u003e\n\u003cul\u003e\u003cli\u003e300pxを超過できるのは高さか幅の一方のみ\u003c/li\u003e\n\u003cli\u003e最小幅は120px\u003c/li\u003e\n\u003cli\u003e最小高さは50px\u003c/li\u003e\n\u003cli\u003e高さと幅のどちらも1200pxまで\u003c/li\u003e\n\u003c/ul\u003e"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6582451147807677700"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6582451147807677700"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/06/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":"https://3.bp.blogspot.com/-L2GL3BTrepg/U5_vb8X5DXI/AAAAAAAAB3Y/Mn0EXG9dQmo/s72-c/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-5010604460975154127"},"published":{"$t":"2014-06-09T14:28:00.004+09:00"},"updated":{"$t":"2017-02-19T22:18:40.433+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":"ウェブマスターツール"}],"title":{"type":"text","$t":"WordPressサイトをアナリティクスとウェブマスターツールに登録"},"content":{"type":"html","$t":"WordPressで作成したサイトをアナリティクスとウェブマスターツールに登録します。\u003cbr /\u003e\n\u003cbr /\u003e\n順序としては、先にアナリティクスに登録してからウェブマスターツールに登録しました。\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eグーグルアナリティクスの登録\u003c/h2\u003e使用するプラグインは、「Google Analytics for WordPress」です。\u003cbr /\u003e\n\u003cbr /\u003e\nまず、アナリティクスにサイトを登録します。\u003cbr /\u003e\n次に、プラグインをインストールして有効化したら、設定のGoogle AnalyticsからトラッキングIDを登録します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-_bFE0chOfpY/U4nIx5hJcMI/AAAAAAAAB0k/Ce6W78ZJcaU/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/-_bFE0chOfpY/U4nIx5hJcMI/AAAAAAAAB0k/Ce6W78ZJcaU/s1600/01.png\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n「Manually enter your UA code」にチェックを入れ、トラッキングIDを入力します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-JOs0fnbF35o/U4nLCbw3LvI/AAAAAAAAB0w/OyxF29Q_S90/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"126\" src\u003d\"http://4.bp.blogspot.com/-JOs0fnbF35o/U4nLCbw3LvI/AAAAAAAAB0w/OyxF29Q_S90/s1600/02.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eトラッキングIDは、アナリティクス設定のプロパティ設定からも確認できます。\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/-iZIzHqB_7Gs/U4nLWhVQd5I/AAAAAAAAB04/pYsf24BoicI/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/-iZIzHqB_7Gs/U4nLWhVQd5I/AAAAAAAAB04/pYsf24BoicI/s1600/03.png\" /\u003e\u003c/a\u003e\u003c/div\u003e最後に「Update Google Analytics Settings」を押して完了です。\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\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-7iJ04eZ0e7M/U6OahpF3tgI/AAAAAAAAB3w/0_KRStTyvL8/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"59\" src\u003d\"http://4.bp.blogspot.com/-7iJ04eZ0e7M/U6OahpF3tgI/AAAAAAAAB3w/0_KRStTyvL8/s1600/01.png\" 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/-8uru8xrNnsc/U6OcO2ygMHI/AAAAAAAAB4E/vFitAVV6AOA/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"248\" src\u003d\"http://1.bp.blogspot.com/-8uru8xrNnsc/U6OcO2ygMHI/AAAAAAAAB4E/vFitAVV6AOA/s1600/02.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e最後に保存ボタンを押したら完了です。\u003cbr /\u003e\n\u003cbr /\u003e\nアドセンスのタイムゾーンの変更は\u003ca href\u003d\"http://www.memorou.com/2014/03/googlegoogle-adsense-support-pin.html\"\u003eこちら\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eグーグルウェブマスターツールの登録\u003c/h2\u003e使用するプラグインは、「Google XML Sitemaps」です。\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/-ZtdLghvMiXc/U4nQN5k49YI/AAAAAAAAB1E/aClblFM7Rkw/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/-ZtdLghvMiXc/U4nQN5k49YI/AAAAAAAAB1E/aClblFM7Rkw/s1600/04.png\" /\u003e\u003c/a\u003e\u003c/div\u003e「sitemap.xml」と入力して、サイトマップをテストします。テストがうまくいったら、サイトマップを送信します。 \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/-_oDUFHjyHzs/U4nSJ0TRmjI/AAAAAAAAB1Q/xZazvk5t7jA/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"155\" src\u003d\"http://3.bp.blogspot.com/-_oDUFHjyHzs/U4nSJ0TRmjI/AAAAAAAAB1Q/xZazvk5t7jA/s1600/05.png\" 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://2.bp.blogspot.com/-cu41Bw6dLms/U4nT6QMw2mI/AAAAAAAAB1c/-gTRGyHgsFw/s1600/06.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"72\" src\u003d\"http://2.bp.blogspot.com/-cu41Bw6dLms/U4nT6QMw2mI/AAAAAAAAB1c/-gTRGyHgsFw/s1600/06.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n「robots.txt により URL が制限されています」とエラーが出ることがあります。そんなときは、WordPressの設定から表示設定を選択して、検索エンジンでの表示のチェックをはずします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-0beFtPuwPrA/U4nUsSao6jI/AAAAAAAAB1k/pcuYrkQuz6s/s1600/07.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"124\" src\u003d\"http://4.bp.blogspot.com/-0beFtPuwPrA/U4nUsSao6jI/AAAAAAAAB1k/pcuYrkQuz6s/s1600/07.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e最後に忘れずに変更を保存します。\u003cbr /\u003e\n\u003cbr /\u003e\nあとは時間が解決してくれるはず。\u003cbr /\u003e\n\u003ch3\u003e追記\u003c/h3\u003e2日後あたりから徐々に、インデックスに登録されるようになりました。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/5010604460975154127"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/5010604460975154127"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/06/wordpress_9.html","title":"WordPressサイトをアナリティクスとウェブマスターツールに登録"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://2.bp.blogspot.com/-_bFE0chOfpY/U4nIx5hJcMI/AAAAAAAAB0k/Ce6W78ZJcaU/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-5581458816249136976"},"published":{"$t":"2014-06-02T12:45:00.000+09:00"},"updated":{"$t":"2017-02-19T22:34:12.782+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"URL"},{"scheme":"http://www.blogger.com/atom/ns#","term":"パーマリンク設定"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ドメインキング"}],"title":{"type":"text","$t":"WordPressパーマリンク設定でカスタム構造を選択すると404エラーが出るときの解決策"},"content":{"type":"html","$t":"パーマリンク設定のカスタム構造でタグを入力すると、404エラーでページが表示されなくなりました。\u003cbr /\u003e\nそんな時の解決方法です。サーバーはドメインキングを使用しています。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003ehttpdocsの属性変更\u003c/h2\u003ewordpressが入っているフォルダの属性を変更します。今回は、httpdocsに入っていたためこれを変更します。\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/-4Icg_GfirQk/U4gvW5vhBtI/AAAAAAAABz8/63o48HqwCSc/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/-4Icg_GfirQk/U4gvW5vhBtI/AAAAAAAABz8/63o48HqwCSc/s1600/01.png\" height\u003d\"320\" width\u003d\"257\" /\u003e\u003c/a\u003e\u003c/div\u003eFFFTPでhttpdocsを右クリックして属性変更を選択します。\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/-FmYhI6k_Cw8/U4gvcvteCgI/AAAAAAAAB0E/H6QfjXPqXiA/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/-FmYhI6k_Cw8/U4gvcvteCgI/AAAAAAAAB0E/H6QfjXPqXiA/s1600/02.png\" /\u003e\u003c/a\u003e\u003c/div\u003e属性の変更で書込にチェックをいれOKボタンを押します。\u003cbr /\u003e\n\u003cbr /\u003e\nWordPressにログインして、設定からパーマリンク設定を選択します。\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/-5uU2uV_tgZc/U4g6L5zJdsI/AAAAAAAAB0U/RvHEXmSVDA0/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/-5uU2uV_tgZc/U4g6L5zJdsI/AAAAAAAAB0U/RvHEXmSVDA0/s1600/03.png\" height\u003d\"135\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003e使えるタグの一覧\u003c/h3\u003e\u003cblockquote\u003e構造タグ\u003cbr /\u003e\n%year%\u003cbr /\u003e\n投稿された年を4桁で取得します。例えば、2004です。\u003cbr /\u003e\n%monthnum%\u003cbr /\u003e\n投稿された月を取得します。例えば、05です。\u003cbr /\u003e\n%day%\u003cbr /\u003e\n投稿された日を取得します。例えば、28です。\u003cbr /\u003e\n%hour%\u003cbr /\u003e\n投稿された時（時間）を取得します。例えば、15です。\u003cbr /\u003e\n%minute%\u003cbr /\u003e\n投稿された分を取得します。例えば、43です。\u003cbr /\u003e\n%second%\u003cbr /\u003e\n投稿された秒を取得します。例えば、33です。\u003cbr /\u003e\n%post_id%\u003cbr /\u003e\n投稿の固有IDを取得します。例えば、423です。\u003cbr /\u003e\n%postname%\u003cbr /\u003e\n投稿の投稿名を取得します。\u003cbr /\u003e\n%category%\u003cbr /\u003e\n投稿のカテゴリーを取得します。サブカテゴリーは入れ子にされたディレクトリとして取得されます。\u003cbr /\u003e\n%author%\u003cbr /\u003e\n投稿の作成者を取得します。\u003c/blockquote\u003e出典：\u003ca href\u003d\"http://wpdocs.sourceforge.jp/%E3%83%91%E3%83%BC%E3%83%9E%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ehttp://wpdocs.sourceforge.jp/パーマリンクの使い方\u003c/a\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/5581458816249136976"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/5581458816249136976"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/06/wordpress404.html","title":"WordPressパーマリンク設定でカスタム構造を選択すると404エラーが出るときの解決策"}],"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/-4Icg_GfirQk/U4gvW5vhBtI/AAAAAAAABz8/63o48HqwCSc/s72-c/01.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-3101420934737389429"},"published":{"$t":"2014-04-11T11:22:00.000+09:00"},"updated":{"$t":"2017-02-20T22:13:52.241+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"レンタルサーバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ドメインキング"}],"title":{"type":"text","$t":"ドメインキングのプランが新しくなっていた"},"content":{"type":"html","$t":"今までのプランなどは、\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_24.html\"\u003eWordPressが使えるドメインキングでレンタルサーバーと独自ドメインを取得してみた\u003c/a\u003eで説明しています。\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://2.bp.blogspot.com/-itnQ_k81Nek/U0dPaZu4mRI/AAAAAAAABq8/nEg8lvRS-Lo/s1600/029051.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"320\" src\u003d\"http://2.bp.blogspot.com/-itnQ_k81Nek/U0dPaZu4mRI/AAAAAAAABq8/nEg8lvRS-Lo/s1600/029051.jpg\" width\u003d\"174\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nキャンペーン中の登録一年目は、どのプランを選んでも初期費用や月額料金込みで100円です。\u003cbr /\u003e\nプランの変更も可能なので、初年度はMプランで使ってみて、容量が余りそうならSプランにするということもできます。\u003cbr /\u003e\n\u003cbr /\u003e\nPプラン（2年目以降）\u003cbr /\u003e\n\u003ctable class\u003d\"table010\"\u003e\u003ctbody\u003e\n\u003ctr\u003e       \u003cth\u003e月額料金\u003c/th\u003e       \u003cth\u003eメール\u003c/th\u003e       \u003cth\u003eマルチドメイン\u003c/th\u003e       \u003cth\u003eサブドメイン\u003c/th\u003e     \u003c/tr\u003e\n\u003ctr\u003e       \u003ctd\u003e103円\u003c/td\u003e       \u003ctd\u003e10個\u003c/td\u003e       \u003ctd\u003e10個\u003c/td\u003e       \u003ctd\u003e10個\u003c/td\u003e     \u003c/tr\u003e\n\u003ctr\u003e       \u003cth\u003eディスク容量\u003c/th\u003e       \u003cth\u003eMySQL\u003c/th\u003e       \u003cth\u003e電話サポート\u003c/th\u003e       \u003cth\u003e簡単インストール\u003c/th\u003e     \u003c/tr\u003e\n\u003ctr\u003e       \u003ctd\u003e10G\u003c/td\u003e       \u003ctd\u003e1個\u003c/td\u003e       \u003ctd\u003e無料\u003c/td\u003e       \u003ctd\u003e○\u003c/td\u003e     \u003c/tr\u003e\n\u003c/tbody\u003e \u003c/table\u003eSプラン（2年目以降）\u003cbr /\u003e\n\u003ctable class\u003d\"table010\"\u003e\u003ctbody\u003e\n\u003ctr\u003e       \u003cth\u003e月額料金\u003c/th\u003e       \u003cth\u003eメール\u003c/th\u003e       \u003cth\u003eマルチドメイン\u003c/th\u003e       \u003cth\u003eサブドメイン\u003c/th\u003e     \u003c/tr\u003e\n\u003ctr\u003e       \u003ctd\u003e324円～\u003c/td\u003e       \u003ctd\u003e無制限\u003c/td\u003e       \u003ctd\u003e無制限\u003c/td\u003e       \u003ctd\u003e無制限\u003c/td\u003e     \u003c/tr\u003e\n\u003ctr\u003e       \u003cth\u003eディスク容量\u003c/th\u003e       \u003cth\u003eMySQL\u003c/th\u003e       \u003cth\u003e電話サポート\u003c/th\u003e       \u003cth\u003e簡単インストール\u003c/th\u003e     \u003c/tr\u003e\n\u003ctr\u003e       \u003ctd\u003e100G\u003c/td\u003e       \u003ctd\u003e5個\u003c/td\u003e       \u003ctd\u003e無料\u003c/td\u003e       \u003ctd\u003e○\u003c/td\u003e     \u003c/tr\u003e\n\u003c/tbody\u003e \u003c/table\u003eMプラン（2年目以降）\u003cbr /\u003e\n\u003ctable class\u003d\"table010\"\u003e\u003ctbody\u003e\n\u003ctr\u003e       \u003cth\u003e月額料金\u003c/th\u003e       \u003cth\u003eメール\u003c/th\u003e       \u003cth\u003eマルチドメイン\u003c/th\u003e       \u003cth\u003eサブドメイン\u003c/th\u003e     \u003c/tr\u003e\n\u003ctr\u003e       \u003ctd\u003e864円～\u003c/td\u003e       \u003ctd\u003e無制限\u003c/td\u003e       \u003ctd\u003e無制限\u003c/td\u003e       \u003ctd\u003e無制限\u003c/td\u003e     \u003c/tr\u003e\n\u003ctr\u003e       \u003cth\u003eディスク容量\u003c/th\u003e       \u003cth\u003eMySQL\u003c/th\u003e       \u003cth\u003e電話サポート\u003c/th\u003e       \u003cth\u003e簡単インストール\u003c/th\u003e     \u003c/tr\u003e\n\u003ctr\u003e       \u003ctd\u003e200G\u003c/td\u003e       \u003ctd\u003e10個\u003c/td\u003e       \u003ctd\u003e無料\u003c/td\u003e       \u003ctd\u003e○\u003c/td\u003e     \u003c/tr\u003e\n\u003c/tbody\u003e \u003c/table\u003e簡単インストールは、WordPressやmovabletype、zenphotoなど他にも多くのアプリケーションに対応しています。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-IEJJokvxTZA/U0dQi5VaOGI/AAAAAAAABrE/ZRYV4_tDe9c/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"64\" src\u003d\"http://3.bp.blogspot.com/-IEJJokvxTZA/U0dQi5VaOGI/AAAAAAAABrE/ZRYV4_tDe9c/s1600/01.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n最新の情報やキャンペーンなど詳しくは、 \u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d264CRE+BD18SY+CJY+NTRMQ\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eドメインキング\u003c/a\u003e   \u003cimg alt\u003d\"\" border\u003d\"0\" src\u003d\"http://www14.a8.net/0.gif?a8mat\u003d264CRE+BD18SY+CJY+NTRMQ\" height\u003d\"1\" width\u003d\"1\" /\u003eで確認してください。\u003cbr /\u003e\n\u003cbr /\u003e\nその他のレンタルサーバーは、\u003ca href\u003d\"http://www.memorou.com/p/rensaba.html\"\u003eレンタルサーバー比較\u003c/a\u003eを参考にしてください。 "},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3101420934737389429"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3101420934737389429"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/04/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://2.bp.blogspot.com/-itnQ_k81Nek/U0dPaZu4mRI/AAAAAAAABq8/nEg8lvRS-Lo/s72-c/029051.jpg","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-544241288135232801"},"published":{"$t":"2014-03-11T10:31:00.000+09:00"},"updated":{"$t":"2017-02-20T23:08:41.098+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"アップデート"},{"scheme":"http://www.blogger.com/atom/ns#","term":"画像"}],"title":{"type":"text","$t":"WordPressにメディア（画像）が追加できなくなった時の対処法"},"content":{"type":"html","$t":"WordPressのバージョンをアップデートしたら、投稿にメディアが追加できなくなってしまいました。\u003cbr /\u003e\n\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://4.bp.blogspot.com/-1u8eGEWdceI/UxlnakdDD5I/AAAAAAAABlc/vpbUPJJ2pUo/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/-1u8eGEWdceI/UxlnakdDD5I/AAAAAAAABlc/vpbUPJJ2pUo/s1600/01.png\" height\u003d\"88\" width\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\"http://2.bp.blogspot.com/-FWunpT8I6pw/UxlngxfTtHI/AAAAAAAABlk/mSUqsI5XVHU/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/-FWunpT8I6pw/UxlngxfTtHI/AAAAAAAABlk/mSUqsI5XVHU/s1600/02.png\" height\u003d\"128\" 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/-r5EHuYI77Pg/Uxlnya2F8UI/AAAAAAAABls/wkK9TTHLhrw/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/-r5EHuYI77Pg/Uxlnya2F8UI/AAAAAAAABls/wkK9TTHLhrw/s1600/03.png\" height\u003d\"75\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n\u003ch3\u003e投稿画面のエラー\u003c/h3\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-DJHjd3H3waE/Ux0hOPVW_WI/AAAAAAAABmU/FNNs-n4Qn_o/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-DJHjd3H3waE/Ux0hOPVW_WI/AAAAAAAABmU/FNNs-n4Qn_o/s1600/05.png\" height\u003d\"36\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eエラーがありました。\u003cbr /\u003e\n\u003cblockquote\u003eUncaught SyntaxError: Unexpected identifier\u003cbr /\u003e\nUncaught ReferenceError: jQuery is not defined\u003c/blockquote\u003eの2つ。\u003cbr /\u003e\n\u003ch2\u003e試したけど解決しなかった方法と試そうとして止めた方法\u003c/h2\u003eWordPressに、メディアが追加できなることはよくあるようで、検索すると結構同じ症状になっている方がいます。\u003cbr /\u003e\n\u003ch3\u003eプラグインの更新と停止\u003c/h3\u003eそんな方々が解決した方法で、プラグインを最新版に更新したらメディアが追加できるようになった。という方が結構いますがだめでした。\u003cbr /\u003e\n\u003cbr /\u003e\n念のため、プラグインを全て停止して試してみましたが、クリックできませんでした。\u003cbr /\u003e\n\u003ch3\u003eブラウザの変更\u003c/h3\u003e現在使用しているのがIronで、試したのがIE9（インターネットエクスプローラー）、GC（グーグルクローム）、Fx（ファイアフォックス）、Opera（結構古いバージョン）の4種類を使ってみましたがだめした。\u003cbr /\u003e\n\u003ch3\u003ewp-config.phpの編集 \u003c/h3\u003eなんだか面倒な感じなので、最後の手段。\u003cbr /\u003e\n\u003ch3\u003eWordPressのダウングレード\u003c/h3\u003eセキュリティー的によくないようなので試していません。\u003cbr /\u003e\n\u003ch3\u003eパーミッションの変更\u003c/h3\u003euploadsフォルダのパーミッションを「755」から「757」に変更、変化なし。その後、「777」に変更、変化なし。\u003cbr /\u003e\n\u003cbr /\u003e\n参考：\u003ca href\u003d\"http://ja.forums.wordpress.org/topic/23477\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ewordpress.org フォーラム\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://3.bp.blogspot.com/-jO0KlUaCk0I/Ux1y99D1IRI/AAAAAAAABns/kvHdCfKks3c/s1600/06.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-jO0KlUaCk0I/Ux1y99D1IRI/AAAAAAAABns/kvHdCfKks3c/s1600/06.png\" height\u003d\"98\" 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/-L_v2M2QMpRs/Ux10-e9bs5I/AAAAAAAABn4/VFXIDaqlFnw/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/-L_v2M2QMpRs/Ux10-e9bs5I/AAAAAAAABn4/VFXIDaqlFnw/s1600/07.png\" height\u003d\"98\" 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/-nBCRF5_Rlms/Ux11qrdzAcI/AAAAAAAABoA/wIaP7qE2hls/s1600/08.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-nBCRF5_Rlms/Ux11qrdzAcI/AAAAAAAABoA/wIaP7qE2hls/s1600/08.png\" height\u003d\"78\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nファイルのURLをコピーします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-fce0-CktyU4/Ux2DE8jDLRI/AAAAAAAABoQ/FA6lCWDay1k/s1600/09.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-fce0-CktyU4/Ux2DE8jDLRI/AAAAAAAABoQ/FA6lCWDay1k/s1600/09.png\" height\u003d\"134\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eコピーしたURLを、下のコードの「ファイルのURL」部分に貼り付けます。\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;img src\u003d\"ファイルのURL\" /\u0026gt;\n\u003c/code\u003e\u003c/pre\u003eこれを記事の画像を追加したい場所に貼り付ければ完了です。 \u003cbr /\u003e\n\u003cbr /\u003e\n画像にリンクを追加する場合は、下のコードのようにします。\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;a href\u003d\"ファイルのURL\"\u0026gt;\n\u0026lt;img src\u003d\"ファイルのURL\" /\u0026gt;\n\u0026lt;/a\u0026gt;\u003c/code\u003e\u003c/pre\u003e\u003cbr /\u003e\nメディアのアップロードもできない場合は、\u003ca href\u003d\"http://www.memorou.com/2014/03/wordpress.html\"\u003eWordPressのメディアアップロードができない時の解決策\u003c/a\u003eを参考にしてください。\u003cbr /\u003e\n\u003ch2\u003eビジュアルエディターが表示されない\u003c/h2\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-cH9mynjCP78/UxmelByIAKI/AAAAAAAABl8/F27fbzuZzMY/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-cH9mynjCP78/UxmelByIAKI/AAAAAAAABl8/F27fbzuZzMY/s1600/04.png\" height\u003d\"136\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nユーザーのあなたのプロフィールで、「ビジュアルエディターを使用しない」にチェックが付いていないか確認\u003cbr /\u003e\n\u003ch3\u003eプラグインの追加\u003c/h3\u003eビジュアルエディターを拡張表示するプラグインを入れても何も変わりませんでした。\u003cbr /\u003e\n\u003ch3\u003etinymceフォルダの入れ替え\u003c/h3\u003e変化なし。\u003cbr /\u003e\n\u003cbr /\u003e\nフォーラムでは解決済み。\u003cbr /\u003e\n参考：\u003ca href\u003d\"http://ja.forums.wordpress.org/topic/22002\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ewordpress.org フォーラム\u003c/a\u003e\u003cbr /\u003e\n"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/544241288135232801"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/544241288135232801"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/03/wordpress_11.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/-1u8eGEWdceI/UxlnakdDD5I/AAAAAAAABlc/vpbUPJJ2pUo/s72-c/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-4455601546952322736"},"published":{"$t":"2014-03-10T15:06:00.000+09:00"},"updated":{"$t":"2017-02-20T23:12:49.811+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"画像"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ドメインキング"}],"title":{"type":"text","$t":"WordPressのメディアアップロードができない時の解決策"},"content":{"type":"html","$t":"WordPressでメディアアップロードをするときに、「ディレクトリ wp-content/uploads/2014/03を作成できませんでした。この親ディレクトリのアクセス権はサーバーによる書き込みを許可していますか？」と表示され、画像が追加できないときの対処法です。\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/-xTdEBDQPxH4/Ux1EOu-_WUI/AAAAAAAABm0/vMbnbUJbDg0/s1600/06.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-xTdEBDQPxH4/Ux1EOu-_WUI/AAAAAAAABm0/vMbnbUJbDg0/s1600/06.png\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch2\u003eパーミッションの変更\u003c/h2\u003ewp-conteneの属性を「705｣から「757」に変更したら、アップロードできるようになりました。\u003cbr /\u003e\n\u003cbr /\u003e\nその後、「755｣に変更して試していましたが、問題なくアップロードできました。\u003cbr /\u003e\n\u003ch3\u003e変更方法（FFFTP）\u003c/h3\u003ewp-conteneを右クリックして、属性変更をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-cJteZBiUI1w/Ux1PF5rcTkI/AAAAAAAABnE/O40z-0Pk97c/s1600/07.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-cJteZBiUI1w/Ux1PF5rcTkI/AAAAAAAABnE/O40z-0Pk97c/s1600/07.png\" height\u003d\"317\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n現在の属性を変更して「OK」ボタンをクリックしたら完了です。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-eQiJXm0vuoA/Ux1Q0Zlt1uI/AAAAAAAABnQ/_mX-3WzE9mM/s1600/08.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-eQiJXm0vuoA/Ux1Q0Zlt1uI/AAAAAAAABnQ/_mX-3WzE9mM/s1600/08.png\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nこれでだめな場合は、メディア設定で改善される可能性があります。\u003cbr /\u003e\n\u003ch2\u003eファイルアップロード\u003c/h2\u003eWordPressの設定からメディアを選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-yCTiv-rZIrU/Ux1Utcy0-_I/AAAAAAAABnc/esck9AM8C-4/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/-yCTiv-rZIrU/Ux1Utcy0-_I/AAAAAAAABnc/esck9AM8C-4/s1600/09.png\" height\u003d\"178\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eファイルアップロードの「アップロードしたファイルを年月ベースのフォルダに整理」をクリックして、「変更を保存」を押します。\u003cbr /\u003e\n\u003cbr /\u003e\nどちらの方法も一例に過ぎません。\u003cbr /\u003e\n\u003cbr /\u003e\nメディアのアップロードはできるけど、メディアが追加できない場合は、\u003ca href\u003d\"http://www.memorou.com/2014/03/wordpress_11.html\"\u003eWordPressにメディア（画像）が追加できなくなった時の対処法\u003c/a\u003eを参照"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/4455601546952322736"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/4455601546952322736"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/03/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://3.bp.blogspot.com/-xTdEBDQPxH4/Ux1EOu-_WUI/AAAAAAAABm0/vMbnbUJbDg0/s72-c/06.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-7073605636246812444"},"published":{"$t":"2014-01-29T09:49:00.000+09:00"},"updated":{"$t":"2017-02-21T00:10:53.092+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"アップデート"}],"title":{"type":"text","$t":"WordPressの各種アップデート（更新）方法"},"content":{"type":"html","$t":"2014年1月27日WordPressに、新しいバージョン3.8.1の提供が開始されました。\u003cbr /\u003e\n\u003cbr /\u003e\nこれに伴いアップデートを行ったため、その方法を記録します。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eWordPressのアップデート\u003c/h2\u003eWordPressではバージョンアップが行われると、ダッシュボードの上部に「WordPress○○が利用可能です！更新してください。」と表示されます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-KhpbIOPUV44/UucvPdAaAlI/AAAAAAAABbc/kDncm1DhQjo/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"41\" src\u003d\"http://2.bp.blogspot.com/-KhpbIOPUV44/UucvPdAaAlI/AAAAAAAABbc/kDncm1DhQjo/s1600/01.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eバージョン3.8のダッシュボードでは、表示が変わります。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-SCmhVCH8r7A/UudSwFy5GdI/AAAAAAAABb0/6QB4Qgrd78I/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"84\" src\u003d\"http://2.bp.blogspot.com/-SCmhVCH8r7A/UudSwFy5GdI/AAAAAAAABb0/6QB4Qgrd78I/s1600/02.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n「WordPress○○」をクリックすると、改定されたファイル一覧などが確認できます。\u003cbr /\u003e\n\u003cbr /\u003e\n「更新してください」をクリックすると、WordPressのバージョンアップの他、プラグインやテーマの更新もできます。プラグインとテーマの更新については後述します。\u003cbr /\u003e\n\u003cbr /\u003e\nWordPressをアップデートをする前に、データベースとファイルをバックアップしてください。\u003cbr /\u003e\n\u003ca href\u003d\"http://wpdocs.sourceforge.jp/WordPress_%E3%81%AE%E3%83%90%E3%83%83%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eWordPressのバックアップ\u003c/a\u003eについて\u003cbr /\u003e\n\u003ca href\u003d\"http://wpdocs.sourceforge.jp/WordPress_%E3%81%AE%E3%82%A2%E3%83%83%E3%83%97%E3%82%B0%E3%83%AC%E3%83%BC%E3%83%89\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eWordPressのアップグレード\u003c/a\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/-iT1LEWzmjwQ/UudSAHFEGtI/AAAAAAAABbs/yWcQ2z2d7oA/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"165\" src\u003d\"http://1.bp.blogspot.com/-iT1LEWzmjwQ/UudSAHFEGtI/AAAAAAAABbs/yWcQ2z2d7oA/s1600/03.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n「今すぐ更新」をクリックします。すると、503エラーが出る場合があります。気にせずに、ブラウザの戻るボタンを押すなどして、「ダッシュボード」ボタンをクリックすると、無事に更新されています。\u003cbr /\u003e\n\u003cbr /\u003e\nダッシュボードから、「WordPress○○が利用可能です！更新してください。」の表示がなくなれば成功です。\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/-EzrBS7-askg/UudaxZGhrLI/AAAAAAAABcE/dwoiDJPh6bQ/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"91\" src\u003d\"http://3.bp.blogspot.com/-EzrBS7-askg/UudaxZGhrLI/AAAAAAAABcE/dwoiDJPh6bQ/s1600/04.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e画面上部の「すべて」「使用中」「停止中」「利用可能な更新」「必須」の中から、「利用可能な更新」を選択すると、更新ができるプラグインだけが表示されます。\u003cbr /\u003e\n\u003cbr /\u003e\nその中から、更新したいプラグインの「アップデート」をクリックします。\u003cbr /\u003e\n503エラーが出る場合もあります。ブラウザの戻るボタンなどでプラグイン画面に戻ると、無事にアップデートが完了しています。\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://1.bp.blogspot.com/-R5IrHcLpHU4/UuduYgRptvI/AAAAAAAABck/CUAgcOLVR3w/s1600/06.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"284\" src\u003d\"http://1.bp.blogspot.com/-R5IrHcLpHU4/UuduYgRptvI/AAAAAAAABck/CUAgcOLVR3w/s1600/06.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n新しいバージョンが利用できるテーマの中から、更新したいテーマにチェックを入れ、「テーマの更新」をクリックします。\u003cbr /\u003e\n503エラーが出る場合もあります。「更新」や「外観」などから更新されたかどうかを確認します。\u003cbr /\u003e\n\u003ch3\u003e503エラー\u003c/h3\u003e今回行ったどのアップデートでも「503エラー」が出ました。が、全てのアップデートがブラウザの更新をするだけで、「503エラー」が消えて、アップデートも無事に完了しました。\u003cbr /\u003e\n"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7073605636246812444"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7073605636246812444"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/01/wordpress_29.html","title":"WordPressの各種アップデート（更新）方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://2.bp.blogspot.com/-KhpbIOPUV44/UucvPdAaAlI/AAAAAAAABbc/kDncm1DhQjo/s72-c/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-3207810111880639657"},"published":{"$t":"2014-01-10T12:04:00.000+09:00"},"updated":{"$t":"2017-02-25T00:25:25.354+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"URL"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ドメインキング"}],"title":{"type":"text","$t":"WordPressのサイトアドレス（URL）を変更する方法"},"content":{"type":"html","$t":"WordPressのサイトアドレス（URL）が、「ドメイン/wordpress/」となっているものを、「ドメイン/」に変更する方法の記録です。\u003cbr /\u003e\n\u003cbr /\u003e\nサイトアドレスは、設定の一般から変更します。\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n参考：\u003ca href\u003d\"http://wpdocs.sourceforge.jp/Giving_WordPress_Its_Own_Directory\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eWordPress を専用ディレクトリに配置する\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/-e6VuFBkcsi0/Us51jo2CN5I/AAAAAAAABQk/ukvQqpwCKVU/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"80\" src\u003d\"http://2.bp.blogspot.com/-e6VuFBkcsi0/Us51jo2CN5I/AAAAAAAABQk/ukvQqpwCKVU/s1600/01.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n現在のサイトアドレス\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003ehttp://ドメイン/wordpress\n\u003c/code\u003e\u003c/pre\u003eから\u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003ehttp://ドメイン/\n\u003c/code\u003e\u003c/pre\u003eへ変更し、「変更を保存」をクリックします。\u003cbr /\u003e\n\u003cbr /\u003e\nWordPressアドレス（URL）を変更すると、面倒なことになるので、詳しくわからない方は絶対に変更しないように注意。\u003cbr /\u003e\n\u003cbr /\u003e\nWordPress側の設定はここで終了です。\u003cbr /\u003e\n\u003cbr /\u003e\n次に、WordPressディレクトリ（≒WordPressフォルダ）にある「index.php」を、上で変更したサイトのルートディレクトリへ移動します。\u003cbr /\u003e\nパーマリンク設定を行っている場合は、「.htaccess」も移動します。\u003cbr /\u003e\n\u003cbr /\u003e\n一般的に、FTPソフトを使うか、レンタルサーバー上で行います。\u003cbr /\u003e\n\u003ch2\u003eドメインキングの例\u003c/h2\u003eログイン後ドメインをクリックし、WordPressをインストールしているドメイン名を選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-AtKtforCqG8/UsFuPmL9osI/AAAAAAAABMk/L2CglDZLPT4/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"117\" src\u003d\"http://4.bp.blogspot.com/-AtKtforCqG8/UsFuPmL9osI/AAAAAAAABMk/L2CglDZLPT4/s320/01.png\" 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/-k2cOrIsD1O8/UsFuTTiEU_I/AAAAAAAABMs/csGTP5XnFng/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"93\" src\u003d\"http://1.bp.blogspot.com/-k2cOrIsD1O8/UsFuTTiEU_I/AAAAAAAABMs/csGTP5XnFng/s320/02.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nhttpdocsを開きます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-2lKzT_iU7-g/UsFxR5_EicI/AAAAAAAABM4/Fd3j1eob_QA/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"13\" src\u003d\"http://1.bp.blogspot.com/-2lKzT_iU7-g/UsFxR5_EicI/AAAAAAAABM4/Fd3j1eob_QA/s320/03.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nWordPressを開きます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-msDuYgFS3bQ/UsFyaR00oMI/AAAAAAAABNA/q_05q48xIBw/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"34\" src\u003d\"http://1.bp.blogspot.com/-msDuYgFS3bQ/UsFyaR00oMI/AAAAAAAABNA/q_05q48xIBw/s320/04.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nindex.phpを選択して、コピー/移動をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-0BR-Gq9LcuE/Us9bx0P1euI/AAAAAAAABQ0/7ovM4_a0h24/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"161\" src\u003d\"http://2.bp.blogspot.com/-0BR-Gq9LcuE/Us9bx0P1euI/AAAAAAAABQ0/7ovM4_a0h24/s1600/02.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n宛て先を/httpdocs/にして「移動」をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-yCfu-q7Fids/Us9cfOaWS2I/AAAAAAAABQ8/6WbXI3Tu-qM/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"134\" src\u003d\"http://2.bp.blogspot.com/-yCfu-q7Fids/Us9cfOaWS2I/AAAAAAAABQ8/6WbXI3Tu-qM/s1600/03.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eWordPressディレクトリ（≒WordPressフォルダ）と同じ階層に表示されるようにします。\u003cbr /\u003e\n\u003cbr /\u003e\n移動したindex.phpファイルをツール（テキストエディタ）で開いて編集します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-codS9sUqNkw/Us9d3J98zLI/AAAAAAAABRI/IorNNn0nJms/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"75\" src\u003d\"http://2.bp.blogspot.com/-codS9sUqNkw/Us9d3J98zLI/AAAAAAAABRI/IorNNn0nJms/s1600/04.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n編集前 \u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003erequire('./wp-blog-header.php');\n\u003c/code\u003e\u003c/pre\u003e編集後 \u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003erequire('./wordpress/wp-blog-header.php');\n\u003c/code\u003e\u003c/pre\u003e編集が終わったら「OK」をクリックします。\u003cbr /\u003e\n\u003cbr /\u003e\nサイトアドレスで指定したURLにアクセスしてWordPressが表示されれば成功です。\u003cbr /\u003e\n\u003cbr /\u003e\nWordPressへのログインは今まで通り、「ドメイン/wordpress/wp-admin」から行います。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3207810111880639657"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3207810111880639657"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/01/wordpress.html","title":"WordPressのサイトアドレス（URL）を変更する方法"}],"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/-e6VuFBkcsi0/Us51jo2CN5I/AAAAAAAABQk/ukvQqpwCKVU/s72-c/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-698316904896766116"},"published":{"$t":"2014-01-06T16:30:00.000+09:00"},"updated":{"$t":"2017-02-25T00:51:11.719+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":"Blogger"}],"title":{"type":"text","$t":"コピーライトの変更と書き方"},"content":{"type":"html","$t":"年が明けてコピーライトを変更したので、変更方法と書き方を記録します。\u003cbr /\u003e\n\u003cbr /\u003e\n著作権リンクの削除や改変が可能かどうかは、テンプレートやテーマの作成者に確認してください。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eBloggerのコピーライトを変更\u003c/h2\u003eレイアウトを選択して、一番下のAttributionの「編集」をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/--v-eS_mUvVo/UsoqOHB2VbI/AAAAAAAABNg/M6mdxXzAyxY/s1600/00.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/--v-eS_mUvVo/UsoqOHB2VbI/AAAAAAAABNg/M6mdxXzAyxY/s1600/00.png\" height\u003d\"87\" 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://3.bp.blogspot.com/-b6v2hX4X0i0/UsovIGAuA0I/AAAAAAAABNw/_poRBXHD548/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/-b6v2hX4X0i0/UsovIGAuA0I/AAAAAAAABNw/_poRBXHD548/s1600/02.png\" height\u003d\"146\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e入力する内容はこのブログを例にすると、\u003cbr /\u003e\nCopyright © 2013-2014 はじめてのWordPress\u0026amp;Blogger\u003cbr /\u003e\nまたは、Copyrightを省略して、\u003cbr /\u003e\n© 2013-2014 はじめてのWordPress\u0026amp;Blogger\u003cbr /\u003e\nとします。\u003cbr /\u003e\n\u003cbr /\u003e\n©は(c)でも（C）でも同じです。2013-2014はサイトを公開した年-更新年、はじめてのWordPress\u0026amp;Bloggerの部分は作成者名（企業名など）やドメイン名を入力します。\u003cbr /\u003e\n\u003cbr /\u003e\nAll rights reserved（無断複写·転載を禁じます）は書いても書かなくてもよさそうなので、このブログでは書かないようにしました。\u003cbr /\u003e\n\u003cbr /\u003e\n「保存」を押すと自動で「.」と「Powered by Blogger.」が表示されます。\u003cbr /\u003e\n\u003cbr /\u003e\n作成者部分をリンクにする場合は、 \u003cbr /\u003e\n\u003cpre\u003e\u003ccode\u003e© 2013-2014 \u0026lt;a href\u003d\"http://wordpress-customize.blogspot.jp\"\u0026gt;はじめてのWordPress\u0026amp;Blogger\u0026lt;/a\u0026gt;\n\u003c/code\u003e\u003c/pre\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/-igqV-bJA660/UspAAr9XEHI/AAAAAAAABOI/fH0BflNKnIY/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/-igqV-bJA660/UspAAr9XEHI/AAAAAAAABOI/fH0BflNKnIY/s1600/01.png\" height\u003d\"25\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch2\u003eWordPressのコピーライトを変更\u003c/h2\u003efooter.phpの子テーマを作成します。\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_446.html\"\u003e子テーマの作成方法\u003c/a\u003eはこちらを参考にしてください。\u003cbr /\u003e\n\u003cbr /\u003e\nダッシュボードの外観からテーマの編集を選択しして、作成したfooter.phpを編集します。\u003cbr /\u003e\n\u003cbr /\u003e\n使用しているテーマによっては、コピーライトの改変が認められてない場合があります。テーマの作成者にメールなどで確認するのが一般的なようです。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/698316904896766116"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/698316904896766116"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/01/blog-post_6.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/--v-eS_mUvVo/UsoqOHB2VbI/AAAAAAAABNg/M6mdxXzAyxY/s72-c/00.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-3671208200915384899"},"published":{"$t":"2013-12-25T11:47:00.002+09:00"},"updated":{"$t":"2017-02-25T15:55:56.105+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ドメインキング"}],"title":{"type":"text","$t":"ドメインキングにWordPressをインストールする方法"},"content":{"type":"html","$t":"ドメインキングで独自ドメインを取得して、レンタルサーバーを借りたので、早速WordPressをインストールしました。\u003cbr /\u003e\n\u003cbr /\u003e\nアプリケーションから自動インストールすると、アップグレードできないと書いてあるので、念のため手動でインストールします。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-ajgCC72PbsY/UrknTUXuEGI/AAAAAAAABDk/5ikUcanmNX4/s1600/00.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"64\" src\u003d\"http://3.bp.blogspot.com/-ajgCC72PbsY/UrknTUXuEGI/AAAAAAAABDk/5ikUcanmNX4/s320/00.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nアップグレードできなくてもいいという方は自動インストール方法、できないといやだという方は手動インストール方法を参照してください。\u003cbr /\u003e\n\u003ch2\u003eインストールする前の設定方法\u003c/h2\u003e設定は、データベース、ホスティング、PHPの3箇所です。簡単インストールを行う場合は、データベースの作成は不要です。\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://2.bp.blogspot.com/-BjqMdVc1WzQ/Urk0uHj92EI/AAAAAAAABEU/B27WLf3ZrsY/s1600/08.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"110\" src\u003d\"http://2.bp.blogspot.com/-BjqMdVc1WzQ/Urk0uHj92EI/AAAAAAAABEU/B27WLf3ZrsY/s320/08.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eツールの新しいデータベースを追加するをクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-8ppfZlC460A/Urk1qfabEKI/AAAAAAAABEc/c8aPkAij5Z4/s1600/09.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-8ppfZlC460A/Urk1qfabEKI/AAAAAAAABEc/c8aPkAij5Z4/s1600/09.png\" /\u003e\u003c/a\u003e\u003c/div\u003eそのままOKをクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-I73GQR9hEqU/Urk2mtLrqDI/AAAAAAAABEo/P1VHs3-ebfs/s1600/10.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"136\" src\u003d\"http://2.bp.blogspot.com/-I73GQR9hEqU/Urk2mtLrqDI/AAAAAAAABEo/P1VHs3-ebfs/s320/10.png\" 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://3.bp.blogspot.com/-RnzsqFQpX8U/Urk7M3paVdI/AAAAAAAABE0/MEsuN1og5aI/s1600/11.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"109\" src\u003d\"http://3.bp.blogspot.com/-RnzsqFQpX8U/Urk7M3paVdI/AAAAAAAABE0/MEsuN1og5aI/s320/11.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eデータベースユーザー名とパスワードを入力してOKをクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-VQlm0qBgxv0/Urk7_6gZRlI/AAAAAAAABE8/eI_PuZDpHX8/s1600/12.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"141\" src\u003d\"http://4.bp.blogspot.com/-VQlm0qBgxv0/Urk7_6gZRlI/AAAAAAAABE8/eI_PuZDpHX8/s320/12.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eデータベース名、入力したユーザー名とパスワードは忘れないようにメモを取っておきます。\u003cbr /\u003e\nWordPressを手動インストールするときに必要になります。\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://2.bp.blogspot.com/-nIEI8lfp5Vw/UrkhGkpyF2I/AAAAAAAABDI/zSGi9uLczA8/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"117\" src\u003d\"http://2.bp.blogspot.com/-nIEI8lfp5Vw/UrkhGkpyF2I/AAAAAAAABDI/zSGi9uLczA8/s320/01.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eウェブサイトとドメインをクリックして、ホスティングの「追加する」をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-zrinErIro98/UrlMTXMO9_I/AAAAAAAABFM/9k4kZ7nwY0I/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"69\" src\u003d\"http://4.bp.blogspot.com/-zrinErIro98/UrlMTXMO9_I/AAAAAAAABFM/9k4kZ7nwY0I/s320/01.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eウェブサイトホスティングをクリックして、任意のユーザー名とパスワードを入力します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-WmVHHiWZCFY/UrlNGStCMAI/AAAAAAAABFU/t6aw1gV1ZtU/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"164\" src\u003d\"http://3.bp.blogspot.com/-WmVHHiWZCFY/UrlNGStCMAI/AAAAAAAABFU/t6aw1gV1ZtU/s320/02.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e最弱から強になればパスワードを設定できます。\u003cbr /\u003e\n入力したら忘れないようにメモをとって、最後にOKを押したら完了です。\u003cbr /\u003e\n\u003cbr /\u003e\nWordPressをアップロードするときに必要になります。\u003cbr /\u003e\n\u003ch3\u003ePHPの設定\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/-WosR08msM_I/UrlXAgrdqvI/AAAAAAAABFk/w9-2DzjPSFE/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"90\" src\u003d\"http://3.bp.blogspot.com/-WosR08msM_I/UrlXAgrdqvI/AAAAAAAABFk/w9-2DzjPSFE/s320/01.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eウェブサイトとドメインをクリックして、高度なオペレーションを表示するをクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-c14pWOKRrdo/UrlYcy2nHWI/AAAAAAAABFw/nMOLo618mSA/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"165\" src\u003d\"http://4.bp.blogspot.com/-c14pWOKRrdo/UrlYcy2nHWI/AAAAAAAABFw/nMOLo618mSA/s320/02.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eウェブサイトスクリプティングとセキュリティをクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-rBG7CJQ11jg/UrlZHk7IMJI/AAAAAAAABF4/jkF2h3Ybuy4/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"132\" src\u003d\"http://1.bp.blogspot.com/-rBG7CJQ11jg/UrlZHk7IMJI/AAAAAAAABF4/jkF2h3Ybuy4/s320/03.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003ePHP対応にチェックを入れて「OK」をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-gPRRENweilw/UrlaI3A8mKI/AAAAAAAABGE/1Z-Vr77hwmA/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"187\" src\u003d\"http://2.bp.blogspot.com/-gPRRENweilw/UrlaI3A8mKI/AAAAAAAABGE/1Z-Vr77hwmA/s320/04.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eこれでPHPの設定は完了です。\u003cbr /\u003e\n\u003ch2\u003eWordPress自動インストール方法\u003c/h2\u003eログイン後、ドメインをクリックして、WordPressをインストールするドメインを選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-nIEI8lfp5Vw/UrkhGkpyF2I/AAAAAAAABDE/UURyAAe42tg/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"117\" src\u003d\"http://2.bp.blogspot.com/-nIEI8lfp5Vw/UrkhGkpyF2I/AAAAAAAABDE/UURyAAe42tg/s320/01.png\" 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://3.bp.blogspot.com/-wSI0OInHT0g/Urkiga_XLYI/AAAAAAAABDQ/LsZXP-835YU/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"103\" src\u003d\"http://3.bp.blogspot.com/-wSI0OInHT0g/Urkiga_XLYI/AAAAAAAABDQ/LsZXP-835YU/s320/02.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nアプリケーションがいくつか表示されるので、そのなかからWordPressのインストールをクリックします。\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/-EKxshUEQ9Jw/UrkjK9bUSHI/AAAAAAAABDY/GizD2LI64q0/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"149\" src\u003d\"http://2.bp.blogspot.com/-EKxshUEQ9Jw/UrkjK9bUSHI/AAAAAAAABDY/GizD2LI64q0/s320/03.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eちなみに、ここではWordPress3.6になっているが、このときの最新バージョンは3.8でした。\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/--2oa-BYAVKE/Urlda7WR1yI/AAAAAAAABGQ/H-cVca7PoVA/s1600/20.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"92\" src\u003d\"http://2.bp.blogspot.com/--2oa-BYAVKE/Urlda7WR1yI/AAAAAAAABGQ/H-cVca7PoVA/s320/20.png\" width\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\"http://1.bp.blogspot.com/-1Twbe28kXE4/Urle7ZrZiMI/AAAAAAAABGc/jrQzAi2ftCs/s1600/21.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"287\" src\u003d\"http://1.bp.blogspot.com/-1Twbe28kXE4/Urle7ZrZiMI/AAAAAAAABGc/jrQzAi2ftCs/s320/21.png\" 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\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-YRXeLKwvxQ8/UrlgpT_tdXI/AAAAAAAABGo/521SfnHpqp4/s1600/22.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"166\" src\u003d\"http://1.bp.blogspot.com/-YRXeLKwvxQ8/UrlgpT_tdXI/AAAAAAAABGo/521SfnHpqp4/s320/22.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nエラーが出てインストールできないときは、\u003ca href\u003d\"http://www.domainking.jp/support/pdf/shares_startup_guide.pdf\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eレンタルサーバースタートアップガイド\u003c/a\u003e（PDF：4.3MB）の38ページを確認してください。\u003cbr /\u003e\n\u003ch2\u003eWordPressの手動インストール方法\u003c/h2\u003e\u003ch3\u003eWordPressのダウンロード\u003c/h3\u003e\u003ca href\u003d\"http://ja.wordpress.org/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ehttp://ja.wordpress.org/\u003c/a\u003eからWordPressをダウンロードします。\u003cbr /\u003e\n\u003cbr /\u003e\n右の「WordPress○○をダウンロード」をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-mKcWrCUWDDY/UrkuCxnd8sI/AAAAAAAABEE/FP1PFOM6tlw/s1600/06.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"203\" src\u003d\"http://2.bp.blogspot.com/-mKcWrCUWDDY/UrkuCxnd8sI/AAAAAAAABEE/FP1PFOM6tlw/s320/06.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nzipで圧縮されたフォルダがダウンロードされるので、デスクトップに解凍します。\u003cbr /\u003e\n解凍するとwordpressというフォルダができます。\u003cbr /\u003e\n\u003cbr /\u003e\nそのフォルダをFTPソフトでアップロードします。\u003cbr /\u003e\n\u003ch3\u003eWordPressのアップロード\u003c/h3\u003e使用しているFTPソフトはFFFTPです。\u003cbr /\u003e\n\u003cbr /\u003e\nFFFTPを起動し、ホストの設定名、ホスト名、ユーザー名、パスワードを入力します。\u003cbr /\u003e\n\u003cbr /\u003e\nホストの設定名は任意の文字（ドメイン名など）を入力します。\u003cbr /\u003e\nホスト名は「ftp.ドメイン名」を入力します。\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/-cjDPtHB2910/UrluS4oBBxI/AAAAAAAABG4/_JfwZRfBzaU/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"261\" src\u003d\"http://4.bp.blogspot.com/-cjDPtHB2910/UrluS4oBBxI/AAAAAAAABG4/_JfwZRfBzaU/s320/01.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nOKをクリックしてhttpdocs内のファイルを全て削除します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-s0Swl6wKZZc/Urlyr6M5Y-I/AAAAAAAABHE/GC3omn5c5gc/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"146\" src\u003d\"http://4.bp.blogspot.com/-s0Swl6wKZZc/Urlyr6M5Y-I/AAAAAAAABHE/GC3omn5c5gc/s320/02.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003ehttpdocsフォルダを右クリックから削除。\u003cbr /\u003e\n\u003cbr /\u003e\n次に、デスクトップに解凍したwordpressを、httpdocs内にドラッグアンドドロップでアップロードします。\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/-FNPzHRkwR04/Url0gg85v1I/AAAAAAAABHQ/vGa9JyGIg6I/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"93\" src\u003d\"http://3.bp.blogspot.com/-FNPzHRkwR04/Url0gg85v1I/AAAAAAAABHQ/vGa9JyGIg6I/s320/03.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eアップロード後、エラーが出てwordpressフォルダが開けないときは、一度FFFTPを閉じてもう一度起動しなおしてみてください。\u003cbr /\u003e\n\u003cbr /\u003e\nアップロードできたら、移動したwodpressフォルダのパーミッションを一時的に変更します。\u003cbr /\u003e\n\u003cbr /\u003e\nwordpressフォルダを右クリックから属性変更を選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-lKyH_nf-bmg/UrotesbroKI/AAAAAAAABHg/uLatmZIO8FI/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"143\" src\u003d\"http://4.bp.blogspot.com/-lKyH_nf-bmg/UrotesbroKI/AAAAAAAABHg/uLatmZIO8FI/s320/04.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n現在の属性（755）を777に変更しOKをクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-NaP4yUm6Bug/UrovE45oHXI/AAAAAAAABHs/EIFS_ty11RI/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-NaP4yUm6Bug/UrovE45oHXI/AAAAAAAABHs/EIFS_ty11RI/s1600/05.png\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n次に、wordpressフォルダ内にあるwp-contentフォルダを、上記と同じ要領で、ここは707に変更します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-MvbKdgeUi3Y/UrowqFFj8VI/AAAAAAAABH4/51T_mfgYjm0/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/-MvbKdgeUi3Y/UrowqFFj8VI/AAAAAAAABH4/51T_mfgYjm0/s1600/06.png\" /\u003e\u003c/a\u003e\u003c/div\u003eこれでアップロードとFFFTPの設定は完了です。\u003cbr /\u003e\n\u003cbr /\u003e\n続いてWordPressのインストールをします。\u003cbr /\u003e\n\u003ch3\u003eWordPressのインストール\u003c/h3\u003eまず、http://ドメイン名/wordpressにアクセスします。アドレスバーに直接入力してください。 \u003cbr /\u003e\n\u003cbr /\u003e\nwp-config.php ファイルが見つかりません。―と表示されるので、「設定ファイルを作成する」をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-g_zq3A6Itjc/Uro2g26AZEI/AAAAAAAABII/RtyNeQlpQzI/s1600/01.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"92\" src\u003d\"http://3.bp.blogspot.com/-g_zq3A6Itjc/Uro2g26AZEI/AAAAAAAABII/RtyNeQlpQzI/s320/01.png\" 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/-Kfkdt064i9Q/Uro3-wzbbwI/AAAAAAAABIU/ycw6B_xgEUM/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"229\" src\u003d\"http://1.bp.blogspot.com/-Kfkdt064i9Q/Uro3-wzbbwI/AAAAAAAABIU/ycw6B_xgEUM/s320/02.png\" width\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\"http://2.bp.blogspot.com/-zGPdK5ByAFw/Uro6j4xQivI/AAAAAAAABIg/3f5IVuyB1L4/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"205\" src\u003d\"http://2.bp.blogspot.com/-zGPdK5ByAFw/Uro6j4xQivI/AAAAAAAABIg/3f5IVuyB1L4/s320/03.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eデータベースのホスト名とテーブル接頭辞はそのままで大丈夫です。\u003cbr /\u003e\n入力したら「送信」をクリックします。\u003cbr /\u003e\n\u003cbr /\u003e\n下の画面になったら、上で変更したwordpressフォルダのパーミッションを元に戻します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-fTHSf2nBNjw/Uro8AjsnnuI/AAAAAAAABIs/_aRqUKit-9o/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"66\" src\u003d\"http://1.bp.blogspot.com/-fTHSf2nBNjw/Uro8AjsnnuI/AAAAAAAABIs/_aRqUKit-9o/s320/04.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nFFFTPソフトを起動して、httpdocs内のwordpressフォルダを右クリックして属性変更を選択します。\u003cbr /\u003e\n現在の属性(777）を755に変更して「OK]をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-H1l58G2j2Ws/Uro9ddnutgI/AAAAAAAABI4/QdxSC0KiT-U/s1600/07.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-H1l58G2j2Ws/Uro9ddnutgI/AAAAAAAABI4/QdxSC0KiT-U/s1600/07.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://4.bp.blogspot.com/-4JnQJoFbzM0/Uro93CD6dZI/AAAAAAAABJA/cVUg_Kdh3GU/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"66\" src\u003d\"http://4.bp.blogspot.com/-4JnQJoFbzM0/Uro93CD6dZI/AAAAAAAABJA/cVUg_Kdh3GU/s320/05.png\" width\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\"http://1.bp.blogspot.com/-4xQ9LtwCKEw/UrpA_A_ft9I/AAAAAAAABJM/u2fQYujOdho/s1600/08.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"280\" src\u003d\"http://1.bp.blogspot.com/-4xQ9LtwCKEw/UrpA_A_ft9I/AAAAAAAABJM/u2fQYujOdho/s320/08.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eサイトのタイトルやパスワードなどは後で変更が可能です。\u003cbr /\u003e\n\u003cbr /\u003e\n入力したユーザー名とパスワードを忘れないようにメモしたら「WordPressをインストール」をクリックします。\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/-TFXrOkB2O_4/UrpDG-V24gI/AAAAAAAABJY/-T2TunBHEV4/s1600/09.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"142\" src\u003d\"http://2.bp.blogspot.com/-TFXrOkB2O_4/UrpDG-V24gI/AAAAAAAABJY/-T2TunBHEV4/s320/09.png\" width\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\"http://4.bp.blogspot.com/-ke0N9P-51h4/UrpEygs69MI/AAAAAAAABJk/oOe38J96ngA/s1600/10.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"320\" src\u003d\"http://4.bp.blogspot.com/-ke0N9P-51h4/UrpEygs69MI/AAAAAAAABJk/oOe38J96ngA/s320/10.png\" width\u003d\"277\" /\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://3.bp.blogspot.com/-dnA6pQNPPF4/UrpFP17mQkI/AAAAAAAABJs/pp9hgolUyo0/s1600/12.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"119\" src\u003d\"http://3.bp.blogspot.com/-dnA6pQNPPF4/UrpFP17mQkI/AAAAAAAABJs/pp9hgolUyo0/s320/12.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2014/01/wordpress.html\"\u003eWordPressのサイトアドレス（URL）を変更する方法\u003c/a\u003e"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3671208200915384899"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3671208200915384899"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/12/wordpress_25.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://3.bp.blogspot.com/-ajgCC72PbsY/UrknTUXuEGI/AAAAAAAABDk/5ikUcanmNX4/s72-c/00.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-4264306973150833468"},"published":{"$t":"2013-12-24T12:37:00.001+09:00"},"updated":{"$t":"2017-02-25T16:06:33.581+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"レンタルサーバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ドメイン"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ドメインキング"}],"title":{"type":"text","$t":"WordPressが使えるドメインキングでレンタルサーバーと独自ドメインを取得してみた"},"content":{"type":"html","$t":"ドメインキングは、キャンペーン中に登録すると10G（もしくは60G）のレンタルサーバーが1年間100円で利用できて、電話サポートまでついている至れり尽くせりなレンタルサーバーです。\u003cbr /\u003e\n\u003cbr /\u003e\n無料お試し期間はありませんが、初期費用を含めて1年間100円なのでお試し感覚で登録してみました。\u003cbr /\u003e\n\u003cbr /\u003e\n2014年4月からプランが新しくなりました。\u003cbr /\u003e\n詳しくは、\u003ca href\u003d\"http://www.memorou.com/2014/04/blog-post.html\"\u003eドメインキングのプランが新しくなっていた\u003c/a\u003eへ\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nドメインキングの主な仕様 \u003cbr /\u003e\n\u003ctable class\u003d\"table010\"\u003e\u003ctbody\u003e\n\u003ctr\u003e       \u003cth\u003e月額料金\u003c/th\u003e       \u003cth\u003e初期費用\u003c/th\u003e       \u003cth\u003eマルチドメイン\u003c/th\u003e       \u003cth\u003eサブドメイン\u003c/th\u003e     \u003c/tr\u003e\n\u003ctr\u003e       \u003ctd\u003e315円～\u003c/td\u003e       \u003ctd\u003e980円\u003c/td\u003e       \u003ctd\u003e無制限\u003c/td\u003e       \u003ctd\u003e無制限\u003c/td\u003e     \u003c/tr\u003e\n\u003ctr\u003e       \u003cth\u003eディスク容量\u003c/th\u003e       \u003cth\u003eMySQL\u003c/th\u003e       \u003cth\u003e広告\u003c/th\u003e       \u003cth\u003e無料お試し期間\u003c/th\u003e     \u003c/tr\u003e\n\u003ctr\u003e       \u003ctd\u003e5G\u003c/td\u003e       \u003ctd\u003e2個\u003c/td\u003e       \u003ctd\u003e―\u003c/td\u003e       \u003ctd\u003e―\u003c/td\u003e     \u003c/tr\u003e\n\u003c/tbody\u003e \u003c/table\u003e\u003ch2\u003e登録手順\u003c/h2\u003e登録の流れは、下の画像のように8工程で登録できます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-JFpSfU77FQc/UrjfQcau9TI/AAAAAAAABAU/qxLTnmlk0FY/s1600/02.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"37\" src\u003d\"http://1.bp.blogspot.com/-JFpSfU77FQc/UrjfQcau9TI/AAAAAAAABAU/qxLTnmlk0FY/s320/02.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n\u003cA HREF\u003d\"https://px.a8.net/svt/ejp?a8mat\u003d264CRE+BD18SY+CJY+NTRMQ\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eドメインキング\u003c/A\u003e \u003cbr /\u003e\n\u003cbr /\u003e\n\u003cimg border\u003d\"0\" width\u003d\"1\" height\u003d\"1\" src\u003d\"https://www19.a8.net/0.gif?a8mat\u003d264CRE+BD18SY+CJY+NTRMQ\" alt\u003d\"\"\u003eの「お申し込み」から「今すぐお申し込み」をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-y31nzHMWXoE/UrjeYFvxxDI/AAAAAAAABAM/xdutep7gWF0/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"196\" src\u003d\"http://3.bp.blogspot.com/-y31nzHMWXoE/UrjeYFvxxDI/AAAAAAAABAM/xdutep7gWF0/s320/03.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eプランの選択\u003c/h3\u003eSプランかMプランを選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-fex5tXFmV28/UrjihBt4sQI/AAAAAAAABAg/lQh2pj9aWW0/s1600/04.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"193\" src\u003d\"http://4.bp.blogspot.com/-fex5tXFmV28/UrjihBt4sQI/AAAAAAAABAg/lQh2pj9aWW0/s320/04.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e主なプランによる違いは、ディスク容量とデータベース数で、Sプランが10G、2個、Mプランが60G、5個となっています。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-uQNMQ7r7RDY/UrjjxDrZMGI/AAAAAAAABAo/elE6lfpUpvM/s1600/00.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"222\" src\u003d\"http://3.bp.blogspot.com/-uQNMQ7r7RDY/UrjjxDrZMGI/AAAAAAAABAo/elE6lfpUpvM/s320/00.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e後からプランの変更もできます。\u003cbr /\u003e\n\u003ch3\u003eドメインの選択\u003c/h3\u003e新規、移管、他社で利用中のドメインで申し込むの3つから選べます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-k4xxLoStyeg/Urjm3zi3yJI/AAAAAAAABA0/EJjGbhCNGWs/s1600/05.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"122\" src\u003d\"http://2.bp.blogspot.com/-k4xxLoStyeg/Urjm3zi3yJI/AAAAAAAABA0/EJjGbhCNGWs/s320/05.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eドメインを入力後に選択をクリックして、com、net…のいずれかを選び「次へ」をクリックします。\u003cbr /\u003e\n\u003cbr /\u003e\n新規で申し込む場合は、先に使いたいドメインが使用されていないか確認しておいたほうが、登録がスムーズに行えます。\u003cbr /\u003e\n確認は、見やすいので\u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d261YJ6+2312FM+348+1BNBJM\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eムームードメイン\u003c/a\u003e \u003cimg alt\u003d\"\" border\u003d\"0\" src\u003d\"http://www10.a8.net/0.gif?a8mat\u003d261YJ6+2312FM+348+1BNBJM\" height\u003d\"1\" width\u003d\"1\" /\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://3.bp.blogspot.com/-GQOIhYP4joA/UrjpQeUJF9I/AAAAAAAABBA/bJl8FHSqvuo/s1600/06.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"203\" src\u003d\"http://3.bp.blogspot.com/-GQOIhYP4joA/UrjpQeUJF9I/AAAAAAAABBA/bJl8FHSqvuo/s320/06.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\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/-5tt2N3yx7qs/Urjrq9GLbrI/AAAAAAAABBM/T_dK0rVOIyU/s1600/07.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"212\" src\u003d\"http://2.bp.blogspot.com/-5tt2N3yx7qs/Urjrq9GLbrI/AAAAAAAABBM/T_dK0rVOIyU/s320/07.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eドメインとサーバーの設定\u003c/h3\u003eWhois情報代行サービスを利用するならチェックを入れます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-DLfDjSi9fHI/Urjtg62ELaI/AAAAAAAABBY/PZI5Q3InODc/s1600/08.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"258\" src\u003d\"http://3.bp.blogspot.com/-DLfDjSi9fHI/Urjtg62ELaI/AAAAAAAABBY/PZI5Q3InODc/s320/08.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e各種設定が終わったら「次へ」をクリックします。\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/-HCTxFcWlW_A/UrjvyCjJh6I/AAAAAAAABBk/CQwHRSXGnzk/s1600/09.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"68\" src\u003d\"http://4.bp.blogspot.com/-HCTxFcWlW_A/UrjvyCjJh6I/AAAAAAAABBk/CQwHRSXGnzk/s320/09.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003e契約期間の選択\u003c/h3\u003e契約期間は6ヶ月でも12ヶ月でも100円なので、12ヶ月を選択します。\u003cbr /\u003e\n料金は、ドメイン（.net）も同時に取得したので、合計で780円になりました。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-9Xo9e-c3uYs/UrjxsnkJEsI/AAAAAAAABBw/iS6pk6OP3qg/s1600/10.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"134\" src\u003d\"http://3.bp.blogspot.com/-9Xo9e-c3uYs/UrjxsnkJEsI/AAAAAAAABBw/iS6pk6OP3qg/s320/10.png\" 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\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-GavT2L_w-IU/Urjzflhw7CI/AAAAAAAABB8/qrfZFujNv9s/s1600/11.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"80\" src\u003d\"http://1.bp.blogspot.com/-GavT2L_w-IU/Urjzflhw7CI/AAAAAAAABB8/qrfZFujNv9s/s320/11.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\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://3.bp.blogspot.com/-EtIHkgmAO5g/Urj0tETBkxI/AAAAAAAABCE/7hSTdytpxmg/s1600/12.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"98\" src\u003d\"http://3.bp.blogspot.com/-EtIHkgmAO5g/Urj0tETBkxI/AAAAAAAABCE/7hSTdytpxmg/s320/12.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n支払い方法は、クレジットカード払いか銀行振り込みが選べます。\u003cbr /\u003e\nクレジットカードを選ぶと、すぐに利用開始できるので、今回はクレジットカードを選択しました。\u003cbr /\u003e\nカードはVISA、マスターカード、JCB、アメリカンエキスプレスが利用できます。\u003cbr /\u003e\n\u003cbr /\u003e\nクレジットカード個人データを入力します。\u003cbr /\u003e\n名称、カードNo、有効期限、セキュリティコードの入力が完了したら、「クレジットカードによるお支払い」をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-oPlfKBgXBQw/Urj3TL23kxI/AAAAAAAABCQ/d_4ZAvQsTqk/s1600/13.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"222\" src\u003d\"http://2.bp.blogspot.com/-oPlfKBgXBQw/Urj3TL23kxI/AAAAAAAABCQ/d_4ZAvQsTqk/s320/13.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nこれで登録が完了です。\u003cbr /\u003e\n\u003cbr /\u003e\n登録したメールを確認すると、5件メールが届いていました。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-IRq2K7ku59s/Urj49-g-Y7I/AAAAAAAABCg/heXqyYmIZZA/s1600/15.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"58\" src\u003d\"http://4.bp.blogspot.com/-IRq2K7ku59s/Urj49-g-Y7I/AAAAAAAABCg/heXqyYmIZZA/s320/15.png\" 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/-Smsuw8CyU1Y/Urj4fACjKsI/AAAAAAAABCc/yqB0knEUipE/s1600/14.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"122\" src\u003d\"http://2.bp.blogspot.com/-Smsuw8CyU1Y/Urj4fACjKsI/AAAAAAAABCc/yqB0knEUipE/s320/14.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n登録時に入力したメールアドレスとパスワードを入力して、言語をJapaneseにして「サインイン」をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-xj_npq34kio/Urj7nXmeCFI/AAAAAAAABCs/x2yAOOvwZMg/s1600/16.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"190\" src\u003d\"http://2.bp.blogspot.com/-xj_npq34kio/Urj7nXmeCFI/AAAAAAAABCs/x2yAOOvwZMg/s320/16.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nうまくログインできない場合は、メールに届いた【重要】[ドメインキング]アカウント登録完了のお知らせ内の[マイアカウントページURL] からログインします。\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/-yCC3N9VOW4o/Urj8G6cQ_jI/AAAAAAAABC0/8K2aTSvpmkw/s1600/17.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"193\" src\u003d\"http://3.bp.blogspot.com/-yCC3N9VOW4o/Urj8G6cQ_jI/AAAAAAAABC0/8K2aTSvpmkw/s320/17.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n以上、ドメインキングの登録からログインまででした。\u003cbr /\u003e\n\u003cbr /\u003e\nドメインキングの登録は、\u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d264CRE+BD18SY+CJY+NTJWY\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eDomainking\u003c/a\u003e   \u003cimg alt\u003d\"\" border\u003d\"0\" src\u003d\"http://www13.a8.net/0.gif?a8mat\u003d264CRE+BD18SY+CJY+NTJWY\" height\u003d\"1\" width\u003d\"1\" /\u003eから行えます。\u003cbr /\u003e\nその他のレンタルサーバーは、\u003ca href\u003d\"http://www.memorou.com/p/rensaba.html\"\u003eレンタルサーバー比較\u003c/a\u003eを参考にしてください。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/4264306973150833468"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/4264306973150833468"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/12/wordpress_24.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://1.bp.blogspot.com/-JFpSfU77FQc/UrjfQcau9TI/AAAAAAAABAU/qxLTnmlk0FY/s72-c/02.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-3907766337000596338"},"published":{"$t":"2013-12-09T11:29:00.001+09:00"},"updated":{"$t":"2017-02-25T17:12:36.978+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"画像"},{"scheme":"http://www.blogger.com/atom/ns#","term":"動画"}],"title":{"type":"text","$t":"WordPressの記事内に画像や動画を挿入する方法"},"content":{"type":"html","$t":"タイトルを画像に変えるときなどに必要となる、画像のアップロード方法の基本です。\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パーマリンクや画像ファイル名などを変更したい場合は、下に表示された画像の右にある編集をクリックします。\u003cbr /\u003e\nこの編集は、メディアのライブラリからもできるので、のちのち編集したい場合はそこから編集します。\u003cbr /\u003e\n\u003cbr /\u003e\n画像の向きや大きさなども編集から可能で、CSSやPHPから呼び出す際のファイルURLもここで確認できます。\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/10/wordpress-2.html\"\u003eWordPress 画像の圧縮 ページの読み込み時間のパフォーマンスを改善2\u003c/a\u003eで画像圧縮のプラグインを紹介しています。\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メディアを挿入の画面になるので「メディアライブラリ」内から挿入したい画像を選択後に「投稿に挿入」ボタンをクリックする。\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/-kBlEvCmlVHc/UqUn3TSUGSI/AAAAAAAAA60/6ulXCxb41aI/s1600/%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"246\" src\u003d\"https://2.bp.blogspot.com/-kBlEvCmlVHc/UqUn3TSUGSI/AAAAAAAAA60/6ulXCxb41aI/s320/%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA.png\" 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://4.bp.blogspot.com/-CGyL0UQoaIs/UqUn8Vs3mzI/AAAAAAAAA68/GSKNoJU5QWg/s1600/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"53\" src\u003d\"https://4.bp.blogspot.com/-CGyL0UQoaIs/UqUn8Vs3mzI/AAAAAAAAA68/GSKNoJU5QWg/s320/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2.png\" 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/3907766337000596338"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3907766337000596338"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/12/wordpress_9.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://2.bp.blogspot.com/-kBlEvCmlVHc/UqUn3TSUGSI/AAAAAAAAA60/6ulXCxb41aI/s72-c/%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-7353254824070057320"},"published":{"$t":"2013-12-06T12:56:00.001+09:00"},"updated":{"$t":"2017-02-25T17:14:52.855+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テーマ"}],"title":{"type":"text","$t":"WordPressテーマ（テンプレート）の変更と編集方法"},"content":{"type":"html","$t":"WordPressのインストール完了後にログインをすると、ダッシュボード画面になります。\u003cbr /\u003e\n\u003cbr /\u003e\nここには、現在の状況として投稿数、固定ページ数、使用中のウィジェット数やバージョンなど、さらに最近のコメントや下書きなども表示されます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nログインすると毎回この画面から始まるので、新しいコメントがきているかどうかの確認のために利用しています。\u003cbr /\u003e\n\u003ch2\u003eテーマとは\u003c/h2\u003eWordPressでは、一般的なホームページやブログでいうテンプレートのことをテーマといいます。\u003cbr /\u003e\nデフォルトの状態では4つインストールされています。（2013年10月）\u003cbr /\u003e\n\u003cbr /\u003e\nこのテーマは自分で作成することも可能ですが、高機能で洗練されたデザインのものが無料で配布されています。\u003cbr /\u003e\n\u003cbr /\u003e\nまた、有料で提供しているものもあり、アフィリエイトサイトを運営されている方は有料のテーマを使用している場合も少なくありません。\u003cbr /\u003e\n\u003ch2\u003eテーマの変更方法\u003c/h2\u003eダッシュボードの「別のテーマに変更する」か、外観タブの「テーマ」を選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-1Z_swi_4eaY/UqE-1I3FFVI/AAAAAAAAA5k/glOJ8oQOc3o/s1600/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"105\" src\u003d\"http://2.bp.blogspot.com/-1Z_swi_4eaY/UqE-1I3FFVI/AAAAAAAAA5k/glOJ8oQOc3o/s320/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nテーマの管理画面になるので、利用可能なテーマの中に使用したいものがなければ「テーマのインストール」をクリックします。\u003cbr /\u003e\n\u003cbr /\u003e\n検索の方法はキーワード検索と特殊フィルター検索の2種類があります。\u003cbr /\u003e\nキーワードで検索する場合は文字を入力して「検索」をクリックします。たぶん英語でしか検索できないと思います。\u003cbr /\u003e\n\u003cbr /\u003e\n特殊フィルター検索にはテーマの色、カラム数、幅や機能といった見た目などから絞り込むことが可能です。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-SpOEZu8xDuw/UqE-7W92ImI/AAAAAAAAA5s/7iaz3kAYc4M/s1600/%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"205\" src\u003d\"http://2.bp.blogspot.com/-SpOEZu8xDuw/UqE-7W92ImI/AAAAAAAAA5s/7iaz3kAYc4M/s320/%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n試しに、「右サイドバーの2カラムにしたいなぁ」と思い検索すると、624種類もありました。プレビューを見ることができるので、どのようなサイトになるのかイメージしやすいと思います。\u003cbr /\u003e\n\u003cbr /\u003e\n使用したいテーマが見つかったら「今すぐインストール」をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-CMWaRvZup4Q/UqE-_4s6XfI/AAAAAAAAA50/zb4HpOta5Ak/s1600/%E6%A4%9C%E7%B4%A2%E7%B5%90%E6%9E%9C.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"167\" src\u003d\"http://1.bp.blogspot.com/-CMWaRvZup4Q/UqE-_4s6XfI/AAAAAAAAA50/zb4HpOta5Ak/s320/%E6%A4%9C%E7%B4%A2%E7%B5%90%E6%9E%9C.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nインストールが完了して、有効化するとテーマが変更されます。\u003cbr /\u003e\n\u003cbr /\u003e\nよほどのこだわりがない限り、ここで見つけられると思います。それでも見つからない場合は、Google検索で「ワードプレス　無料　テーマ」などと入力すると数え切れないほど出てきます。\u003cbr /\u003e\n\u003cbr /\u003e\nテーマをカスタマイズして使いたいけど、CSSやPHPがあまり得意ではないという方は、人気どころを使うとほかの方がカスタマイズ方法を記事にしていたりするので参考にできるかもしれません。\u003cbr /\u003e\n\u003ch2\u003eテーマの編集方法\u003c/h2\u003eテーマの編集方法は、FTPソフトで編集したCSSやPHPを更新する方法と、外観タブの「テーマ編集」から行う方法の二通りあります。\u003cbr /\u003e\n\u003cbr /\u003e\n外観タブの「テーマ編集」をクリックすると、現在使用中のテーマのテンプレートが右側に表示されます。\u003cbr /\u003e\n\u003cbr /\u003e\n例えば、ヘッダーを編集したい場合はheader.phpを、文字の種類・形・色など、スタイルを変えたい場合はstyle.cssを、といった感じで変更したい場所に応じたテンプレートを選択します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-KI-fgCVD2Ls/UqE_LH0YYPI/AAAAAAAAA58/XuDtvGugc-g/s1600/%E7%B7%A8%E9%9B%86.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"122\" src\u003d\"http://3.bp.blogspot.com/-KI-fgCVD2Ls/UqE_LH0YYPI/AAAAAAAAA58/XuDtvGugc-g/s320/%E7%B7%A8%E9%9B%86.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n編集が終わったら「ファイルを更新」を押し忘れないように注意する。\u003cbr /\u003e\n\u003cbr /\u003e\nテーマを編集する場合は、できるだけ子テーマを編集するようにします。\u003cbr /\u003e\n理由は、FTPソフトでの更新方法と一緒に、\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_446.html\"\u003eWordPressで子テーマ作る理由と作り方\u003c/a\u003eで説明します。\u003cbr /\u003e\nプラグインを使った子テーマの作り方は、\u003ca href\u003d\"http://www.memorou.com/2013/02/blog-post_27.html\"\u003eワードプレス 子テーマの作り方 プラグイン\u003c/a\u003eを参照してください。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7353254824070057320"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7353254824070057320"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/12/wordpress_4901.html","title":"WordPressテーマ（テンプレート）の変更と編集方法"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://2.bp.blogspot.com/-1Z_swi_4eaY/UqE-1I3FFVI/AAAAAAAAA5k/glOJ8oQOc3o/s72-c/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-2433173290337663925"},"published":{"$t":"2013-12-06T12:55:00.000+09:00"},"updated":{"$t":"2017-02-25T17:19:00.632+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"子テーマ"}],"title":{"type":"text","$t":"WordPressで子テーマを作る理由と作り方"},"content":{"type":"html","$t":"WordPressでテーマ（テンプレート）の編集・カスタマイズをする場合は、できる限り子テーマで行います。\u003cbr /\u003e\n\u003cbr /\u003e\nこの記事は、子テーマを作る必要性と、子テーマの作り方を記録します。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nプラグインを使った子テーマの作り方は、\u003ca href\u003d\"http://www.memorou.com/2013/02/blog-post_27.html\"\u003eワードプレス 子テーマの作り方 プラグイン\u003c/a\u003eを参照してください。\u003cbr /\u003e\n\u003ch2\u003e子テーマとは\u003c/h2\u003e\u003cblockquote\u003eWordPressの子テーマとは、別のテーマ（親テーマ）の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。\u003cbr /\u003e\n\u003ca href\u003d\"http://wpdocs.sourceforge.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eWordPress Codex 日本語版\u003c/a\u003e\u003c/blockquote\u003estyle.cssを例にすると、親テーマの記述が\u003cbr /\u003e\n\u003cpre\u003ebody {\nbackground-color: #000000;\n}\u003c/pre\u003eだったとして、このままだと普通に黒色が表示されるのですが、子テーマを作成してそこに新たに色の指定をするとそちらが優先して表示されることになります。\u003cbr /\u003e\n\u003cbr /\u003e\n子テーマのstyle.cssに\u003cbr /\u003e\n\u003cpre\u003ebody {\nbackground-color: #ffffff;\n}\n\u003c/pre\u003eと記述したとすると、親テーマを編集することなく色の変更が可能になります。この場合は黒色から白色に変更されます。\u003cbr /\u003e\n\u003ch2\u003e子テーマを作る理由\u003c/h2\u003e「なんで？」「面倒くさい」「直接弄ればいいじゃん」と思う方も多いと思いますが、子テーマを作るのにはそれなりの理由があります。WordPressのテーマは、たまにバージョンアップ（更新）の通知がきます。\u003cbr /\u003e\n\u003cbr /\u003e\n子テーマを作らずに直接テンプレートの編集を行っていると、更新をしたときに自動的に最新のものに上書きされてしまうのです。\u003cbr /\u003e\n\u003cbr /\u003e\nそうすると、今まで時間をかけて自分好みのデザインにしてきたものが消えて、最初からカスタマイズし直さなければなりません。\u003cbr /\u003e\n\u003cbr /\u003e\n「テーマのカスタマイズなんて簡単だぜ」という方以外は子テーマを作り、そちらを編集していくほうがいいでしょう。\u003cbr /\u003e\n\u003ch2\u003e子テーマの作り方\u003c/h2\u003e子テーマは、プラグインを使って作成する方法や、FTPソフトでアップする方法などがありますが、今回はFTPソフトを使い作成する方法を記録します。\u003cbr /\u003e\n\u003cbr /\u003e\n「Twenty Thirteen」の子テーマ作成を例にしていきます。\u003cbr /\u003e\n\u003cbr /\u003e\nまずは、子テーマフォルダを作ります。\u003cbr /\u003e\nデスクトップ画面の何もないところで右クリックをして新規作成からフォルダを選択します。\u003cbr /\u003e\n\u003cbr /\u003e\n新しいフォルダーができるので、名前を「twentythirteen_child」とします。\u003cbr /\u003e\n\u003cbr /\u003e\nそのフォルダの中に新たにテキストドキュメントを作成します。次に、テキストドキュメントを開いて\u003cbr /\u003e\n\u003cpre\u003e/*\nTheme Name: twentythirteenchild\nTemplate: twentythirteen\n*/\n\n@import url('../twentythirteen/style.css');\n\u003c/pre\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/-_G5H3eF_UrE/UqFGFSSihRI/AAAAAAAAA6M/uQtB2cmIzmk/s1600/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9Ecss.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"55\" src\u003d\"http://4.bp.blogspot.com/-_G5H3eF_UrE/UqFGFSSihRI/AAAAAAAAA6M/uQtB2cmIzmk/s320/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9Ecss.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e上から子テーマのフォルダ名、親テーマのフォルダ名、継承するテンプレートのURLです。\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/-SevJJNdTpEw/UqFGTFY6tnI/AAAAAAAAA6U/S_sQusMZ9B8/s1600/%E4%BF%9D%E5%AD%98.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"96\" src\u003d\"http://1.bp.blogspot.com/-SevJJNdTpEw/UqFGTFY6tnI/AAAAAAAAA6U/S_sQusMZ9B8/s320/%E4%BF%9D%E5%AD%98.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e左上のファイルから名前をつけて保存を選択する。ファイル名を「style.css」にして、文字コードを「UTF-8」にします。\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/-geufvpu3MNo/UqFHAMPF9_I/AAAAAAAAA6c/h-00X2XwAQU/s1600/%EF%BD%86%EF%BD%94%EF%BD%90.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"233\" src\u003d\"http://2.bp.blogspot.com/-geufvpu3MNo/UqFHAMPF9_I/AAAAAAAAA6c/h-00X2XwAQU/s320/%EF%BD%86%EF%BD%94%EF%BD%90.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e次に、FTPソフトでWordPressのホストに接続します。いくつかフォルダが表示されるのでその中から「themes」を開きます。そこに今作った「twentythirteen_child」フォルダをドラッグアンドドロップします。\u003cbr /\u003e\n\u003cbr /\u003e\n外観のテーマからtwentythirteenchildが作成されているかどうか確認し、有効化をクリックしたら完了です。この先のテーマ編集は子テーマで行います。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/2433173290337663925"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/2433173290337663925"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/12/wordpress_446.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/-_G5H3eF_UrE/UqFGFSSihRI/AAAAAAAAA6M/uQtB2cmIzmk/s72-c/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9Ecss.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-444395909306604093"},"published":{"$t":"2013-12-06T09:39:00.000+09:00"},"updated":{"$t":"2017-02-25T17:22:57.838+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"メニューバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"カテゴリー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"固定ページ"}],"title":{"type":"text","$t":"WordPressメニューバーにカテゴリーと固定ページを表示させる方法"},"content":{"type":"html","$t":"メニューバーにカテゴリーと固定ページを表示する方法を記録します。\u003cbr /\u003e\n\u003cbr /\u003e\nこの記事は、\u003ca href\u003d\"http://www.memorou.com/2013/03/blog-post_13.html\"\u003eワードプレスカテゴリーをメニューバーに表示する方法\u003c/a\u003eと\u003ca href\u003d\"http://www.memorou.com/2013/03/blog-post_11.html\"\u003eワードプレス固定ページをメニューバーに表示する方法\u003c/a\u003eのまとめです。\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://4.bp.blogspot.com/-bIrrX1Gqa7c/Up_-uGn1QyI/AAAAAAAAA4k/HyVVNwO92oY/s1600/%E3%83%A1%E3%83%8B%E3%83%A5%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\"186\" src\u003d\"http://4.bp.blogspot.com/-bIrrX1Gqa7c/Up_-uGn1QyI/AAAAAAAAA4k/HyVVNwO92oY/s320/%E3%83%A1%E3%83%8B%E3%83%A5%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\u003cbr /\u003e\n\u003cdiv class\u003d\"reference\"\u003e※AdSense広告をメニューバーの下に表示している場合には注意が必要です。\u003cbr /\u003e\nサブメニューが開いたときにAdSense広告にかぶらないようにしましょう。\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://3.bp.blogspot.com/-eFPPBVN5-EQ/Up__LuknCNI/AAAAAAAAA4s/a0oJqB_LEm0/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\"93\" src\u003d\"http://3.bp.blogspot.com/-eFPPBVN5-EQ/Up__LuknCNI/AAAAAAAAA4s/a0oJqB_LEm0/s320/%E3%82%AB%E3%83%86%E6%96%B0%E8%A6%8F.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e投稿タブからカテゴリーを選択します。「カテゴリー画面」になるので新規カテゴリーを追加で名前とスラッグを入力します。スラッグを入力しない場合は「名前」で入力した文字がスラッグとなります。親カテゴリーを作っているので、親の指定は「なし」のままでOKです。「新規カテゴリーを追加」をクリックすると、右側に今作ったカテゴリーが表示されます。\u003cbr /\u003e\n\u003ch3\u003eカテゴリーの編集\u003c/h3\u003e今までに作ったカテゴリーを編集する場合は、カテゴリー画面で編集をしたいカテゴリーにマウスを乗せると「編集」や「削除」などが表示されるので、編集をしたい場合は「編集」を、削除をしたい場合は「削除」をクリックする。\u003cbr /\u003e\n\u003cbr /\u003e\n編集が終わったら「更新」をクリックして完了です。\u003cbr /\u003e\n\u003cbr /\u003e\n削除をクリックすると「選択した項目を完全に削除しようとしています。」とでるので、OKなら「OK」をクリックして完了です。\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/-tftLM1f0288/Up__fTpPjuI/AAAAAAAAA40/x8YWkNB7dMc/s1600/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"88\" src\u003d\"http://3.bp.blogspot.com/-tftLM1f0288/Up__fTpPjuI/AAAAAAAAA40/x8YWkNB7dMc/s320/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003e固定ページの追加\u003c/h3\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/-0O_92nTx4lE/Up__lfP6E1I/AAAAAAAAA48/Oc-a0qdnBlY/s1600/%E5%9B%BA%E5%AE%9A.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"155\" src\u003d\"http://2.bp.blogspot.com/-0O_92nTx4lE/Up__lfP6E1I/AAAAAAAAA48/Oc-a0qdnBlY/s320/%E5%9B%BA%E5%AE%9A.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eリンクの追加\u003c/h3\u003eメニューバーにリンクを表示させたい場合は、リンクタブ内の「URL」と「リンクテキスト」を入力後に、「メニューに追加」をクリックする。\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/-qVbMx2DpocI/Up__qUQoyyI/AAAAAAAAA5E/9xslWYGy49U/s1600/%E3%83%AA%E3%83%B3%E3%82%AF.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"154\" src\u003d\"http://4.bp.blogspot.com/-qVbMx2DpocI/Up__qUQoyyI/AAAAAAAAA5E/9xslWYGy49U/s320/%E3%83%AA%E3%83%B3%E3%82%AF.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eカテゴリーの追加\u003c/h3\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/-DJH2Di9Uku0/Up__vzXXzhI/AAAAAAAAA5Q/wZPnhEreDL0/s1600/%25E3%2582%25AB%25E3%2583%2586.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"142\" src\u003d\"http://1.bp.blogspot.com/-DJH2Di9Uku0/Up__vzXXzhI/AAAAAAAAA5Q/wZPnhEreDL0/s320/%25E3%2582%25AB%25E3%2583%2586.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\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://3.bp.blogspot.com/-C5AOSZdheEA/Up__8AAf-qI/AAAAAAAAA5U/IsvRMHXl-mY/s1600/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC2.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"301\" src\u003d\"http://3.bp.blogspot.com/-C5AOSZdheEA/Up__8AAf-qI/AAAAAAAAA5U/IsvRMHXl-mY/s320/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC2.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/444395909306604093"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/444395909306604093"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/12/wordpress_6.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/-bIrrX1Gqa7c/Up_-uGn1QyI/AAAAAAAAA4k/HyVVNwO92oY/s72-c/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%90%E3%83%BC.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-6572614354031699397"},"published":{"$t":"2013-12-05T14:49:00.000+09:00"},"updated":{"$t":"2017-02-25T17:29:47.209+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"レンタルサーバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ドメイン"}],"title":{"type":"text","$t":"WordPressを始める前の準備と予備知識"},"content":{"type":"html","$t":"ホームページやブログを作成しようと思って、どっちで作成するればいいのか検索をすると、大抵WordPressという文字を目にすると思う。\u003cbr /\u003e\n\u003cbr /\u003e\n\u0026nbsp;この記事では、WordPressとは何かということや、WordPressを始めるときに必要なものなどを記録します。 \u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eWordPressとは\u003c/h2\u003eウィキペディアにはこう書かれている\u003cbr /\u003e\n\u003cblockquote\u003eWordPress（ワードプレス）は、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している\u003cbr /\u003e\n\u003ca href\u003d\"http://ja.wikipedia.org/wiki/WordPress\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ehttp://ja.wikipedia.org/wiki/WordPress\u003c/a\u003e\u003c/blockquote\u003eここでPHPとMySQLという新しい言葉が出てきました。\u003cbr /\u003e\n\u003cbr /\u003e\nPHPとは？\u003cbr /\u003e\n読み方はピー・エイチ・ピーで、プログラミング言語の1つです。\u003cbr /\u003e\n\u003cbr /\u003e\nMySQLとは？\u003cbr /\u003e\n読み方はマイエスキューエルで、データベースシステムの1つです。\u003cbr /\u003e\n\u003cbr /\u003e\nまた、WordPress.orgにはこうかかれている\u003cbr /\u003e\n\u003cblockquote\u003eWordPress (ワードプレス) は、オープンソースのブログ／CMS プラットフォームです。セマンティック Web、コードやデザインの美しさ、Web 標準、ユーザビリティなどを意識して開発されており、無料でダウンロードして使うことができます。\u003cbr /\u003e\n\u003cbr /\u003e\nWordPress を使って、思い通りにカスタマイズしたブログサイトを作り上げてみませんか。\u003cbr /\u003e\n\u003ca href\u003d\"http://ja.wordpress.org/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ehttp://ja.wordpress.org/\u003c/a\u003e\u003c/blockquote\u003e\u003cbr /\u003e\nWordPressはMySQLというデータベースを使い、PHPというプログラム言語で書かれた、無料のブログツールである。\u003cbr /\u003e\n\u003ch2\u003e無料メールアドレスの取得\u003c/h2\u003e\u003ca href\u003d\"https://login.yahoo.co.jp/config/login_verify2?.src\u003dym\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eヤフーメール\u003c/a\u003e\u003cbr /\u003e\n\u003ca href\u003d\"https://mail.google.com/intl/ja/mail/help/about.html\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eGメール\u003c/a\u003e\u003cbr /\u003e\nフリーメールはどこで取得しても問題ありません。\u003cbr /\u003e\n\u003cbr /\u003e\nこれからグーグルウェブマスターツールや、グーグルアナリティクスでアクセス解析などを行う場合は、グーグルアカウントが必要となるのでGメールの取得をおすすめします。\u003cbr /\u003e\n\u003cbr /\u003e\n登録方法は省略させていただきます。\u003cbr /\u003e\n\u003ch2\u003eレンタルサーバーを選ぶ\u003c/h2\u003eWordPressをインストールするサーバーを借ります。\u003cbr /\u003e\n\u003cbr /\u003e\nレンタルサーバーは基本的に有料になりますが、なかには無料で借りられるところがあります。\u003cbr /\u003e\n\u003cbr /\u003e\n様々な企業が、様々なプランを用意しているので、自分の用途に合ったサーバーが見つかるはずです。\u003cbr /\u003e\n\u003cbr /\u003e\nまた、WordPressを動かすためには、PHPとMySQLが使える必要があります。WordPressを使おうとレンタルサーバーの契約をしたけど、PHPとMySQLが使えなかった…なんてことにならないように注意しましょう。\u003cbr /\u003e\n\u003ch3\u003e有料レンタルサーバーの特徴\u003c/h3\u003e有料レンタルサーバーの特徴は、やはり大容量、高機能でマルチドメインも複数設定できる点と、サーバーの安定感です。 \u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/p/rensaba.html\"\u003eWordPressが使える有料・無料レンタルサーバー比較\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\nそれぞれのサーバーの機能や容量を簡単に載せておくので参考までに。\u003cbr /\u003e\n\u003ctable class\u003d\"toto\"\u003e\u003ccaption\u003eサーバーの機能や容量\u003c/caption\u003e  \u003cthead\u003e\n\u003ctr\u003e \u003cth\u003eサーバー名\u003c/th\u003e \u003cth\u003e月額料金\u003c/th\u003e \u003cth\u003e容量\u003c/th\u003e \u003cth\u003eドメイン\u003c/th\u003e \u003cth\u003e無料お試し期間\u003c/th\u003e \u003c/tr\u003e\n\u003c/thead\u003e  \u003ctbody\u003e\n\u003ctr class\u003d\"odd\"\u003e \u003ctd\u003e\u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d264CRE+BD18SY+CJY+NTRMQ\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eドメインキング\u003c/a\u003e   \u003cimg alt\u003d\"\" border\u003d\"0\" src\u003d\"http://www11.a8.net/0.gif?a8mat\u003d264CRE+BD18SY+CJY+NTRMQ\" height\u003d\"1\" width\u003d\"1\" /\u003e\u003c/td\u003e \u003ctd\u003e100円～\u003c/td\u003e \u003ctd\u003e20GB\u003c/td\u003e \u003ctd\u003e10\u003c/td\u003e \u003ctd\u003e―\u003c/td\u003e \u003c/tr\u003e\n\u003ctr class\u003d\"even\"\u003e \u003ctd\u003e\u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d264CRE+BCFT76+1JUK+BWVTE\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eバリューサーバー\u003c/a\u003e \u003cimg alt\u003d\"\" border\u003d\"0\" src\u003d\"http://www13.a8.net/0.gif?a8mat\u003d264CRE+BCFT76+1JUK+BWVTE\" height\u003d\"1\" width\u003d\"1\" /\u003e\u003c/td\u003e \u003ctd\u003e167円～\u003c/td\u003e \u003ctd\u003e50GB\u003c/td\u003e \u003ctd\u003e25\u003c/td\u003e \u003ctd\u003e10日間あり\u003c/td\u003e \u003c/tr\u003e\n\u003ctr class\u003d\"odd\"\u003e \u003ctd\u003e\u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d2HDQMJ+56D4K2+1WTI+64JTE\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eミニバード\u003c/a\u003e \u003cimg alt\u003d\"\" border\u003d\"0\" src\u003d\"http://www11.a8.net/0.gif?a8mat\u003d2HDQMJ+56D4K2+1WTI+64JTE\" height\u003d\"1\" width\u003d\"1\" /\u003e\u003c/td\u003e \u003ctd\u003e250円～\u003c/td\u003e \u003ctd\u003e50GB\u003c/td\u003e \u003ctd\u003e50\u003c/td\u003e \u003ctd\u003e14日間あり\u003c/td\u003e \u003c/tr\u003e\n\u003ctr class\u003d\"even\"\u003e \u003ctd\u003e\u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d260GIA+2BD4WI+348+65MEA\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eロリポップ！\u003c/a\u003e \u003cimg alt\u003d\"\" border\u003d\"0\" src\u003d\"http://www11.a8.net/0.gif?a8mat\u003d260GIA+2BD4WI+348+65MEA\" height\u003d\"1\" width\u003d\"1\" /\u003e\u003c/td\u003e \u003ctd\u003e250円～\u003c/td\u003e \u003ctd\u003e50GB\u003c/td\u003e \u003ctd\u003e50\u003c/td\u003e \u003ctd\u003e10日間あり\u003c/td\u003e \u003c/tr\u003e\n\u003ctr class\u003d\"odd\"\u003e \u003ctd\u003e\u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d260GIA+IGVYQ+CO4+ZQ80I\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ewpXレンタルサーバー\u003c/a\u003e  \u003cimg alt\u003d\"\" border\u003d\"0\" src\u003d\"http://www19.a8.net/0.gif?a8mat\u003d260GIA+IGVYQ+CO4+ZQ80I\" height\u003d\"1\" width\u003d\"1\" /\u003e\u003c/td\u003e \u003ctd\u003e1000円～\u003c/td\u003e \u003ctd\u003e100GB\u003c/td\u003e \u003ctd\u003e10\u003c/td\u003e \u003ctd\u003e14日間あり\u003c/td\u003e \u003c/tr\u003e\n\u003ctr class\u003d\"even\"\u003e \u003ctd\u003e\u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d264CRE+BNR1OY+CO4+609HU\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eエックスサーバー\u003c/a\u003e \u003cimg alt\u003d\"\" border\u003d\"0\" src\u003d\"http://www16.a8.net/0.gif?a8mat\u003d264CRE+BNR1OY+CO4+609HU\" height\u003d\"1\" width\u003d\"1\" /\u003e\u003c/td\u003e \u003ctd\u003e1000円～\u003c/td\u003e \u003ctd\u003e200GB\u003c/td\u003e \u003ctd\u003e無制限\u003c/td\u003e \u003ctd\u003e10日間あり\u003c/td\u003e \u003c/tr\u003e\n\u003ctr class\u003d\"odd\"\u003e \u003ctd\u003e\u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d1CAVL3+G82ONM+348+TW6AA\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eヘテムル\u003c/a\u003e \u003cimg alt\u003d\"\" border\u003d\"0\" src\u003d\"http://www19.a8.net/0.gif?a8mat\u003d1CAVL3+G82ONM+348+TW6AA\" height\u003d\"1\" width\u003d\"1\" /\u003e\u003c/td\u003e \u003ctd\u003e1000円～\u003c/td\u003e \u003ctd\u003e256GB\u003c/td\u003e \u003ctd\u003e無制限\u003c/td\u003e \u003ctd\u003e15日間あり\u003c/td\u003e \u003c/tr\u003e\n\u003c/tbody\u003e \u003c/table\u003e※記事作成時から変更されている可能性があるので、詳細や最新の情報、期間限定キャンペーンなどは公式サイトでご確認ください。 ※ドメインは、マルチドメインまたはサブドメインの数です。 \u003cbr /\u003e\n\u003ch3\u003e無料レンタルサーバーの特徴\u003c/h3\u003e無料レンタルサーバーのメリットは、なんといても無料で借りれることです。\u003cbr /\u003e\n\u003cbr /\u003e\nデメリットは、大抵の場合、無料で借りられる代わりに大きな広告が表示されます。なかには広告が表示されないサーバーもありますが、サーバーを運営する費用が賄えずに閉鎖してしまった、という話も少なくありません。\u003cbr /\u003e\n\u003ch4\u003ePHPとMySQLが使える無料レンタルサーバー\u003c/h4\u003eまずは、タダで使えるのに広告が表示されない（表示義務がない）無料レンタルサーバーです。\u003cbr /\u003e\n\u003ch4\u003ewkey.meの特徴\u003c/h4\u003e容量：２GB\u003cbr /\u003e\n独自ドメイン：1\u003cbr /\u003e\nサブドメイン：10\u003cbr /\u003e\nFTPユーザー：10\u003cbr /\u003e\nメール容量：１GB\u003cbr /\u003e\nなど、他にも多くの機能を備えています。詳しくは公式サイトで確認してください。\u003cbr /\u003e\n\u003cstrike\u003ehttps://wkey.me\u003c/strike\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n次は、広告は表示されるが、他の無料レンタルサーバーの広告と比べ、サイトデザインに影響が少ない無料レンタルサーバーです。\u003cbr /\u003e\n\u003ch4\u003eエックスドメイン（Xdomain）の特徴\u003c/h4\u003eこちらのサーバーに関しては、以前に登録方法やWordPressのインストール方法を記事にしているのでそちらをご覧ください。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/10/xdomain.html\"\u003eXdomain（エックスドメイン）無料レンタルサーバーにワードプレスをインストール\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\nさらに詳しい機能や容量などは公式サイトをご覧ください。\u003cbr /\u003e\n\u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d2600SE+AUKT1U+CO4+15OK2A\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eドメイン名取得＆無料レンタルサーバーサービス『エックスドメイン』\u003c/a\u003e \u003cimg alt\u003d\"\" border\u003d\"0\" src\u003d\"http://www11.a8.net/0.gif?a8mat\u003d2600SE+AUKT1U+CO4+15OK2A\" height\u003d\"1\" width\u003d\"1\" /\u003e \u003cbr /\u003e\n\u003ch2\u003e独自ドメインの取得\u003c/h2\u003e独自ドメインの取得は基本的に有料になりますが、なかには無料で取得できるところもあります。\u003cbr /\u003e\nレンタルサーバーを借りるなら、独自ドメインも一緒に取得したほうがいいでしょう。\u003cbr /\u003e\n\u003ch3\u003e独自ドメインとは\u003c/h3\u003eという説明は省略させていただきます。\u003cbr /\u003e\n\u003cbr /\u003e\nただし、ドメインの取得は早い者順なので、心に決めたものがある場合は使われていないことを祈りましょう。\u003cbr /\u003e\n\u003ch3\u003e独自ドメインにする理由\u003c/h3\u003e独自ドメインを取得する理由の1つに、覚えてもらいやすい。サイトの信頼度UP。ブランド効果の向上。などなど様々な理由があります。\u003cbr /\u003e\n\u003cbr /\u003e\n独自ドメインにすることにより、サブドメインやサブディレクトリと違い、URLが短くなり覚えてもらいやすくなります。短くなるということは余計な文字が入らないので、ブランド効果の向上にもつながると一般的には言われています。\u003cbr /\u003e\n\u003cbr /\u003e\nさらに、独自ドメインは料金を払い続けている限り、半永久的に自分のものです。\u003cbr /\u003e\nまた、メールアドレスにすることも出来ます。\u003cbr /\u003e\n\u003ch2\u003e人気のドメイン取得サイト\u003c/h2\u003e\u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d261YJ6+22FMTU+50+2HHVNM\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eお名前.com\u003c/a\u003e \u003cimg alt\u003d\"\" border\u003d\"0\" src\u003d\"http://www13.a8.net/0.gif?a8mat\u003d261YJ6+22FMTU+50+2HHVNM\" height\u003d\"1\" width\u003d\"1\" /\u003e\u003cbr /\u003e\nこちらのは、com、netドメインが460円から取得できます。\u003cbr /\u003e\nまた、100個以上の一括登録でセット割などがあります。登録数も世界No.1です。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d261YJ6+2317U2+348+1BNBJM\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eムームードメイン\u003c/a\u003e \u003cimg alt\u003d\"\" border\u003d\"0\" src\u003d\"http://www15.a8.net/0.gif?a8mat\u003d261YJ6+2317U2+348+1BNBJM\" height\u003d\"1\" width\u003d\"1\" /\u003e\u003cbr /\u003e\nこちらのは、期間限定キャンペーンを行っており、infoが280円で取得できます。\u003cbr /\u003e\n※キャンペーンは記事作成時の情報です。最新の情報は公式サイトでご確認ください。\u003cbr /\u003e\n\u003cbr /\u003e\n自分が取得したいドメインが使用されていないか、まずは検索してみてください。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2014/12/blog-post_9.html\"\u003e独自ドメイン取得時のポイント\u003c/a\u003e\u003cbr /\u003e\n\u003ch3\u003e無料独自ドメイン取得\u003c/h3\u003e英語が得意な方は、無料で独自ドメインを取得できる\u003ca href\u003d\"http://www.dot.tk/en/index.html\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003e.tk\u003c/a\u003eがメジャーどころです。\u003cbr /\u003e\nただし、90日間で25アクセスないと取得したドメインは削除されてしまいます。\u003cbr /\u003e\n詳しくは規約を読んでください。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6572614354031699397"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6572614354031699397"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/12/wordpress_5931.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"}}]},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-5528158571535121022"},"published":{"$t":"2013-12-05T13:47:00.000+09:00"},"updated":{"$t":"2017-02-25T19:52:26.619+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"固定ページ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"投稿ページ"}],"title":{"type":"text","$t":"WordPressの固定ページと投稿ページの違いと追加方法"},"content":{"type":"html","$t":"WordPressの記事を公開する方法は、投稿ページと固定ページの2種類あります。 それぞれの特徴と追加方法を記録します。\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\u003cbr /\u003e\nまた、カテゴリーで親の指定をしなくても、メニュー構造で階層をつけてサブメニューとすることができます。\u003cbr /\u003e\n\u003cbr /\u003e\nさらに、投稿ページは、アーカイブに登録されます。ウィジェットで「最近の投稿」を使用している場合はそこに表示されます。\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://2.bp.blogspot.com/-U51iHfNhlfI/Up_4dPmUSII/AAAAAAAAA4M/_4ljr2Fq6k8/s1600/%E6%8A%95%E7%A8%BF.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-U51iHfNhlfI/Up_4dPmUSII/AAAAAAAAA4M/_4ljr2Fq6k8/s320/%E6%8A%95%E7%A8%BF.png\" /\u003e\u003c/a\u003e\u003c/div\u003e「新規投稿を追加」画面になるので、タイトルと記事を書いたら、カテゴリーを指定します。新しく追加する場合は「+新規カテゴリーを追加」をクリックします。親カテゴリーにしたい場合はそのまま、子カテゴリーにしたい場合は「－親カテゴリー－」から選択します。\u003cbr /\u003e\n\u003cbr /\u003e\nタグを使う場合は文字を入力後に追加ボタンを押します。\u003cbr /\u003e\n\u003cbr /\u003e\nアイキャッチ画像を使う場合は「アイキャッチ画像を設定」をクリックして追加します。\u003cbr /\u003e\n全ての準備が整ったら「公開」ボタンをクリックして投稿が完了します。\u003cbr /\u003e\n\u003ch2\u003e固定ページの特徴\u003c/h2\u003e固定ページも、この様に使わなければいけないという決まりはありません。が、一般的にはAboutやサイトマップ、企業サイトなどではお問い合わせやアクセスマップなど変化のないページに使用することが多いです。\u003cbr /\u003e\n\u003cbr /\u003e\n固定ページは、カテゴリーやタグをつけることはできませ。\u003cbr /\u003e\n\u003cbr /\u003e\nカテゴリーがつけられない代わりにページ属性がつけられます。\u003cbr /\u003e\n\u003cstrike\u003eページ属性もカテゴリーと同様に親と子の関係を作れるので、メニューバーに表示するときはサブメニューとして表示することが可能です。\u003c/strike\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\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-pma2z83yzBE/Up_4pzl6HTI/AAAAAAAAA4U/XRKFkTU5ONw/s1600/%E5%9B%BA%E5%AE%9A.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"132\" src\u003d\"http://3.bp.blogspot.com/-pma2z83yzBE/Up_4pzl6HTI/AAAAAAAAA4U/XRKFkTU5ONw/s320/%E5%9B%BA%E5%AE%9A.png\" 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/12/wordpress_6.html\"\u003eWordPressメニューバーにカテゴリーと固定ページを表示させる方法\u003c/a\u003eを参考にしてください。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/5528158571535121022"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/5528158571535121022"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/12/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://2.bp.blogspot.com/-U51iHfNhlfI/Up_4dPmUSII/AAAAAAAAA4M/_4ljr2Fq6k8/s72-c/%E6%8A%95%E7%A8%BF.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-455724650473538844"},"published":{"$t":"2013-11-26T10:45:00.000+09:00"},"updated":{"$t":"2017-02-25T20:22:54.641+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":"リダイレクト"}],"title":{"type":"text","$t":"WordPressからBloggerへ引っ越し エクスポートとインポートと301リダイレクト"},"content":{"type":"html","$t":"WordPressで作成していた記事と、Bloggerに元からあった記事を統合するにあたり、初めてエクスポートとインポートと301リダイレクトを行ったので、その方法と、ちょっとしたつまずきがあったので記録します。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nまず、Bloggerに元からある記事が、インポートによって上書きされて消えてしまうんじゃないかと心配だったので、エクスポートファイルをバックアップとしました。\u003cbr /\u003e\n\u003ch2\u003eBloggerのエクスポート方法\u003c/h2\u003e\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-ML16XbRxqHc/UpFsass2-EI/AAAAAAAAAvw/xpJZIo6O53M/s1600/0_1.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-ML16XbRxqHc/UpFsass2-EI/AAAAAAAAAvw/xpJZIo6O53M/s320/0_1.png\" height\u003d\"207\" width\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\"http://3.bp.blogspot.com/-39o37bc8a24/UpFtRxY4lpI/AAAAAAAAAv4/8NHMCW_N4Go/s1600/001_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/-39o37bc8a24/UpFtRxY4lpI/AAAAAAAAAv4/8NHMCW_N4Go/s320/001_1.png\" height\u003d\"143\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nダウンロードが始まります。このブログの場合は数秒で終わりましたが、ブログの規模が大きいともう少しかかるかもしれません。\u003cbr /\u003e\n\u003cbr /\u003e\nダウンロードファイルは、特に指定していない場合、ダウンロードフォルダにダウンロードされます。「スタート」→「コンピュータ」→「ダウンロード」（win7）\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-L-6MFav0w98/UpFu87UT48I/AAAAAAAAAwE/Eg14ck0R6Zs/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/-L-6MFav0w98/UpFu87UT48I/AAAAAAAAAwE/Eg14ck0R6Zs/s1600/01.png\" /\u003e\u003c/a\u003e\u003c/div\u003eこんなファイルができていれば成功です。\u003cbr /\u003e\n他のブログにインポートするときにこのファイルを使います。\u003cbr /\u003e\n\u003cbr /\u003e\nインポート後にわかったことではあるが、元記事はそのままの状態で投稿されていたので、今回のように、WordPressからBloggerに移転する場合は、この作業は必要ありませんでした。\u003cbr /\u003e\n\u003ch2\u003eWordPressのエクスポート方法\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://3.bp.blogspot.com/-g-SOmTG6Zwo/UpF0X0pQH9I/AAAAAAAAAwU/EAZSvs0-13o/s1600/1_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/-g-SOmTG6Zwo/UpF0X0pQH9I/AAAAAAAAAwU/EAZSvs0-13o/s320/1_1.png\" height\u003d\"135\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nダウンロードファイルは、特に指定していない場合、ダウンロードフォルダにダウンロードされます。「スタート」→「コンピュータ」→「ダウンロード」（win7） \u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-8NFd15SvJwQ/UpMOrBi1tgI/AAAAAAAAAxM/XvHlTJf-PEc/s1600/2.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-8NFd15SvJwQ/UpMOrBi1tgI/AAAAAAAAAxM/XvHlTJf-PEc/s1600/2.png\" /\u003e\u003c/a\u003e\u003c/div\u003eこんなファイルができていれば成功です。 \u003cbr /\u003e\n\u003cbr /\u003e\n通常このファイルをインポートするのですが、Bloggerにインポートする場合、このままではうまくいかないので、Blogger用のファイルに変換します。\u003cbr /\u003e\n\u003ch3\u003eエクスポートファイルの変換\u003c/h3\u003e\u003ca href\u003d\"http://wordpress2blogger.appspot.com/\" rel\u003d\"nofollow\" target\u003d\"_blank\"\u003ehttp://wordpress2blogger.appspot.com/\u003c/a\u003eでBlogger用ファイルに変換します。\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/-720No6eP69Y/UpMc2P8I93I/AAAAAAAAAxc/vHPbm9B_3ng/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/-720No6eP69Y/UpMc2P8I93I/AAAAAAAAAxc/vHPbm9B_3ng/s320/03.png\" height\u003d\"219\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e次に、Convertボタンをクリックして、エクスポートファイルをダウンロードします。 \u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-6wp6W4a57ac/UpMdGBqmg2I/AAAAAAAAAxk/8prpqjQFWPM/s1600/4.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-6wp6W4a57ac/UpMdGBqmg2I/AAAAAAAAAxk/8prpqjQFWPM/s1600/4.png\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nこんなファイルができていれば成功です。\u003cbr /\u003e\n\u003cbr /\u003e\n続いてこのファイルをBloggerにインポートします。\u003cbr /\u003e\n\u003ch2\u003eWordPressからBloggerへのインポート\u003c/h2\u003eBloggerにブログがない場合は先に作成しておきます。作成後の手順は既存のブログへのインポート方法と同じです。\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/-p6QWcI_HELY/UpNUG-YoWJI/AAAAAAAAAyQ/D4g_iYIbZCs/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/-p6QWcI_HELY/UpNUG-YoWJI/AAAAAAAAAyQ/D4g_iYIbZCs/s320/06.png\" height\u003d\"207\" 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/-ZDDsIBAsu2M/UpMhwNEG32I/AAAAAAAAAxw/6lgI5ItZob0/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/-ZDDsIBAsu2M/UpMhwNEG32I/AAAAAAAAAxw/6lgI5ItZob0/s320/05.png\" height\u003d\"264\" 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元のブログで画像を使っていると、Bloggerで表示したときに表示がおかしくなる（下に画像有り）ことがあるので、確認してから投稿する場合は、チェックをはずしてください。\u003cbr /\u003e\n\u003cbr /\u003e\nチェックをはずすと一件ずつ公開していくことになります。\u003cbr /\u003e\n\u003cbr /\u003e\n最後に、ブログをインポートボタンをクリックでインポートが完了します。\u003cbr /\u003e\n\u003ch3\u003eインポートして気付いたこと\u003c/h3\u003eWordPressで作った固定ページはBloggerのページにインポートされます。\u003cbr /\u003e\n投稿一覧にないなと思ったら、ページを確認してみてください。\u003cbr /\u003e\n\u003cbr /\u003e\nWordPressで作ったカテゴリとタグはラベルへ変換されます。\u003cbr /\u003e\nWordPressで「ブロガー」とカテゴリを作っていて、Bloggerのラベルで「Blogger」と作っていた場合は、当たり前ですが「ブロガー」のラベルが新たにできます。\u003cbr /\u003e\n\u003cbr /\u003e\nWordPressで大きな画像を使っていると、Bloggerで表示したときにはみ出してしまいます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-VVJT7xGJu98/UpMwj4MVToI/AAAAAAAAAyA/VL06L4q8qDM/s1600/07.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://3.bp.blogspot.com/-VVJT7xGJu98/UpMwj4MVToI/AAAAAAAAAyA/VL06L4q8qDM/s320/07.png\" height\u003d\"192\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch2\u003e301リダイレクト方法\u003c/h2\u003e今回は301リダイレクトをするつもりはなかったのですが、今後やりたくなったときにスムーズにできるように、一度体験しておこうと思い実施しました。\u003cbr /\u003e\n\u003cbr /\u003e\n301リダイレクトはどのようなときに必要なのかは、\u003ca href\u003d\"https://support.google.com/webmasters/answer/93633?hl\u003dja\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003e301 リダイレクト\u003c/a\u003eで説明されています。\u003cbr /\u003e\n\u003cbr /\u003e\n301リダイレクトの設定は各レンタルサーバーで行います。\u003cbr /\u003e\n\u003cbr /\u003e\nサーバーはXdomainで独自ドメインを使用していたので、そのときを例に記録していきます。\u003cbr /\u003e\n\u003ch3\u003eXdomainの301リダイレクト方法\u003c/h3\u003eXdomain管理画面にログインします。\u003cbr /\u003e\n\u003cbr /\u003e\n無料レンタルサーバーのWordPress管理パネルログインをクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-Cupl-XG3meU/UpNc29SflzI/AAAAAAAAAyg/uwb6OhDQw_0/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/-Cupl-XG3meU/UpNc29SflzI/AAAAAAAAAyg/uwb6OhDQw_0/s320/01.png\" height\u003d\"203\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eWordPress管理画面で、301リダイレクトをするサイトの設定をクリックします。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-h6fM0dqCewY/UpNea0-hxfI/AAAAAAAAAys/opMIRSB_R-s/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/-h6fM0dqCewY/UpNea0-hxfI/AAAAAAAAAys/opMIRSB_R-s/s320/02.png\" height\u003d\"92\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e各種管理設定の.htaccessの編集をクリックして.htaccessの編集を行います。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://1.bp.blogspot.com/-dVLMILSJJsw/UpNia-hvpbI/AAAAAAAAAy4/iIavrR2dcWg/s1600/03.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-dVLMILSJJsw/UpNia-hvpbI/AAAAAAAAAy4/iIavrR2dcWg/s320/03.png\" height\u003d\"113\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n本当は、何記事か元のURLに残しておきたかったのですが、なかなか思い通りのところに転送できなかったので、WordPressを丸ごとBloggerのTopページに転送することにしました。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"reference\"\u003e旧記事から新サイトトップページへのリダイレクトはおすすめしません。旧記事から新サイト記事へリダイレクトするのが一般的です。\u003c/div\u003e\u003cbr /\u003e\nただ、それでも、思い通りの場所に転送されないことがあります。\u003cbr /\u003e\nパーマリンク設定をしっかりしていれば、このようなことにはならないかもしれません。\u003cbr /\u003e\n\u003cbr /\u003e\n.htaccessに、\u003cbr /\u003e\n\u003cpre\u003eRedirectMatch 301 .* http://ココに転送先URL/\u003c/pre\u003eと追加入力すると、元のサイトから新しいサイトへ転送することができます。\u003cbr /\u003e\n\u003cbr /\u003e\nただし、注意点がひとつあります。\u003cbr /\u003e\n\u003ch2\u003e301リダイレクトをして気付いたこと\u003c/h2\u003e上の方法で301リダイレクトすると、WordPressダッシュボードのログイン画面にすら入れなくなります。\u003cbr /\u003e\n\u003cbr /\u003e\n.htaccessに入力した、RedirectMatch 301以降を削除するとログインできるようになります。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2014/07/8301.html\"\u003e8ヶ月前に設定した301リダイレクトを解除\u003c/a\u003e"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/455724650473538844"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/455724650473538844"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/11/301-wordpressblogger.html","title":"WordPressからBloggerへ引っ越し エクスポートとインポートと301リダイレクト"}],"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/-ML16XbRxqHc/UpFsass2-EI/AAAAAAAAAvw/xpJZIo6O53M/s72-c/0_1.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-1124613514950943870"},"published":{"$t":"2013-10-29T22:14:00.000+09:00"},"updated":{"$t":"2017-02-25T21:00:39.861+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"キャッシュ"}],"title":{"type":"text","$t":"WordPressでCSSファイルを更新したのに反映されないときの対処法"},"content":{"type":"html","$t":"WordPressでデザインを変えるときにstyle.cssを編集すると思うのですが、「ファイルを更新」してサイトを見てみると、\u003cbr /\u003e\n何も変わってない…\u003cbr /\u003e\n\u003cbr /\u003e\nブラウザの更新をしてみても\u003cbr /\u003e\n何も変わらない…\u003cbr /\u003e\n\u003cbr /\u003e\nという体験をしたことがあると思います。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nそんなときの対処方をいくつか紹介します。\u003cbr /\u003e\n\u003ch2\u003eキャッシュの削除方法\u003c/h2\u003eまず一度は試したほうがいいキャッシュの削除。\u003cbr /\u003e\n今回は、IE（インターネットエクスプローラー）、GC（グーグルクローム）、Fx（FF ファイヤーフォックス）の3つのブラウザのキャッシュ削除の方法を記録します。\u003cbr /\u003e\n\u003ch3\u003eIE(Internet Explorer)のキャッシュを削除する方法\u003c/h3\u003e画面右上の歯車マークをクリックして、インターネットオプションを開きます。\u003cbr /\u003e\n次に、「全般」の中の「閲覧の履歴」で「削除」をクリックします。\u003cbr /\u003e\n閲覧の履歴の削除が開くので、「インターネット一時ファイル」にチェックを入れて「削除」をクリックする。初めての方は、消したくないものまで消してしまわないように「閲覧の履歴の削除についての詳細」を読んでください。\u003cbr /\u003e\n\u003cbr /\u003e\nもう1つは、メニューバーの「ツール」から「閲覧の履歴の削除」をクリックして、あとは上と同じ流れです。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-JTrwmNSj2Q8/UowzfNG8coI/AAAAAAAAAd0/3IIOT0iyftM/s1600/ie%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5_2.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"270\" src\u003d\"http://2.bp.blogspot.com/-JTrwmNSj2Q8/UowzfNG8coI/AAAAAAAAAd0/3IIOT0iyftM/s320/ie%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5_2.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eGC（Google Chrome）のキャッシュを削除する方法\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://1.bp.blogspot.com/-WOMePG4Qo4I/Uow0dC831NI/AAAAAAAAAd8/q_3FYbXSDNM/s1600/%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"192\" src\u003d\"http://1.bp.blogspot.com/-WOMePG4Qo4I/Uow0dC831NI/AAAAAAAAAd8/q_3FYbXSDNM/s320/%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch3\u003eFx（Firefox）のキャッシュを削除する方法\u003c/h3\u003e左上のFirefoxボタンをクリックしてオプションを選択する。\u003cbr /\u003e\n右上の詳細をクリック後にネットワークを選択して、キャッシュされたwebページ内の「今すぐ消去」ボタンをクリックしたら、「OK」を押す。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-NLbhkjYeD-Q/Uow0kDfGXTI/AAAAAAAAAeE/4mcOqpJlF0M/s1600/%EF%BD%86%EF%BD%98%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"189\" src\u003d\"http://2.bp.blogspot.com/-NLbhkjYeD-Q/Uow0kDfGXTI/AAAAAAAAAeE/4mcOqpJlF0M/s320/%EF%BD%86%EF%BD%98%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch2\u003eプラグインの停止\u003c/h2\u003eキャッシュを残す系のプラグインを使っている方は一度停止する。そして、有効化する。\u003cbr /\u003e\nブラウザのキャッシュ削除とプラグインの停止のどちらを先にやるかはご自身の判断で。\u003cbr /\u003e\n\u003ch2\u003eブラウザのキャッシュを削除しても改善されないときの解決策\u003c/h2\u003eWordPressの仕様なのかテーマの仕様なのかは不明だが、ブラウザのキャッシュを削除しても更新が反映されないときがある。というよりも、反映されない時のほうが多い。時間がたてば自動で反映されるのだが、微妙な位置を調整したいときなどは頻繁に更新するので、自動で反映されるのを待ってられません。\u003cbr /\u003e\n\u003cbr /\u003e\nそんな時は、テーマを変更してしまいます。そして、すぐ戻す。その後、ブラウザの更新をすると反映されています。\u003cbr /\u003e\n\u003cbr /\u003e\nアクセス数が多いサイトなどはやめたほうがいいのかも、または同じデザインのテーマをもう1つ用意するとか。\u003cbr /\u003e\n\u003cbr /\u003e\n一番の解決策は、ローカル環境を作ることなんでしょうけど。\u003cbr /\u003e\n\u003cbr /\u003e\n[2017年追記]\u003cbr /\u003e\nさらに簡単な方法がりました。ブラウザはChromeを使います。\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/1124613514950943870"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/1124613514950943870"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/10/wordpresscss.html","title":"WordPressでCSSファイルを更新したのに反映されないときの対処法"}],"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/-JTrwmNSj2Q8/UowzfNG8coI/AAAAAAAAAd0/3IIOT0iyftM/s72-c/ie%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5_2.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-5725730003837648022"},"published":{"$t":"2013-10-26T19:01:00.000+09:00"},"updated":{"$t":"2017-02-25T21:04:40.879+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"JavaScript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"スコアカード"}],"title":{"type":"text","$t":"WordPress レンダリングブロック ページの読み込み時間のパフォーマンスを改善4"},"content":{"type":"html","$t":"前回は、gzip化により圧縮を有効にしました。\u003cbr /\u003e\nこれにより現在のポイントは、モバイルが70/100、パソコンが81/100になったと書いたが、一日たって確認したところパソコンのほうが82/100にアップしていた。\u003cbr /\u003e\n今回はレンダリングブロックを試してみます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nこの記事は、PageSpeed Insightsのパフォーマンス改善のためにやったことを記録しています。\u003cbr /\u003e\nこの記事以外にも下記の記事で改善方法を記録しています。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/10/google-adsense_23.html\"\u003eGoogle AdSenseでサイトの状況の評価が２になったので改善する\u003c/a\u003e\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/10/wordpress-2.html\"\u003eWordPress 画像を圧縮\u0026nbsp;ページの読み込み時間のパフォーマンスを改善2\u003c/a\u003e\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/10/wordpress-3.html\"\u003eWordPress 圧縮を有効にする ページの読み込み時間のパフォーマンスを改善3\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eレンダリングブロック JavaScript/CSSを排除する方法\u003c/h2\u003ePageSpeed Insights 提案の概要をみてみると、\u003cbr /\u003e\n\u003cblockquote\u003eこのページには、ブロッキング スクリプト リソース が 1 あり、ブロッキング CSS リソースが 3 あります。これが原因で、ページのレンダリングに遅延が発生しています。\u003c/blockquote\u003eということです。さらに読み進めます。\u003cbr /\u003e\n\u003cblockquote\u003eこのページでスクロールせずに見えるコンテンツを、以下のリソースによる読み込みを待たずにレンダリングできませんでした。ブロッキング リソースを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください。\u003c/blockquote\u003eなんだか今までよりも難しそうです。が、ぐぐりながら解決していきす。\u003cbr /\u003e\nレンダリングブロック JavaScriptを削除\u003cbr /\u003e\n\u003ca href\u003d\"https://developers.google.com/speed/docs/insights/BlockingJS\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ehttps://developers.google.com/speed/docs/insights/BlockingJS\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\nCSS配信を最適化\u003cbr /\u003e\n\u003ca href\u003d\"https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ehttps://developers.google.com/speed/docs/insights/OptimizeCSSDelivery\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\nどちらの文章もインライン化することを薦めているようです。\u003cbr /\u003e\n\u003cbr /\u003e\n今のスキルでは、ちょっとお手上げです。\u003cbr /\u003e\n\u003cbr /\u003e\n今どうにか出来そうなのは、GoogleAdSenseのコードを非同期にすることぐらいなのですが、すでに非同期コードを貼り付けていたので、できることがなくなってしまいました。\u003cbr /\u003e\n\u003cbr /\u003e\n時間があるときにもう一度挑戦したいと思います。\u003cbr /\u003e\n\u003ch3\u003eGoogleAdSenseの非同期コードの取得方法\u003c/h3\u003e最後にGoogleAdSenseの非同期コードを取得する方法を説明します。\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/-m72ptKezoPo/UowohzfI5fI/AAAAAAAAAdQ/vW-Da_QsqY0/s1600/%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%82%B3%E3%83%BC%E3%83%89.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"300\" src\u003d\"http://3.bp.blogspot.com/-m72ptKezoPo/UowohzfI5fI/AAAAAAAAAdQ/vW-Da_QsqY0/s320/%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%82%B3%E3%83%BC%E3%83%89.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n今貼っている広告コードと比べてみてください。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/5725730003837648022"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/5725730003837648022"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/10/wordpress-4.html","title":"WordPress レンダリングブロック ページの読み込み時間のパフォーマンスを改善4"}],"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/-m72ptKezoPo/UowohzfI5fI/AAAAAAAAAdQ/vW-Da_QsqY0/s72-c/%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%82%B3%E3%83%BC%E3%83%89.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-4561577448092890865"},"published":{"$t":"2013-10-25T19:41:00.000+09:00"},"updated":{"$t":"2017-02-25T21:06:10.274+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"gzip"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"圧縮"},{"scheme":"http://www.blogger.com/atom/ns#","term":"プラグイン"},{"scheme":"http://www.blogger.com/atom/ns#","term":"スコアカード"}],"title":{"type":"text","$t":"WordPress 圧縮を有効にする ページの読み込み時間のパフォーマンスを改善3"},"content":{"type":"html","$t":"前回は画像の圧縮をしましたが、画像数が少ないせいかポイントアップにはあまりつながらず、「！」マークも黄色のままでした。\u003cbr /\u003e\n\u003cbr /\u003e\n現在の点数はモバイルが、67/100、パソコンが78/100です。\u003cbr /\u003e\n今回は、「圧縮を有効にする」を試してみます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nこの記事は、PageSpeed Insightsのパフォーマンス改善のためにやったことを記録しています。この記事以外にも下記の記事で改善方法を記録しています。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/10/google-adsense_23.html\"\u003eGoogle AdSenseでサイトの状況の評価が２になったので改善する\u003c/a\u003e\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/10/wordpress-2.html\"\u003eWordPress 画像を圧縮\u0026nbsp;ページの読み込み時間のパフォーマンスを改善2\u003c/a\u003e\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/10/wordpress-4.html\"\u003eWordPress レンダリングブロック ページの読み込み時間のパフォーマンスを改善4\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/-0c65YUlahUQ/UuYL2_t4aQI/AAAAAAAABa8/X1ajwEBXp24/s1600/%E3%82%B8%E3%83%83%E3%83%91%E3%83%BCb.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-0c65YUlahUQ/UuYL2_t4aQI/AAAAAAAABa8/X1ajwEBXp24/s1600/%E3%82%B8%E3%83%83%E3%83%91%E3%83%BCb.jpg\" height\u003d\"126\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch2\u003e圧縮を有効化する方法\u003c/h2\u003ePageSpeed Insights 提案の概要をみてみると、\u003cbr /\u003e\n\u003cblockquote\u003egzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。\u003c/blockquote\u003eということなので、試してみます。\u003cbr /\u003e\n圧縮を有効にすると転送サイズを77%削減できるようです。\u003cbr /\u003e\n圧縮を有効化する\u003cbr /\u003e\n\u003ca href\u003d\"https://developers.google.com/speed/docs/insights/EnableCompression\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ehttps://developers.google.com/speed/docs/insights/EnableCompression\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n上のサイトを見ると、ページ上の圧縮リソースHTTP圧縮で提供されていないと表示されるといっています。圧縮形式はgzipです。\u003cbr /\u003e\n\u003cbr /\u003e\n今回gzip化するためにプラグインを使います。\u003cbr /\u003e\n\u003ch3\u003egzip圧縮プラグインWP HTTP Compression\u003c/h3\u003e使用するプラグインは「WP HTTP Compression」です。\u003cbr /\u003e\nいつものようにインストールして有効化したら、特に設定画面も用意されていないので、これで完了です。\u003cbr /\u003e\nこのプラグインは、WordPressバージョン3.6.1ではテストされていないようでしたが、思い切って有効化したら問題なく動作しました。が、ここでは動作を保障出来ませんので、ご自身の判断でお願いします。\u003cbr /\u003e\n\u003cbr /\u003e\nこの作業により、モバイルが70/100、パソコンが81/100となり、それぞれ3点アップとなりました。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/4561577448092890865"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/4561577448092890865"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/10/wordpress-3.html","title":"WordPress 圧縮を有効にする ページの読み込み時間のパフォーマンスを改善3"}],"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/-0c65YUlahUQ/UuYL2_t4aQI/AAAAAAAABa8/X1ajwEBXp24/s72-c/%E3%82%B8%E3%83%83%E3%83%91%E3%83%BCb.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-3785658408279494730"},"published":{"$t":"2013-10-24T19:22:00.000+09:00"},"updated":{"$t":"2017-02-25T21:09:08.393+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"プラグイン"},{"scheme":"http://www.blogger.com/atom/ns#","term":"画像の圧縮"},{"scheme":"http://www.blogger.com/atom/ns#","term":"スコアカード"}],"title":{"type":"text","$t":"WordPress 画像の圧縮 ページの読み込み時間のパフォーマンスを改善2"},"content":{"type":"html","$t":"\u003ca href\u003d\"http://www.memorou.com/2013/10/google-adsense_23.html\"\u003eGoogle AdSenseでサイトの状況の評価が２になったので改善する\u003c/a\u003eの続きです。\u003cbr /\u003e\n\u003cbr /\u003e\n前回は、ブラウザのキャッシュを活用する方法で、モバイル、パソコンそれぞれで4点アップしました。\u003cbr /\u003e\n今回は、画像を最適化していきたいと思います。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nこの記事は、PageSpeed Insightsのパフォーマンス改善のためにやったことを記録しています。この記事以外にも下記の記事で改善方法を記録しています。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/10/wordpress-3.html\"\u003eWordPress 圧縮を有効にする ページの読み込み時間のパフォーマンスを改善3\u003c/a\u003e \u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/10/wordpress-4.html\"\u003eWordPress レンダリングブロック ページの読み込み時間のパフォーマンスを改善4\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003e画像を最適化する方法\u003c/h2\u003ePageSpeed Insights 提案の概要によると、\u003cbr /\u003e\n\u003cblockquote\u003e画像を適切にフォーマット化して圧縮すると、データ サイズを大きく削減できます。\u003c/blockquote\u003eということなので、早速圧縮していきます。\u003cbr /\u003e\nこの圧縮をすることにより54%のサイズ削減が可能なようです。\u003cbr /\u003e\n画像を最適化する\u003cbr /\u003e\n\u003ca href\u003d\"https://developers.google.com/speed/docs/insights/OptimizeImages\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ehttps://developers.google.com/speed/docs/insights/OptimizeImages\u003c/a\u003eここを見る限り、必要のない部分をトリミングして、小さいサイズの画像はGIFにしたらいいよ、といっているようです。\u003cbr /\u003e\n\u003cbr /\u003e\nすでに何枚か画像をアップロードしているので圧縮にはプラグインを使うことにしました。\u003cbr /\u003e\n\u003ch3\u003e画像圧縮プラグインEWWW Image Optimizer\u003c/h3\u003eプラグインは、検索で「ワードプレス　画像圧縮」と入れたら一番最初に出てきた「EWWW Image Optimizer」です。\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://2.bp.blogspot.com/-qbFMsvNU-lo/UowkT7b0jAI/AAAAAAAAAc8/CSeX6Jl4slY/s1600/ewww.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-qbFMsvNU-lo/UowkT7b0jAI/AAAAAAAAAc8/CSeX6Jl4slY/s320/ewww.jpg\" height\u003d\"35\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n原文：EWWW Image Optimizer requires exec(). Your system administrator has disabled this function.\u003cbr /\u003e\n\u003cbr /\u003e\n翻訳：EWWWイメージオプティマイザは、exec（）を必要とします。システム管理者はこの機能を無効にしました。\u003cbr /\u003e\n\u003cbr /\u003e\nだそうです。\u003cbr /\u003e\n無効化されたので、他のプラグインを探します。\u003cbr /\u003e\n\u003ch3\u003e画像圧縮プラグインWP Smush.it\u003c/h3\u003e次に試したプラグインが「WP Smush.it」です。\u003cbr /\u003e\n\u003cbr /\u003e\nこちらも同じく以前にあげた画像も圧縮できるようです。\u003cbr /\u003e\nいつものように、インストールして有効化。今度は、特にエラーもないようです。\u003cbr /\u003e\nダッシュボードのメディアからBulk Smush.itを選択して下のほうにある「Run all my images through WP Smush.it right now」ボタンをクリックします。\u003cbr /\u003e\n\u003cbr /\u003e\nこれで、以前にあげた画像を一括で圧縮してくれます。\u003cbr /\u003e\n一度目はエラーで失敗でしたが、2度目で無事に圧縮してくれました。\u003cbr /\u003e\n\u003cbr /\u003e\nメディアを見てみると、最大で42.7%も圧縮されている画像がありました。\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/-pejTiflgKOQ/UowkeqD46NI/AAAAAAAAAdE/okGdUYLJHvE/s1600/%E5%9C%A7%E7%B8%AE_3.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://4.bp.blogspot.com/-pejTiflgKOQ/UowkeqD46NI/AAAAAAAAAdE/okGdUYLJHvE/s320/%E5%9C%A7%E7%B8%AE_3.jpg\" height\u003d\"320\" width\u003d\"253\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n「WP Smush.it」は、記事に画像を新しく追加するときにも自動で圧縮してくれます。\u003cbr /\u003e\n\u003cbr /\u003e\n今回問題なく機能してくれたのが「WP Smush.it」だったので、こちらを個人的にはおすすめします。\u003cbr /\u003e\n\u003cbr /\u003e\nまだ画像の枚数が少なかったので、PageSpeed Insightsの結果にはあまり影響がなく、パソコンが77から78になっただけでした。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3785658408279494730"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3785658408279494730"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/10/wordpress-2.html","title":"WordPress 画像の圧縮 ページの読み込み時間のパフォーマンスを改善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://2.bp.blogspot.com/-qbFMsvNU-lo/UowkT7b0jAI/AAAAAAAAAc8/CSeX6Jl4slY/s72-c/ewww.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-1453283522386194003"},"published":{"$t":"2013-10-23T19:48:00.000+09:00"},"updated":{"$t":"2017-02-25T21:13:12.301+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"キャッシュ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"スコアカード"}],"title":{"type":"text","$t":"Google AdSenseでサイトの状況の評価が２になったので改善する"},"content":{"type":"html","$t":"今、GoogleAdsenseのスコアカードをみたら、サイトの状況の評価が5段階で２に落ちていたので、早急に対処したいと思う。\u003cbr /\u003e\n次になったときのために記録しておきます。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n現在、PageSpeed Insightsでの点数？はモバイルが63/100で、パソコンが73/100となっている。何点以上で問題がない状態になるのかわからないので、最初の目標として90点以上を目指します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-QP-L3vkYFs8/UuG8aDKc1NI/AAAAAAAABZs/ua6j4vSphho/s1600/%E5%8C%BB%E8%80%85.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-QP-L3vkYFs8/UuG8aDKc1NI/AAAAAAAABZs/ua6j4vSphho/s1600/%E5%8C%BB%E8%80%85.jpg\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nこの記事は、PageSpeed Insightsのパフォーマンス改善のためにやったことを記録しています。この記事以外にも下記の記事で改善方法を記録しています。\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/10/wordpress-2.html\"\u003eWordPress 画像を圧縮\u0026nbsp;ページの読み込み時間のパフォーマンスを改善2\u003c/a\u003e\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/10/wordpress-3.html\"\u003eWordPress 圧縮を有効にする ページの読み込み時間のパフォーマンスを改善3\u003c/a\u003e \u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/2013/10/wordpress-4.html\"\u003eWordPress レンダリングブロック ページの読み込み時間のパフォーマンスを改善4\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003e提案の概要\u003c/h2\u003ePageSpeed Insightsに提案の概要というのがあって、「ここがよくないですよー」というのが出ているのでそれを見ながら改善していきます。\u003cbr /\u003e\nモバイルで、赤い！マークが2つに、黄色い！マークが2つ、\u003cbr /\u003e\nパソコンで、赤い！マークが1つに、黄色い！マークが3つあるので、記載しておきます。\u003cbr /\u003e\n\u003cul\u003e\u003cli\u003eスクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSSの排除\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この4つがモバイルとパソコンに共通して出ています。\u003cbr /\u003e\n\u003cbr /\u003e\nどうなるかわからないですが、わかりそうなところから取り掛かろうと思います。\u003cbr /\u003e\n途中経過など余裕があれば書いていきます。\u003cbr /\u003e\n\u003ch3\u003eブラウザのキャッシュを活用する\u003c/h3\u003ePageSpeed Insights 提案の概要によると、\u003cbr /\u003e\n\u003cblockquote\u003e静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになります。\u003c/blockquote\u003e\u003cbr /\u003e\nということで、解決策として\u003cbr /\u003e\n\u003ca href\u003d\"https://developers.google.com/speed/docs/insights/LeverageBrowserCaching\" target\u003d\"_blank\"\u003ehttps://developers.google.com/speed/docs/insights/LeverageBrowserCaching\u003c/a\u003eを見たのですが、さっぱりわからなかったので、ぐぐったところ「.htaccess」にキャッシュを残す期間の設定を書き込むといいということだったので、imageとtextのキャッシュ期間を書き込みました。\u003cbr /\u003e\n\u003cbr /\u003e\n.htaccessは元はない場合があるらしく、ない場合は自分で作らないといけないようです。\u003cbr /\u003e\n今回.htaccessが見つけられなかったので、レンタルサーバーにあった、「.htaccessの編集」から追加しました。\u003cbr /\u003e\n\u003cbr /\u003e\nこの時点で、モバイルが67/100、パソコンが77/100にそれぞれ4点アップしました。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/1453283522386194003"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/1453283522386194003"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/10/google-adsense_23.html","title":"Google AdSenseでサイトの状況の評価が２になったので改善する"}],"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/-QP-L3vkYFs8/UuG8aDKc1NI/AAAAAAAABZs/ua6j4vSphho/s72-c/%E5%8C%BB%E8%80%85.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-5917388141091949931"},"published":{"$t":"2013-10-22T04:32:00.000+09:00"},"updated":{"$t":"2017-02-25T21:16:49.655+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"アナリティクス"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"}],"title":{"type":"text","$t":"WordPressにGoogleAnalyticsを登録しようとしたときにつまずいた話"},"content":{"type":"html","$t":"サイトを立ち上げて最初にした設定が、GoogleウェブマスターツールとGoogleアナリティクスへの登録でした。ウェブマスターツールの方は問題なく登録できたのですが、アナリティクスのトラッキングIDがなかなか受信されなかったので、あれこれいじってデータが受信できるようになった過程を記録します。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nこのとき使用していたWordPressのバージョンは3.6.1です。\u003cbr /\u003e\n使用していたテーマはSTINGER3です。\u003cbr /\u003e\n\u003ch2\u003eGoogle Analyticsに登録する\u003c/h2\u003eまずは\u003ca href\u003d\"http://www.google.co.jp/intl/ja/analytics/\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eGoogle Analytics\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/-CB7IRaUHnEI/UowfXGc4_jI/AAAAAAAAAcY/N2Jl91NHddI/s1600/%E3%82%A2%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"34\" src\u003d\"http://3.bp.blogspot.com/-CB7IRaUHnEI/UowfXGc4_jI/AAAAAAAAAcY/N2Jl91NHddI/s320/%E3%82%A2%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9.jpg\" 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/-99BXlYRddKA/UowfeASS6yI/AAAAAAAAAcg/XGQuMBNKgd0/s1600/%E7%AE%A1%E7%90%86.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"147\" src\u003d\"http://1.bp.blogspot.com/-99BXlYRddKA/UowfeASS6yI/AAAAAAAAAcg/XGQuMBNKgd0/s320/%E7%AE%A1%E7%90%86.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n今回は新たにアカウントは作成せずに、新しいプロパティを作成します。\u003cbr /\u003e\n\u003cbr /\u003e\nウェブサイト名、ウェブサイトのURL、業種、レポートのタイムゾーンをそれぞれ入力、選択したら「トラッキングIDを取得」をクリックします。\u003cbr /\u003e\n\u003cbr /\u003e\nすると、トラッキングIDとトラッキングコードが表示されるので、トラッキングコードをコピーしてheader.phpに貼り付けます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-qGo57-GMIC4/UowfoK1sTII/AAAAAAAAAco/QIa5JPGcL0k/s1600/%E3%83%88%E3%83%A9%E3%83%83%E3%82%AD%E3%83%B3%E3%82%B0%E3%82%B3%E3%83%BC%E3%83%89.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"163\" src\u003d\"http://3.bp.blogspot.com/-qGo57-GMIC4/UowfoK1sTII/AAAAAAAAAco/QIa5JPGcL0k/s320/%E3%83%88%E3%83%A9%E3%83%83%E3%82%AD%E3%83%B3%E3%82%B0%E3%82%B3%E3%83%BC%E3%83%89.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n貼り付けるのは、\u0026lt;/head\u0026gt;の直前（上）です。\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/-LvUVNPrBZiM/Uowfy5XY2pI/AAAAAAAAAcw/LFQEEubbQKM/s1600/%E3%83%88%E3%83%A9%E3%83%83%E3%82%AD%E3%83%B3%E3%82%B0%E5%8F%97%E4%BF%A1.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"55\" src\u003d\"http://2.bp.blogspot.com/-LvUVNPrBZiM/Uowfy5XY2pI/AAAAAAAAAcw/LFQEEubbQKM/s320/%E3%83%88%E3%83%A9%E3%83%83%E3%82%AD%E3%83%B3%E3%82%B0%E5%8F%97%E4%BF%A1.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nと、普通ならこれで大丈夫なはずだったんですが、一向に受信されなかったのでここから格闘が始まりました。\u003cbr /\u003e\n\u003ch2\u003eGoogle Analyticsエラーのときにやったこと\u003c/h2\u003e何でエラーになったのかと考えたのですが、結局原因はわかりませんでした。\u003cbr /\u003e\n考えれる理由として、コードを貼り付ける場所がおかしい、ということぐらいだったのでいろんな所に貼り付けて試したけどダメでした。\u003cbr /\u003e\n\u003cbr /\u003e\nさらに、一度コードを消してプラグインを3種類ほど試しましたがだめでした。\u003cbr /\u003e\nPHPに関係あるのかわかりませんが、キャッシュの削除をしてもかわらず。\u003cbr /\u003e\n\u003cbr /\u003e\n結局何をしたら正常に動作するようになったかというと、テーマを変更したら無事受信してくれるようになりました。\u003cbr /\u003e\n変更したテーマは「TwentyEleven」です。たぶん他のテーマでも大丈夫だと思います。\u003cbr /\u003e\n\u003cbr /\u003e\n実際、どこが悪くてエラーが出るのかがわかっていない状態で、改善されてしまったので、あくまでも参考程度に考えてください。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/5917388141091949931"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/5917388141091949931"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/10/wordpressgoogleanalytics.html","title":"WordPressにGoogleAnalyticsを登録しようとしたときにつまずいた話"}],"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/-CB7IRaUHnEI/UowfXGc4_jI/AAAAAAAAAcY/N2Jl91NHddI/s72-c/%E3%82%A2%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-4561195711005542727"},"published":{"$t":"2013-10-21T21:51:00.000+09:00"},"updated":{"$t":"2017-02-25T21:21:10.083+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":"プラグイン"}],"title":{"type":"text","$t":"WordPressプラグインで人用サイトマップのPS Auto Sitemapを導入してみた"},"content":{"type":"html","$t":"今回紹介するプラグインは、人用のサイトマップを自動で作成してくれる「PS Auto Sitemap」です。\u003cbr /\u003e\nGoogleウェブマスターツール用のサイトマップではありません。\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\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003e人用サイトマップ自動作成プラグイン\u003c/h2\u003e\u003ch3\u003e設定方法\u003c/h3\u003eまず、固定ページを新規に追加します。\u003cbr /\u003e\n任意のタイトルを入力します。サイトマップとするのが無難でしょう。\u003cbr /\u003e\n入力したら、一度下書きとして保存します。\u003cbr /\u003e\n\u003cbr /\u003e\n次に固定ページ一覧から、今保存したサイトマップを編集します。\u003cbr /\u003e\nこのときURLにpost\u003d○○と出るのでこの数字を覚えておきます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-pmAXRWxAgD8/UoweR99QGcI/AAAAAAAAAcI/Xb2Kq6ngTVg/s1600/post_url.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"13\" src\u003d\"http://2.bp.blogspot.com/-pmAXRWxAgD8/UoweR99QGcI/AAAAAAAAAcI/Xb2Kq6ngTVg/s320/post_url.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n次は、設定から「PS Auto Sitemap」を選択して画面上から5行目あたりの「サイトマップを表示する記事」にさっき覚えておいた数字を入力します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-LayBOSa_iqE/UoweeZtkcFI/AAAAAAAAAcQ/M7SVRS9KJD0/s1600/sitemapno.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"316\" src\u003d\"http://4.bp.blogspot.com/-LayBOSa_iqE/UoweeZtkcFI/AAAAAAAAAcQ/M7SVRS9KJD0/s320/sitemapno.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n入力ができたら一番下までスクロールして、ご利用方法の2に表示されているコードをコピーします。\u003cbr /\u003e\n\u003cbr /\u003e\nコピーができたら、固定ページの編集画面へ戻ります。設定画面の方はまだ消さなくていいです。\u003cbr /\u003e\n\u003cbr /\u003e\n固定ページでビジュアルからテキストに変更して、先ほどコピーしたコードを貼り付けて公開します。パーマリンクはそのままでもsitemapなどに変えてもどちらでもかまいません。これで固定ページ側は終了です。\u003cbr /\u003e\n\u003cbr /\u003e\n次は設定画面に戻って、見た目の設定を変えていきます。\u003cbr /\u003e\n\u003cbr /\u003e\n階層は制限なしから10階層までの11段階が選べます。\u003cbr /\u003e\nスタイルの変更で14種類のデザインから選べます。\u003cbr /\u003e\n設定が完了したら「変更を保存」を押して完了です。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/4561195711005542727"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/4561195711005542727"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/10/wordpressps-auto-sitemap.html","title":"WordPressプラグインで人用サイトマップのPS Auto Sitemapを導入してみた"}],"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/-pmAXRWxAgD8/UoweR99QGcI/AAAAAAAAAcI/Xb2Kq6ngTVg/s72-c/post_url.jpg","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-7729144503494943552"},"published":{"$t":"2013-10-20T23:51:00.000+09:00"},"updated":{"$t":"2017-02-25T21:24:22.945+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"プラグイン"}],"title":{"type":"text","$t":"WordPressプラグインのインストールと設定方法"},"content":{"type":"html","$t":"WordPressを使用する上で、なくてはならない便利なプラグイン機能ですが、その種類は、現在27000個を超えています。ここでは、そんなプラグインのインストール方法と設定方法を説明します。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eWordPressプラグインのインストール方法\u003c/h2\u003eまず、ダッシュボードのプラグインから新規追加を選択します。\u003cbr /\u003e\n\u003cbr /\u003e\nすると、プラグインのインストール画面になるので、検索ボックスにインストールしたいプラグイン名を入力して、「プラグインの検索」ボタンをクリックします。\u003cbr /\u003e\n\u003cbr /\u003e\n評価やバージョン説明画面になるので、インストールする前に説明をクリックして、現在使用しているWordPressのバージョンに対応しているかを確認します。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-uRHPOd2Rfvo/Uowc_S6XHvI/AAAAAAAAAcA/RjXddrxscBQ/s1600/plug.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"94\" src\u003d\"http://3.bp.blogspot.com/-uRHPOd2Rfvo/Uowc_S6XHvI/AAAAAAAAAcA/RjXddrxscBQ/s320/plug.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n「注意」と書かれていたら動作しない可能性があるので、ご自身の判断でインストールしてください。※最悪の場合画面が真っ白で動かなくなるをいうようなこともあるようです。\u003cbr /\u003e\n\u003cbr /\u003e\n問題がなければ右上の今すぐインストールをクリックします。ブラウザが閉じて画面が変わるので、プラグインを有効化したら完了です。\u003cbr /\u003e\n\u003ch3\u003eプラグインの設定方法\u003c/h3\u003e有効化したら、ダッシュボードの「設定」にインストールしたプラグインが表示されます。\u003cbr /\u003e\n\u003cbr /\u003e\nクリックすると設定画面になるので、基本的にはここから設定をします。たまに、インストール済みプラグインから設定可能なものもあります。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7729144503494943552"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7729144503494943552"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/10/wordpress_20.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://3.bp.blogspot.com/-uRHPOd2Rfvo/Uowc_S6XHvI/AAAAAAAAAcA/RjXddrxscBQ/s72-c/plug.png","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-6687761791224572886"},"published":{"$t":"2013-10-11T18:01:00.000+09:00"},"updated":{"$t":"2017-02-25T21:42:29.356+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"レンタルサーバー"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ドメイン"}],"title":{"type":"text","$t":"Xdomain（エックスドメイン）無料レンタルサーバーにワードプレスをインストール"},"content":{"type":"html","$t":"エックスドメインは、ワードプレスを使用している人も数多くいる、\u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d264CRE+BNR1OY+CO4+609HU\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eエックスサーバー\u003c/a\u003eを運営しているエックスサーバー株式会社が、今年の8月から新たにはじめた、ドメイン名取得と無料レンタルサーバーサービスで、無料でありながらPHPとMySQLサーバーが利用できるのでワードプレスも使える。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\nさらに、独自ドメインをエックスサーバーで契約すると、WordPress機能だけで見ても、WordPressインストール数が5件から10件に、ディスク容量が2Gから5Gに、独自ドメイン数が5個から10個に、無料レンタルサーバーの機能が拡張される。\u003cbr /\u003e\nもちろん、ドメイン未契約でも高機能なレンタルサーバーを無料で利用可能ということなので試してみた。\u003cbr /\u003e\n\u003ch2\u003eエックスドメインの特徴\u003c/h2\u003e\u003cul\u003e\u003cli\u003ePHP・MySQLが使える。\u003c/li\u003e\n\u003cli\u003e無料でレンタルサーバーが使える。（WordPress機能の場合、最大５G）\u003c/li\u003e\n\u003cli\u003eドメイン未契約でも利用できる。\u003c/li\u003e\n\u003cli\u003e独自ドメインが使用できる。（WordPress機能の場合、最大10個）\u003c/li\u003e\n\u003cli\u003eWhois情報代理公開機能あり。\u003c/li\u003e\n\u003cli\u003eWordPressが5件インストールできる。（最大10件）\u003c/li\u003e\n\u003cli\u003eHTMLサーバーが利用できる。\u003c/li\u003e\n\u003c/ul\u003e詳しい機能や容量などは公式サイトでご確認ください。\u003cbr /\u003e\n\u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d2600SE+AUKT1U+CO4+15OK2A\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eドメイン名取得＆無料レンタルサーバーサービス『エックスドメイン』\u003c/a\u003e \u003cimg alt\u003d\"\" border\u003d\"0\" src\u003d\"http://www11.a8.net/0.gif?a8mat\u003d2600SE+AUKT1U+CO4+15OK2A\" height\u003d\"1\" width\u003d\"1\" /\u003e \u003cbr /\u003e\n\u003ch2\u003eエックスドメインに登録\u003c/h2\u003eエックスドメインのトップページ左にある「無料レンタルサーバーお申し込み」をクリックする。\u003cbr /\u003e\n次に、はじめてのご利用・新規お申し込みを選択すると、メールアドレスの登録画面になるので、入力して「確認メールを送信」する。\u003cbr /\u003e\nすると、【Xdomain】お申し込みメールアドレス確認の送信メールが届くので、【お申込URL】から登録手続きを続ける。\u003cbr /\u003e\n\u003cbr /\u003e\nXdomain管理パネルにログインすると、ドメイン管理、お申し込み、契約・会員情報、無料レンタルサーバー、連携サービスの項目があるので、無料レンタルサーバーを選択する。\u003cbr /\u003e\n\u003cbr /\u003e\nサーバーID入力画面になるので任意のIDを入力する。\u003cbr /\u003e\n※注意書きにもあるように、WordPressやWebサイトURLの一部に利用されるので、考えて入力すること。\u003cbr /\u003e\n\u003cbr /\u003e\n登録が完了したら利用状況一覧がでるので、「PHP\u0026amp;MySQLサーバー」「HTMLサーバー」「WordPress」を念のため順番に利用開始にしていく。初期設定が完了したらWordPress管理画面にログインしてWordPressの新規インストールをする。\u003cbr /\u003e\n\u003ch2\u003eワードプレスのインストール方法\u003c/h2\u003eWordPress管理パネルの真ん中辺りにある新規インストールをクリックする。\u003cbr /\u003e\n\u003cbr /\u003e\n入力フォーム画面になるので必要事項を入力する。このときに、サイトアドレスは空欄にして次へ進む。\u003cbr /\u003e\n入力に問題が無ければインストールが完了する。\u003cbr /\u003e\n\u003cbr /\u003e\n「管理ユーザー」と｢パスワード」のメモを忘れないようにすること。\u003cbr /\u003e\n\u003cbr /\u003e\nWordPress一覧・設定からワードプレスのダッシュボードへログインできるので、さっきメモをしたユーザーとパスワードを入力する。\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/-I9jSncowINY/Ule2ucIlQxI/AAAAAAAAAUo/H6NFWJuFiEo/s1600/12_1.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://2.bp.blogspot.com/-I9jSncowINY/Ule2ucIlQxI/AAAAAAAAAUo/H6NFWJuFiEo/s320/12_1.jpg\" height\u003d\"169\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch2\u003eエックスドメインに独自ドメインを登録\u003c/h2\u003eWordPress管理画面の左にある、ドメイン管理の「ドメイン設定の追加」からドメイン設定追加をします。\u003cbr /\u003e\n\u003cbr /\u003e\nXdomain管理のドメインを追加するか、他社管理のドメインを追加をするかが選べるので、どちらかを選択します。\u003cbr /\u003e\nXdomain管理のドメインを追加する場合は簡単に設定が出来るようなので、他社管理ドメインの追加方法を記録します。\u003cbr /\u003e\n\u003cbr /\u003e\nドメイン設定マニュアルも公式サイトにあるのであわせて読んでみてください。（公式サイトトップページ：\u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d2600SE+AUKT1U+CO4+15ORS2\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eエックスドメイン\u003c/a\u003e \u003cimg alt\u003d\"\" border\u003d\"0\" src\u003d\"http://www19.a8.net/0.gif?a8mat\u003d2600SE+AUKT1U+CO4+15ORS2\" height\u003d\"1\" width\u003d\"1\" /\u003e） \u003cbr /\u003e\n\u003ch3\u003e他社管理ドメインの追加方法\u003c/h3\u003e「他社管理ドメインを追加する」からドメイン名を入力するのですが、このときにドメイン所有者確認のために認証が必要になります。\u003cbr /\u003e\n\u003cbr /\u003e\n認証方法は、「Whois」「Web」「メール」「CNAME」「Aレコード」の５種類があります。 今回はWhois認証で追加しました。\u003cbr /\u003e\nWhois認証の場合にはネームサーバーの確認が必要なので、追加しようとしているドメインの管理業者側でエックスドメイン指定のネームサーバーに変更します。\u003cbr /\u003e\n\u003cbr /\u003e\n変更ができたら「ドメインの追加（確認）」をクリックして、内容に間違いがなければ「確定」を押したら追加作業の完了です。\u003cbr /\u003e\n\u003cbr /\u003e\nネームサーバー変更後に確認が出来るまで半日から数日かかる場合があると書かれていたのですが、自分の場合はすぐに確認ができました。\u003cbr /\u003e\n追加ができたら、WordPress新規インストール画面のサイトアドレスをプルダウンで選択します。その後の作業はすべて同じです。\u003cbr /\u003e\n\u003cbr /\u003e\n高速、多機能、高安定の高性能サーバー\u003cbr /\u003e\n\u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d264CRE+BNR1OY+CO4+609HU\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eエックスサーバー\u003c/a\u003e \u003cimg alt\u003d\"\" border\u003d\"0\" src\u003d\"http://www19.a8.net/0.gif?a8mat\u003d264CRE+BNR1OY+CO4+609HU\" height\u003d\"1\" width\u003d\"1\" /\u003e \u003cbr /\u003e\nWordPressの運用に特化したサーバー\u003cbr /\u003e\n\u003ca href\u003d\"http://px.a8.net/svt/ejp?a8mat\u003d260GIA+IGVYQ+CO4+ZQ80I\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ewpXレンタルサーバー\u003c/a\u003e\u003cbr /\u003e\nその他のサーバー比較\u003cbr /\u003e\n\u003ca href\u003d\"http://www.memorou.com/p/rensaba.html\"\u003eWordPressが使える有料・無料レンタルサーバー比較\u003c/a\u003e"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6687761791224572886"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6687761791224572886"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/10/xdomain.html","title":"Xdomain（エックスドメイン）無料レンタルサーバーにワードプレスをインストール"}],"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/-I9jSncowINY/Ule2ucIlQxI/AAAAAAAAAUo/H6NFWJuFiEo/s72-c/12_1.jpg","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"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-7210816236661198764"},"published":{"$t":"2013-02-27T11:07:00.000+09:00"},"updated":{"$t":"2017-02-26T00:08:36.108+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"子テーマ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テーマ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"プラグイン"}],"title":{"type":"text","$t":"ワードプレス　子テーマの作り方　プラグイン"},"content":{"type":"html","$t":"ワードプレスをはじめると、一度は耳にするテーマや子テーマという言葉。 ここでは、テーマや子テーマについての説明とその作り方です。\u003cbr /\u003e\n\u003cbr /\u003e\nさらに、子テーマを作るのに便利なプラグインも紹介します。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003ch2\u003eテーマとは\u003c/h2\u003eWordPressのテーマは、他のブログなどでいうところのデザインテンプレートのことです。\u003cbr /\u003e\n\u003cbr /\u003e\nデフォルトで、twentytwelveやtwentyelevenなど3個くらいインストールされていて好きなデザインのテーマが選べます。\u003cbr /\u003e\n\u003cbr /\u003e\n他のデザインを使いたいときは、ダッシュボードの外観からテーマを選択すると、テーマの管理画面になるので、テーマのインストールから自分にあったデザインを検索できます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-FoPKcBaXUn8/USjQa2s_UUI/AAAAAAAAAAM/4W31UKhv73Q/s1600/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%83%86%E3%83%BC%E3%83%9E.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"132\" src\u003d\"http://2.bp.blogspot.com/-FoPKcBaXUn8/USjQa2s_UUI/AAAAAAAAAAM/4W31UKhv73Q/s320/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%83%86%E3%83%BC%E3%83%9E.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://3.bp.blogspot.com/-WjHQ3zZ3WXw/USjQ7crXlwI/AAAAAAAAAAU/hT048Q-NNLc/s1600/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"112\" src\u003d\"http://3.bp.blogspot.com/-WjHQ3zZ3WXw/USjQ7crXlwI/AAAAAAAAAAU/hT048Q-NNLc/s320/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003ch2\u003e子テーマとは\u003c/h2\u003e子テーマは上で選んだテーマ（親テーマ）を直接編集せずにカスタムできるようにするものです。\u003cbr /\u003e\n\u003cbr /\u003e\nなぜ直接いじらないのかというと、ワードプレスでテーマのバージョンアップがあったとき、アップグレードすると初期設定に戻ってしまうことがあるからです。\u003cbr /\u003e\n\u003cbr /\u003e\n初期設定に戻ると、時間をかけてカスタマイズしたものをまた1からやり直さなくてはなりません。\u003cbr /\u003e\nそうならないために、子テーマを作って編集するとバージョンアップがあっても、カスタムした部分はそのままの状態で表示されます。\u003cbr /\u003e\n\u003ch2\u003e子テーマを作る方法\u003c/h2\u003e子テーマを作る方法は一般的に自分でフォルダを作るのと、自動で作ってくれるプラグインを使う方法の2通りあります。\u003cbr /\u003e\n\u003ch3\u003e自分で子テーマのフォルダを作る方法\u003c/h3\u003eまず、任意のフォルダ名で「themes」の直下に子テーマフォルダを作る。（親テーマと同じ階層）\u003cbr /\u003e\nその子テーマフォルダ内に「style.css」を作成します。\u003cbr /\u003e\n\u003cbr /\u003e\nここで必要なのが子テーマの名前と親テーマのフォルダ名です。\u003cbr /\u003e\n詳しくは、\u003ca href\u003d\"http://www.memorou.com/2013/12/wordpress_446.html\"\u003eWordPressで子テーマ作る理由と作り方\u003c/a\u003eを参照してください。\u003cbr /\u003e\n\u003ch3\u003e子テーマフォルダを自動で作ってくれるプラグインをインストールする方法\u003c/h3\u003eプラグインをインストールして、有効化して設定をします。\u003cbr /\u003e\n今回は「One-Click Child Theme」を使います。\u003cbr /\u003e\n\u003cbr /\u003e\nインストール方法はダッシュボードのプラグインから新規追加を選択し、プラグインのインストール画面で検索に「One-Click Child Theme」を入力してプラグインの検索をクリックする。\u003cbr /\u003e\n今すぐインストールでインストールして有効化する。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-YKHQFBEEAKE/UStw0ISloOI/AAAAAAAAAAo/H-lbzyGcsgo/s1600/%25E3%2583%2580%25E3%2583%2583%25E3%2582%25B7%25E3%2583%25A5%25E3%2583%259C%25E3%2583%25BC%25E3%2583%2589%25E3%2583%2597%25E3%2583%25A9%25E3%2582%25B0%25E3%2582%25A4%25E3%2583%25B3%25E6%2596%25B0%25E8%25A6%258F.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"127\" src\u003d\"http://2.bp.blogspot.com/-YKHQFBEEAKE/UStw0ISloOI/AAAAAAAAAAo/H-lbzyGcsgo/s320/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E6%96%B0%E8%A6%8F.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-gTo4wnuh-xM/USt0_JbNEKI/AAAAAAAAAA4/uvFhsL4-hHc/s1600/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"158\" src\u003d\"http://4.bp.blogspot.com/-gTo4wnuh-xM/USt0_JbNEKI/AAAAAAAAAA4/uvFhsL4-hHc/s320/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003eインストールが出来たら、ダッシュボードの外観からChild Themeの設定をする。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-N0b9yLBi7tA/USt40WmIRtI/AAAAAAAAABI/mQNuoioHwb4/s1600/%E5%A4%96%E8%A6%B3child.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"130\" src\u003d\"http://4.bp.blogspot.com/-N0b9yLBi7tA/USt40WmIRtI/AAAAAAAAABI/mQNuoioHwb4/s320/%E5%A4%96%E8%A6%B3child.jpg\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nそうすると、外観のテーマの管理に子テーマができるので、外観のテーマの編集から編集することができる。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7210816236661198764"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/7210816236661198764"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/02/blog-post_27.html","title":"ワードプレス　子テーマの作り方　プラグイン"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"https://www.blogger.com/profile/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"35","height":"35","src":"//www.blogger.com/img/blogger_logo_round_35.png"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://2.bp.blogspot.com/-FoPKcBaXUn8/USjQa2s_UUI/AAAAAAAAAAM/4W31UKhv73Q/s72-c/%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%83%86%E3%83%BC%E3%83%9E.jpg","height":"72","width":"72"}}]}});