WordPress カスタマイズ

ワードプレスのギャラリーの周りの線を消す方法

更新日:

お久しぶりです、七星です。

以前から運営している素材サイトのリニューアルをしました。
その際、画像一覧を作り直したのですが、今回は簡単にしたい!と言う事で、ワードプレスに最初から付いているギャラリーの機能を使いました。

長く更新していこうとなると、更新に関わる作業は出来るだけ簡素にした方が楽ですからね。

まぁ、久しく放置していたら、以前のやり方が物凄く面倒臭かった…!と言うのもあります。
今後も続けていくにはハードルが低くないと長続きしないなぁ…と実感したので、今回からはギャラリーを選びました。

ちなみに今までは、Retina化のために面倒な方法を使っていました。
が、スマホで確認したら画像は綺麗に表示されるし、さすがにそこまでしなくてもいいかな、と。

ギャラリーを使えば、「WP Gallery Custom Links」と言うプラグインを使えば、画像にリンクも貼れます。

WP Gallery Custom Linksについてはこちら

 

と言う訳で、ギャラリーを使う事にしたんですが、ここで一つ問題が…

それは、ギャラリーの画像に枠が勝手についてしまう事、でした。

↑画像の周りにうっすらとグレーの線が入っています。

これだとアイコンなどの透過したPNG形式の画像にも線が入って理舞います。
さすがにこれは見た目が悪いですね…

これを解消する方法はないか…といろいろ探したところ、簡単な方法を見つけました。
CSSを触る方法もありましたが、説明を見ても???な点があったので残念…

簡単に出来る方法はないかな~と思ったら、こんな方法を発見!

という訳で、忘れないためにもその手順を紹介します。
カスタマイズする際は自己責任でお願いします。

① FTPソフトでwp-includeフォルダ内にあるmedia.phpファイルを探す

②↑のファイルを自分のPCにダウンロード

同じファイルを場所を変えて保存しておくと、万が一失敗しても安心です。
慣れない方は必ずバックアップ用に未加工のファイルを保存しておきましょう。

③↑のファイルを開く
開く際はメモ帳は厳禁!
 サクラエディタやTerapadを使いましょう。

→詳しくはこちら カスタマイズする時はWindowsのメモ帳は厳禁

④media.phpファイルから #{$selector} img { という記述を検索

Ctrt+Fで検索すると早いです。

⑤ #{$selector} img {
  border: 2px solid #cfcfcf;
}

↑の記述を見つけます。

↑の記述の border: 2px をborder: 0px に書き直して保存。

⑥修正したファイルをFTPソフトでサーバーにアップロード
この時は名前は変えず上書き保存です。

記述を間違えるとブログが見れなくなったり…と言うトラブルが発生します。
必ずバックアップ用にファイルを保存しておきましょう。

これでOKです。

写真周りのグレーの線が消えました。

但し…この方法だとワードプレスが更新されると復活してしまう事があります…
その度に加工したファイルをアップロードし直さなければいけません。
それがちょっと難点ですね。

CSSを変更してやる方法もありますが、やってみたけど線が消せないので、また時間がある時にでも検証してみます。







-WordPress, カスタマイズ
-, ,

Copyright© 初心者のためのWordPress School , 2018 All Rights Reserved Powered by STINGER.