【AFFINGER5】マイボックスで改行できない時の対策を解説！

AFFINGER5でマイボックスを使ってるけど改行できない。

 

改行する方法を知りたい。

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

AFFINGER5のテーマには欠かせない機能、「マイボックス」。

そんなマイボックスですが「改行できない」という欠点があります。

そこで今回は、マイボックスで改行する方法について解説していきますので、ぜひ最後までご覧ください！

マイボックスの機能について

まずは、マイボックス機能について見ておきましょう。

投稿ページから [タグ] → [ボックスデザイン] → [マイボックス] の手順で作成できます。

ショートカットに表示されてる [マイボックス] を押しても作成可能です。

その場合、下に表示してる3つ目のボックスが作成されます。

ちなみに、「マイボックスの基本」を選択すると次のようなコードが表示されます。

 html
[st-mybox title="マイボックス" fontawesome="fa-check-circle" color="#757575" bordercolor="#BDBDBD" bgcolor="#ffffff" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
マイボックスの基本
[/st-mybox]

※右にスライドできます

「bordercolor」や「bgcolor」の値を変更すると、枠の色や背景色を自分好みにカスタマイズできるので、ぜひチャレンジしてみてください！

カラーコードは、カラーコード一覧表を参照するのがおすすめです。

ぜひ活用してみてください！

マイボックスで改行できない状況とは

では「マイボックスで改行できない」とは、どうゆう状況なのか実際に見ていきましょう。

例として今回は、投稿ページのショートカットボタンからマイボックスを作成します。

投稿ページ

上記手順でマイボックスのコードが表示されたら、コード内に文章を入力していきます。

入力できたら、どのように表示されるか画面右上の「プレビュー」ボタンから確認します。

表示ページ

投稿ページでは改行したにも関わらず、表示ページでは改行されていません。

続いて、改行させる方法を紹介していきます！

マイボックスで改行する方法について

上記で解説した通り、投稿ページでマイボックス内の文字を改行しても、表示ページでは改行されていないという事象が起きてます。

改行する方法は難しくないので、ぜひ参考にしてみてください。

それでは見ていきましょう！

まず、投稿ページのショートカットボタンから「マイボックス」をクリックします。

するとマイボックスのコードが自動で入力されます。

自動で表示されたコードの中に文章を入力し、文の間に「改行」と入力して文字色を変更します。

次に、背景色のカラーコードをコピーします。

 html
[st-mybox title="" fontawesome="" color="#757575" bordercolor="#f3f3f3" bgcolor="#f3f3f3" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
ここに文章を入力します。
改行
ここに文章を入力します。
[/st-mybox]

現時点で上記のようなコードが表示されていると思いますので、「bgcolor=" "」内に設定されているコードをコピーします。

ここでは「#f3f3f3」ですね。

カラーコードをコピーできたら、画面右上の「テキスト」ボタンを押してテキストモードに切り替えます。

 html
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>[st-mybox title="" fontawesome="" color="#757575" bordercolor="#f3f3f3" bgcolor="#f3f3f3" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]</p>
<p>ここに文章を入力します。</p>
<p><span style="color: #f3f3f3;">改行</span></p>
<p>ここに文章を入力します。</p>
<p>[/st-mybox]</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

テキストモードでは上記のようにコードが表示されます。

先ほどコピーしたカラーコードを上記の赤色のところに貼り付けます。

これで設定は完了です。

画面右上の「ビジュアル」ボタンを押して表示モードを戻しましょう！

すると、「改行」の文字が目立たなくなってるハズです。

画面右上の「プレビュー」ボタンを押して、どのように表示されるか確認してみましょう！

上図の通り「改行」の文字が完全に消えて、改行されてます。

実際には「改行」という文字は記載されてますが、背景色と同色にすることで改行されてるように見えるわけです。

マイボックスで改行できない時の対処法：まとめ

ここまで、マイボックスで改行できない時の対処法について紹介してきました。

かなり細かい設定ですが、対処法を検索しても出てこなかったのでこの記事を書いてみました。

はじめにも言いましたが、本記事の内容はWordPressの有料テーマ「AFFINGER5」を使用していることが前提なのでご注意ください。

AFFINGER5のカスタマイズ方法については他の記事でも紹介してますので、ぜひ参考にしてみてください！

収益アップを目指したい方には、こちらの記事がおすすめです。