初心者でも簡単なブログ文章や箇条書を囲む方法（WordPressテーマにAFFINGER5利用している方向け）

LIM

こんにちわ！LIMです！

今日も「なんか役に立つブログ」書いていきます！

ブログ記事の文章や箇条書きを枠線や色で囲むのってどうやるんだろう？

今日はそんな疑問にお答えします。

記事を書いていると、ポイントやまとめ部分を付け足した方が読者にとってもわかりやすくなります。ここでは、AFFINGER5を利用している方向けに、記事のポイントやまとめ文章の囲みの方法や、囲いの色や形ををワードプレス上で自由にカスタマイズしていく方法をご紹介します。応用すれば目次などにも使えるとても便利な機能ですので初心者の方は是非実践してみてください。

マイボックスを作る方法（基本）

では早速、マイボックスを使って文章を囲い込む基本的な方法をお伝えします。まずは一番簡単でシンプルな方法です。

１. ただただとりあえず囲む方法

①下記の用に「マイボックス」ボタンを押します。

②するとコードが挿入されるので、下記のようにコードの空白の行に囲みたい文字を入力します。

するとこういう囲みが出来上がります。↓（仕上がりの色はAFFINGERの外観設定によります。）

とりあえず囲むだけでもいいっていう時に超簡単で便利なボタンです。

２. あらかじめ用意されている少し手の込んだマイボックスを使う方法

続いて、上記よりも少し手の込んだ囲みを作る方法です。AFFINGER５には下記のように、簡単に場面に合ったマイボックスを使えるように、いくつかパターンが用意されていますのでその使い方を説明します。

• 「参考」風マイボックス↓

• 「ポイント」風マイボックス↓

ここでは試しに「参考」風マイボックスを作ってみましょう。

①まず、下記のようにタグのプルダウンをクリックします。

②続いて、下記のように「ボックスデザイン」→「マイボックス」→「参考」の順に選んでいきましょう。

すると、下記のように「参考」マイボックスのコードが貼り着きます。コードの空白の行に囲いたい文字を入れれば完成です！

他のパターンも同様に「タグ」→「ボックスデザイン」→「マイボックス」から選択していくことで利用できますので活用していきましょう。

マイボックスをカスタマイズする方法

基本のパターンは使えるようになりましたね。ただもっと自分でマイボックスをカスタマイズしたい！っていう人向けにマイボックスのコードの仕組みと簡単な編集方法を説明します。これが使いこなせればマイボックスについては一通り使えるようになっていると思いますので頑張ってください！

では早速、編集したい内容別に説明していきます。

試しに先ほど例として使ったマイボックスを元に内容を変更していきましょう。

• 「参考」風マイボックス↓

１. マイボックスのタイトルを変更する方法

マイボックスの「タイトル」の編集方法です。ここの部分の変更ですね。↓では早速説明します。

まずは、コードを見ていきましょう。先ほど貼ったコードがこちらです。

この中で、冒頭の「st-mybox title="参考"」という部分。ここがタイトルです。つまり、タイトルを編集したければ「st-mybox title="〇〇"」の○○の部分に好きな文字を入れれば良いです。試しに下記のように「参考」から「まとめ」に変えてみましょう。

すると、下記のようにタイトルが「参考」から「まとめ」に変わります。↓

これでタイトル変更完了です。

２. マイボックスのアイコンを変更する方法

次に、マイボックスの「アイコン」を変えてみましょう。ここの部分の変更ですね。↓

では同じようにコードを見てみましょう。

アイコンを指定しているのは「fontawesome="fa-file-text-o"」という部分です。つまり、「fontawesome="○○"」の〇〇を変更すればアイコンを変えることができます。ここで、〇〇の部分に好きなアイコンを入れる方法を下記で説明します。ここでは例としてアイコンをに変更してみましょう。

①まず、「fontawesome="○○"」の〇〇を消して、「fontawesome=""」の状態にします。

②消したら、下記のように消した部分にカーソルを合わせて、「タグ」をクリックします。

③続いて、下記のように「</>ショートコード補助」→「Webアイコン（クラス）」→「注意」を選択します。

④すると、下記のようにカーソルを合わせていたところに「fa-exclamation-circle」のアイコンコードが挿入されます。

これで下記のようにアイコンがに変更されました。

以上でアイコン変更は完了です。

３. マイボックスの枠線を付ける（太さを変更する）方法

それでは次に、マイボックスの「枠線」を設定してみましょう。まず、先ほど作ったマイボックスは下記のように枠線が入っていません。↓

枠線の太さは、コードの「borderwidth="0"」という部分ですが太さが「0」、つまり枠線無しになっていますので下記のように「borderwidth="1"」に変更してください。

すると下記のように枠線が出来上がります。↓太さは数字を変えて調整してください。

４. マイボックスの枠線を四角くする・または丸みを出す方法

それでは次に、マイボックスの「枠線」丸みを出したり四角くする方法をお伝えします。

現状は以下の通り角が少し丸みを帯びています。角の丸みはborderradius="5" の部分です。この値が大きければ大きい程丸みを帯びる仕組みです。

では、試しにborderradius="10"に設定してもっと丸みをつけてみましょう。

すると下記のように丸みが強くなったのがわかります。↓

逆にborderradius="0"にすると下記のように完全に四角にすることもできます。 ↓

５. マイボックスのタイトル文字、背景、枠線の色を変更する方法

形を整えたら最後にタイトル文字やマイボックスの背景、枠線の色を好きな色に変更する方法を説明します。今回は例として、下記のマイボックスの色をグレーベースから水色ベースの色へ変更していきます。

色変更のコードは下記のようになっています。

color="○○"　→　タイトル文字の色

bordercolor="○○"　→　枠線の色

bgcolor="○○"　→　背景の色

それぞれ、〇〇の部分に色コードを当てはめて変更します。>>色のコードはこちらから

今回はタイトルを枠線を濃い水色で合わせ、背景を淡い水色で設定してみました。

これで色の変更についても完了です。

以上でマイボックスのカスタマイズ方法についても終了です。

最後に、今回作ったマイボックスでカスマイズの仕方をまとめておきます。