2018/04/03ツイートシェアはてブPocketLINEWordPressには、記事内に複数の画像を並べて表示できる「ギャラリー」という便利な機能があります。ギャラリー機能を使えば、横並びの画像配置も超簡単にできます。プラグインなんか使わなくても問題ナシです!!しかし、そのギャラリー機能は、デフォルト状態だとモッサイ囲み線がついていたり、余白が不自然だったりして、せっかく便利なのに使いたくない感がこみ上げてみます。カスタマイズして、ついでにレスポンシブ対応も行う方法】を紹介したいと思います。以前までは、ギャラリーを配置しても、ビジュアルエディターには何の画像を使用したのか表示されませんでした。ギャラリーを配置すると、使用した画像がすべてビジュアルエディタに表示されますので大変使いやすくなっています。こんな感じで確認しやすいのです。画像の入れ替え作業なども大変やりやすくなっていて、記事内への画像の横並びや複数並べて配置も簡単に行なえるようになりました。デフォルトのギャラリーデザインでは正直つかう気にはならないほどダサいのです・・・そこで今回の「ギャラリーカスタマイズ」ということになるわけです。本体の中に格納されています。編集できるようにします。そこに以下のコードを追加します。ダッシュボードからカスマイズする場合は「外観→テーマ編集→function.php」。);これでまず本体のギャラリー用CSSを使わない設定にしてあげます。カスタマイズしてもギャラリーには反映されませんのでご注意です。ギャラリー機能の構造はこんな感じです。自動的にこのコードが吐き出されてギャラリーが構築されます。そのまま編集する必要があります。数字の部分が、カラム数を変更すると変化することです。構造がわかったところで、次はギャラリーCSSのカスタマイズです。】に以下のコードを追加します。ダッシュボードからカスマイズする場合は「外観→テーマ編集→style.css」。そのまま貼り付けました。自動的に吐き出すものです。Class名を変更すると動かないので注意してください。以下用のモバイル閲覧設定です。ギャラリーレイアウトがカスタムされたはずです。今回のカスタムでギャラリーはどのように見えるのか実際に本ブログでは、上のCSSを使ってギャラリーをカスタムしているので、以下で表示してみますね。今回のCSSでは5カラムまでカスタマイズしてあります。オンマウスのときにモヤっとするエフェクトとシャドウを入れちゃっています(ブログのデザイン変更の時に追加しちゃったので)が、上記コードにはエフェクトは含まれていません。それ以外の幅やレスポンシブ対応、キャプションはサンプルとすべて同じです。2カラム表示2カラム・フルサイズ設定です。モバイル表示でも2カラムです。画像を左右に横並びさせたいときに便利なカラム数ですね。タブ(表)2カラムでキャプションを表示させれば、商品紹介やノウハウ解説などでも役にたちそう。ビフォー・アフター画像なんかでも使えますよね。3カラム表示キャプションキャプションキャプションキャプションキャプション3カラム・フルサイズ設定です。キャプションもいれてみました。以下だと2カラムになるようにレスポンシブ設定しています。ブラウザの幅を狭めてチェックしてみてください。4カラム表示4カラム表示・フルサイズ設定です。投稿エリア幅の長さにもよりますが、フルサイズ設定はこの辺が限界ですしょうか。これ以上小さくなるのはアレですね。4カラム表示もモバイルだと2カラム表示になるようにカスタムしています。5カラム表示5カラム表示・サムネイルで設定しました。5カラムはサムネイル表示が良さげです。サムネイル設定だと縦撮り写真も使えます。この5カラムはサムネイル設定専用として使っています。以下は3カラムになるように設定しています。基本的に4カラムまでは「フルサイズ」設定がおすすめです。フルサイズ設定は画像の縦横が同じものを配置しないと型崩れを起こすという欠点があるので注意してください。縦長画像を使うのはNGです。「サムネイル」設定は2カラム・3カラムで使うと画像がガビガビになってしまう為、サムネイル設定でギャラリーを作るなら5カラムがおすすめです。あとがき最近のギャラリー機能は使い勝手が向上してて、複数画像を記事に配置するときにはとても便利です。ウェブサイトを作ったとき、クライアントが横並び画像を配置するときに、下手に小細工するよりも、実のところギャラリー機能の方がよっぽど簡単にやれるということを最近発見しました。ウィジェットで余計な余白が入るのを回避する方法この記事を書いた人キタムラ筋金入りの凡人「キタムラ」と申します。本ブログ(月間150万PV達成)は、主にデジモノ・電化製品・パソコン・カメラ・旅行などのネタを自分の経験をもとに発信している個人ブログです。したライフハックになれば幸いです。次の記事Windows10無償期間後にCPUを交換したらライセンス認証...キタムラ筋金入りの凡人「キタムラ」と申します。本ブログ(月間200万PV達成)は、主にデジモノ・電化製品・パソコン・カメラ・旅行などのネタを自分の経験をもとに発信している個人ブログです。価値ある情報を丁寧にお届けしています。したライフハックになれば幸いです。10を導入したら真っ先に行うべき初期設定を紹介LINEは複数の端末から同じアカウントを使うことはできますか?という質問をいただいたので。