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/-/%E7%94%BB%E5%83%8F?alt\u003djson-in-script\u0026max-results\u003d9999"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/-/%E7%94%BB%E5%83%8F?alt\u003djson-in-script\u0026max-results\u003d9999"},{"rel":"alternate","type":"text/html","href":"http://www.memorou.com/search/label/%E7%94%BB%E5%83%8F"},{"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":"9"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"9999"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-4880837726803561680"},"published":{"$t":"2014-12-04T10:49:00.000+09:00"},"updated":{"$t":"2016-07-11T13:17:09.624+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"バリューコマース"},{"scheme":"http://www.blogger.com/atom/ns#","term":"画像"},{"scheme":"http://www.blogger.com/atom/ns#","term":"A8"}],"title":{"type":"text","$t":"アフィリエイトの商品リンクで大きな画像や画像だけを使用する方法"},"content":{"type":"html","$t":"amazonアソシエイト（以下、アマゾン）や楽天アフィリエイト（以下、楽天）から商品リンクを作成すると、大きな画像や画像だけのリンクを作成できることはご存知だと思います。\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/-Vn_EkFJBYUc/VHfhiDNMY2I/AAAAAAAACdI/ztlRxeRlzx4/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/-Vn_EkFJBYUc/VHfhiDNMY2I/AAAAAAAACdI/ztlRxeRlzx4/s1600/01.png\" height\u003d\"179\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nしかし、アフィリエイトを始めたばかりのころは、いろいろなアフィリエイトサイト（ASP）に分散すると毎月の振り込み額に達しない、楽天の商品が売れてもポイントにしかならないなど悩ましいこともあります。\u003cbr /\u003e\n\u003ch2\u003eamazonアソシエイトの画像サイズ\u003c/h2\u003eアマゾンで商品リンクを作成した場合は、大中小の3タイプからサイズが選択でき、大は約250×250の画像リンクを作成できます。\u003cbr /\u003e\n\u003cbr /\u003e\nまた、「テキストとイメージ」「テキストのみ」「画像のみ」などのリンクタイプが選べます。\u003cbr /\u003e\n\u003ch2\u003e楽天アフィリエイトの画像サイズ\u003c/h2\u003e楽天で商品リンクを作成した場合は、最大で400×400の画像リンクを作成できます。\u003cbr /\u003e\n\u003cbr /\u003e\nまた、「画像とテキスト」「画像のみ」「テキストのみ」などのリンクタイプが選べます。\u003cbr /\u003e\n\u003ch2\u003eA8.netの画像サイズ\u003c/h2\u003e\u003cdiv\u003eA8のamazonツールを使って商品リンクを作成すると最大で160×160の画像リンクを作成でき、楽天ツールを使って商品リンクを作成すると最大で128×128の画像リンクを作成できます。\u003c/div\u003e\u003cdiv\u003e\u003cbr /\u003e\n\u003c/div\u003e\u003cdiv\u003eしかし、どちらのツールを使用しても画像のみのリンクを作成することは規約違反に当たります。\u003c/div\u003e\u003cdiv\u003e参考：\u003ca href\u003d\"http://wordpress-customize.blogspot.jp/2014/11/a8.html\"\u003eA8でアマゾンや楽天の商品画像を大きくしていいのか聞いてみました\u003c/a\u003e\u003c/div\u003e\u003ch2\u003eバリューコマースの画像サイズ\u003c/h2\u003eバリューコマースでamazonの商品リンクを作成すると商品によっては1000×1000や1600×1600などかなり大きな画像が使用でき、サイズも変更することが可能です。\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アマゾン・楽天・A8・バリューコマースはとりあえず登録しておいて、「アマゾンで大きい画像が使いからバリューコマース」「画像は小さくても他のアフィリエイトもやっているからA8」など、サイトにあった広告リンクを各社で使い分けるのが、サイトの見栄え的にもいいように思えます。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/4880837726803561680"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/4880837726803561680"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/12/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/-Vn_EkFJBYUc/VHfhiDNMY2I/AAAAAAAACdI/ztlRxeRlzx4/s72-c/01.png","height":"72","width":"72"}},{"id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100.post-6581094678476746791"},"published":{"$t":"2014-11-28T13:13:00.002+09:00"},"updated":{"$t":"2017-02-19T00:49:49.252+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"画像"},{"scheme":"http://www.blogger.com/atom/ns#","term":"ブログ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"A8"}],"title":{"type":"text","$t":"A8でアマゾンや楽天の商品画像を大きくしていいのか聞いてみました"},"content":{"type":"html","$t":"A8を使ってアマゾンや楽天の商品を紹介するときに、大きな画像を使いたい時が多々あります。\u003cbr /\u003e\nしかし、A8のamazonツールを使って商品リンクを作成すると最大でも160×160、楽天ツールを使って商品リンクを作成すると最大でも128×128の大きさの画像しか使うことができません。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"https://px.a8.net/svt/ejp?a8mat\u003d15T2KD+AY5EOI+0K+11O3G2\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003eA8.netの申し込みページはこちら\u003c/a\u003e\u003cbr /\u003e\n\u003cimg border\u003d\"0\" width\u003d\"1\" height\u003d\"1\" src\u003d\"https://www14.a8.net/0.gif?a8mat\u003d15T2KD+AY5EOI+0K+11O3G2\" alt\u003d\"\"\u003e\u003cbr /\u003e\n\u003cbr /\u003e\nA8でテキストや画像を変更すると規約違反になることはご存知だと思います。\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/-0aujI5dsvI8/VHf0QG5sr8I/AAAAAAAACdY/eRAxW4q0Fpw/s1600/01.jpg\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://1.bp.blogspot.com/-0aujI5dsvI8/VHf0QG5sr8I/AAAAAAAACdY/eRAxW4q0Fpw/s1600/01.jpg\" height\u003d\"213\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e\u003cbr /\u003e\nそこで、ここで生成される商品リンクコードをdivで囲ってCSSで画像を大きくしていいのか。\u003cbr /\u003e\nまた、A8では通常、画像とテキストが一体となった広告が作成されます。これを画像のみで使用していいのかも一緒に質問してみました。\u003cbr /\u003e\n\u003ch2\u003e問い合わせた内容と回答\u003c/h2\u003e\u003cdiv\u003e回答は一部省略しています。\u003c/div\u003e\u003ch3\u003e質問\u003c/h3\u003e\u003cblockquote class\u003d\"tr_bq\"\u003e１．Amazonツールと楽天ツールで作成した商品リンクで、画像のみを使用することはできないのでしょうか？\u003cbr /\u003e\n２．商品リンクの画像を大きくする方法はありますか？\u003cbr /\u003e\n３．上記以外の場合に、Amazonと楽天で取り扱っている商品の画像だけを使う方法があれば教えてください。\u003c/blockquote\u003e\u003ch3\u003e回答\u003c/h3\u003e\u003cblockquote class\u003d\"tr_bq\"\u003eお問い合わせ頂いた件でございますが、A8.netでは広告コードを\u003cbr /\u003e\n改変することはご遠慮頂いております。\u003cbr /\u003e\n下記2プログラムは管理画面内のツールにて生成したコードのみ\u003cbr /\u003e\nご利用頂けますので、改変はせずにそのままの状態でご利用下さい。\u003c/blockquote\u003eとの回答をいただきました。\u003cbr /\u003e\nこの回答だけでも画像を大きくする方法はなさそうだと、なんとなくわかったのですが、さらに質問してみました。\u003cbr /\u003e\n\u003ch3\u003e質問\u003c/h3\u003e\u003cblockquote class\u003d\"tr_bq\"\u003e商品リンクの画像を大きくする方法について\u003cbr /\u003e\n\u0026lt;div id\u003da8\u0026gt;\u003cbr /\u003e\n広告コード\u003cbr /\u003e\n\u0026lt;div\u0026gt;\u003cbr /\u003e\nとして、スタイルシートに\u003cbr /\u003e\n#a8 img{\u003cbr /\u003e\nwidth:300px;\u003cbr /\u003e\nheight:300px;\u003cbr /\u003e\n}\u003cbr /\u003e\nとして、画像を大きくすることは、広告コードの改変にはあたらないと考えてよろしいのでしょうか？\u003cbr /\u003e\nまた、今後大きな画像や画像だけの利用ができるようになることはありますか？\u003c/blockquote\u003e\u003ch3\u003e回答\u003c/h3\u003e\u003cblockquote class\u003d\"tr_bq\"\u003eお問い合わせ頂いた件でございますが、如何なる方法であっても\u003cbr /\u003e\nAmazon様や楽天様の画像サイズを変更することはご遠慮下さいますよう\u003cbr /\u003e\nお願いいたします。\u003cbr /\u003e\n現在のところ大きなサイズの画像付き、または商品画像のみ商品リンクの\u003cbr /\u003e\n提供予定はございません。\u003c/blockquote\u003eとの回答をいただきました。\u003cbr /\u003e\nこの方法では、広告コード自体は一切変更しないため、コードの改変にあたらないのではないかと思っていたのですが規約違反となるようです。\u003cbr /\u003e\n\u003cbr /\u003e\nまた、大きな画像や画像だけで使用することも当分できないようです。大きな画像や画像だけを使用したい場合は、amazonアソシエイトと楽天アフィリエイトから直接商品リンクを作成するか、アマゾンで大きな画像を使用する場合はバリューコマースを使うのがよさそうです。\u003cbr /\u003e\n\u003cbr /\u003e\nまだバリューコマースに登録していない方はこちらから⇒\u003ca href\u003d\"http://ck.jp.ap.valuecommerce.com/servlet/referral?sid\u003d3164145\u0026amp;pid\u003d883135795\" target\u003d\"_blank\"\u003e\u003cimg border\u003d\"0\" src\u003d\"http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid\u003d3164145\u0026amp;pid\u003d883135795\" height\u003d\"1\" width\u003d\"1\" /\u003eバリューコマース\u003c/a\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href\u003d\"http://wordpress-customize.blogspot.jp/2014/12/blog-post.html\"\u003eアフィリエイトの商品リンクで大きな画像や画像だけを使用する方法\u003c/a\u003e"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6581094678476746791"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/6581094678476746791"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2014/11/a8.html","title":"A8でアマゾンや楽天の商品画像を大きくしていいのか聞いてみました"}],"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/-0aujI5dsvI8/VHf0QG5sr8I/AAAAAAAACdY/eRAxW4q0Fpw/s72-c/01.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-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-3417546144173516265"},"published":{"$t":"2013-12-04T13:01:00.000+09:00"},"updated":{"$t":"2017-02-25T19:58:51.312+09:00"},"category":[{"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":"Picasa"}],"title":{"type":"text","$t":"Bloggerに挿入した画像はPicasaウェブアルバムで削除"},"content":{"type":"html","$t":"Bloggerに画像を挿入したんだけど、「画像はどこに保存されてるんだろう？」「どうやって削除するんだろう？」と疑問に思ったので調べてみました。\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca name\u003d'more'\u003e\u003c/a\u003e\u003cbr /\u003e\n答えはタイトルに書いてありますが、削除方法などを記録します。\u003cbr /\u003e\n\u003ch2\u003ePicasaウェブアルバムとは\u003c/h2\u003e\u003cblockquote\u003ePicasa ウェブ アルバムを使うと、カメラやパソコンに保存されている写真をウェブ上に簡単にアップロードできます。Picasa ウェブ アルバムでは 1 GB の保存容量を利用できるので、写真を手軽に共有できます。\u003c/blockquote\u003e保存容量が1GBだと少ないような気がしますが、特定のサイズに満たないファイルはカウントされません。\u003cbr /\u003e\n\u003cbr /\u003e\n詳しくは\u003ca href\u003d\"https://support.google.com/picasa/answer/1224181\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003e無料の保存容量の制限\u003c/a\u003eに書かれていますが、Google+に登録している場合は、2048×2048ピクセル以内の写真や、15分以内の動画は、無料の保存容量にカウントされません。\u003cbr /\u003e\n\u003cbr /\u003e\nさらに、画像のアップロード時に、自動的にサイズ変更をしてくれます。\u003cbr /\u003e\n\u003cblockquote\u003eGoogle+ にアップロードした写真は、すべて自動的に（長い辺が）2048 ピクセルにサイズ変更され、無料の保存容量の割り当てにカウントされません。\u003c/blockquote\u003e\u003ch2\u003ePicasaの設定変更\u003c/h2\u003e\u003ca href\u003d\"https://picasaweb.google.com/home\" target\u003d\"_blank\" rel\u003d\"nofollow\"\u003ePicasaウェブアルバム\u003c/a\u003eにアクセスします。\u003cbr /\u003e\n\u003cbr /\u003e\nホームタブは、Bloggerで複数のブログを作成している場合、ブログごとにフォルダ分けして表示されます。\u003cbr /\u003e\n\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://4.bp.blogspot.com/-dkRsUq-xlTs/Up6KRFSjp6I/AAAAAAAAA3Q/Zzgf7NR0sJE/s1600/1.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"135\" src\u003d\"http://4.bp.blogspot.com/-dkRsUq-xlTs/Up6KRFSjp6I/AAAAAAAAA3Q/Zzgf7NR0sJE/s320/1.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\u003cdiv class\u003d\"separator\" style\u003d\"clear: both; text-align: center;\"\u003e\u003ca href\u003d\"http://2.bp.blogspot.com/-XIf7XWnBe-k/Up6RBv7zVEI/AAAAAAAAA3g/YE-CJvE__F4/s1600/2.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"86\" src\u003d\"http://2.bp.blogspot.com/-XIf7XWnBe-k/Up6RBv7zVEI/AAAAAAAAA3g/YE-CJvE__F4/s320/2.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/-l0Iqyv6sIfo/Up6ZgR61SQI/AAAAAAAAA34/tK9iPXscPLQ/s1600/3.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"276\" src\u003d\"http://4.bp.blogspot.com/-l0Iqyv6sIfo/Up6ZgR61SQI/AAAAAAAAA34/tK9iPXscPLQ/s320/3.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設定を変更したら「完了」ボタンを押して完了です。\u003cbr /\u003e\n\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://3.bp.blogspot.com/-V-k5jvGNse8/Up6ZZ-kGzYI/AAAAAAAAA3w/oCTdNFQ1vCY/s1600/4.png\" imageanchor\u003d\"1\" style\u003d\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border\u003d\"0\" height\u003d\"157\" src\u003d\"http://3.bp.blogspot.com/-V-k5jvGNse8/Up6ZZ-kGzYI/AAAAAAAAA3w/oCTdNFQ1vCY/s320/4.png\" width\u003d\"320\" /\u003e\u003c/a\u003e\u003c/div\u003e「操作」ボタンを押して、この写真を削除を選択します。\u003cbr /\u003e\n「この写真を削除しますか？～」ときかれるので、本当に削除する場合は「OK」ボタンをクリックしたら完了です。\u003cbr /\u003e\n\u003cbr /\u003e\n削除した画像は、ブログの表示からも消えます。間違えて削除しないように注意してください。\u003cbr /\u003e\n\u003ch2\u003ePicasa使用上の注意\u003c/h2\u003eBloggerで使用した画像はPicasaウェブアルバムに保存されます。\u003cbr /\u003e\n\u003cbr /\u003e\n「画像を挿入」から開いただけの状態、つまり「選択した画像を追加」していない場合でもPicasaに保存されてしまいます。\u003cbr /\u003e\n\u003cbr /\u003e\n他人には見られたくない画像を、誤ってアップロードしてしまった場合は、速やかに削除しましょう。\u003cbr /\u003e\n\u003cbr /\u003e\nまた、複数のブログを同一アカウントで作成している場合、Google+の写真から誰が作成したブログなのかがわかってしまいます。\u003cbr /\u003e\n\u003cbr /\u003e\nブログの場合、公開設定を「一般公開」にしないと記事中の画像も表示されないので、「自分だけ」にすることができません。\u003cbr /\u003e\n\u003cbr /\u003e\nブログの作成者が自分だということがばれたくない場合は、アカウントを分けるしかありません。（たぶん、他の方法があれば教えてください）\u003cbr /\u003e\n\u003cbr /\u003e\nさらに、Picasaを写真の保存場所として使用していて、他人に見られたくない画像がある場合は、「自分だけ」に設定しておかないと個人情報がダダ漏れ、なんてことにもなりかねません。"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3417546144173516265"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/3417546144173516265"},{"rel":"alternate","type":"text/html","href":"https://www.memorou.com/2013/12/bloggerpicasa.html","title":"Bloggerに挿入した画像はPicasaウェブアルバムで削除"}],"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/-dkRsUq-xlTs/Up6KRFSjp6I/AAAAAAAAA3Q/Zzgf7NR0sJE/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-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"}}]}});