SANGOの画像の枠を消す方法:原因追求はプラグインを停止させる【毎日更新268】

みなさんこんにちは。
副業ブロガーのソルです。

※ブログの毎日更新は268記事目です。

私はSANGOというテーマを利用しています。

フラットデザインのテーマであり、見た目はもちろんのこと、内部SEO対策済みという非常に優れたテーマです。

実際に使っている人も多く、クニトミさんもSANGOを使っています。

副業コンパス

しかし、なぜかSANGOを使ってからというもの、写真や画像にグレーの枠線が表示されてしまうようになりました。

画像の周囲にグレーの線がありますよね。

画像だけならまだしも、アドセンス広告や関連コンテンツ全体を覆う枠も付いていたので、せっかくSANGOのおしゃれなデザインが台無しの状態だったのです!

のアイコン画像
このままではダメだ!改善しなければ!

そう思ってネットで色々調べて、ツイッターでも質問して、試行錯誤を繰り返し・・・

最終的には画像の枠線を消すことができました!!

ネットで色々調べたのですが「ズバリこれ!」という記事が見つかりませんでした。

なので、今回こうした画像の枠線を消す方法を記事にしようと思ったのです!

というわけで、今回の記事では

  1. SANGOで画像に枠がついてしまう問題
  2. 原因追求のためにプラグインを停止させてみた
  3. 原因はCSSコードにあった!?
  4. SANGOの画像の枠を消す方法

上記4つについてお話しします。

この記事を読むべき人
今回の記事は以下の人向けです。

  • ワードプレスのテーマはSANGOを使っている人
  • ワードプレスで表示される画像の枠を消したい人
  • キャプションを挿入した時に表示される枠を消したい人
目次

SANGOで画像に枠がついてしまう問題

冒頭でもお話ししたように、私はSANGOというテーマを使っています。

SANGO公式サイト

しかし、SANGOを使い始めたぐらいから、なぜか写真や画像にグレーの枠線が表示されていました。

のアイコン画像
あれ?何だこの枠線?仕様なのかな?

最初はそういうもんだと思って放置していたのですが・・・SANGOを使っている人のブログを読んでいると、そんな事象はないことに気が付きました。

それに、画像だけならまだしも、アドセンス広告にまで枠線がついていたのです!

その他にも

  • 吹き出しで挿入した画像
  • カッテネで表示している画像
  • 関連コンテンツユニット全体

上記にも枠線が表示されていました。

見た目もダサいし、特に関連コンテンツユニットは酷いものでした。

せっかく記事に溶け込むようなデザインのはずが、関連コンテンツユニット全体にグレーの枠線がついてしまっていて台無しの状態です。

のアイコン画像
何とかしないといけない!

そう思ってネットで調べてみたのですが、どうもパッとする答えが出て来ませんでした。

キャプション挿入時の枠を消す

この記事ばかりであり、私の事象とは違っていました。

そして、答えが分からなかった私は、ツイッターで質問してみることにしました。

すると・・・心良く返信してくださる方がいらっしゃいました。

原因追求のためにプラグインを停止させてみた

そのツイッターがこちらです。

プラグインが悪さしている可能性があるということで、プラグインについて調べてみることにしました。

ツイッターでご連絡いただいたのは

  • BJ Lazy Load
  • WP Fastest Cache

これらのプラグインが悪影響を与えているかもしれない、という内容でした。

試しにプラグインを停止させてみたのですが・・・

状態は良くなりませんでした。

のアイコン画像
プラグインを停止させても効果がない・・・

もう手詰まりか!?

そう思っていたのですが、この時にふと思いました。

のアイコン画像
プラグインを一つずつ停止させていけば原因が分かるのでは?

と。

というわけで、プラグイン一つ一つを停止させていくことにしました。

原因はCSSコードにあった!?

そして、あるプラグインを停止したら、グレーの枠線が表示されるという症状は改善されたのです!

そのプラグインとは・・・

simple CSS

でした。

MEMO
これはCSSをカスタマイズするためのプラグインですね。

このプラグインを停止させたところ改善されたので、原因はこのプラグインにあるということです。

そして、コードをじっくりと見ていくと・・・

こんな記述がありました。

コード
/* SlideShare のレスポンシブ対応 */
.slideshare-container {
    position: relative;
    padding-bottom: 78%;
    height: 0;
    margin-bottom: 45px;
}
 
.slideshare-container iframe,
.slideshare-container object,
.slideshare-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 
.entry-content img, #content embed, #content object, #content iframe, #content video {
    border: 1px solid #eee!important;
    padding: 6px!important;
    background-color: rgba(230,230,230,0.4)!important;
    border-radius: 3px;
}

これは、スライドシェアを表示した時にレスポンシブデザインにするためのコードです。

MEMO
確かこのブログのテーマをSANGOに変えたぐらいのタイミングで、ネットで調べたコードをコピペしていたと思います。

このコードのうち、以下の記述が、今回のグレーの枠線を表示させるという影響を与えていました。

コード
border: 1px solid #eee!important;
padding: 6px!important;

試しにこのコードを削除してみたら、予想通り改善されました。

のアイコン画像
肩の力が抜けてホッとした瞬間でした。笑

ツイートしてくださったエンディさん、ありがとうございました!

エンディさんのツイッター

デジモノート(エンディさんのブログ)

SANGOの画像の枠を消す方法

というわけで、とりあえず画像にグレーの枠線が表示されるという事象は解決できたのですが・・・

ついでにキャプション挿入時に表示される枠線も消すことにしました。

MEMO
キャプションというのは、画像の説明文的なことです。

この枠線を削除する方法は簡単で、以下のコードをCSSにコピペするだけです。

コード
#main .entry-content .wp-caption {
    padding: 0;
    border: none;
}

こちらはいろんな記事に書かれていた方法ですから、特に悪影響を与えることもないでしょう・・・

以下サイトでも確認できます。

サルワカ:画像のキャプションを挿入したときの枠線を消したい

少しの違いかもしれませんが、たったこれだけで見た目がスッキリしますよね?

ブログはこうした細かな部分が意外と大事だったりします。

なので、以前の私みたいに

のアイコン画像
解決方法がよく分からないから放置しよう

と、後回しにして改善することを怠らないように注意しましょう!笑

まとめ

というわけで、今回の記事では

  1. SANGOで画像に枠がついてしまう問題
  2. 原因追求のためにプラグインを停止させてみた
  3. 原因はCSSコードにあった!?
  4. SANGOの画像の枠を消す方法

上記4つについてお話ししました。

改善方法をまとめておくと、

改善方法
  1. まずは思い当たるプラグインを停止してみる
  2. プラグインを停止して解決できたら、そのプラグインについて調べる
  3. それでも分からなければツイッターで質問してみる

こんな感じでしょうか。

もし仮にワードプレスで不具合があった場合には、関係しそうなプラグインを停止してみましょう。

少し面倒臭いですが、プラグインを停止して解決するのであれば、そのプラグインが原因ということが分かりますからね。

MEMO
それが分かったのであれば、ネットで調べるにしてもより解決しやすくなります。

また、ワードプレスのCSSをカスタマイズする場合、知識がなくてネットでコピペすれば簡単にカスタマイズ出来ます。

しかし、本当に何も知識がなければ、今回の私のような事象が起こってしまいます。

なので、コードをコピペする際は、完全に理解できなくてもいいので、

のアイコン画像
このコードを使えばこんな効果がある

というのを把握しておきましょう。

この記事が気に入ったら
フォローしてね!

コメント

コメントする

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次
閉じる