// API callback
related_results_labels_thumbs({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-3913772026590954100"},"updated":{"$t":"2023-03-13T11:23:17.127+09:00"},"category":[{"term":"WordPress"},{"term":"禁煙"},{"term":"Blogger"},{"term":"WordPressカスタマイズ"},{"term":"Bloggerカスタマイズ"},{"term":"レビュー"},{"term":"ブログ"},{"term":"禁煙に成功した人の話"},{"term":"Seesaa"},{"term":"ドメイン"},{"term":"パソコン"},{"term":"AdSense"},{"term":"Seesaaカスタマイズ"},{"term":"バナー広告"},{"term":"画像"},{"term":"アナリティクス"},{"term":"テーマ"},{"term":"メニューバー"},{"term":"月次報告"},{"term":"くじ"},{"term":"ウェブマスターツール"},{"term":"テンプレート"},{"term":"ドメインキング"},{"term":"レンタルサーバー"},{"term":"STINGER"},{"term":"プラグイン"},{"term":"リダイレクト"},{"term":"禁煙に失敗した人の話"},{"term":"amazon"},{"term":"totoBIG"},{"term":"スコアカード"},{"term":"格安SIM"},{"term":"禁煙の効果"},{"term":"ウィンドウエアコン"},{"term":"グラボ"},{"term":"ミニバード"},{"term":"光・モバイル回線"},{"term":"固定ページ"},{"term":"窓用エアコン"},{"term":"A8"},{"term":"FREETEL"},{"term":"Googleアカウント"},{"term":"JavaScript"},{"term":"KIWAMI"},{"term":"MVNO"},{"term":"NURO光"},{"term":"URL"},{"term":"Vista"},{"term":"Windows エクスペリエンス インデックス"},{"term":"css"},{"term":"アップデート"},{"term":"カテゴリー"},{"term":"キャッシュ"},{"term":"コピーライト"},{"term":"サイトマップ"},{"term":"プロフィール"},{"term":"ランサーズ"},{"term":"動画"},{"term":"外注記事"},{"term":"子テーマ"},{"term":"投稿ページ"},{"term":"禁煙のコツ"},{"term":".exeファイル"},{"term":"Chrome"},{"term":"GIMP"},{"term":"Google+"},{"term":"Hatch"},{"term":"Inkscape"},{"term":"LinkWithin"},{"term":"Linux"},{"term":"MesoColumn"},{"term":"Picasa"},{"term":"Skitch"},{"term":"gzip"},{"term":"nofollow"},{"term":"クロスドメイントラッキング"},{"term":"サイドバー"},{"term":"サチコ"},{"term":"サブメニュー"},{"term":"タバコの害"},{"term":"ダウンロード"},{"term":"ツイッター連携"},{"term":"テラダモケイ"},{"term":"トップページ"},{"term":"ネームサーバー"},{"term":"バリューコマース"},{"term":"パーマリンク設定"},{"term":"ファビコン"},{"term":"フォント"},{"term":"プロジェクター"},{"term":"ペイント"},{"term":"ページ内リンク"},{"term":"マネークリップ"},{"term":"圧縮"},{"term":"宅建"},{"term":"拡張機能"},{"term":"検索"},{"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.memorou.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/-\/MesoColumn?alt=json-in-script\u0026max-results=9999"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/search\/label\/MesoColumn"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"generator":{"version":"7.00","uri":"http://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-865527872562427223"},"published":{"$t":"2014-06-04T10:30:00.000+09:00"},"updated":{"$t":"2017-02-19T22:29:45.825+09:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"MesoColumn"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPress"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WordPressカスタマイズ"},{"scheme":"http://www.blogger.com/atom/ns#","term":"テーマ"}],"title":{"type":"text","$t":"WordPress無料レスポンシブテーマMesoColumnのカスタム"},"content":{"type":"html","$t":"無料レスポンシブWebデザインテーマの「MesoColumn」を使って、サイトを作成したときのカスタマイズの記録です。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca name='more'\u003E\u003C\/a\u003E\u003Cbr \/\u003E\nテーマの特徴などに関しては、『\u003Ca href=\"http:\/\/wp-themetank.com\/wordpress-theme-free-portal-blog-mesocolumn\/\" target=\"_blank\" rel=\"nofollow\"\u003Eテーマタンク：当サイトおすすめ。満を持して登場の本格派WP無料テーマ「Mesocolumn」\u003C\/a\u003E』で非常にわかりやすく解説されているので、そちらを参考にしていただきたい。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-j1KOupAHgKo\/U452TRMILjI\/AAAAAAAAB18\/f0UAP-pDCuA\/s1600\/02.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-j1KOupAHgKo\/U452TRMILjI\/AAAAAAAAB18\/f0UAP-pDCuA\/s320\/02.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ch2\u003Eカスタマイズポイント\u003C\/h2\u003Eカスタマイズした場所を個別に解説していきます。コードは、特に記載がない限りCustom CSSに追加しています。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n追加してもスタイルが変わらない場合は、最後に「!important」を追加する。\u003Cbr \/\u003E\n＜例＞記事中のH2の文字の太さを変えたい場合\u003Cbr \/\u003E\n\u003Cpre\u003E.post-content h2 {font-weight: 400 !important;}\u003C\/pre\u003Eこうすることで優先順位が変わり、太文字から通常の文字に変わります。400の部分はnormalでも同じです。 \u003Cbr \/\u003E\n\u003Ch3\u003Eヘッダーを画像に変更\u003C\/h3\u003Eおすすめの画像サイズは、タイトル横に728×90の広告を使用するなら225×90、468×60の広告を使用するなら250～300×60です。これは画面を縮めたときや、スマホで見たときの表示も考慮しています。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n変更方法は、外観のヘッダーからではなく、ThemeOptionsから変更します。メディアの追加後、Header SettingsのSite LogoにファイルのURLを貼り付けます。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-JaHRBoUvIAc\/U45132AJSJI\/AAAAAAAAB10\/SV7po_U318I\/s1600\/01.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-JaHRBoUvIAc\/U45132AJSJI\/AAAAAAAAB10\/SV7po_U318I\/s320\/01.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nファビコンは、プラグインを使用して変更しているため、Favourite Iconは使用していませんが、Site Logo同様ファイルのURLを貼り付けるだけで変更できそうです。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nちなみに、プラグインは「Favicon Rotator」を使用しています。\u003Cbr \/\u003E\n\u003Ch3\u003E記事タイトル文字サイズ\u003C\/h3\u003E\u003Cpre\u003E\u003Ccode\u003E#post-entry article.post-single h1.post-title, h1.folio{ font-size: 2.5em; }\u003C\/code\u003E\u003C\/pre\u003E好みのサイズに変更\u003Cbr \/\u003E\n\u003Ch3\u003Eヘッダー下にライン\u003C\/h3\u003E\u003Cpre\u003E\u003Ccode\u003E#header{ border-bottom: solid 1px #111; }\u003C\/code\u003E\u003C\/pre\u003Eメリハリをつけるならこれ\u003Cbr \/\u003E\n\u003Ch3\u003Eタイトル横のバナー\u003C\/h3\u003E\u003Cpre\u003E\u003Ccode\u003E#topbanner { padding-left: 1px; }\u003C\/code\u003E\u003C\/pre\u003Eバナーが下に回りこむときに、タイトルとの幅を狭くする\u003Cbr \/\u003E\n\u003Ch3\u003Eサイドバーとメインの横幅を変更\u003C\/h3\u003E\u003Cpre\u003E\u003Ccode\u003E#right-sidebar{ width: 32%; }\n\n.content{ width: 65%; }\u003C\/code\u003E\u003C\/pre\u003E割合を考えて数値を変える\u003Cbr \/\u003E\n\u003Ch3\u003E関連記事の横幅\u003C\/h3\u003E\u003Cpre\u003E\u003Ccode\u003E#post-related .feat-cat-meta { width: 30%; }\u003C\/code\u003E\u003C\/pre\u003E上で幅を変えて、サイズが合わなくなったときは変更する\u003Cbr \/\u003E\n2個なら47%、3個なら30%がきれいに収まる。\u003Cbr \/\u003E\n\u003Ch3\u003E続きを読むを右にする\u003C\/h3\u003E\u003Cpre\u003E\u003Ccode\u003E#post-entry article .post-more a { float: right; }\u003C\/code\u003E\u003C\/pre\u003E\u003Ch3\u003Eページナビの文字の大きさ\u003C\/h3\u003E\u003Cpre\u003E\u003Ccode\u003E#post-navigator-single.post-nav-archive {\u0026nbsp;font-size: 1.5em;\u0026nbsp;}\u003C\/code\u003E\u003C\/pre\u003E\u003Ch3\u003Eモバイルナビの右を消す\u003C\/h3\u003E\u003Cpre\u003E\u003Ccode\u003E#mobile-nav .select-pri.sec{\u0026nbsp;display:none;\u0026nbsp;}\u003C\/code\u003E\u003C\/pre\u003E\u003Ch3\u003Eモバイルナビの左を消す\u003C\/h3\u003E\u003Cpre\u003E\u003Ccode\u003E#mobile-nav .select-pri{\u0026nbsp;display:none;\u0026nbsp;}\u003C\/code\u003E\u003C\/pre\u003E\u003Ch3\u003E引用の文字\u003C\/h3\u003E\u003Cpre\u003Eblockquote{font-size:1em;font-family:serif;}\u003C\/pre\u003E\u003Ch3\u003Eトップナビ　マウスオーバー\u003C\/h3\u003E\u003Cpre\u003E\u003Ccode\u003E#top-navigation .sf-menu li a:hover{\nbackground-color:#ddd;\ncolor:#444;\n}\n\u003C\/code\u003E\u003C\/pre\u003Eマウスを乗せる前の色はTheme Optionsで変更できる \u003Cbr \/\u003E\n\u003Ch3\u003Eその他\u003C\/h3\u003E\u003Cpre\u003E\u003Ccode\u003Easide.home-feat-cat .feat-title a{\u0026nbsp;\/* \u0026nbsp;ホーム記事タイトル\u0026nbsp;*\/\u0026nbsp;}\n\nimg.home-feat-rss {\u0026nbsp;\/* \u0026nbsp;ホームRSS\u0026nbsp;*\/\u0026nbsp;}\n\naside.home-feat-cat .feat-meta {\u0026nbsp;\/* ホーム日付など\u0026nbsp;*\/\u0026nbsp;}\n\naside.home-feat-cat .feat-content {\u0026nbsp;\/* ホーム記事抜粋\u0026nbsp;*\/\u0026nbsp;}\n\naside.home-feat-cat .apost .feat-content { \/* ホーム記事抜粋2個目以降 *\/ }\n\n.entry-date{\u0026nbsp;\/* 個別記事の日付\u0026nbsp;*\/\u0026nbsp;}\n\u003C\/code\u003E\u003C\/pre\u003E\u003Ch3\u003Eサンプル\u003C\/h3\u003E追記：現在サンプルサイトはありません。\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-D3L5GjqHwiE\/U9BygH-TbCI\/AAAAAAAACDY\/c6hT6ipFDqA\/s1600\/10.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-D3L5GjqHwiE\/U9BygH-TbCI\/AAAAAAAACDY\/c6hT6ipFDqA\/s1600\/10.png\" height=\"186\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n試しに作ったサイトがあるので、時間があれば見てみてください。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nPCでは、サイドバーの新着記事一覧の下あたり、スマホでは記事下の人気記事の下あたりにリンクがあります。\u003Cbr \/\u003E\nデフォルトのデモとは大分違いますが、上のカスタマイズで変更できる部分を変更しています。\u003Cbr \/\u003E\n\u003Ch2\u003E広告の設置\u003C\/h2\u003EMesoColumnにはオプションで広告を表示する機能があります。Advertisement Settingsに8箇所コードを入力できます。上から順に1～8とします。\u003Cbr \/\u003E\n\u003Col\u003E\u003Cli\u003Eサイトタイトルの横\u003C\/li\u003E\n\u003Cli\u003Eカテゴリーページの下\u003C\/li\u003E\n\u003Cli\u003E\u003Cbr \/\u003E\n\u003C\/li\u003E\n\u003Cli\u003E個別記事の記事タイトル下\u003C\/li\u003E\n\u003Cli\u003E個別記事の記事下（関連記事の上）\u003C\/li\u003E\n\u003Cli\u003E\u003Cbr \/\u003E\n\u003C\/li\u003E\n\u003Cli\u003Eトップメニューの上\u003C\/li\u003E\n\u003Cli\u003Eフッターの下\u003C\/li\u003E\n\u003C\/ol\u003Eここにアドセンスコードを貼り付けるとうまく表示されません。（a8などのコードはそのまま貼り付けられます。）そこで、ショートコードでアドセンス広告を表示させます。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n子テーマfunctions.phpに以下のコード追加します。\u003Cbr \/\u003E\n\u003Cpre\u003E\u003Ccode\u003Efunction googlead_shortcode() {\n$adsensecode = 'ここにアドセンスコードを貼る';\nreturn $adsensecode;\n}\nadd_shortcode('ショートコード名', 'googlead_shortcode');\n\u003C\/code\u003E\u003C\/pre\u003E例えば、ショートコード名をadsenseとしたら、表示させたいところに、[adsense]と入力します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n2箇所以上に設置する場合は、googlead_shortcodeの部分を好きな文字に変更する必要がある。例えば、topバナーの場合、googlead2_shortcodeとし、ショートコード名もadsensetopにする。googlead_shortcodeの部分が1つ目と同じだとエラーで表示されなくなるので注意が必要です。\u003Cbr \/\u003E\nこの場合、表示させたい場所に[adsensetop]と入力します。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nせっかくのレスポンシブWebデザインテーマなのでアドセンスもレスポンシブ広告ユニット（ベータ版）を使うことにしました。\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/www.memorou.com\/2014\/06\/wordpress.html\"\u003EWordPressにレスポンシブ広告ユニットの設定\u003C\/a\u003E"},"link":[{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/865527872562427223"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3913772026590954100\/posts\/default\/865527872562427223"},{"rel":"alternate","type":"text/html","href":"https:\/\/www.memorou.com\/2014\/06\/wordpressmesocolumn.html","title":"WordPress無料レスポンシブテーマMesoColumnのカスタム"}],"author":[{"name":{"$t":"asai"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/05833942471053019922"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-j1KOupAHgKo\/U452TRMILjI\/AAAAAAAAB18\/f0UAP-pDCuA\/s72-c\/02.png","height":"72","width":"72"}}]}});