検索結果

【Volar2】の動作検証でキャプチャした画像は、基本的には【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトデザインが元になってます。そのため他のテンプレート利用時には当サイトでご紹介しているキャプチャ画像とは若干異なる場合もあります。また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。SIRIUS2 ver.1.11で＜画像最適化機能＞が実装されました。この機能を使うとサイト内で使ってる画像を画質をほとんど落とすことなくファイル容量を減らすことができます。スマホやデジカメで撮影した素材はそのままだファイル容量がとてつもない大きさになり、ページ読み込みに悪影響を与える可能性大です。そういう環境にある方は＜画像最適化機能＞が大いに役にたちます。（※注：画像によっては発色変化が伴う場合もあります）もちろん加工済みの画像に対しても有効なので、積極的に使いたい機能ではありますね。ということで実際の画像を使ってどれだけ最適化されるか検証してみました。画像最適化のやり方【ホーム】タブ→【画像管理】をクリックします。画像管理画面が開くので右上に追加された『画像の最適化』をクリックします。「最適化を行うか？」と聞いてくるので「はい」をクリックすると、すでにサイトで使われてる画像すべてにチェックが入った状態で画像最適化フォームが開きます。大量の画像を設置しているサイトで最適化したい画像を選択しながら（そこだけチェックを入れながら）最適化したいというケースもあるでしょう。しかしながら画像最適化フォーム上には「すべてのチェックを外す」というコマンドが見当たりません。でもご安心を。画像最適化フォーム上で右クリックすると下のような表示が出ます。ここでまずは「全て選択」をクリックします。下の画像のように全てが選択された状態になるので再度画像最適化フォーム上で右クリックして「チェックを外す」をクリックします。するとチェックが外れた状態のフォームに変わります。この状態になったら画像最適化を行いたい画像だけを選択していきます。これなら労力も少なくて済みそうです。とはいえ基本的には全部最適化しちゃっても特に問題はなさそうでしたので、明らかに画像の色（発色）が変わってしまって見栄えが悪くなった画像のみオリジナル画像と交換（※バックアップファイルで差し替え）という作業の方が早く済むケースもあります。最適化後にすべての画像をいちいちチェックする手間は増えますが。最適化の前に、何か問題があった場合でもオリジナル画像ファイルで戻せるようバックアップを取っておくことをおススメします。バックアップは『画像ファイルのバックアップ』をクリックします。バックアップファイルはzipファイルで格納されるのでzipファイル名と保管場所を指定して保存します。圧縮されたzipファイルはzipファイル上で右クリック→「すべて展開」で解凍できます。解凍したフォルダの中にオリジナルの画像ファイルが格納されてるので、必要なファイルをSIRIUS2の画像管理画面内にドラッグ&ドロップすればオリジナルファイルで差し替えることができます。バックアップが済んだら「最適化を行う」をクリックします。確認ダイアログが出るので「はい」をクリックします。（ダイアログ内の”発色が変わる”かどうかの検証はあとでご紹介します）最適化作業が始まるので終了するまで待ちます。（※進行中の表示が出ます）筆者今回はファイル数が少なかったので5秒ほどで終わってしまい、進行中のキャプチャ画像が取れませんでした。最適化作業が完了すると結果ダイアログが表示されます。完了後の画像最適化フォームには最適化後のファイルサイズやどれだけ圧縮されたかの比較が加わってます。比較欄の数値は元のサイズに較べて何％まで小さくなったかの数値で、小さければ小さいほど圧縮されたということになります。20kB以下の画像は最適化対象外になります。画像最適化が済んでるサイトでもう一度画像最適化を実行しようとすると→「最適化する画像がありません」のダイアログが出て最適化は実行されません。画像を差し替えたり新たに画像を追加した場合→画像最適化を実行するとそれらの画像のみが画像最適化フォームに表示されます。よくできてますね。最適化検証いくつか毛色の違う画像を用意して実際に画像最適化をやってみました。先にブラウザ上での目視による結果を申し上げますと、画質の劣化はほとんど見られませんでした。画像の発色変化（色合い劣化）に関しても素材や加工済み画像であればほとんど変化がなくかなり高機能なツールと言えそうです。このあと比較画像を載せてはいますが、ここに載せてる画像はキャプチャ後にリサイズ＆圧縮がかかったものです。それゆえあくまで参考程度にとどめて後は実際にトライしてご自身で確認してみてください。SIRIUS2付属のヘッダー画像1400×440（65KB→65KB：変化なし）※矢印ホールドで左右にドラッグ素材12481×3508（2.9MB→1.16MB：41％まで削減>）筆者ファイル容量は半分以下になったにもかかわらず画質の劣化はほとんどありません。※矢印ホールドで左右にドラッグ素材21063×1603（337KB→115KB：34％まで削減）筆者こちらも画質の劣化はほとんどありません。色合いも変わらず。※矢印ホールドで左右にドラッグ素材3700×438（108KB→66KB：61％まで削減）筆者こちらも画質の劣化はほとんど見られず色合いの変化もありません。※矢印ホールドで左右にドラッグiPhone12撮影素材3024×3024（2.2MB→1MB：45％まで削減）筆者画質の劣化は見られませんが、緑色の鮮やかさが若干鈍くなってます。これが”発色が変わる”ってやつでしょうか。※矢印ホールドで左右にドラッグiPhone6撮影素材3200×2133（891KB→739KB：83％まで削減）筆者同じiPhone素材ですがこちらは画質の劣化も発色の変化も見られません。画像容量や画像の色あいによっては異なる結果になるのでしょうか。※矢印ホールドで左右にドラッグ加工済み画像1700×377（70KB→46KB：65％まで削減）筆者こちらは画像編集ソフトで加工済みの画像で、出力の段階ですでに画質を落としてファイル容量を減らしたものです。加工済みのせいか、iPhone12撮影素材で見られた緑色の発色に変化は見受けられません。※矢印ホールドで左右にドラッグ加工済み画像21400×933（266KB→186KB：70％まで削減）筆者こちらも加工済みの画像ですが、前のと較べるとやや大き目のサイズの画像です。やはり画質の劣化や発色の変化はほとんど見受けられません。※矢印ホールドで左右にドラッグ加工済み画像3648×428（92KB→72KB：76％まで削減）筆者最後も画像編集ソフトで加工済みの画像で、こちらは文字入り。ですが文字のつぶれも見受けられません。※矢印ホールドで左右にドラッグ個人的な感想としては画像をきちんと見せるタイプの商品サイトやギャラリーサイトなどでは最適化後の発色チェックは必須でしょう。それ以外の一般的なサイトではあまり深く考えずに画像最適化機能を利用するのがおススメかと。筆者もっとも商品サイトやギャラリーサイトは撮影したまんまの画像をそのまま使うことはなく、画像加工ありきで画像を用意するかと思います。そういう意味では画像チェックの必要はないかもしれませんね。

【Volar2】の動作検証でキャプチャした画像は、基本的には【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトデザインが元になってます。そのため他のテンプレート利用時には当サイトでご紹介しているキャプチャ画像とは若干異なる場合もあります。また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。SIRIUS2では内部処理の見直しによって画像の読み込みが大幅に高速化したそうです。それよりも個人的に使いやすくなったのが画像の「フォルダ分け」機能です。フォルダ分けのメリット旧SIRIUSでは1個の画像フォルダーしかなく画像管理が大変でした。その対策として筆者個人はそれまではWindows上でフォルダ分けをしておきそこに画像を格納してからSIRIUSに放り込んでたものです。それだけでも旧SIRIUS上だけで画像管理するよりはいくぶん楽でしたね。それがSIRIUS2では画像管理内でフォルダ分けができるようになったんです。この機能は画像を探したり修正したり入れ替えたりするときにとても重宝します。画像フォルダの賢い使い方フォルダ追加画像フォルダを追加する場合は『フォルダ』画面内で右クリック→フォルダ名を記入で追加できます。（削除も右クリックから可能）目当てのフォルダをクリックするとそのフォルダ内の画像だけが表示されるので画像の管理がとてもラクです。［Alt］設定画像の［Alt］設定が画像管理内で完了します。画像管理内で［Alt］設定しておけば、あとは自動で表示してくれるので同じ画像を繰り返し使う場合でも毎度毎度設定する必要がありません。［Alt］とはAlt設定とはブラウザで画像が表示できないときに画像の代わりに表示される代替テキストのことです。またAlt設定があれば、目が不自由な方のためのスクリーンリーダーや音声ブラウザなどがAltに記述した代替テキストを読み上げられるようにもなります。さらには画像の中身を完全に理解するのが困難と言われる検索エンジン側に適切な画像内容を伝えるためのSEO対策といった側面もあり、とても重要な役割を持っています。画像フォルダの直接管理画像管理内のフォルダ表示画面はそのエリアスペースを拡大できません。そのためフォルダ数が多くなってくると目的のフォルダにたどり着く（スクロール）までが地味に面倒です。特に一度に大量の画像をフォルダごとに分類したり特定のフォルダ内の画像の入れ替えが必要なときはホントに面倒くさいです。こういう時はWindows上で画像フォルダを直接管理するという手段もあります。やり方としては、『画像フォルダ』をクリックすると画像管理のフォルダ分けの大元となってる（Windows上の）フォルダが開きます。このフォルダはSIRIUS2の画像管理上で作成したフォルダと完全に同期しているので、Windows上でフォルダを追加すればSIRIUS2にも反映されます。（フォルダ名の変更やファイル移動、ファイルの入れ替えなんかもすべて反映されます）ただしSIRIUS2の画像管理画面を開きっぱなしにしていてWindows上で操作を行った場合、そのままではSIRIUS2の画像管理にリアルタイムに反映はされません。その場合はSIRIUS2の管理画面をいったん閉じて再度開き直すことで同期が完了します。注意点フォルダ分けした画像を挿入した場合は画像タグ内にフォルダ名が付きます。この状態でもしもフォルダ名を変更した場合は、すでに挿入済みの画像タグ内のフォルダ名は残念ながら自動では切り替わってくれません。（画像ファイル名を変更したりファイルを別のフォルダに移動したときも同様です）だからといって手動で1個1個変更するのは手間もかかるしスペルミスも生じがちです。こういう場合は記事の置換（Ctrl＋R）機能を使うと瞬時に変更できます。一例として先ほどの「AAA」というフォルダ名を「BBB」に変更したとします。こういった時はできるだけ限定的な、言い換えれば置き換えが確実に行われるワードだけを置き換え対象に設定すると誤変換を防げます。具体的には下のような感じで設定すると、『画像タグ内に”AAA”というフォルダが見つかった場合のみ”BBB”に変更する』という命令が実行されます。（最後のスラッシュまで入れると限定的な置換になる）

【Volar2】の動作検証でキャプチャした画像は、基本的には【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトデザインが元になってます。そのため他のテンプレート利用時には当サイトでご紹介しているキャプチャ画像とは若干異なる場合もあります。また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。目次などのページ内リンクをクリック（タップ）すると見当違いの場所が表示されてしまう（飛び先がズレる）場合、考えられる原因の一つに「画像の遅延表示」機能が挙げられます。画像の遅延表示は便利だけど「画像の遅延表示」とはページが開かれた時にページ内の画像を最初にすべて読み込むのではなく、画面をスクロールしていくにしたがって順番に画像を読み込むシステムのことです。画像を一度に全部読み込む必要がないためページの表示速度アップにつながります。SIRIUS2の場合は【サイトオプション】→【全体設定】→【全体の設定】タブ内の以下の項目でON・OFFの切り替えが可能です。「画像の遅延表示」はSEO的にもONにしておくのが好ましいのですが、ここをONにするとコンテンツの量が多いページなどでは目次やページ内リンクをクリックしても本来の表示先ではない部分が表示されてしまう場合があります。（コンテンツの量によってはちゃんと作動することもあります）これは最初に画像を全部読み込まないため画像の高さ分が計上されず、それゆえページの”長さ”を正確に算出できないことからくる誤作動という理屈だそうです。そのためリンク先の本来の位置がずれてしまうんですね。そういった理屈なのでいったん下の方までスクロールしてしまえばぺージ内の全体の長さが”判明”するため、次からは指定したリンク先がちゃんと画面の先頭に表示されるようになります。サイト訪問者がそこまで広い心で接してくれればいいんですけどねえ。ページを開いて目次をクリックしたところ全く別のところが画面の一番上に表示されてしまえば「え、なんか内容が違ってなくね？」となってサイトに対する印象を悪くさせる可能性もあります。これはページ内に設定されたページ内リンクをクリックしても同様の症状が出ます。もしも「画像の遅延表示」をONにしていて目次のジャンプ先が正常に表示されない場合はいったんOFFにして再度確認してみてください。おそらく正常に機能するはずです。ただし確認する際はブラウザのキャッシュをクリアすることをお忘れなく。簡単な方法としてはCtrl＋F5キーを押すことです。厳密にはキャッシュのクリアではないですが、キャッシュを無視してつまりキャッシュ削除とほぼ同じ状態でブラウザ画面を更新できます。Ctrlキーを押しながらブラウザの更新ボタン（矢印のついた丸印）をクリックしても同じことができます。解決策はあるのかSIRIUS2の「画像の遅延表示」はスクリプト（簡易プログラム）を利用して実行しています。この仕組みだと『画像の遅延表示は有効にしておきたいけどページ内リンクも正常に作動させたい…』を両立させる工夫は筆者が調べた限りではなかなかに難しいようです。では解決策はないのかと言えば、あることはあります。しかもSIRIUS2の「画像の遅延表示」はOFFにした状態でも画像の遅延表示を有効化できる方法です。それがブラウザ自体に搭載されてる画像遅延読み込み機能の［Lazyload］属性を利用すること。これは画像タグに『loading="lazy"』という記述を付けるだけであとはブラウザが勝手に画像を遅延読み込みしてくれるというすぐれものです。ページ内リンクも正常な位置にジャンプします。別途スクリプトを用意する必要もないのでそのこと自体が表示速度アップにも貢献します。ただし［Lazyload］を正常に作動させるには同時に画像の幅（width）と高さ（height）を記述する必要があります。ここがSIRIUS2において大きなネックとなるところでして。というのもすべて手動で設定しないといけないから。たとえば適当に画像を挿入してみます。このとき出力される画像タグがこちら。残念ながらここに画像の幅と高さは表記されません。（自動で補完してくれないんです）<img src="<% imgDir %>baby01.jpg" alt="{AUTO}" />そのためこの画像（タグ）に［lazyload］機能を付与する場合、まずは「loading="lazy"」を加筆します。<img loading="lazy" src="<% imgDir %>baby01.jpg" alt="{AUTO}" />筆者loading="lazy"の前後には半角スペースが入ります。次に画像の幅（width）と高さ（height）を追記します。これはどこで確認するかというと【画像管理】→該当する画像をクリック→『大きさ』欄で確認できます。もしくは【画像管理】→【メインの画像フォルダを開く】でフォルダが開くので、『表示オプション』で「詳細」を選択し、列の項目で「大きさ」にチェックを入れます。「大きさ」が表示されない場合は『その他...』をクリックします。「大きさ」にチェックを入れます。見やすいように「大きさ」欄を画像ファイル名のすぐ脇にドラッグすれば該当する画像の幅と高さをすぐに確認できます。修正する画像が多い場合はこちらの方が便利です。判明した画像の幅と高さは下のような書き方で記述します。widthの後に記述する数値が画像の幅でheightの後ろに記述する数値が高さになります。width="1400" height="600"これを先ほど作成した画像タグに追記したのがこちら。<img loading="lazy" width="1400" height="600" src="<% imgDir %>baby01.jpg" alt="{AUTO}" />筆者width="1400"の直後とheight="600"の直後にも半角スペースが入ります。区切りは半角スペースと覚えておきましょう。これで完成です。といっても毎回これを手書きするのは大変ですよね。そこで下のようなフォーマットを作って［カスタム文字装飾］や［定型文］に登録しておきます。loading="lazy" width="" height=""これを画像タグを出力したあと、”src”の直前をクリック＋登録したフォーマットを挿入します。その後に画像の幅と高さを記述すれば、ある程度の時間短縮は見込めます。いかがです、けっこう面倒でしょ。でも今のところこれしか策はなさそうです。画像ならなんでも「Lazyload」を設定していいのかといえば例外が一つだけあります。それがファーストビュー（ページを開いた時に最初に表示される画面）で、たとえばヘッダー画像などはページが開いたらすぐにでも表示させた方がいいですよね。そういったファーストビューに出てくる画像には「Lazyload」は設定しないでおきます。既存のサイトを「Lazyload」仕様にするのは膨大な修正時間が必要ですが、サイトを始めたばかりというのであれば最初から「Lazayload」使用で画像タグをその都度修正していくのはアリかと思います。でも面倒なことには違いないのでSIRIUS2の画像の遅延表示の方がラクというのであれば無理せずそちらをおススメします。Youtubeにも設定可能画像だけなくYoutubeにも「Lazyload」は有効です。適当にYoutubeを挿入してみました。（『メディア』→『Youtube』から挿入）挿入後の編集上での表示は以下のようになります。<div class="gmap-wrap"><div class="gmap-box"><iframe src="https://www.youtube.com/embed/t5n-FlbR5Hk" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div>ここに「loading="lazy" width="560" height="315"」を加筆すれば完了です。<div class="gmap-wrap"><div class="gmap-box"><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/t5n-FlbR5Hk" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div>筆者Youtubeの場合は「width="560" height="315"」で固定です。