AFFINGER

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

2020年4月2日

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(アフィンガー)でスライドボックスの作り方をご紹介してきました。

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

 

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

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

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

おすすめ
AFFINGER5 初心者 徹底解説
有料テーマ「AFFINGER5」を初心者に向けて徹底解説する

続きを見る

 

当ブログではWordPressとAFFINGER5に特化した記事を書いています。

参考になれば幸いです。

 

お疲れさまでした。

-AFFINGER

© 2021 RYO'S NOTE