WordPressにGoogle Adsenseで広告を貼る方法を簡単に説明します。
直接広告コードをPHPファイルに貼り付ける方法もありますが
ここではアドセンス広告を貼るためのプラグインの説明をしていきます。
プラグインは数多くありますが、実際に私が使っているものに関しての説明なので
もしかしたらもっといいプラグインがあるかもしれませんがご了承ください。
投稿者: 管理人
Twenty Fifteenでコンテンツエリアの幅を広げたい
WordPressの標準テーマ「Twenty Fifteen」のカスタマイズです
前回はサイト上部の余白とウィジェットの上下の余白を小さくしました。
サイトのバランスをとるため
今回はコンテンツエリアの幅を広げ、左右の余白を小さくします。
Twenty Fifteenでサイト上部&ウィジェットの上下の余白を調整する
このwordpressのテーマ「Twenty Fifteen」はとてもシンプルなつくりになっていますが
やはり余白が大きいのが気になります
今回はサイト上部の余白およびウィジェットの上下の余白を小さくしていきます
上部の余白を設定しているのは
サイドバーではsite-headerのmargin
サイトメインではsite-mainのpaddingです
サイドバーとサイトメインのバランスを見ながら調整していきます
レスポンシブとなってますので @media screen and (min-width: 59.6875em)の中に記述していきます。
ウィジェットは下の余白のみ設定しています
Twenty Fifteenでサイドバーの余白を少なくしたい
wordpressの標準テーマ「Twenty Fifteen」のカスタマイズです
サイドバーの余白を調整します
これはサイドバーにアドセンス広告を掲載するために行います。
したがって最低でも300pxは欲しいですね。
デフォルトの設定ではサイト幅1404pxのときサイドバーの幅は413px
余白が左右20%ですのでウィジェットの幅は248pxとなります
そこで左右の余白を8%にしてみました
するとウィジェットの幅は346pxとなります
Twenty Fifteenで記事の見出しのサイズを変えたい
wordpressのテーマ「Twenty Fifteen」では見出しのフォントサイズが大きく
主張しすぎのように感じたので少し小さく変更することにしました
見出しの装飾についてはコチラを参考にしてください
見出しのフォントサイズは各分岐点ごとに設定してありますので
手間がかかりますが確認しながらそれぞれに設定していきます。
プラグイン「All in One SEO Pack 」を設定しました
wordpressの定番のプラグイン「All in One SEO Pack」を
Twenty Fifteenに入れてみました。
このプラグインはSEO（つまり集客）に関する設定をすることができます。
設定箇所はとても多いですが、今回はかんたんにメタ要素の設定とアナリティクスの設定をしていきます。
インストールして有効化すると左のメニューに「All in One SEO」が追加されます。
カーソルを合わせ、「General Settings」を選択します。
「Twenty Fifteen」でサイトカラーを変更してみる
wordpressのテーマ「Twenty Fifteen」はデフォルトではサイトが真っ白になりますね
前回、見出しに装飾を加えたのでついでにサイトカラーもかえましょう
これはCSSをさわることなくダッシュボードから簡単にできます
外観－カスタマイズ で以下の設定画面が出てきます。
ここでは、テーマの変更のほか、
・サイト基本情報
・色
・ヘッダー画像
・背景画像
・メニュー
・ウィジェット
が設定できます
サイトカラーを変更するために「色」を選択します
ベース配色で6色の中から選択することができます
背景色
ヘッダー・サイドバーテキスト色
ヘッダー・サイドバー背景色
で色を変更できますので、自分好みに調節しましょう
最後に保存して終了になります。
サイトカラーを変更するだけでサイトのイメージが変わってきますね
Twenty Fifteenで見出しを装飾したい
wordpressのテーマ「Twenty Fifteen」では
記事の見出し（h1.h2.h3…など）はなにも装飾されていませんよね
少しさみしいのでかんたんなデザインで装飾します
twentyfifteenでは「entry-content」と「comment-content」を指定します。
entry-contentだけでは表示されませんでしたのでご注意を！
h1はタイトルで使っているので見出しには使えません。
ここではh2からh4までの見出しを装飾します。
まずはh2です
左と下にオレンジの線で装飾しました
|
1 2 3 4 5 6 7 |
.entry-content h2, .comment-content h2 { margin: 0 0 1.5em; border-left: 7px solid #ff4500; border-bottom: 1px solid #ff4500; padding-left: 5px; } |
h3はデザインは同じに、色を少し薄くしてみました。
|
1 2 3 4 5 6 7 |
.entry-content h3, .comment-content h3 { margin: 0 0 1.5em; border-left: 7px solid #ff8c00; border-bottom: 1px solid #ff8c00; padding-left: 5px; } |
h4は下線を点線にして色を薄くしました
|
1 2 3 4 5 6 7 |
.entry-content h4, .comment-content h4 { margin: 0 0 1.5em; border-left: 7px solid #ffa500; border-bottom: 1px dotted #ffa500; padding-left: 5px; } |
表示はこのようになります
見出し2
見出し3
見出し4
見出しはCSSを編集して色々装飾できます
自分のサイトに合ったデザインにしてみたらいいかもしれませんね
wordpressのテーマ「twentyfifteen」の記事タイトルのサイズ変更
前回フォントを見やすく直しましたが
記事タイトルの大きさが気になりはじめましたので
もう少し小さくしようかと思い親テーマのCSSを見てみました。
スマホ表示では気になりませんがPCで見るとタイトルが主張しすぎかなぁと思いましたので・・・
このテーマ「twentyfifteen」はスマホ等でも見やすいようにレスポンシブデザインになっていますが
分岐点は7箇所、8段階もあるデザインとなってます。
テーマ「Twenty Fifteen」のフォントをかえる
このwordpressのテーマ「Twenty Fifteen」
最初に行った作業で子テーマを作成したのでこれからカスタマイズを行っていきます。
まず手をつけたところはフォントです
もともと日本語のテーマではありませんので仕方の無いことですが
Twenty Fifteenのフォントではなんか見づらいですよね
そこで見やすいフォントとしてメイリオを指定するようにします。
しかしメイリオフォントがパソコンに入っていない人もいるので
その場合は、ヒラギノ角ゴ Pro W3
それも入っていない場合は、ＭＳ Ｐゴシックで表示されるようにしました。