【AFFINGER5】スライドボックスの作り方

女性

・「＋」で閉じたり開いたりできるような記事を見つけたんだけどどうやるの？

こんな悩みにお答えします。

記事内に『〜とは』のような、

「いろいろと注釈を追加したいけど、記事が長くなることを避けたい・・・」

そんなとき便利なのが、普段は閉じていてクリックすると展開する「スライドボックス」

こんなやつです

+ クリックしたらいいことあるよ (クリックで展開)

RYO'S NOTEへようこそ！！

スライドボックスを活用すると、文字数を維持しつつもスッキリまとめることができるので見た目もスッキリする上に、

読み手に合わせた記事になるのでとても良いですよ！

AFFINGER5（アフィンガー）でスライドボックスを作る

タグ> ボックスデザイン> スライドボックスを選択

スライドボックス作成用のコードが表示される

コードは以下

st-slidebox fontawesome="" text="+ クリックして下さい" bgcolor="" color="#1a1a1a" margin_bottom="20"

/st-slidebox　（［］は削除してます）

導入するのはAFFINGER5だとかなり簡単だと思います。

ポイント

st-slidebox text="" にスライドボックスを閉じているときの文言を入力する
※例: st-slidebox text="クリックしたら良いことあるよ (クリックで展開)"

bgcolor="" にスライドボックスの背景色を入力する
※例: bgcolor="#e6e6fa"

color="" にスライドボックスの文章の文字色を入力する
※例: color="#1a1a1a"

margin_bottom="" にスライドボックスの余白を入力する
※例: margin_bottom="20"

[/st-slidebox]の手前にスライドボックス展開したときの文言を入力する
※例: RYO'S NOTEへようこそ！！

作成にあたって注意ポイントは以下の通りです。

注意ポイント

「bgcolor」「color」「margin_bottom」は全てを埋めてください。

いずれかが空の場合、スライドボックスがうまく表示されません。
※余白なし、背景白のデザインになってしまう

以上、AFFINGER5（アフィンガー）でスライドボックスの作り方をご紹介してきました。

記事をすっきりさせるのにかなり重要でかつ、利便性の高いものになっています。

AFFINGER5にはスライドボックスのような、

執筆を楽に楽しくさせてくれる機能が多いです。

購入を検討されている方はこちらの記事も参考に是非。