TOP

小画像をワンクリックで拡大する指定手順

ウェブサイトの記事内画像をクリックすると大きな画面に切り替わる手法は
コンテンツ内に大きな画像を多く配置したのでは、記事との割合がうまく
整理できないなどの状況対応策として追記しておりますが、今時のサイト
構築を拝見していると使用は機会あまりないかもしれません...

 

ですので、単なるスキル会得程度のお話とご理解ください。

 

 

小さな画像であれば適度に配置ができ、もっとよく見てみたいという方に..
もしくは、理解を得るため大きく見せる必要がある...

 

それなら..大きな画像で確認していただくという表現方法..

 

シリウス機能に備えある..
でも、シリウス機能では単位拡大するだけ..

 

そして、拡大以降もとに戻るには?

 

PC画面の過去履歴で戻るか..

 

Xボタンで現在画面を消す...ですね..

 

 

通常の記事でならさほど使える機能でもない…

 

ご案内サイトなら参考例としての使い方はあるかもしれませんが

 

 

表示の参考例
100px;のサイズ画像をクリックすると1200px;に拡大されます

 

 

シリウス機能、テーブル枠でなら使えるかもしれません
小画像のイメージを拡大画面で表示する...ですね

 

参考例、お試しにGIF画像おいてみました..

項目1 項目2

 


 

 

拡大画像は、画面いっぱいまで拡大可能..

 

 

指定手順

 

まず最初に拡大画像は、管理画面に置かれるサイズで反映されると
理解します..

 

サイズ調整は、リサイズで書き換えてください

 

 

画像管理画面で、画像を選択して次に小画面のサイズを指定します..

 

 

一番下の画像ファイルのリンクを挿入、別ウィンドウで表示を選択…

 

これでで終了…

 

 

通常の画像コード
<img src="<% pageDepth %>img/1ab.png" alt="" />

 

チェンジ構造の場合は、以下のようになります
<a href="<% pageDepth %>img/1ab.png" target="_blank"><img src="<% pageDepth %>img/1ab.png" style="width:100px;" alt="" /></a>

 

 

 

<span style="color:#FF0A0A">小画面と大画面では異なる画像を使う</span>

 

大画面を小さなサイズで表示した場合、画像によりけりですが認識しにくい..
,,という状況も時としてあるかと思います

 

 

そんな場合は、画像コードを入れ替えればよいのです..

 

参考例

 

 

個別ですとシリウス機能では指定できないので、一度読みこんだ画像コードを
入れ替えます..

 

子画像は右に置かれるコードです..
左は大画面
<a href="<% pageDepth %>img/ここです 1ab.png" target="_blank"><img src="<% pageDepth %>img/ここです1ab.png" style="width:100px;" alt="" /></a>

 

 

優れた機能であるかどうかは、何とも言えませんが考えようでは
使えるかもしれません..

 


 

スポンサーリンク

 

 

 

小さい画像をクリックすると大きい画像に切り替わる表示の指定方法
シリウスカスタマイズ

シリウスの画像カスタマイズ機能、小画面をクリックすると拡張サイズが切り替わり表示する仕様が備えありますが、iphone、スマートフォン画面ではPC設定がそのまま適用されるとなります通常はそれでもよいのでしょうが、コンテンツか、好みにより可変される表示を選択することもできるのですね設定に関しては、難易なくシリウス機能ですべて賄えますここで大変申し訳ありませんが、小さな画像をクリックして拡張サイズに切...