ブログあれこれ

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

マイボックスの使い方
LIM
LIM
こんにちわ!LIMです!

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

僕のプロフィール

・名前:LIM
・職業:会社員
・経歴:大卒/会社員歴10年以上
・好きな事:読書/歌う/ゲーム/ジョギング/筋トレ/韻を踏む
・最近興味あること:ブログ/副業/瞑想/マインドフルネス系

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

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

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

こんな方におすすめ

  • WordPressテーマにAFFINGER5を使っている方
  • ブログ初心者
  • 記事の文章の囲み込み(マイボックス)の方法が知りたい方

 

 

マイボックスを作る方法(基本)

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

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

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

マイボックスのボタン

 

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

マイボックスボタンからのコード

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

囲みたい文字

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

 

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

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

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

参考

少しだけ手の込んだ囲み

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

ポイント

少しだけ手の込んだ囲み

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

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

タグのプルダウン

 

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

マイボックス選択方法

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

参考マイボックスコード

 

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

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

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

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

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

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

参考

マイボックスのカスタマイズ

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

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

マイボックスタイトル変更

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

マイボックスタイトル1

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

マイボックスタイトル変更

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

まとめ

マイボックスのカスタマイズ

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

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

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

マイボックスアイコン

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

マイボックスコードのアイコン

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

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

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

カーソル合わせてタグをクリック

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

補助コードからビックリマークアイコンまで選択

 

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

注意アイコンコードの挿入

これで下記のようにアイコンがビックリマークに変更されました。

アイコン変更結果

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

 

3. マイボックスの枠線を付ける(太さを変更する)方法

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

まとめ

マイボックスのカスタマイズ

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

枠線の太さを「1」に変更

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

まとめ

マイボックスのカスタマイズ

 

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

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

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

まとめ

マイボックスのカスタマイズ

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

丸みコード

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

まとめ

マイボックスのカスタマイズ

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

まとめ

マイボックスのカスタマイズ

 

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

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

まとめ

マイボックスのカスタマイズ

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

マイボックスの色の変更

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

bordercolor="○○" → 枠線の色

bgcolor="○○" → 背景の色

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

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

まとめ

マイボックスのカスタマイズ

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

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

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

マイボックスコードまとめ

st-mybox title="〇〇" →タイトル

fontawesome="○○" →アイコン ※タグ→ショートコード補助→Webアイコン(クラス)

borderwidth="○" → 枠線の太さ ※数字が大きい程線が太くなる(0は枠線無し)

borderradius="○" → 枠線の丸み ※数字が大きい程丸みを帯びる(0は四角)

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

bordercolor="○○" → 枠線の色

bgcolor="○○" → 背景の色

-ブログあれこれ

© 2022 リムブログ Powered by AFFINGER5