wordpress-logo-stacked-rgb

ワードプレスの画像枠を消す方法 (Vantage Premiumテーマ)

ワードプレスで画像を挿入する場合、勝手に四角の枠がついて困った事はありませんか?
特に丸い画像などを使う場合、丸の外にうっすら四角の枠がついていて目立つ・・・なんて事が。
私たちのページではこんな感じ

<枠線がついている画像>

枠線がついている画像

プレイボタン、ダウンロードボタンの回りに細い枠がついています。
これを消したい!
まず考えたのは、1pxの線が回りについているなぁ!という事で、
border: none;
をカスタムCSSに書き込みました。
しかし、まったく消えませんでした。
最重要を意味する !important
border: none!important;
のように書いても同じでした。
んーおかしいなぁと思い考え調べた結果、なんとこの枠はだったのです!
といことで、
box-shadow: none;
をカスタムCSSに書き込んだのですが、なぜかうまく反応せず
ダウンロードボタンについては直接htmlにスタイルを書き込みました。
そうすると見事に消えました!

<DLボタンの枠線が消えた画像>

DLボタンの枠線が消えた画像

問題はプレイボタンの枠線です。
これはプラグインを使ってはめ込んでいるので、直接htmlに書き込む事ができません。

<プレイボタンのところのHtml>
プレイボタンのところのHtml
これも悩みました。試行錯誤する中、ブラウザの右クリックでページのソースを見てみました。

<ブラウザの右クリック画像>
右クリックしたソースの画像
すると、

<右クリックしたソースの画像>
右クリックしたソースの画像

ボタンのクラスがmyButton_playとなっています。
ということで、カスタムCSSに
.myButton_play{ box-shadow :none !important;}
を追加しました。
すると見事に全部のプレイボタンの影が消えてくれました!

<枠が全部消えた画像>

枠が全部消えた画像

まとめ。
●ダウンロードボタンの枠消し
→htmlにstyle=”box-shadow: none;”
と書き込む
●プレイボタンの枠消し
→カスタムCSSに
.myButton_play{ box-shadow :none !important;}
と書き込む。
以上で画像の枠線消しに成功です!

Editor/Web Design  足立 志保 Shiho Adachi

カテゴリーの記事