レッスン内容
リンクブロックを追加する
リンクブロックをプロジェクトに追加するには、左サイドバーの要素パネル（ショートカット：A）を開き、リンクブロック要素をページにドラッグします。
リンク・ブロックに要素を追加する
他のリンク以外の要素は、追加パネルからでもキャンバスからでも、リンクブロックにドラッグすることができます。
プロTIP：リンクブロックの中に他のリンクを入れ子にすることはできませんが、テキストブロック要素をドロップして、ボタンのように見せたり、ボタンクラスを使うことはできます。
リンクのタイプと値を設定する
テキストリンクやボタンと同様に、リンクブロックにもURL、ページ、コレクションページ（該当する場合）、ページセクション、Eメール、電話、ファイルなどのリンクオプションがあります。
スタイル・リンク・ブロック
リンク・ブロックは、レイアウトや構造を作成する際に、Divブロックと同様に柔軟性があります。ブログの記事一覧のように、他のページにリンクするレイアウトを作るときによく使われます。
リンクブロックのホバー状態をスタイルする
リンクブロックはインタラクティブなので、ユーザーにクリック可能であることを示すために、リンクブロックに異なるホバー状態を設定するのがベストプラクティスです。以下の手順に従って、ホバー状態をスタイル設定します：
- リンクブロックを選択
- 状態をクリックし、ホバーを選択する
- ボックスシャドウやその他のスタイルプロパティを追加する
- なし／デフォルトの状態に戻る
- ボックスのシャドウ・プロパティ、またはホバー状態でスタイルを設定したその他のスタイル・プロパティに対してトランジションを作成する。
ホバー時の背景画像を変更してみてください：
- リンク・ブロックに背景画像を追加する
- States > Hover を選択
- background image を変更
- none/default state を選択
- 背景画像プロパティのtrasitionを作成する
青文字を上書きする
デフォルトでは、テキストがリンクブロックの中に置かれると、青色で下線が引かれます。
テキスト装飾とフォント・カラーを上書きすることで、特定のリンク・ブロックのデフォルト・リンク・スタイルを変更できます：
- Link blockを選択
- Style panelを開く
- text decoration を noneに変更
- font colorをblack
text要素自体の文字装飾を「none」にしても、テキストの下線は消えません。下線を消すには、リンクブロックに直接スタイルを設定する必要があります。
DivブロックをLinkブロックに変換する。
リンクブロックをDivブロックに変更したり、その逆を行ったりすることは、要素をグループ化するためにリンクブロックではなくDivブロックを使っていたことに気づいたときに便利です。また、ブロックの機能を変更する必要がある場合に、一方と他方をすばやく入れ替えるのにも便利です。
リンクブロックをDivブロックに変換する
リンクブロックをDivブロックに変更するには、リンクブロックを右クリックし、Divブロックに変換します。
DivブロックをLinkブロックに変換する
Divブロックをリンクブロックに変更するには、Divブロックを右クリックし、リンクブロックに変換します。
Divブロックにリンク要素が含まれている場合、エラーが表示され、DivブロックをLinkブロックに変換できないことに注意してください。これは、リンクを入れ子にすることができないからです。Divブロックに入れ子になっているリンク要素をすべて削除するか、LinkブロックをDivブロックに変換することから始める必要があります。