このサイトはアフィリエイト広告を利用しています。

広告 AFFINGER 記事作成

【AFFINGER】スライドボックスを作り、枠で囲む作り方を紹介

2020年5月18日

 

 

むろ
記事をスッキリしたいなどのカスタマイズはスライドボックスを使おう‼️

 

 

悩む男性
「いろいろと注意書きしたら、文章が長くなるのでは⁉️読みづらいかな…」 

 

 

 

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

むろ
今回、初心者でも使えるようにマニュアルを作りました。この記事を読んでもらえればAFFINGER5の使い方がよくわかります。【最新版2021年】AFFINGER5の使い方とインストール方法、補足マニュアルと不具合の修正を紹介本ブログの人気記事です。

 

 

 

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

 

 

 

こういうの

⬇️

 

 

 

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

 

 

『AFFINGER5』公式サイトです

最強のブログテーマAFFINGER

>>WPテーマ 「WING(AFFINGER5)」多くのブロガーに愛されているテーマ

  • 「もっと美しく、簡単に。」基本デザインパターンも48種!

無駄な時間はとことん省く、通常なら知識が必要な時間かかるカスタマイズもAFFINGERならクリック1つ

記事がサクサク書ける!豊富で自由度の高いデザインパーツ

記事作成に欠かせない様々な装飾をクリック1つで設定できる

 

 

むろ
正直ブログはやってほぼ損はないので、少しでも興味があるなら気軽にトライしてみるといいですよ。今回は迷っている方の背中をそっと押せたらなと思っています。

それでは、内容にいきましょう!

ちなみにブログは実践が大事。なのでブログをまだお持ちでない方はこちらからサクッと10分で開設をどうぞ。今だけお得なキャンペーンもあるので、この機会にお得に始めましょう。

>>たった10分WordPressでブログの始め方を42枚の画像を使って解説【初心者向けブログの作り方】

WordPressブログ開設の流れを42枚の画像を使って解説【初心者向けブログの作り方】

続きを見る

\当サイトおすすめのWordPressテーマ「AFFINGER6」/

>>AFFINGER6を公式サイトから導入する

 

 

AFFINGER、スライドボックスを作る

 

step
1
 「タグ」 > 「ボックスデザイン」 > 「スライドボックス」を選択する

 

 

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

 

step
2
スライドボックスをしかくボックスで囲む

 

ボックスデザイン>マイボックス>しかく(枠のみ)

 

 

  • しかくボックスの中にスライドボックスを入れます。

 

step
3
完成はこちら

 

 

 

  • st-slidebox text="" にスライドボックスを閉じているときの文言を入力する
    ※例: st-slidebox text="+アフィンガーのスライドボックスの使い方"
  • bgcolor="" にスライドボックスの背景色を入力する
    ※例: bgcolor="#f2f2f2"
  • color="" にスライドボックスの文章の文字色を入力する
    ※例: color="#000"
  • margin_bottom="" にスライドボックスの余白を入力する
    ※例: margin_bottom="20"
  • [/st-slidebox]の手前にスライドボックス展開したときの文言を入力する
    ※例スライドボックスは+を押すと細かな詳細が表示でき文字数を減らすことができる
  • スライドボックスを作る1
  • スライドボックスを作る2

 

これで完成‼️

 

注意

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

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

 

これでスライドボックスは作れますね!

 

むろ
今回、初心者でも使えるようにマニュアルを作りました。この記事を読んでもらえればAFFINGER5の使い方がよくわかります。【最新版2021年】AFFINGER5の使い方とインストール方法、補足マニュアルと不具合の修正を紹介本ブログの人気記事です。

 

 

AFFINGERのスライドボックス 使い方はVODジャンルの映画ネタバレを隠すことに最適な機能

 

私はこの、スライドボックスを映画のネタバレなどで使っています。

 

かなりの人がこのスライドボックス をクリックしてネタバレを読んでくれていますので良い機能ですね( ´ ▽ ` )

 

 

ここで使っています。完成形です。

>>Hulu「THE HEAD」第1話、南極での密室殺人と謎のメモ

 

こんな感じに仕上がりました( ^ω^ )

 

 

 

 

こん感じでアレンジできます。

 

 

まとめ

 

AFFINGERスライドボックスの作り方をアレンジ方法を説明しました。

 

このスライドボックス機能AFFINGERでも結構使います。他のブロガーもよく使っている機能なのでアレンジ次第でアフィリエイトでも大活躍するので使ってみてください

 

『AFFINGER5』公式サイトです

最強のブログテーマAFFINGER5

>>WPテーマ 「WING(AFFINGER5)」多くのブロガーに愛されているテーマ

  • 「もっと美しく、簡単に。」基本デザインパターンも48種!

無駄な時間はとことん省く、通常なら知識が必要な時間かかるカスタマイズもAFFINGERならクリック1つ

記事がサクサク書ける!豊富で自由度の高いデザインパーツ

記事作成に欠かせない様々な装飾をクリック1つで設定できる

 

 

 

 コチラも読まれています

>>【AFFINGER5】ブログのトップページをカスタマイズするやり方

>>【AFFINGER5】スライドボックスを作り、枠で囲む作り方

>>【AFFINGER5】バナーリンクの作り方、ブログはオシャレになる【バナーリンク】

 

 

 

-AFFINGER 記事作成
-, , ,