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

投稿日:2018年12月16日 更新日:

記事冒頭の『〜とは』のような、

「いろいろ注釈を追記したいけど文章が長くなるのでは・・・」

そんなとき便利なのが、普段は閉じていてクリックすると展開するスライドボックスです ( ・ㅂ・)و ̑̑

 

↓↓こんなん

+ワンストップ特例制度とは? (クリックで展開)

下記条件のサラリーマンの場合、確定申告なしでふるさと納税のお金を返してもらうことができます。

  • 年収が 2,000 万円以下
  • 年間のふるさと納税先自治体が 5 つまで

 

スライドボックスを活用すると、文字数を維持しつつもスッキリまとめることができるので利便性がグッと向上しますよ ( ・ㅂ・)و ̑̑

 

スライドボックスを作る

AFFINGER カスタマイズ

  • 「タグ」 > 「ボックスデザイン」 > 「スライドボックス」を選択する
  • スライドボックス作成用のコードが表示される

 

AFFINGER カスタマイズ

  • st-slidebox text="" にスライドボックスを閉じているときの文言を入力する
    ※例: st-slidebox text="+ワンストップ特例制度とは? (クリックで展開)"
  • bgcolor="" にスライドボックスの背景色を入力する
    ※例: bgcolor="#f2f2f2"
  • color="" にスライドボックスの文章の文字色を入力する
    ※例: color="#000"
  • margin_bottom="" にスライドボックスの余白を入力する
    ※例: margin_bottom="20"
  • [/st-slidebox]の手前にスライドボックス展開したときの文言を入力する
    ※例: 下記条件のサラリーマンの場合、確定申告なしでふるさと納税のお金を返してもらうことができます。

 

注意ポイント

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

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

 

AFFINGER カスタマイズ

AFFINGER カスタマイズ

  • スライドボックス完成 ( ・ㅂ・)و ̑̑

 

 



Copyright© てっぺのマネーハック.INFO , 2023 All Rights Reserved.