FC2ブログの画像拡大に『Lightbox』を導入してみた。

By華見団子

画像をクリックしたときの動作


※当ブログはアフィブログではございませんので、画像をクリックしても関係無い別サイトに飛ぶような事はありません。

こちら別タブで開く画像

↓クリック
CIMG7625.jpg

こちら『Lightbox』を導入して同ページ上で大きくにゅるーんと開く画像

↓クリック
CIMG7625.jpg


FC2ブログのデフォルトの画像投稿設定では

・クリックするとブログサイトのアルバムに飛ぶ←これ設定してあるブログはちょっと残念な感じがする。
・クリックすると直接リンク元の画像が開く(別タブで直接投稿画像が開く)
・クリックしても画像が拡大しない

と、選ぶことが出来るが、今までは画像をクリックした時は別タブで直接投稿画像が開くように設定していたけど
なんとなく今風なちょっと洒落た開き方にしたかったので『Lightbox』を導入してみた。


最初は画像拡大に『COLORBOX』と言うのが検索にかかり
良さそうだったのでそちらを入れてみようと試み
数時間・・・。
おかしい 先人達の例のように同じく設定しているのに、まったく動作しない(´;ω;`)ブワッ
何通りも試して、何時間もかけて、『COLORBOX』は諦め
『COLORBOX』のやり方を検索していた時によく見かけた『Lightbox』を試してみたら
数分で設定出来たという。

こちらの方のブログを参考にやってみました。

↓リンク
FC2ブログにLightboxを設置して画像をオーバーレイする方法
記事自体が古く、それから数年が経過しているので、『Lightbox』からDownloadしたファイルの中身の名前が若干の違いがありましたが、
似たようなファイルを探してやってみたら出来ました。
※その後、参考にしたサイトが見れなくなってました。
『FC2 ブログ Lightbox』あたりで検索すれば他の方が書いているブログを見つけることが出来ると思うのでそちらを参考にしてください。

また、上の参考元記事では『画像挿入』は『画像を投入する際は「サムネイル」で投入しましょう。』と書いてありますが、
『この画像で記事を書く』の大きい画像で可能です。

ブログ書いた後、挿入画像のHTML【target="_blank】を【 data-lightbox="image1】に変更するのはちょっとだけめんどくさいので

これをやらずに自動で出来ない物かと検索してやっては見ましたがどうやら僕には無理でした・・・。
ですが!いちいち【target="_blank】を【 data-lightbox="image1】に一つずつ書き換えるのも面倒くさいので、Firefoxのアドオンに何かしらテキストを置換できる物が無いか探したら『FoxReplace』と言う便利なアドオンを見つけました。
Chromeでも同じようなのはあるかと思います。
参考にしたサイトはここ

ブラウザ上で検索置換ができるFirefoxアドオンの「FoxReplace」がすごい

僕はこのツールバーを、ブラウザの『メニューバー』→『編集』→『リプレース』で表示させて使ってます。
無題
( ↑の画像はクリックしても拡大しないようにしてます。)

そのかわり、置換すると『 target="_blank』を使用しているリンク全てが『data-lightbox="image1』になってしまうので、
画像リンク以外が『data-lightbox="image1』になった場合は、『target="_blank』に変える必要があります。
画像が殆どで、他HPなどへのリンクは少ないという人には効果的かと思います。
大量にある画像を一つずつ『data-lightbox="image1』に変えるよりは、少ないHPリンク先を『 target="_blank』にした方が効率いいので。
※『リプレース』を使う時、ツールバーにある『HTML いいえ』 の選択は『いいえ』のままでおkです。


何はともあれ、ようやく出来て感動٩( 'ω' )و
ちょっと今風なブログになったんじゃないでしょうか?

参考にいろいろな画像

↓クリック
CIMG7049_mini.jpg

CIMG7011_R.jpg

CIMG7022_R_2018062417081014f.jpg

Dc5h7AsXcAAKqtw.jpg

Dih5ZG9UYAAYENz.jpg

CIMG7994_R.jpg

DghUNq2UcAAzP0A_201808290259383f5.jpg

応用でこんなことも出来る

↓リンクをクリックすると画像が出ます。
RIDLEY NOAH(2016)

自分のブログページ(PC版)はページの画像が大きいから
画像をクリックした時の拡大は無くても良いかな?とは思ったのですが
それじゃなんだか味気ない気がしたので、何か無いかなーと探した結果こんな感じになりました。
スマホから見たんじゃ効果薄いけど、PC版だと効果絶大
そもそも僕のブログはアクセス解析によると、9割はPCから閲覧しに来てくれてるようなのでPC版をメインにしてます。

いやぁ 無事に出来て良かった。

過去の数記事だけ(特にアクセスの多いフィギュア記事)は『Lightbox』導入しましたが、今後の書くブログは『Lightbox』導入していきます。

追記


・当ブログの全ての記事を『Lightbox』化致しました。








スポンサーサイト



Share

Comments 0

There are no comments yet.

Leave a reply