AFFINGER6「ブログカード風」内部リンクの作り方【装飾し放題！】

今回ご紹介する方法は、

という方におすすめの方法です。

ブログカード風内部リンクを使えば、

• ボーダーの「色」や「太さ」の変更
• 「背景色」の変更
• 枠内に「まるもじ」や「ふきだし」の挿入

が可能になります。

ここでは、大きく分けて2タイプの作り方を紹介します。

• グループ化するタイプ
• マイボックスを使用するタイプ

それでは、ブログカード風内部リンクの作り方を詳しく解説していきます。

グループ化タイプのブログカード風内部リンクの作り方

グループ化を使用することで、

• ボーダーの種類を変える（太め・点線）
• 背景色を変える
• 背景スタイルを変える
• 「まるもじ」や「ふきだし」を入れる

ということが可能。

今回は、緑ベースで背景スタイルは「斜線」で作成します。

作り方手順

記事一覧（ID）の挿入

１．まずは「記事一覧（ID）」ブロックを挿入します。

新しい段落に「/記事一覧」と入力して記事一覧（ID）ブロックを呼び出します。

または「ブロックを追加（＋）」を押してブロック一覧から探す。

▼

２．ブロックの設定（右側）にある「記事ID」の欄に、挿入したい記事のIDを入力します。

ブロックをグループ化する

３．記事一覧（ID）ブロックを「グループ化」します。

４．「グループブロック」の設定にある「ボーダー設定」の「太め」を選択。

すると、以下の状態になります。

５．「記事一覧（ID）ブロック」を選択した状態でEnterをクリックすると、下に段落が追加されます。

そこに「参考」と文字を入力し、ブロックメニューのスタイルの「まるもじ」を選択。

そのまま段落を上へ移動します。

まるもじの装飾を変更する

６．まるもじを選択した状態で、設定の「色」を開き、テキスト色と背景色を選択。

さらに下へ行き、アイコン一覧から「メモ」を選択します。

すると、以下の状態になります。

背景スタイルを変更する

７．グループ化した枠線をクリックし、グループブロックのスタイルにある「斜線」を選択。

下へスクロールし、「色」を開いて背景色を選択する。

完成したブログカードをプレビュー画面で見ると、こんな感じになります。

もう少し「まるもじ」を下にい動かしたいな～という場合は、「ブロック下の余白」で調整してください。

※ブロック下の余白を「-小」にすると、こんな感じになります。

マイボックスを使用するタイプのブログカード風内部リンク

マイボックスを使用することで、

• ボーダーの太さや色を変える
• 背景色を変える
• 「まるもじ」や「ふきだし」を入れる
• アイコンを入れる
• 見出しを入れる

ということが自由自在にできます。

作り方手順

マイボックスのブロックを挿入する

１．まずはじめに、新しい段落に「/マイボックス」と入力して「STINGER：マイボックス」のブロックを呼び出します。

または「ブロックを追加（＋）」を押してブロック一覧から探す。

▼

２．タイトル設定の見出しに「ポイント」と入力されているので、これを削除します。

すると、見出しのない枠線だけのボックスになります。

まるもじを挿入する

３．ボックス内の段落を選択し、「参考」と入力。

その一段下に「記事一覧（ID）」を挿入する。

４．先ほどのグループ化タイプと同じ手順でまるもじを装飾します。

ボーダー設定を変更する

５．マイボックスをクリックし、ボーダー設定の「太さ（px）」を「1」に。「丸み（px）」を「0」に変更します。

すると、枠線が薄くなり丸みもなくなるので、角張った四角形になります。

背景色とまるもじの設定

６．あとは、マイボックスに背景色をつけるのと、まるもじのブロック下の余白を調整すれば完成です。

▼

まとめ

今回は、グループ化するタイプとマイボックスを使いタイプのブログカード風内部リンクの作り方をご紹介しました。

個人的には、グループ化よりもマイボックスを使うほうがバランスが良くて好きです。

AFFINGERの管理設定で「ドロップシャドウ」の追加をしておけば、枠線に影がつくので立体感も出ていい感じに目立たせることができますよ。

もっと目立たせたい！という場合は、アニメーションを付ける方法があります。

アニメーションの使い方については、以下の記事に詳しく書いているので参考にしてください。

こちらの記事もオススメです。