お久しぶりです、七星です。
以前から運営している素材サイトのリニューアルをしました。
その際、画像一覧を作り直したのですが、今回は簡単にしたい！と言う事で、ワードプレスに最初から付いているギャラリーの機能を使いました。
長く更新していこうとなると、更新に関わる作業は出来るだけ簡素にした方が楽ですからね。
まぁ、久しく放置していたら、以前のやり方が物凄く面倒臭かった…！と言うのもあります。
今後も続けていくにはハードルが低くないと長続きしないなぁ…と実感したので、今回からはギャラリーを選びました。
ちなみに今までは、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を変更してやる方法もありますが、やってみたけど線が消せないので、また時間がある時にでも検証してみます。
＜追記＞ 2020.2.17
時間がないので、この方法でずっと誤魔化していたのですが、ある時からエラーが表示されるようになってしまいました。
ネット上で調べたら、テーマの変更、プラグインの停止などで収まったとあったので試しましたが、どれもNG・・・
最終的には、更新ページでワードプレスの再インストールをしたら直りました。
その上で線を消す為にmedia.phpファイルをアップロードしたら、同じエラー発生・・・
それなら・・・とFTPソフトで最新のmedia.phpファイルをダウンロードして書き変え、アップロードしたらエラー出ませんでした。
エラーの原因はmedia.phpファイルのVerが古かったから、でした。
と言う訳で、同じファイルをアップロードしているとエラーが出る可能性があるので、定期的に新しいmedia.phpファイルに更新した方がいいです。
ワードプレスに困っていませんか？
初心者向けのワードプレス講座開講中！
