こんにちは、ななです。
こんな方のためにボックスデザインの挿入方法と、カスタマイズ方法をご紹介します。
私も最初はカスタマイズせずに使っていましたが、カスタマイズしたデザインを使うことでブログをより見やすく作れるようになってきました。
ボックスデザインを上手く使うことで、ブログはとても見やすくなります。
見やすいブログは離脱率を減らすので、ぜひボックスデザインを上手く活用していきましょう。
こんな方におすすめ
- AFFIGERでのボックスデザインの挿入方法が知りたい人
- ボックスデザインのカスタマイズ方法が知りたい人
AFFINGERのボックスデザインの挿入方法
矢印のところをクリックします。
クラシック版の段落をクリック。
タグ → ボックスデザイン
あとは好きなボックスデザインを選ぶだけで挿入できます。
クラシック版の段落が出てこない人は、プラグイン『Classic Editor』をインストールして有効化してください。
ボックスのカスタマイズ方法
コードの説明をしながらカスタマイズ方法を解説していきます。
コードと聞いて
と思った方、大丈夫です！
簡単に分かりやすくご説明します。
覚えてしまうと簡単なので、ぜひ覚えていってくださいね。
ボックスのコードの見方
このボックスを例に解説します。
ポイント
このボックスはサンプルです
このボックスを挿入すると、こんなコードが出てくると思います。
このコードのそれぞれの見方は、
|
title＝"●●●" |
"●●●"に入れた文字がタイトルになる(ポイントの部分) |
|
webicon＝"●●●" |
今チェックマークになっている部分 |
|
color＝"●●●" |
"●●●"に入力した色がタイトルとアイコンの色になる |
|
border color＝"●●●" |
"●●●"の色が枠線の色になる |
|
bg color＝"●●●" |
"●●●"の色がボックス内の背景色になる |
|
borderwidth＝"●●●" |
"●●●"の数字がボックスの枠線の太さになる |
|
borderradius＝"●●●" |
"●●●"で囲み枠の丸みを変えれる(数字が大きいほど丸くなる) |
|
title widget＝"●●●" |
"●●●"でタイトルを太文字にできる(boldだと太文字、空欄だと通常) |
| fontsize="" | タイトルの文字の大きさを％で変更できる(細かい大きさ変更が可能) |
| myclass="" |
記述した要素をグループ化させる。基本的に触らなくてOK |
| margin="" | ボックス外側の余白を指定できる(上、右、下、左の順で変更可能) |
こうなっています。
もちろん、これ全部を覚える必要はありません。
・title
・ color
・bordercolor
・bgcolor
この4つを覚えておけば充分です。
カラーコードは、AFFINGERはよく使われる色が何色かショートコードになっています。
タグ → ショートコード補助 → HTMLカラーコード
これで何色かは出すことができます。
ここにない色にしたい場合は、カラーコード表を見て入力してください。
カラーコード表 https://www.colordic.org/
では、試しに先ほどのポイントボックスをカスタマイズしていきます。
ボックスのコードでのカスタマイズ方法
先ほどのポイントのボックスを
・color="#FFC107"
・bordercolor="#FFC107"
・borderwidth="4"
・borderradius="5"
このように設定を変えます。
これが
ポイント
このボックスはサンプルです
こうなりました
ポイント
このボックスはサンプルです
どうですか？
全然見え方が変わりますよね。
基本的なコードの見方と、ボックスデザインの変更方法はこんな感じです。
何回か使っていくとすぐに覚えられると思います。
まとめ:ボックスをカスタマイズして、見やすいブログを作りましょう！
ボックスをカスタマイズすると
ボックスで囲った部分を見てもらいやすくなる
ボックスの色を変えることでブログが見やすくなる
読者にポイントになる部分を伝えやすい
こんなメリットがあります。
ブログは記事の内容が1番大事です。
しかし、記事を見やすくレイアウトするのも読んでくれた人のために大事だと思います。
最初にも書きましたが、見やすいブログは離脱率を減らすこともできます。
ぜひ、今回紹介したボックスのカスタマイズ方法を活用して、一緒に見やすいブログを作っていきましょう。
それではここまで読んでいただきありがとうございました。
