この記事では
ワードプレスでブログを始めたものの、ボックスの使い方すらわからず苦労した経験をもとに詳しく解説します。
ボックスのような基本的な装飾は使う機会が多いので、しっかりと身に着けておけば記事を書くスピードも上がります。
ボックスもブログでは大事な要素ですが、それ以上に大切な「ASP登録」は済んでいますか？
まだASPに登録していない方はすでに損をしているかもしれないので早めの登録がおすすめ。
詳しくはおすすめのASPと登録方法で解説しています。
【THE THOR】ブロックエディタ(Gutenberg)でのボックスの使い方
THE THORではワンクリックで10種類のボックスを作ることができます。
初期設定の10種類のボックス
ボックスを作るには、編集画面で
- 左上の⊕をクリック
- フォーマットの中の
- クラシックを選択
すると、クラシックエディタが表示されるので、
- スタイル
- ボックス
- 使いたいボックスを選択
下のようなボックスが表示されましたか？
ボックスが表示されたら、あとは文字を入力するだけですね。
ちなみに、ボックスの中で改行したいときは、Shift＋Enterです。
Enterだけだとボックスの外に改行されるので注意。
ここにあるボックス以外を使いたい方は、HTML編集で柄や囲み線を変更できます。
※初心者でも編集できる方法は後ほど解説。
また、WordPressのパーツスタイル設定から、HTMLコードを変えておけば、ワンクリックでお気に入りのボックスを使うこともできます。
※こちらも後ほど解説。
デフォルトボックス
シンプルなボックスが好みの方は
- スタイル
- デフォルトパーツ
- ボックスをクリック
私はこのシンプルなボックスが使いたかったのに、上のボックスにばかり目が行ってて、デフォルトボックスを見つけるのに5分くらいかかりましたw
ボックスの作り方(カスタマイズ方法)
自分好みのおしゃれなボックスを作ることもできます。
上の方で少し触れたように、HTML編集で色や柄や囲み線を変えることもできるのですが、ここではもう少し簡単に編集する方法をお伝えしたいと思います。
文字を選択しておかないとボックスの編集ができません。
・スタイルセット
・ボーダー系
・オール破線(中)
を選択すると、ボックスの外側が破線で囲まれます。
・スタイルセット
・シャドウ系
・ボックス内(ダーク)
を選択すると、ボックスの内側に影がつきます。
・スタイルセット
・角丸系
・ラウンド
を選択すると、ボックスの角が丸くなりましたね。
・カラーセット
・背景色
・スカイ
を選択すると、ボックスの背景に色がつきます。
・カラーセット
・ボーダー色
・ヴィヴィッドトーン
・レッド
を選択すると、ボックスを囲んでる破線に色がつきます。
絶妙にダサいボックスが完成しましたw
このように、
- ボックスに囲み線や影をつけたり、
- 角を丸くするなど形を変えたり、
- 背景の色や柄を変えたり、
- 文字の色やサイズを変えたり
することができます。
他にもいろいろ自分でためしてみて、おしゃれなボックスを作りましょう^^
装飾デザインが好きな人はテンションが上がって記事を書くのがはかどるかもしれませんね。
作ったボックスを保存する方法
苦労して作ったボックスは、ワンクリックで作れるように設定しておきましょう。
作ったボックスを設定する手順
- ボックスのコードをコピー
- ボックス設定に貼り付け
たったこれだけです。
詳しく解説します。
ボックスのコードをコピー
下のシンプルなボックスを設定してみます。
まずはボックスをHTML表示します。
表示されたコードの「””」で囲まれた赤字の部分をコピーします。
<div class="ep-box brc-black bgc-white es-BiconCorner es-Bicon es-borderSolidS es-radiusL">シンプルボックス</div>
次に、ボックス設定を開きます。
ボックス設定に貼り付け
外観 → カスタマイズ → パーツスタイル設定 → ボックス設定
から初期設定のボックスを編集することができます。
変更したいボックスの「■スタイル」に貼り付けます。
クリックしやすいように1番下の「ボックス10の設定」に貼り付けて、分かりやすいように「■タイトル」も変更しました。
「公開」をクリックすれば完了です。
投稿ページでボックスが作れるか確認してみてください^^
ボックスの中にリスト(箇条書き)を入れる方法
次はボックスの中にリストを入れようと思ったら…
- あれ？
- なぜかボックスの中にリストが入ってくれない…
普通に改行したら↑のようになるし
- シフトで改行したら
リストにならないし - なぜだー！
と困っていたのですが、結論は
- 使いたいボックスを作る
- 作ったボックスとは別のブロックでリストを作る
- リストをコピー
- ボックスの中にペースト
という感じで別々に作ってコピペするだけでした。
HTML編集でボックスの中にリストを入れることもできるのですが、コピペするだけの方が楽なのでおすすめです。
まとめ
- 初期設定のボックスが10種類ある
- シンプルなデフォルトボックスもある
- 自分好みのおしゃれなボックスが作れる
- WordPress設定でコードを変えておけば作ったボックスが簡単に使える
- ボックス内にリストを入れたいなら、別々に作ってからコピペ
たかがボックス「使えたら何でもいいや」とか「面倒なのでボックスなんか使わない」なんて方もいるかもしれません。
ですが、それが読者にとって最高の記事になるでしょうか？
読者が読みやすい記事になるように装飾をして、気持ちよく読んでもらえるように頑張りましょう。
最後に。
記事を書くことも重要ですが、「稼ぐ」ためにブログを書いているなら収益化の方法を考える方が大事です。
まずはASPに登録して「どんな案件があるか見てみる」、「セルフバックで稼ぐ体験をしてみる」のをおすすめします。
詳しくは【審査なし】未成年におすすめのASPと登録方法【アフィリエイト】をご覧ください。
ワードプレスの有料テーマTHE THORのサイトマップの設定方法を解説します。 サイトマップには HTMLサイトマップ XMLサイトマップ という2種類のサイトマップがあります。 HTMLサ[…]