リストをボックスで囲みたい,ボックスの作り方。ワードプレスならHTML不要!

ワードプレス入力画面 ワードプレスCocoon

ボックス風のリストとは

例えばこのような感じのものです。この他にもボタン1つで色々なボックスを呼び出すことができます。CSSもHTMLも使いません。

  • ワードプレスにお引越しを考えている方!
  • Xサーバーからなら簡単DL!!

さらにこのようなことまでボタンで簡単にできてしまいます!

  1. ワードプレスにお引越しを考えている方!
  2. Xサーバーからなら簡単DL!!

エディタはGutenberg、テーマはCocoon

こちらはWordpress5.0の新エディタGutenberg(グーテンベルグ)を使用しての記事の書き方になります。 テーマはCocoonを使っています。

ワードプレスではないという方!ワードプレスを使用するとCSSもHTMLも使わずにボタン1つで簡単に何種類ものボックス風のリストを作ることができます。

ワードプレス自体は無料ですが、エックスサーバー からであれば簡単にアップロードができるのでおすすめですよ。

それでは具体的にご説明していきます。

ボックスの作成方法

投稿画面左上のをクリックします。

ワードプレスCocoon投稿画面

下の方に行くと『Cocoonブロック』が見つかると思います。そこをクリックします。

ワードプレスCocoon投稿画面

するといろいろなボックスのアイコンが出てきます。基本的にはこちらをクリックすればそれで終わりです。

実際のボックスがどのようなものかこれからご紹介していきます。

案内ボックス

1行目

2行目

付箋風ボックス

1行目

2行目

アイコンボックス

1行目

2行目

白抜きボックス

1行目

2行目

タブボックス

1行目

2行目

アイコンリスト

  • 1行目
  • 2行目

ざっとこのようなボックスがいとも簡単に作れます。

リストも入れられる!

例えば先ほど出てきた『タブボックス』に『リスト』を追加してみると

  • 1行目
  • 2行目

このようになります。違いがお分かりになりますか?

先ほどのただのタブボックスはこちらです。

1行目

2行目

ボックスにリストを入れる方法

タブボックスを出した状態でをクリックします。

『リスト』を選択します。

するとボックスの中にリストを入れることができました!

もちろん番号付きのリストも作成できます。

  1. ボックス風リスト
  2. グーテンベルグエディタならとにかく簡単!
  3. 参考になったら嬉しいです。

こんな感じになります。

枠と背景の色の変え方

  1. タブボックスに
  2. リストを入れました
  3. 枠の色は紺
  4. 背景色は薄ピンク
  5. 文字色はキーカラーにしました

呼び出したボックスが選択された状態で右側の『ブロック』を見てみると『色指定』が見つかると思います。

『色指定』を開くと枠や背景、文字の色を変更することができます。

現在選択中の色は下のようにチェック✓が入るのでわかりやすいです。

さいごに

ほかにもWordpressの使い方を記事にしています。よかったらご覧くださいね。

ワードプレス・auPAY etc.しずくログトップ
shiizuku(しずく)ブログトップページへようこそ!2020年版Wordpressコクーンの各種設定方法やお気に入り商品のレビュー、旭川観光情報などを詳し~く発信しています。
タイトルとURLをコピーしました