当サイトは第三者配信の広告サービス(アフィリエイト広告、アドセンス広告)を利用しています。

WordPressブログ!SWELLでエディター(カラー)設定をする方法【画像付】

アイキャッチ|ぽつぽつLife

ブログ作成するときに、こだわりたいのはデザインでだと思います。ほとんどの人が、デザインを考えていくうえで1番に決めるのがカラーだと思います。カラーによって受けるイメージや心理的影響は大きく、人の感覚や感情にうったえるうで大切な役割をはたします。

この記事では、デザインを決める上でこだわるカラーについて、SWELLおこなうカラー設定について解説していきます。

この記事でわかること

  • SWELLテーマでの見出し・ボタン・マーカーなどの色を設定する方法がわかる
  • エディターで設定した内容がどのように表示されるかわかる
  • よく使う書式を2つ設定することができる
目次

SWELLでできる8つのエディター設定

SWELL設定で下の8つをカラー設定できます。Wordpressの設定画面の『SWELL設定画面➡エディター設定』から設定います。

  • カラーセット
  • ボーダーセット
  • マーカー
  • ボタン
  • アイコンボックス
  • ふきだし
  • カスタム書式
  • その他

基本のカラーパレット設定

投稿ページのテキストカラーを変更したいときに表示されるカラーパレットにセットされます。

SWELL設定|エディター設定カラーパレット設定
SWELL設定|エディター設定カラーパレット設定

リスト設定

ブログ記事に変化をあたえるリストもアイコン別に色を設定することができます。伝えたい内容によって使い分けすることで効率の良い記事をかくことができます。また、伝えたいイメージに合わせたカラー設定をすることで読者に読みやすいブログになります。

SWELL設定|リスト設定
SWELL設定|リスト設定

キャプションブロック設定

ブログ記事の途中で、特に注目をひくキャプションブロック設定も3種類設定をしておくことができます。イメージに合わせた使い分けをカラーでしておくと便利です。

SWELL設定|キャプションブロック設定
SWELL設定|キャプションブロック設定

Q&A設定

Q&Aのアイコンもたくさんの組み合わせをすることができますが、1カラーのみカスタムカラーを設定することができます。

SWELL設定|Q&A
SWELL設定|Q&A

テーブル設定

ブログ記事の中で、表の背景に〇×△などを設定する機能が基本設定されているSWELLです。この機能はとても人気の機能で、ブロガーのみなさんが利用されています。その中で、アイコンカラーの色を変更することができるので他のブログサイトと少し変化を加えることができます。

SWELL設定|テーブル設定・アイコンカラー
SWELL設定|テーブル設定・アイコンカラー
ぽつりん

アイコンのサイズをかえることができるのも魅力の一つですね。

ボーダーセットの登録

ボーダーセットは、メインカラーとグレー、グレー、カスタムカラーの中から選べます。

SWELL設定|ボーダーセット
SWELL設定|ボーダーセット

マーカー設定

テキストへのマーカーの色を4色設定することができます。4色設定ののち、マーカーの種類や選の太さを選ぶことができます。

SWELL設定|マーカー
SWELL設定|マーカー
ぽつりん

色によってテキストが見えにくくなるので使い方に注意してくださいね。

SWELLボタンの設定

公式サイトや詳細ページへ誘導するボタンの色も3色設定することができます。また、ボタンの丸みを変えたり変化を加えられるのも楽しい機能となります。

SWELL設定|ボタン
SWELL設定|ボタン

アイコンボックス(小)

ブログをとても見やすくしてくれるアイコンボックスも6種類もあり、ブロガーにとってかゆいところの手がとどく機能となっています。アイコンのイメージにあわせた自分色にそめるのも楽しみの一つです。

SWELL設定|アイコンボックス(小)
SWELL設定|アイコンボックス(小)

アイコンボックス(大)

アイコンボックス(大)も6種類あり、こちらもカラーを変えることができます。

SWELL設定|アイコンボックス(大)
SWELL設定|アイコンボックス(大)

ふきだし

吹き出しのからも背景と枠線をかえることができます。話したりするアイコンごとに色分けをしておくと使いやすくなります。

SWELL設定|ふきだし
SWELL設定|ふきだし

カスタム書式

サイトイメージに合わせて、よく使う書式をカスタム書式セットとして2種類セットすることができます。この設定をしておくと、例えば太文字にマーカーを設定したい場合の工程は2工程ありますが、1工程で終わらせることができます。ものすごく効率の良い機能となります。

SWELL設定|カスタム書式セット
SWELL設定|カスタム書式セット

カスタム書式用CSS

アラフォーブログ初心者はCSSなんてわかりません。まったく使用していませんが、問題なく使用できています。もし、今後使うことがあり理解できましたら、情報を共有したいと思います。

SWELL設定|カスタム書式用CSS

ブログカード

こちらも頻繁に使う機能です。また、内部ブログカードなのか外部ブログカードなのか2種類設定することができるのは嬉しい機能となります。

SWELL設定|ブログカード
SWELL設定|ブログカード

引用

著作権の侵害をしないように引用を利用することがあるかと思います。その時に引用スタイルを使えることは大変便利です。こちらは2つのスタイルから選ぶことができます。

SWELL設定|引用
SWELL設定|引用

【参考】引用を使用する時の5ルール

  • 引用部分が明示されていること
  • 引用元が明示されていること
  • 自分の著作部分と引用部分の主従関係が明確であること
  • 他人の著作物を引用する必然性があること
  • 引用部分を改変していないこと

代表カラーのイメージ力

カラーイメージ
白系清楚、純白、空虚、軽い、ふわふわ
黒系高級、重厚、暗い
赤系情熱的、アクティブ、生命力、メラメラ
青系平和、冷たい、孤独
黄色系注意、嫉妬、明朗、強調
オレンジ系朗らか、カジュアル、暖かい、
ピンク系やさしさ、かわいらしさ、感謝、恋
緑系調和、平穏、さわやか、安らぎ
紫系女性的、神秘、妖艶
ゴールド系知性、豪華、キラキラ
カラーイメージ図

まとめ

ブログ記事を書きつつめていくと、どうしてもブログデザインがきになってきます。自分の好きなサイトデザインにしたいにこたえてくれる、SWELLのエディター設定機能をご紹介しました。後からの変更も可能なので、自分の気に入るサイトイメージになるまで繰り返し操作してみてくださいね。

人気ブログに参加しています!

人気ブログランキングでフォロー

★投稿の励みになりますので是非フォローお願いします★

アイキャッチ|ぽつぽつLife

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次