2020.01.21スポンサーリンクWordPressのブロックエディタには、ギャラリーブロックというのがあります。標準機能としては良くできていますが、いくつか問題点があります。横方向の画像の数が変わると画像サイズが変わってしまうキャプションを入れると画像のリンク範囲が狭くなる画像に元画像へのリンクを張るとクリックした後、画像を閉じにくい他のプラグインなど色々調べましたが、機能がごついので逆に使いにくく感じました。そこで、標準のギャラリーブロックをカスタマイズして、少し使いやすくカスタマイズしたのがこの記事になります。Galleryを使うまとめ横方向の画像数が変わると画像サイズが変わってしまう横方向を3列にして、ギャラリーの画像数が10個だとすると1余ります。その時、余った1つの画像は横幅いっぱいに表示されます。別にその画像に意味があるわけではないので、大きくなられてもうれしくありません。そこで、CSSのカスタマイズですべての画像が同じサイズになるようにします。initial;}キャプションを入れると画像のリンク範囲が狭くなるキャプションを入れない時には気が付かないのですが、キャプションを入れたとたんに画像がクリックしにくくなります。理由は簡単で、画像の上にキャプションが重なっていて、キャプションにリンクが張られていないからです。キャプションにリンクを張る機能がそもそもありません。次に、リンクを張ることができるようにするプラグインはありますが、リンクをいちいち入力するのは耐えられません。苦肉の策で、CSSでカスタマイズすることにします。疑似要素を使わない方法を検索で最初に見つけたのですが、その方法だと重なり順序の問題が解決できませんでした。疑似要素を使って、画像全体にかぶせることで、キャプションの下の画像のリンクのクリック範囲が画像全体になります。rgba(0,0,0,0);}[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能にa要素はボタンだけ、でもクリック可能なエリアはカード全体にしたい、と思う時は少なくないと思います。block;を加えてもボタンだけだし、あとはjQueryのプラグインなどJacoliss.comギャラリーの画像をクリックした後に画像を閉じにくいこの辺は、Javascriptのプラグインを使う方が簡単です。Lityを使うLightbox系のプラグインはいちいち重いので、Lityという軽量のJavascriptのプラグインを導入することにしました。Lityは画像を開くときも閉じるときもストレスなく、動くようになります。シンプルで軽い画像拡大jQueryライブラリ「Lity.js」をWordPressで利用するカスタマイズ方法jQueryプラグインの「Lity.js」を利用して、Wordpressブログに画像の拡大効果(ライトボックス効果)を付加するテーマカスタマイズ方法です。難しいコード必要なく、基本的にライブラリファイルを呼び出すだけで利用できます。nelog.jpLityは軽量なのですが、機能的に少し足りないかもしれません。スライドショーやキャプションの表示に対応してません。baguetteBox.jsを使うbaguetteBoxはスライドショーやキャプションに対応している軽量なLightbox系プラグインです。簡単に使うことができますが、Gutenbergの画像キャプションで使われているfigcaptionタグに対応させるには一手間必要です。feimosi/baguetteBox.jsgithub.comギャラリー全体で画像の高さを揃えたいギャラリーブロックには高さを揃えるオプションがあります。このオプションを有効にすることで、高さの異なる画像を並べた時に各行の高さが揃います。画像の高さがバラバラの場合、行ごとに一番高さが高い画像に他の画像の高さが揃ってしまいます。その結果、ギャラリー全体ですべての画像の高さを揃えることができません。4:3のアスペクト比ですべての画像を揃えたいと思っても、ブロックのオプションだけでは対応できません。CSSでは横方向のwidthからheightを設定することができません。(CSS4からできるらしい)なので、レスポンシブには簡単に対応できませんが、苦肉の策で各画像のheightを固定値にすることで、高さを固定値に揃えることは可能です。100px;}jQueryで横幅を取得して高さを指定すればレスポンシブに対応できますが、それはこれからの課題ということにしておきます。それぞれのサムネイル画像はCSSでリサイズされているだけで、大きな画像がそのまま読み込まれています。ギャラリーの枚数が多い時にスマホでは結構ヤバいことになります。これは標準ブロックが変更されない限りどうにもならないので、他のプラグインを使うしかない感じです。Galleryブロックを素直に使えば、すべて解決なのかもしれません。Blocksは結構いい感じのブロックが揃っています。Galleryブロックでは、石積み、グリッド、カルーセル、流体幅カルーセル、またはスライダースタイルでフォトギャラリーを追加できます。4つの異なるオプションのキャプションの場所をお楽しみください。それぞれにスタイルフォント、背景などのオプションがあります。各ギャラリー内で、サムネイルの比率の定義、画像フィルターの追加、境界線の半径の設定、ボックスシャドウの追加ができます。各画像を別のページまたはWebサイトへのカスタムリンクにすることができます。組み込みのライトボックスを簡単に有効にすることができます。サムネイルに使用する画像サイズと、究極のパフォーマンスを得るためのライトボックス画像を選択できます。capabilities.wordpress.orgまとめ標準のWordpressギャラリーブロックは動きに癖があります。その癖を消せる方法を使うとかなり良い動きをするようになります。標準ブロックは将来的にも残るものですので、変なプラグインを使うよりもリスクが少ないと思います。最新情報をお届けします。この記事を書いた人ブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。国内シェアNo1の安定性と実績が魅力。SSDで死角なしの万能サーバー。JavaScript2020.01.162020.01.23ブーンオランダで生きていく関連記事サイト運営Googleアドセンスの広告が急に表示されなくなった!その理由は?ここ数日、Googleアドセンスの広告が表示されないという、『悩み』と言うか『苦情』と言うか『相談』が至る所で見られます。このサイトも運営当初はアドセンス広告が表示されなくなったことがあります。lazyloadとautoptimizeの共存でサイト高速化する際の注意点Wordpressサイトの高速化に一番効果があるのは、画像遅延読み込みを行うLazyloadプラグインだと断言します。今まで、いろいろなLazyloadプラグインを試してきました。jsプラグインこの記事では、サムネイル付きの画像ギャラリーにスライダー機能をつけたい時に便利なjavascriptプラグインFOTORAMAをご紹介しています。先日、HTMLサイトのディレクトリの移動でリダイレクトをする機会がありました。その時にちょっとハマったのでメモとして残しておきます。【カスタマイズ】アイキャッチ画像の左右の余白を消す最近、FacebookやTwitterなどのSNSでは画像が画面横幅いっぱいに広がっているのをよく見かけます。codeがリリースされてから結構時間が経ちました。codeで利用できる便利な機能にリピーターというのがあります。リピーターはWixエディタではリスト&グリッドとよばれるパーツになります。GPLなWordPress有料テーマホームサイト運営スポンサーリンクブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。目次TOPへ情報スポンサーリンクブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。Galleryを使うまとめタイトルとURLをコピーしました。