WordPressに貼ったGoogle AdSense の広告の周りに青色の枠が見える

Google Adsenseで200×200の広告ユニットを作成してサイドバーに貼り付けたんですが、このサイズに合わない広告の場合、余白部分が青く見える現象が発生しました。

見た目カッコワルイので困っていた所、どうやら設定しているテーマで使用しているCSSに<ins>タグがありそこで背景色設定されているのが原因であるのがわかりました。

私が使っているのは Twenty Sixteenというテーマですが他のテーマでも同様の問題が発生する可能性もあります。(テーマによっては青以外のいろのこともあると思います)

以下に私が行った確認方法を書きます

サーバ上のWordPressのテーマのフォルダの中にあるstyle.cssファイルを探して編集します。

<親フォルダ>/wp-content/themes/<テーマ名>/style.css

私の環境では以下のパスになります。

/wordpress/wp-content/themes/twentysixteen/style.css

サーバ環境によってどうやってこのファイルをオープンするかは異なりますが、私はロリポップのレンタルサーバを使っているのでロリポップ!FTPでファイルを開きました。

開いたら <ins>タグを探します。

ins {
 background: #007acc;
 color: #fff;
 padding: 0.125em 0.25em;
 text-decoration: none;
}

background(背景)に設定されている 007acc が先程みた枠の青色です。
ここを ffffff(白)にします。

※ もちろんお使いのテーマの背景色が白以外であればその色に設定します。

 background: #ffffff;

これで余白が青い四角で表示されないようになります。

ロリポップのエコノミープランでWordPressを使う

このブログのドメインの cafeform.com はもともとさくらインターネットで使っていたんですが、あやまって契約更新を忘れ(笑)て、Javaのパケージ名用のドメインとなってしまっていたので、ロリポップのレンタルサーバサービスを利用してドメインを再利用することにしました。

このドメインはブログサイト用にしようと思っており、WordPressを利用しようと思っていたんですけど、ロリポップで一番安いエコノミーサービス(100円/月)ではWordPressの「簡単インストール」が利用できないとあり、なんとかWordPressが利用できないかとさがしてました。

すると以下のサイトでまさにやりたいことが載ってました。

ロリポップのエコノミープランにWordpressをインストールするプラグインSQLite Integration

詳細はリンク先を見てもらうとして、簡単にまとめると。

  • WordPress本体とSQLite Integrationをダウンロードし解凍
  • sqlite-integrationフォルダ内のdb.phpファイルをwordpress内にコピー
  • sqlite-integrationフォルダをwordpress/pluginフォルダに移動
  • wordpress内の wp-configu-sample.phpを wp-config.phpに名前変更
  • ftpソフトを使ってwordpressフォルダをロリポップサーバに転送
  • ロリポップの自サイトにアクセスし初期設定を行う

というステップだけで行けました。

ちなみにロリポップのftpサーバに転送する際に利用するFTPクライアンについてサイトではClassic FTPというソフトを紹介していますが、私はMacを利用しているのでFileZillaというソフトを使いました。

FileZilla Client for Max OS X

 

 

 

https://ja.wordpress.or