パーツ<画像レイアウト>はテキストと画像の組み合わせによるレイアウト機能で、大きく分けると3つのレイアウト仕様が搭載されてます。
工夫次第ではかなり柔軟なレイアウトを構築できるので、設定画面を見ながら詳しくご紹介していきます。
「画像レイアウト」が効果を発揮するのは主に1カラムページになります。
たとえば1カラム仕様のトップページとか1カラム仕様のランディングページ(LP)とか。
もちろん通常の2カラムのエントリーページでも使えますが、限定的な使い方になるでしょう。
<画像レイアウト>の設定画面を開くには、
【パーツ】→【画像レイアウト】→【画像レイアウト管理】→【追加】
もしくは
【パーツ】→【画像レイアウト】→【画像レイアウトの追加】
から開けます。
すでにいくつか設定済みの画面でご説明していきます。
下で調整した設定が実際にどんな感じで表示されるかの確認画面。
ただあくまでチェック用なので細かい設定まできちんと反映されるわけではありません。
画像のチェックや雰囲気の確認用としての使い方に留めておいて、実際の表示確認は内蔵ブラウザでチェックした方が正確で早いです。
『スマホ表示』をクリックするとスマホサイズでのプレビューになります。
(もう一度クリックで解除)
コンテンツ(画像+テキスト)は最大5ブロックまで設定できます。
(最初は『コンテンツ3』までが表示)
右端の「+」クリックで『コンテンツ4→5』の順に表示され、「-」で『コンテンツ5→4』の順に非表示になります。
(入力したデータは保持されるので「-」ボタンで表示数を減らしてもデータは残ったままです)
また矢印をクリックすることでコンテンツの順番が変更できます。
右端の三角をクリックすると画像選択項目が出てきます。
(選択決定後は下のサンプル画面のように画像パスが自動挿入されます)
【alt属性】
画像が表示されない時に代替表示するテキストをここに挿入します。
通常の画像挿入だと挿入と同時に「{AUTO}」という独自タグが画像パスの後ろに自動挿入されるんですが、ここは手動挿入になってます。
「{AUTO}」が入ってると画像管理内で設定済みの『説明文』(=alt属性)”が自動挿入される仕様なのでその方が便利なんですけどね。
ということで試しに【alt属性】の欄に「{AUTO}」と入れてみたら…ちゃんと機能してるみたい。
画像管理内で『説明文』に代替テキストを入力済みの方はお試しください。
この仕様はアップデートで変更になる(?)
パス(path)というのはサイト内のファイル(or ページ)の場所を表示する文字列で、絶対パスと相対パスの2種類があります。
絶対パスというのはドメイン(※当サイトなら”sirius2-dig.com”)から始まるファイル(or ページ)の場所で、当サイトの場合は
https://sirius2-dig.com/...(フォルダ名/ファイル名と続く)
となります。
これに対し相対パスというのは、主となるファイル群が置かれている場所(フォルダ)を基準に、対象となるファイルが相対的にどこにあるかを示すやり方で、通常は同サイト内のリンクに使われます。
たとえばSIRIUS2の画像パスなら<% imgDir %>という独自タグから始まります。
<img src="<% imgDir %>test.jpg" alt="{AUTO}" />
これはSIRIUS2の画像フォルダを基準にその中にある「test.jpg」画像という意味です。
これが絶対パスなら
<img src="https://sirius2-dig.com/img/test.jpg...となります。
相対パスのメリットとしては、文字数が少なくなるのでソースコードが見やすくなります。
またサイトのドメインが変わった場合、絶対パスなら旧ドメイン部分を全部新ドメインに修正しなくちゃなりませんが、相対パスなら(ファイルの階層等が不変ならば)修正の必要がないのも大きなメリットです。
サンプル画面・プレビュー内の①という丸数字の下にある「テスト見出し1」の部分です。
『リンクの設定』をクリックするとリンク設定ダイアログが開きます。
【リンクURLの設定】
【リンク先URL】には右端の選択項目から自動挿入が可能です。
【属性】
必要ならこちらも選択します。
リンクを設定すると画像と見出しにリンクが付きます。
テキスト(内容)はここに書き込みます。
右上の『テキストエディタ』や『デザインモード』をクリックするとそれぞれの編集画面が開くので、テキスト装飾などが必要な方はそちらでやった方が効率的です。
ただしテキスト入力エリアおよびテキストエディタ画面はともに「<BR>タグ改行」固定。
この「<BR>タグ改行」は行間の空き具合などの調整がとても面倒でしてね。
旧SIRIUS時代も確かこんな仕様だったと思うんですが、個人的には是非とも「<P>タグ改行」かあるいは「改行タグを挿入しない」も選択できるようにしてほしいところです。
見た目のデザインはここで調整します。
このブロックに関しては情報量が多いので次に別コンテンツとしてご紹介します。
アイテム数は表示するコンテンツの数で、自動計算になります。
つまり表示コンテンツを2個に減らせば数値は2に変わり、数値を4にすればコンテンツタブが自動的に4つに増える仕組みです。
レイアウト(PC)・レイアウト(スマホ)はそれぞれ個別のレイアウトが選択できます。
タブレットはどちらに入るかというと…レイアウト(スマホ)側になります。
【レイアウト(PC)の表示サンプル】
※PC(パソコン)でのレイアウト表示設定です。
デフォルト横並び(1行)
縦並び(1列)
画像+テキスト縦並び(1列)
画像+テキスト縦並び(1列・互い違い)
画像+テキスト縦並び(2列)
これは特殊なレイアウトですね。
縦長の画像には向いてるかも(?)。
【レイアウト(スマホ)の表示サンプル】
※タブレット&スマホでのレイアウト表示設定です。
1列
2( or 3列)
筆者
2列(or 3列)はタブレットは問題ないとしてもスマホではテキストの量によってはかえって見づらくなるかもしれません。
カスタムテンプレート【Volar2】では、2列 or 3列選択時でもスマホでの表示レイアウトをいずれも1列表示に変更してます。
(ちょっと見づらいかもという理由で。タブレットはそのままで変更なし)
SIRIUS2のデフォルト設定に戻したい時は「スタイルシートの専用設定を削除する」か「設定のアタマとオシリにコメントアウトを付ける」だけで瞬時に戻ります。
※<コメントアウト>についてはこちらの記事をご参照ください。
【カラー】
※『見出し』のテキストカラーを変更できます。
画像サイズを調整したい時に使います。
サイズの異なる画像を一定の大きさに揃えたい時とかに使うんでしょうか。
同じサイズで画像を作っておけばここの設定をいじる必要はないかもしれません。
【画像を円で表示】
ここをONにすると画像が円形にカットされて表示されます。
【行揃え(横)】
赤枠内のテキスト全体を「左寄せ」にするか「中央合わせ」にするか「右寄せ」にするかの違いです。
【行揃え(縦)】
テキスト全体を「上から表示」、「中央合わせ」、「下位置合わせ」にする設定です。
【見出しの文字サイズ】
『見出し』テキストの大きさが変えられます。
背景に色をつけるときの設定項目です。
【アイテムの背景色1】
ここだけ設定するとコンテンツ全部の背景が設定した色で塗りつぶされます。
【アイテムの背景色2】
ここも設定すると2番目(偶数番目)のコンテンツの背景が設定した色で塗りつぶされます。
筆者
【アイテムの背景色2】だけを設定した場合は…偶数番目のコンテンツだけに背景色が付きます。
【テキストの余白】
背景色を設定した場合はテキストがへりにくっついてしまうのでここで余白を設定してあげると見やすくなります。
背景色を付ける場合、テキストの分量がバラバラだと(上の画像でわかるように)背景色の高さもバラバラで表示されてしまいます。
この仕様がイヤだという場合は現状では背景色は設定しないか、テキストの量を全コンテンツ同じ分量にするしかありません。
当サイトのトップページでは、パーツ<画像レイアウト>を3ヵ所で使ってます。
実際には背景に画面幅いっぱい(フルワイド)で画像が敷いてあるかと思いますが、説明用に背景画像を無効化した状態でご紹介します。
※【Volar2】<フルワイド背景画像>についてはこちらの記事をご参照ください。
画像+テキスト縦並び
【レイアウト設定:画像+テキスト縦並び(1列・互い違い)】
ご覧になる時期によっては説明用のキャプチャ画像の内容やデザインが変更になってる可能性もあります。予めご了ください。
アップデート(Ver1.090)にて解消されました。
レイアウト設定で「画像+テキスト縦並び(”1列・互い違い”も含む)」を選択時にリンクを付与すると画像が小さくなってしまうバグがあります。
【Volar2】では上の画像のように「見出し」にリンクが付いてても、リンクなしの時と同じ大きさの画像で表示されるよう一時的に調整してます。
(アップデートで修正されればその設定は削除の予定)
すぐ前の『画像が小さくなってしまう』バグがアップデートで解消されたと同時に、この下に書いてある【Volar2】オリジナル機能の『ブラウザの端まで画像を表示』機能がうまく表示されなくなりました。
よって一時的にこの機能は使用停止にしてあります。
いずれ解決した際にはまた復活する予定ですが期日は未定です。
先ほどの画像のようにレイアウト設定で「画像+テキスト縦並び(1列・互い違い)」を選択した場合、SIRIUS2の設定では画像は枠内に収まって縮小・表示されます。
もちろんこれも問題ないんですが、画像をブラウザからはみ出るぐらいのレイアウトにすると迫力(インパクト)が増します。
【Volar2】ではスタイルシート内で特定の箇所のコメントアウトを外すだけで下のようにブラウザの端まで画像を表示することができるようになります。(※PC表示のみ)
(ただしある程度画像の横幅が大きくないとこのレイアウトにはなりません)
筆者
画像は実寸での表示になるのでそれなりのサイズで作成する必要があります。
※当サイトのトップページはたぶん”はみ出し表示”に変えてると思います。
SIRIUS2の新機能(パーツ)
【レイアウト設定:デフォルト(横並び)】
ここでは1列4個のコンテンツを3列+最後だけ1列1個のコンテンツで表示させてます。(計13個)
ただし最後の端数分に関してはちょっとした”チョイ足し”を施してます。
ということでたまたま1個だけ余った最後のブロックをコンテンツ1個だけの状態で表示させたのが下のキャプチャ画像。
デフォルト設定では下の画像のように他のコンテンツの横幅(4個分)と同じ幅まで広がって表示されちゃいます。
これはちょっと見れたもんじゃありません。
これを防ぐには空のコンテンツを3つ足してやれば先のサンプル画像のように他の1個分と同じコンテンツ幅で表示はしてくれます。
しかしながらPCでは問題なさそうなこのブロックをスマホで表示させてみると…最後の1個の下にだけ大きな余白が出てしまってます。
この余白の正体は空のコンテンツ3個分のHTMLタグです。
コンテンツは空でもコンテンツを囲むHTMLタグは消えずにそのまま残っちゃうので、その分の高さが余白として表示されちゃってるんですね。
ということでカスタムテンプレート【Volar2】では横幅拡大”と”異常余白”の2つの問題を同時に解消するクラスを追加搭載しました。
こちらが実際の編集画面で、4ブロックに分けて作成した<画像レイアウト>の独自タグです。
(最後は”空のコンテンツを3つ足した”状態の画像レイアウト設定です)
これらをとりあえず【Volar2】の独自クラスで囲みます。
(カスタム文字装飾などに登録しておけば1発入力が可能)
そしてハンパな数になってしまった最後の1個の独自タグにだけ「view1」という問題解消用のクラスを追加します。
(実際の表示コンテンツが2個なら「view2」、3個なら「view3」になります)
これだけでPCでは他のコンテンツ幅と同じ幅で表示され、タブレットやスマホでは余計な余白が生じなくなります。
筆者
”面倒なのはイヤ!”って言う方は頑張って全列同じ数で揃えてください。
SIRIUS2の新機能(その他)
【レイアウト設定:デフォルト(横並び)】
こちらは先ほどとは雰囲気が変わって「アイコン風画像と見出しのみのリスト形式」になります。
使ってる機能は同じく<画像レイアウト>で、レイアウト設定もデフォルトの「横並び」。
全く一緒です。
違うのは【Volar2】の独自タグが専用のものに変わってること、アイコン風画像(PNG形式・透過情報あり)ということで画像の大きさを最大で縦横80pxに制限してること。
あとはバランスを考えて全体の横幅を90%に縮めてることでしょうか。
設定の中身はこんな感じで、画像と見出しのみの入力で他は記入しません。
(※記入なしを前提にレイアウト調整してます)
こちらも先ほどと同じく端数処理が可能で、ここでも最後のコンテンツに「view3」という独自クラスを足してます。
(最後の段だけ3個なので)
筆者
「hover_kakudai」というクラスはリンクの付いた画像にマウスを載せると画像がちょっとだけ大きくなる視覚効果用です。
透過情報付きのPNG画像は背景色が何色でも、また背景画像であってもうまく溶け込みます。
これに対し何もないところ(透過部分)は必ず白になるJPEG画像は背景色が付いてるところでは四角く切り取られて表示されます。
たとえば下の画像は加工編集ソフトで加工中のキャプチャ画像です。
格子状の部分は透過(透明)状態を表します。
これをJPEG形式で出力したのが下の左側の画像、透過情報を保持できるPNG形式で出力したのが右側の画像になります。
見た目はどちらも同じですが、色を付けた背景上に置いてみると左のJPEG画像は透過情報を持てないため透明部分が白で出力されてしまいます。
ただし背景が白であれば、同じ白同士でまるで透過情報をもったPNG画像のような扱いも可能になります。
パーツ機能はデザインモードでもテキストモードと同じくSIRIUS2の独自タグでの表示になるので、(ブラウザ or内蔵)プレビューでの表示チェックが不可欠になります。