初心者ブロガー向け

リストとボックスを自分好みにデザインする方法【The Thor】×【Gutenberg】

この記事では

Gutengerg(グーテンベルグ)のブロックエディターで(クラシックブロックを使わずに)、リストやボックスのデザインを変更する方法

をご紹介します。

使用しているテーマは『The Thor(ザ・トール )』ですが、他のテーマでも使える方法だと思うので試してみてください。

 

トールはとてもいいテーマなのですが

  • リストのアイコンがダサい
  • リストの背景デザインを変えれない(角を丸くなど)
  • 自分好みのボックスができない
  • クラシックブロックだとボックスを使った編集がしにくい

といった点が個人的に不満だったので解決できるように試行錯誤しました。

クラシックエディターに切り替えて作成するという方法もありますが、できるだけブロックエディターで作りたかったという経緯があります。

編集にはHTMLとCSSを使いますが、すべてコピペのみでできるようにしてありますので初心者の方でも簡単に自分好みにデザインすることができます。

FontAwesomeを使って好みのリストを作成する

リストを作成する手順

  1. リスト用のHTMLを追加する
  2. アイコンを表示するCSSを追加する
  3. FontAwesomeで好みのアイコンを選ぶ
  4. 色や大きさを変更する

ワードプレスのエディターがグーテンベルグに変更になってから、リストはブロックエディター上で作成ができます。

でもトールのデフォルトのリストアイコンは

デザインがダサい‥‥

 

トールのデフォルトのリストはこんなのです。

 

そこで、『FontAwesome』というwedアイコンのフォントを表示できるサービスを使います。

 

FontAwesomeは登録不要なうえ、フリーで使えるアイコンが1500個以上もあるので好みのアイコンが見つかるはず!

 

アイコンの種類や色は自由に変更可能です。

❶リスト用のHTMLを追加する

まずはリストのアイコンを変更するための下準備としてHTMLを追加します。

 

ワードプレスにログインし、記事編集画面左の『外観▷カスタマイズ』でトールのカスタマイズ画面に切り替えます。

 

基本設定[THE]▷高度な設定』に進み、『■</head>直上の自由入力エリア』の書込み部分に

上記コードを追加します。

 

※この時のFontAwesomeのバージョンは5.11.2です。その時の最新のバージョンにお好みで書き換えてください。

ソースコードの[/v5.11.2/]の数字部分を直接入力し直すだけで大丈夫です。

これでFontAwesomeが使えるようになりました。

❷アイコンを表示するCSSを追加する

次にFontAwesomeのアイコンを使うためのCSSを追加します。

 

外観▷カスタマイズ▷追加CSS』まで進み、CSS入力欄に

上記コードを追加します。

 

リストのアイコンを確認すると

 

このように変わったはずです。

一度保存をする場合は『公開』を押して保存してくださいね。

❸FontAwesomeで好みのアイコンを選ぶ

 

自分好みのアイコンに変更する場合は、FontAwesome内のアイコンを選択し

 

アイコン上にあるユニコードをコピーします。

先程❷で『追加CSS』に追加したソースコードの

この部分に、コピーしたユニコードを貼り付けて保存すると変更されます。

プレビュー画面で確認しましょう。

❹色や大きさを変更する

アイコンの色を変更する

テーマにトールを使っている場合は

 

外観▷カスタマイズ▷パーツスタイル設定[THE]▷リスト設定(個別ページ用)

に進み、番号なしリストの『カラーAを指定』で好きな色を探してみてください

最後に『公開』を押して保存しましょう。

アイコンの大きさを変更する

アイコンの大きさはCSSコード内の

transform: scale(1)

という部分で設定されています。

『アイコンのサイズ』

と表記してあるのでわかりやすいかと。

[]の最後の数字を大きくしたり小さくしたりする事でアイコンのサイズが変わります。

0.5=0.5倍
1=1倍
2=2倍
3=3倍

といった感じになります。

実際の大きさです。

  1倍

  2倍

  3倍

  4倍

  5倍

リストに使えそうなアイコンのCSS(コピペ用)

使えそうなアイコンをいくつか抜粋しました。

リストアイコンとして使う場合はユニコードをコピーして書き換えてくださいね。

f152

f00c

f058

f192

f0a4

CSSを使ってボックスを作成する

ボックスを作成する手順

  1. ボックス用のCSSを追加する
  2. 好みのボックスを作成する
  3. 編集したいブロックを変更する

トールでボックスを使う場合、クラシックブロックに切り替えた後ボックスを選択する必要があります。

これがとても使い勝手が悪く、

編集がとてもしにくい。

特にスマホを使って記事を作成している時はかなりストレスになります。

ボックスもブロックエディタのままで使えるようにして編集を簡単にできるようにしました。

❶ボックス用のCSSを追加する

リストの時とは違い、HTMLは使わずCSSのみでボックスを作成します。

 

ワードプレスにログインし、記事編集画面左の『外観▷カスタマイズ』でトールのカスタマイズ画面に切り替えます。

カスタマイズ項目の一番下にある『追加CSS』に進みます。

そこに

このようなCSSコードを追加します。

※ここではクラス名を[box1]としていますが、ご自身がわかりやすいように書き換えてください。

これで下準備は完了です。

❷好みのボックスを作成する

上で追加したボックスのCSSはこのサイトでも使用している

シンプルな枠線と角を丸くしたボックス

このようなデザインになります。

 

文字、背景、線をそれぞれ好みの色に変えることができます。

角の丸みも変えれます。

カラーコードなどを参考に変更してください。

ボックスのデザインは他のサイトでも沢山紹介されていますし、CSSも表記されていると思うので、好みのものを抜粋してくださいね。

❸編集したいブロックを変更する

次に、ボックスを使いたいブロックを選択してから、画面右側の『高度な設定』をクリックします。

 

すると『追加CSSクラス』の下に入力欄があるので、そこに❶で追加したCSSの[box1]を入力します。

※[ ]はいりません。box1のみ入力です。

記事の編集画面上では何も変化がないのですが、上書き保存をした後にプレビューで見てみるとちゃんとボックスが作成されています。

ボックスはいくつでも作れるので、クラス名を

(例)box1、box2、box3‥‥

と変えて作っておいて、その都度使い分けるといいと思います。

リストとボックスを組み合わせて使う

今までに作成したリストとボックスを組み合わせて使うこともできます。

元々これがしたかったので超初心者ながらに試行錯誤していたわけで(笑)

作ったリストとボックスを組み合わせる

まずブロックエディターでリストを作成します。

  • 1つ目の項目
  • 2つ目の項目
  • 3つ目の項目

作成したブロックを選択した状態で、右側の『高度な設定』で

box1

とクラス名を入力すると

プレビュー画面で上のようなデザインのリストが完成しているはずです。

ちょー簡単!!

最後に

2019年12月時点ではクラシックエディターがまだ使えるので、プラグインなどで切り替えて記事編集をされている方も多いと思いますが、2021年末には廃止になります。

いずれはブロックエディターに移行するので、出来るだけブロックを使った方法で作りたかったのがきっかけです。

gutenbergでthorを使いたいと思って色々やってみた結果、こういうやり方をしています。

そのうちテーマ自体が対応してくれば必要なくなると思いますが(笑)

なにぶん超初心者なので同じような方向けですが、上級者の方でもっといい方法あるよ!という方がいらっしゃればご教示願いたいです。

 

-初心者ブロガー向け

© 2020 IKUJI homme