シリウスにレスポンシブウェブデザイン構造を組み込む場合は
閲覧端末で、サイトの掲載画像がぼやける..拡大表示されることへの
対策を施す事情があります...

 

シリウスに限ることかもしれませんが　

 

もしくはソフト対応のウェブ制作機能

 

 

---

 

 

ｗｉｎｄｏｗｓPCには　画像編集機能　sinippngツールがございますね

 

無償や自己制作の画像をコピーしてサイト内に貼り付けできるという
便利なツールですが...

 

ここでご注意難です

 

単に　貼り付けると以下のサイズ指定を含まない記述となりますね

 

<img src="<% pageDepth %>img/siriusw1.jpg" alt="<% pageTitle %>" />

 

サイズ指定を含まない場合

 

パソコン画面でサイト閲覧してもなんら問題はないのですが

 

モバイルでレスポンシブ化すると画像がぼやけ

 

異状に拡大もされます

 

これはサイズ指定の数値がないためレスポンシブウェブデザイン構造では

 

正確に画像を読み取れなくなりのです

 

 

新規で画像を配置する際は　必ずサイズ指定をしましょう

 

記載例
<img src="<% pageDepth %>img/siriusw2.jpg" style="width:300px;" alt="" />

 

 

現に画像が配置済みの場合も指定記載追加で完了します

 

 

もしくは　画像コードをマウスコピーしてから

 

シリウス操作画面より　画像管理画面に移動

 

ここで画像サイズを指定することも可能です

 

横幅のみの数値指定ですが　それだけでＯＫですが

 

 

ここで　ただしです

 

 

sinippngツールで　切り取った画像は　切りとり時点のサイズで
あればですが　それはとてもきれいです

 

しかし　１ｐｘ変えれば　フォトみたいな画像は然程のアレも
あるにはあっても　見た目では感じられませんが

 

ラインや　文字を画像としている際は　アレが目立ちます

 

切りとり時点画像　　以下は画像です

 

１ｐｘサイズ変えると　ぼやけが確認できますね

 

sinippngツールは　簡単便利なのですが微妙調節編集機能は
ないみたいです

 

ラインや文字が入り組まれる画像の場合　面倒でもフォント画像アレを
防ぐためには

 

ペイントなどの編集ソフトでサイズ調整して　パソコンに保存し

 

シリウスに読み込む手順がよろしいかと思います

 

---

 

 

スポンサーリンク

 

 

---

 

画像管理画面といいましたが　画像が多いと何度も
面倒ですね

 

 

当サイトも現在　少しずう修正中ですが　時短をするなら

 

管理画面へ移動せず

 

プレビュー画面で　sinippngツールを使い画像を切り取り

 

張り付け選択　

 

その際の画像調整画面で横サイズが認識できますね

 

その数値を以下例記載に書き換えコード修正すればよいのです

 

style="width:300px;" alt="" />

 

ページ掲載の画像が　同サイズ画像の際は面倒もなく

 

以下記載のみ張り替えればよいのですが
alt="<% pageTitle %>" />

 

バラサイズの際は　
上記手順で数値を確認しての実行が時間短縮になり

 

ほぼ同サイズのサイズ指定ができます

 

 

 

レスポンシブウェブデザイン構造では画像の数値指定を必ずしましょう
SIRIUS　シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ