Luminous導入でブログの画像表示を変更
このブログの画像表示方法を少し変えようと思います。
私自身よく分かってないが、Luminousという画像拡大スクリプトらしい。参考にしたのは、このブログのテンプレートの制作者様でもあるブログでの記事。
肝心のどう変わるかという部分は、見た目的には今までと変わらない。が、クリックしていただいたらすぐに分かる。
[新画像表示方法]
今までは別途画像ページ飛ぶようにしてましたが、そのページで拡大表示するようになります。
パソコンの場合は別タブが開かないので、良い感じになると思うが、問題はスマホでの表示。同じようにそのページで画像が表示されるようになるが、見る方が調整しないといけない。
また右上の×ボタンと、メニューボタンが被るので、メニューボタンの方は削除しました。当ブログではレスポンシブデザインテンプレートを利用しているが、スマホ用のテンプレートも表示させるようにしてます。メニューボタンを削除したのはPCテンプレート、スマホで閲覧の場合。
理由はこちら。これが解決できれば1本化したいのだけど・・・。
話を戻し、スマホ表示で画像拡大の場合はちょっと難ありかと思ったが、スマホの場合はピンチアウトで拡大表示するんじゃないかと。って事で取りあえず気にしないことに。
若干面倒なのが、画像挿入毎に今までと違う形にしないといけないこと。
[Before]
<a href="https://blog-imgs-123.fc2.com/m/u/s/musiatui/012_20181125003640d03.png" target="_blank"><img src="https://blog-imgs-123.fc2.com/m/u/s/musiatui/012_20181125003640d03s.png" alt="012_20181125003640d03.png" border="0" width="232" height="400" /></a>
↓
[After]
<a class="luminous" href="https://blog-imgs-123.fc2.com/m/u/s/musiatui/20181025224609b5.png"><img src="https://blog-imgs-123.fc2.com/m/u/s/musiatui/tfhtrfhs.png" alt="tfhtrfh.png" border="0" width="400" height="226" /></a>
今までなら画像をアップし、そのまま挿入できていたが一手間増える。これについては辞書登録でベースを登録しておけば手間自体は少なくなります。
この記事ではそのまま表示させているが、基本的に中央に表示させたいのでそれを含め以下を辞書登録してます。
<div style="text-align: center;"><a class="luminous" href="■">■</a></div>
FC2ブログでLuminousを導入したい方はこちらのサイト様を参考にどうぞ。
ここからは個人的な悩み。問題は過去記事。これを修正すべきかどうするか。面倒なのが、別の方法を導入しようとした時にまた修正の必要があること。
この面倒さはSSL化で散々味わったので、極力記事内はシンプルに構成したいって所でどうしたものかと。参考サイト様の下の方に書いてある上級者向けも気になるし、下手に変更すると二度手間の可能性が大。
過去記事はともかくこれからの記事には、Luminousを導入するつもりだけど、後々面倒な事になるような気がしてならない。
もう一つは、画像の適正サイズを自分の中で決めないと。最近では記事中は画像サイズは横幅400pxで表示させているが、スマホからなら本田いないがパソコンからだと少し小さいように思う。
要はパソコン(＋固定回線)をメインで考えるか、スマホで下をMVNOの低速回線で考えるか。アクセスで見るとスマホをベースに考える事になるが、そもそも画像を売りにしているブログではないので、見ている方も綺麗に見えるとか気にしてないんじゃないかとも思ったり。
取りあえずLuminousを導入しつつ適度なラインを探っていきます。
*追記
Luminousを私が利用しているスマートフォン用のテンプレート(*URL末尾に?sp)でも導入していましたが、トップページの記事を読み込みボタンが反応しなくなることが分かりました。
原因は</body>上に貼り付けたscriptコードと思われるが、対処できないのでスマホ用テンプレートではLuminous表示を止めます。
私自身よく分かってないが、Luminousという画像拡大スクリプトらしい。参考にしたのは、このブログのテンプレートの制作者様でもあるブログでの記事。
肝心のどう変わるかという部分は、見た目的には今までと変わらない。が、クリックしていただいたらすぐに分かる。
[新画像表示方法]
今までは別途画像ページ飛ぶようにしてましたが、そのページで拡大表示するようになります。
パソコンの場合は別タブが開かないので、良い感じになると思うが、問題はスマホでの表示。同じようにそのページで画像が表示されるようになるが、見る方が調整しないといけない。
また右上の×ボタンと、メニューボタンが被るので、メニューボタンの方は削除しました。当ブログではレスポンシブデザインテンプレートを利用しているが、スマホ用のテンプレートも表示させるようにしてます。メニューボタンを削除したのはPCテンプレート、スマホで閲覧の場合。
理由はこちら。これが解決できれば1本化したいのだけど・・・。
話を戻し、スマホ表示で画像拡大の場合はちょっと難ありかと思ったが、スマホの場合はピンチアウトで拡大表示するんじゃないかと。って事で取りあえず気にしないことに。
若干面倒なのが、画像挿入毎に今までと違う形にしないといけないこと。
[Before]
<a href="https://blog-imgs-123.fc2.com/m/u/s/musiatui/012_20181125003640d03.png" target="_blank"><img src="https://blog-imgs-123.fc2.com/m/u/s/musiatui/012_20181125003640d03s.png" alt="012_20181125003640d03.png" border="0" width="232" height="400" /></a>
↓
[After]
<a class="luminous" href="https://blog-imgs-123.fc2.com/m/u/s/musiatui/20181025224609b5.png"><img src="https://blog-imgs-123.fc2.com/m/u/s/musiatui/tfhtrfhs.png" alt="tfhtrfh.png" border="0" width="400" height="226" /></a>
今までなら画像をアップし、そのまま挿入できていたが一手間増える。これについては辞書登録でベースを登録しておけば手間自体は少なくなります。
この記事ではそのまま表示させているが、基本的に中央に表示させたいのでそれを含め以下を辞書登録してます。
<div style="text-align: center;"><a class="luminous" href="■">■</a></div>
FC2ブログでLuminousを導入したい方はこちらのサイト様を参考にどうぞ。
過去記事のLuminous導入
ここからは個人的な悩み。問題は過去記事。これを修正すべきかどうするか。面倒なのが、別の方法を導入しようとした時にまた修正の必要があること。
この面倒さはSSL化で散々味わったので、極力記事内はシンプルに構成したいって所でどうしたものかと。参考サイト様の下の方に書いてある上級者向けも気になるし、下手に変更すると二度手間の可能性が大。
過去記事はともかくこれからの記事には、Luminousを導入するつもりだけど、後々面倒な事になるような気がしてならない。
もう一つは、画像の適正サイズを自分の中で決めないと。最近では記事中は画像サイズは横幅400pxで表示させているが、スマホからなら本田いないがパソコンからだと少し小さいように思う。
要はパソコン(＋固定回線)をメインで考えるか、スマホで下をMVNOの低速回線で考えるか。アクセスで見るとスマホをベースに考える事になるが、そもそも画像を売りにしているブログではないので、見ている方も綺麗に見えるとか気にしてないんじゃないかとも思ったり。
取りあえずLuminousを導入しつつ適度なラインを探っていきます。
*追記
Luminousを私が利用しているスマートフォン用のテンプレート(*URL末尾に?sp)でも導入していましたが、トップページの記事を読み込みボタンが反応しなくなることが分かりました。
原因は</body>上に貼り付けたscriptコードと思われるが、対処できないのでスマホ用テンプレートではLuminous表示を止めます。
スポンサードリンク
Category:ブログ