gdata.io.handleScriptLoaded({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$georss":"http://www.georss.org/georss","xmlns$thr":"http://purl.org/syndication/thread/1.0","xmlns$blogger":"http://schemas.google.com/blogger/2008","id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100"},"updated":{"$t":"2023-03-13T11:23:17.127+09:00"},"category":[{"term":"レビュー"},{"term":"宅建"},{"term":"リダイレクト"},{"term":"ブログ"},{"term":"Windows エクスペリエンス インデックス"},{"term":"アップデート"},{"term":"アナリティクス"},{"term":"WordPress"},{"term":"A8"},{"term":"光・モバイル回線"},{"term":"拡張機能"},{"term":"外注記事"},{"term":"メニューバー"},{"term":"ウェブマスターツール"},{"term":"禁煙に失敗した人の話"},{"term":"動画"},{"term":"WordPressカスタマイズ"},{"term":"Hatch"},{"term":"画像の圧縮"},{"term":"プラグイン"},{"term":"URL"},{"term":"ネームサーバー"},{"term":"STINGER"},{"term":"Seesaaカスタマイズ"},{"term":"Vista"},{"term":"Chrome"},{"term":"テラダモケイ"},{"term":"FREETEL"},{"term":"ファビコン"},{"term":"サブメニュー"},{"term":"ドメイン"},{"term":"AdSense"},{"term":"子テーマ"},{"term":"amazon"},{"term":"Bloggerカスタマイズ"},{"term":"css"},{"term":"NURO光"},{"term":"カテゴリー"},{"term":"バリューコマース"},{"term":"JavaScript"},{"term":"nofollow"},{"term":"マネークリップ"},{"term":"LinkWithin"},{"term":"サチコ"},{"term":"KIWAMI"},{"term":"プロフィール"},{"term":"ツイッター連携"},{"term":"totoBIG"},{"term":"ランサーズ"},{"term":"プロジェクター"},{"term":"Seesaa"},{"term":"キャッシュ"},{"term":"サイドバー"},{"term":"投稿ページ"},{"term":"グラボ"},{"term":"GIMP"},{"term":"Skitch"},{"term":"サイトマップ"},{"term":".exeファイル"},{"term":"Picasa"},{"term":"ウィンドウエアコン"},{"term":"テーマ"},{"term":"固定ページ"},{"term":"テンプレート"},{"term":"格安SIM"},{"term":"関連記事"},{"term":"スコアカード"},{"term":"禁煙に成功した人の話"},{"term":"連絡フォーム"},{"term":"禁煙の効果"},{"term":"艦これ"},{"term":"Google+"},{"term":"コピーライト"},{"term":"Linux"},{"term":"パーマリンク設定"},{"term":"トップページ"},{"term":"ミニバード"},{"term":"ペイント"},{"term":"Blogger"},{"term":"ドメインキング"},{"term":"Inkscape"},{"term":"圧縮"},{"term":"くじ"},{"term":"禁煙"},{"term":"ダウンロード"},{"term":"gzip"},{"term":"フォント"},{"term":"バナー広告"},{"term":"Googleアカウント"},{"term":"レンタルサーバー"},{"term":"画像"},{"term":"MesoColumn"},{"term":"窓用エアコン"},{"term":"クロスドメイントラッキング"},{"term":"パソコン"},{"term":"月次報告"},{"term":"MVNO"},{"term":"注目の投稿"},{"term":"禁煙のコツ"},{"term":"ページ内リンク"},{"term":"検索"},{"term":"タバコの害"}],"title":{"type":"text","$t":"メモロウ"},"subtitle":{"type":"html","$t":"メモロウ（旧はじめてのWordPressとBlogger+Seesaa）は、ブログ作成スキルゼロだった管理人が、WordPress・Blogger・Seesaaで実際に行ったカスタマイズの備忘録を中心に、日々の生活で気になった情報や話題を投稿しています。"},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/-/%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89?alt\u003djson-in-script\u0026max-results\u003d9999"},{"rel":"self","type":"application/atom+xml","href":"https://www.blogger.com/feeds/3913772026590954100/posts/default/-/%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89?alt\u003djson-in-script\u0026max-results\u003d9999"},{"rel":"alternate","type":"text/html","href":"http://www.memorou.com/search/label/%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89"},{"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":"1"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"9999"},"entry":[{"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"}}]}});