サイト構築記録9:トップページの作成―超便利なリストビュー

目次

●サイトトップ(HOMEページ)のボタン設置

サイトのトップを飾る写真(メインビジュアル)はできた。
いよいよ各カテゴリーに飛ぶリンクボタンの設置だ。カテゴリーヘッドの写真をボタンにして、その上に文字を乗せて案内する。さて、また左上の[+]アイコンを押す。デザインのコーナーに「カラム」があった。3カラムを選ぶ。

トップページ作成

設置されたカラムの中に「+」があるのでクリックすると、そこに何を入れるか先ほどの材料メニューが立ち上がる。写真背景の文字付けきリンクボタンにしたい…と、「カバー」というのがあった。
選ぶと何を挿入するのか訊いてきたので「メディアライブラリ」をクリックし、画像を選ぶとサイトに挿入され、その写真上に「タイトルを入力」と表示されていたので入力。
その文字を選び、画面上部に常時表示されているツールバーの中かから (-)(リンクアイコン)を押すとリンク先のURLを入力するボックスが出てきた。これを入れればリンクボタン完成だ(まだ飛び先ができてないけど)。
あや~、簡単だな!

(写真のように画像のどれかの大きさが違うことがありますが、そこに乗っている文字数が多かったためにその分写真表示が大きくなっていただけ。←こんなことでも、なぜ?と調べていたよね~w)

●ワク幅も画像マスクも自動

この調子で3枠埋めた後、右上のPCアイコン押してプレビューしてみた。
おぉ、3枠ちゃんと収まってる!
ワク幅をこれくらいにし、その中に写真を3つ収めるとして、写真の大きさと写真間の間隔をどのくらいにする、とか…一応設計はしていたのだが、全て不要w。写真のリサイズなど必要なし。勝手にやってくれましたww。

しかも、写真を並べると画像だらけでうるさいだろうなぁ…マスクをかけるか、いっそ文字だけのボタンにした方がいいかもなぁ…などと考えていたが、何と見事に薄暗いマスクがかかっていて気にならない。ラク!!
手間がかかる所を勝手にやってくれる→これか!記事に集中でいるという感じは。確かにね。

ただ文字がリンク文字になったので青文字化して見えにくい→これは、その文字を選択した後、上部バーの右端「保存」アイコンの隣にあるアイコンを押すと右からメニューが出てくるので、「ブロック」タブをクリック。その中で右の黒白の円マークを押すと「色」が出てくる。そこで「テキスト」をクリックして白を選ぶと見事にクッキリと浮かび上がりました。

●リストビューでブロック構造を理解

さらに、超便利なことを発見。
左に「リストビュー」というのがあるので、それを見ると「カラム」とある。それを展開すると、ワードのアウトラインのような感じで設置したボックスの構造が分かる。

一番上の「カラム」をクリックすると外側の大枠が青ラインで表示され、
その下の「カラム」をクリックすると写真ボタンのワクが青表示される。
その下の「カバー」を押すと写真が青枠で表示。
写真ボタンのワクと写真のワクは同じなのだが、写真ボタンのワクを表示する時は写真自体が少し短く表示されて、それが写真自体の枠ではないことがわかる。まぁ、よく考えられていること。
そして、最後の「段落」を押すと、文字が青表示されます。「段落」って文字のことなんだね~。

な~るほど。ボックスの中にボックスを作って、入れ子構造になっているわけだ。で、各ボックスにいろんな属性を持たせることができるわけね~。やっと構造が理解できました。

●超便利なリストビュー

で、写真ボタンの背景に色を付けようと思っていたので、一番上のカラムをクリックして選択しておき、先ほどのブロックタブを開くと、「色」の中に「背景」とあるので、そこで色を選ぶと見事に背景色が設定できました。

リストビューを使うと、ボックスが超選びやすい。

さらに、カラムを選ぶと、右端に縦並びの3点が現れる。そこをクリックするとメニューが現れるので、「複製」を選ぶと、この3カラムのセットが下に複製されてできるのだ。超便利!

で、写真を変えるには、写真を選択した上で上部バーにある「置換」をクリックし、「メディアライブラリ」を選び、新たな写真を選択するだけ。

かくして、一度わかると、とんとん拍子でトップページができたのでした。

目次