ブログ

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

2021-02-27

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

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

 

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

 

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

 

本記事の内容

  • マイボックスの機能について
  • マイボックスで改行できない状況とは
  • マイボックスで改行する方法について

 

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

 

誰でも簡単に作成できて、文章を見やすくしてくれる装飾機能です。

 

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

 

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

 

本記事の内容は、WordPressの有料テーマ「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」の値を変更すると、枠の色や背景色を自分好みにカスタマイズできるので、ぜひチャレンジしてみてください!

 

 

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

 

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

 

 

 

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

 

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

 

ショートカットボタンからマイボックスを作成する

 

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

 

 

投稿ページ

投稿ページで改行する

 

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

 

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

 

 

表示ページ

表示ページで改行されていない

 

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

 

私も色々と調べましたが、結局原因はわかりませんでした。。

改行

AFFINGER5はそうゆう仕様だと受け止めるしかないですね。。

 

 

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

 

 

 

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

 

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

 

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

仕様変更ではなく、あくまで暫定対処なのでご理解ください

 

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

 

ショートカットボタンからマイボックスを作成する

 

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

 

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

 

マイボックスで改行する

 

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

 

  • 文字は、1行に収まれば何を書いてもOKです
  • 色も、後で変更するので何色でもOKです

 

 

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

 

 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>

 

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

 

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

 

 

これで設定は完了です。

 

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

 

ビジュアルモードで表示する

 

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

 

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

 

表示ページで改行されてる

 

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

 

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

 

 

 

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

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

 

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

 

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

 

 

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

 

 

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

 

こちらもCHECK

AFFINGER5のアフィリエイトリンクを取得できるASPを紹介!【ブログ初心者】
AFFINGER5購入前に要確認!カスタマイズできることや注意点を解説します!

続きを見る

 

 

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

 

こちらもCHECK

AFFINGER5で「Amazon」や「楽天」の商品リンクを作成する方法【Rinker】
AFFINGER5で「Amazon」や「楽天」の商品リンクを作成する方法【Rinker】

続きを見る

 

 

 

 

-ブログ

© 2021 しゅんぼーBLOG Powered by AFFINGER5