注目度の高い記事
THE THORで画像ギャラリーのデザインが崩れる問題の対処法【グレーの枠削除】

 

WordPress 標準の画像ギャラリー機能は便利で使いやすいのですが、

THE THOR というテーマに設置すると、こんな感じでグレーの枠が表示されてしまいます。

THE THOR だとなぜか上手く表示されない

わかば
このグレーの枠みたいなのが気になるんですよねー

山本
ほかのテーマだとこんな事はなかったから、多分 THOR のテーマの機能が干渉してるんだろうね

 

このグレーの枠を消すべく、ネットで色々と調べてみました。

 

そこで発見したのが、

PHP ファイルを編集して画像ギャラリーの CSS を無効にし、新たに CSS でデザインをし直す

というものだったのですが、これを試しても何も表示が変わらない...

 

で、色々と試してみる事数時間、なんとか綺麗に表示させることに成功!

 

僕の他にも、同じような症状で困っている方がいるようだったので、

個別で記事を作っておこうと思った次第です。

THE THOR の画像ギャラリー問題は FooGallery で解決!

先に答えを言ってしまうと、FooGallery というプラグインを使うことで

グレーの枠を表示させることなく、ギャラリーを設置することができるようになりました。

 

FooGallery の使い方は、こちらのページで解説してます。

参考ページWordPressに自由度の高い画像ギャラリーを設置できるプラグイン:FooGalley

 

しかし、実際に FooGallery で画像ギャラリーを表示させてみると、またもう1つ問題点が出てきました。

THE THOR の画像ギャラリー問題は FooGallery で解決!

山本
先頭の画像だけが、ぴょこんと上に飛び出てしまうんです...

 

もちろん、すべてのテーマで試したわけではないですが

これも他のテーマで見られなかった、THE THOR 特有の症状です。

 

もう見なかったふりをしてしまおう(笑) とも思いましたが

やっぱり画像が1つだけ飛び出しているのは、どう考えてもかっこうが悪い。

 

ということで、CSS をあれこれいじってみて、これもなんとか解決する事ができました!

 

やり方は簡単で、以下の CSS を THE THOR に記述するだけです。

山本
コピペでOKです!
/* Foogallery並び整列 */
.fg-item {
vertical-align: initial !important;
}

 

記述する場所は、

管理画面 > 外観 > カスタマイズ > 追加CSS または、

管理画面 > 外観 > テーマエディター > style-user.css のどちらかに記述しましょう。

THE THOR の画像ギャラリー問題は FooGallery で解決!

 

これで、画像がきれいに整列して表示されるようになります。

THE THOR の画像ギャラリー問題は FooGallery で解決!

わかば
おおっ!やっときれいに表示されましたね!

山本
いやーこういう不具合を自力で直せたときって、パズルが解けたみたいでホント最高の気分だよ!

 

 もし表示が以前のままで変わらないようなら、ブラウザのキャッシュをクリアしてみましょう。

 

これで THE THOR テーマでの画像ギャラリー設置に

なんの問題もなくなったはずなので、思う存分ギャラリー機能を満喫しちゃいましょう!

 

同じような状態で悩んでいる方に、参考にしていただけたら幸いです。

 

注目の記事WordPressのウィジェットの間隔を自由に調整できる「余白ウィジェットプラグイン」

注目の記事EWWW Image Optimizer の設定方法と使い方【画像を圧縮して表示速度を改善】

 

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で利用が可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事