ブログ

【2020年版】ブロックエディターで簡単に装飾する方法を解説!

今回はブロックエディターで簡単に装飾する方法をお伝えしていきます!

この記事はこんな方へ
  • ボックスを付けたい!
  • おしゃれなリストにしたい!
  • 面白いボタンにしたい!
  • ボックスエディターわからん!!

クラシックエディターを使っていた人にはブロックエディター使いづらい!という声をよく聞きます。

私はクラシックエディターよりもボックスエディター使った方がとても楽に使えています!
(単純にクラシックエディターを使いこなせていなかっただけw)

クラシックエディターを使っていた人にもボックスエディターで簡単に装飾できる方法をお伝えしようと思います!

まずはCSSを使っていくのですが、こちらのサイトの装飾がとても便利なのでシェアしますね!

NOMAD CODE

今回は↑このボタンを作る方法をご紹介しながら装飾の方法をご説明していきます。

手順

  1. CSSをコピーする。
  2. カスタマイズ→追加CSSにペーストする。
  3. 段落の本文を書く。
  4. 段落→高度な設定→追加CSSクラス
    ここにCSSにペーストした”クラス”をペーストする。

この順番で設定していきます!

今回はボタンみたいなリンクを作っていきます。

CSSをコピーする

まずはイメージに近いボタンのCSSを探します。

見つけたらCSSをコピーします。

装飾CSSをコピー

カスタマイズ→追加CSSにペーストする。

ダッシュボード→外観→カスタマイズ→追加CSSを選択。

そこにコピーしたCSSをペーストして「公開する」をクリックします。
※「公開する」をクリックしないと
反映されなくて後悔することに・・・(寒)

装飾CSSペースト
コピーの画像のタグと違いますが^^;

半角で /**/ ところはコピーした時にはついていません。
メモとして使えますが、なくても大丈夫です。

段落の本文を書く。

通常の段落ボックスに内容を書き込みます。

今回はNOMAD CODEへのリンクボタンを作成しているので、

段落書き込み

と書きこんでリンクを設定します。(リンク設置の解説は割愛)

段落設定(追加CSSクラス)

画面右を下にスクロールして行って、
高度な設定→追加CSSクラスに
ここにCSSにペーストした「クラス」をペーストします。

追加CSSクラスをペースト
今回は「nomadBtn_deco2」を使っています。

クラスとは?

クラスとは?

プレビューで微調整

ここまでできてプレビューを押すといい感じにできていると思うのですが、
稀にサイズが変だったり、色を変えたいという場合には
プレビュー画面でカスタマイズ→追加CSSでタグを微調整します。

CSSタグは次のように構成されています。
(後半はないこともありますが)

.クラス名{
指定するところ:指示;
}

.クラス名 〇〇の時{
指定するところ:指示;
}

間違っていれば赤く表示がされるので、気をつけてみてみましょう。

調整できるところ

私がよく設定して微調整しているところはこちら。

max-width(最大の横幅)単位:px
color(文字の色)カラータグを使うと便利(カラーハント
background(背景の色)カラータグを使うと便利(カラーハント

また、ボックスなどを使っていて、
「文字の幅に合わせたいな」という時には
「display: inline-block;」を指定してあげると、
文字幅に合わせてくれるようになります。


以上が装飾の方法になります!
私が実際に使っている方法ですが、

  • うまく行った!
  • うまくいかなかった・・・。
  • こんな方法もあるよ!

などなどありましたら是非コメントをいただけると嬉しいです!

最後まで読んでいただきありがとうございました!

Mailmagazine
”step-by-step” 登録特典
WEBビジネス
START Book

初めてのWEBビジネスを
シンプルに解説

7Days
MailLesson

WEBビジネスを始める
1st step

1分に追われる毎日から
24時間を自由に
ともこ
ゆとりライフクリエイター

【スポンサードリンク】



COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

fourteen − 4 =