SWELL TIPS – 自己満足カスタマイズ 小ネタ集(あったらいいな〜編)

こんなSWELLユーザーに読んでほしい!

  • 画像の「拡大表示機能」を使ってるけど部分的に停止させたい
  • 固定ページにも「シェアボタン」を表示させたい
  • 「ブラウザ風」「デスクトップ風」スタイルを使っている
  • SWELLのカスタマイズ沼にハマっている
あらすじ

SWELLの機能に「あったらいいな〜」をカスタマイズしました

※2021/09/11 ご案内

SWELL 2.5.1 リビジョンアップで、「特定の画像を拡大表示」設定が追加されました!
なので、特定の画像だけ「拡大表示機能」を停止するカスタマイズは不要になりました!


※2021/08/30 修正

「拡大表示機能を停止」および「縦長画像をスクロール表示」のカスタマイズ部分で、つぶさん(@tbshiki) にいただいたアドバイスをヒントに、カスタマイズ内容を簡略化しました。ありがとうございました!

しらこさん(@96ssbike)、情報提供ありがとうございました!)

どうも、桂小枝です。

先日、特設コンテンツ「アイ・ラブ・ライナストック」を固定ページで作成しました。

そのときに、通常の投稿ではあまり使わない機能をカスタマイズしながら実装したので、SWELLカスタマイズの小ネタ集としてまとめました。

ブロックエディタに完全対応したテーマ「SWELL」は、基本カスタマイズしなくても十分使えるのですが、いつものごとく「自己満足カスタマイズ」がゆえに、

このブロックにこの機能があったらいいな〜

という程度のカスタマイズですのでニーズはないと思いますが、少しでもお役に立てれば嬉しいです^^

とはいえ、

カスタマイズしたら
検索順位が落ちたじゃないか!

と言われても困るので(笑)、あくまでも自己責任でお願いします^^;

特定の画像だけ「拡大表示機能」を停止

このカスタマイズは、以下のようなときに使えます。

  • 「投稿画像をクリックで拡大表示する機能」を使っているが、装飾用の画像など拡大させたくない画像もある
  • 画像にクリックやタップで反応するスクリプトを仕込んでカスタマイズしている

SWELLでは、画像の拡大表示にjQuery不要の画像拡大スクリプト「Luminous.js」を使用しています。

「Luminous.js」については、SWELL開発者の了さん(@ddryo_loos)のブログで説明されていますので、詳しく知りたい方はそちらをご確認ください。

WEMO
lightboxの超軽量版!jQuery不要の画像拡大スクリプト「Luminous」の基本的な使い方とオプションの説明、複... クリックすると画像を拡大してくれる、いわゆる「lightbox(ライトボックス)」というスクリプトって便利ですよね。 制作現場でも多くの場面で導入されているかと思います...

まずは、以下のサンプルをご確認ください。

拡大あり(通常)
拡大なし(指定)

上の画像はともに画像ブロックで配置しています。
拡大させたくない画像として指定した右側の画像は拡大表示しません。

ちなみに、「矢印」も画像で配置し拡大させたくない画像に指定しています。

通常、「画像を拡大表示」する状態で画像ブロックを配置するとHTMLソースにLunimous.jsに関する記述が自動的に追加されています。