「Contact Form 7」を使ってお問い合わせページを簡単に設置しよう
この記事では、お問い合わせページを簡単に設置できるプラグイン「Contact Form 7」の設定方法について解説しています。
Contact Form 7をダウンロードする
それでは早速プラグインのダウンロードを行っていきましょう。
サイドメニューから［プラグイン］［新規追加］と進みます。画像には2箇所表示していますが、どちらから進んでも同じです。
そうするとプラグインのストア画面に進むので、左上の検索バーに［Contact Form 7］と打ち込み検索をかけます。
こちらのアイコンのプラグインが見つかったら、今すぐインストールをクリック。
インストールが完了したら、そのまま有効化もクリックしましょう。
Contact Form 7を設定する
［コンタクトフォーム1］を選んでクリックすると、お問い合わせフォームの設定を調整することができます。
フォームの項目を設定する
上に4種類メニューがあるかと思います。一つずつ見ていきましょう。
［フォーム］メニューからは、お問い合わせフォームに表示される項目の内容が設定できます。
- お名前
- メールアドレス
- 題名
- 本文
デフォルトではこちらの内容で設定されているかと思います。
この項目で実際にお問い合わせフォームを設置してみると、このような感じになります。
フォームの項目を増やす場合
［フォーム］メニューの上部に、URL日付などのボタンがありますね。
新しい項目を挿入したい場所をクリックしておいて、その後先ほどのボタンを選んで押します。そうすると項目を追加することができます。画像では「お名前」の下に「日付」を追加してみました。
実際にお問い合わせフォームを見てみると、このように項目が追加されています。
メールのテンプレートを設定
［メール］メニューでは、お問い合わせフォームから受け取るメールのテンプレートを設定できます。
自分のメールアドレスを確認したり変更したりする場合は、ここの［送信先］の項目で行います。
表示されるメッセージを設定
［メッセージ］メニューでは、お問い合わせメールを送信したユーザーに対して表示するメッセージを設定できます。
メッセージがちゃんと送信された場合や、失敗した場合、項目によっては未承諾を通知する場合に表示されます。
実際にメッセージを送ってみると、このようにメッセージが表示されるわけですね。
その他の設定
［その他の設定］ですが、ここではコードを打ち込んでフォームのカスタマイズを行うことができます。
会員制のサイトで、会員からのみメールが送れるようにするなどですね。詳しくはこちらでご確認ください。
設定後は保存を忘れずに
設定を終えたら、忘れずに左下の保存をクリックしておきましょう。これでフォームの設定は完了です。
お問い合わせフォームを設置しよう
設定を保存したら、Contact Form 7の最初の画面からコードをコピーします。
［コンタクトフォーム1］の右側にあるコードのことです。こちらをコピーしておきます。
お問い合わせページは固定ページで作成します。固定ページの新規追加をクリックしましょう。
新規投稿の画面に、先ほどのコードをペーストします。タイトルも「お問い合わせ」としておきましょう。完了したら、忘れずに公開を押しておきましょう。
これでお問い合わせページができました。
しかしこのままだと、お問い合わせページにアクセスするためのリンクがブログ内に存在していません。なのでページへのリンクを作成していきましょう。
ブログ内にリンクを作ろう
ユーザーがお問い合わせページへアクセスできるよう、目立つ位置にリンクを作成しましょう。今回はヘッダー部分に表示してみます。
サイドメニューから［外観］［メニュー］と進みます。
左側の［メニュー項目の追加］から固定ページを選び、先ほど作成したお問い合わせページにチェックを入れます。メニューに追加をクリックします。
［メニュー設定］では、メニューが表示される位置を調節できます。よく分からない場合は、画像のように上2つにチェックを入れておくと良いかと思います。
このように項目が増えていれば、メニューとして追加されています。忘れずにメニューを保存をクリックしておきましょう。
これでリンクも設置できました。
お問い合わせページのチェック
無事にお問い合わせページが作成できているはずなので、お問い合わせページへのアクセスとメール送信のチェックを行っておきます。
トップページに戻ると、右上に［お問い合わせ］のリンクができていますね。
リンクをクリックすると、こちらのお問い合わせページが表示されます。
必要事項を記入して、実際にメールを送ってみましょう。無事に送れた場合はメッセージが表示されます。
設定したメールアドレスにこのようなメールが届けばOKです。
まとめ
プラグイン「Contact Form 7」を使ってお問い合わせページを設置する手順を解説しました。
プラグインを利用すれば、こんなに簡単にお問い合わせページが設置できるのですね。
本格的にブログ運営を行っていく場合、お問い合わせページは必須と言えます。ぜひ利用してみてくださいね。
【配色】基本とおしゃれな組み合わせパターンを解説
配色とは色の組み合わせであり、この組み合わせにルールを設けることでデザイン全体を整えることができるようになります。
この記事では、それら配色のルールを解説していきます。
配色の基本
配色には基本的な考え方となるものがあります。
それが、統一感と変化です。
統一感とは？
統一感とは、色やトーン（彩度・明度の具合）を同じにしたり似通わせたりすること。
統一感を持たせることで、まとまりを感じる配色にすることができるのです。
変化とは？
変化とは、色やトーン（彩度・明度の具合）に対照性を持たせる配色のこと。
色相環で反対になる色や、彩度・明度の差が大きい色を使うことで、インパクトや目を引く強さを出すことができるのです。
アクセントカラー
配色において、他の色とは対照的な目立つ色のことをアクセントカラーと言います。
アクセントカラーはベースになっている色の反対色を使うのが一般的とされています。
デザインが単調であったり、シンプルすぎたりする場合に加えると、配色のポイントとなってくれるので全体の印象が強くなります。
画像のように、小さい面積で一部分だけに使うとより効果的に仕上がります。
サブ的な要素は色を薄めて馴染ませる
デザイン上そこまで重要ではない部分は、背景色に近づけるよう明度や彩度を調節しておくと、バランスよくまとまって見えます。
※画像は少し薄過ぎですが、かなり薄めても良いかと思います。
配色のパターン（色相編）
それでは、統一感と変化を使った配色のパターンを見ていきましょう。まずは色相を基準にしたものから。
同じ色みでまとめた配色
色相が同じ色を組み合わせた配色で、同一色相配色と言ったりします。
画像のように明度差を大きくとる配色（濃淡配色）はよく見ますね。綺麗にまとまるほか、同じ色相でまとめているので色のイメージがしっかり伝わるというメリットもあります。
画像は青でまとめた配色なので、「落ち着いた」「爽やか」といった色のイメージがより伝わってきますね。色のイメージについては、こちらで解説しています。
【色彩心理】色の心理効果まとめ
ブログのアイキャッチや挿絵の場合、背景色と文字に明度差を付けるだけでも綺麗にまとめることができます。
隣の色でまとめた配色
色相環などで隣り合った色を組み合わせた配色で、カマイユ配色と言ったりします。
色相・明度・彩度の差をほとんどなくして、一見すると一色に見える微妙な配色です。強いまとまり感を出したい時に有効。この場合、テキストの色は白か黒にしておくと良いでしょう。
似た色でまとめた配色
色相が似ている色（青と水色、青と紫など）を組み合わせた配色で、類似色相配色と言ったりします。
まとまり感を出しながら、色の変化が楽しめる配色です。画像のように、文字の色も配色に合わせるとより整った印象になります。
別の色を使った配色
色相が異なる色（青と緑、濃い紫とピンクなど）を組み合わせた配色で、中差色相配色と言ったりします。
色相が若干近い色を使うとまとまりが、離れた色を使うとインパクトが出てきます。異なる色を使う場合でも、だいたい2色に抑え、背景と図で配色を分けると馴染んで見えます。
この配色を上手に使っているのが「ピュレグミ」ですね。
アクセントカラーを使った配色
色相が対照的な色同士を組み合わせた配色で、ビコロール配色と言ったりします。
アクセントカラーを使った配色は、高彩度色で行うとより派手で強い印象になりますね。
配色のパターン（トーン編）
続いてトーン（明度や彩度）を基準にした配色を見ていきましょう。
同じトーンでまとめた配色
トーンが同じ色同士でまとめた配色で、同一（どういつ）トーン配色と言ったりします。
彩度・明度の差が小さい配色なので、たくさんの色を使ってもまとまり感が出ます。またトーンのもつイメージを強く出せるのもポイント。
近いトーンでまとめた配色
トーンが近い色同士でまとめた配色で、類似トーン配色と言ったりします。
明度や彩度に若干の差をつけた配色で、トーンのイメージが近いのでまとまりが感じられます。画像は近い色相にしていますが、異なる色相でもうまくまとまります。
対照のトーンでまとめた配色
トーンが対照の色同士でまとめた配色で、対照トーン配色と言ったりします。
明度や彩度の差を大きくした配色で、コントラスト感を出すことができます。「明度を対照的にする」「彩度を対照的にする」のどちらかで配色するのが良いでしょう。
まとめ
色相とトーンによる配色のルールを抑えると、まとまりやインパクトを与えることができるのですね。
「この配色をしたのは、こういう理由があって…」と説明する際にも、こういったルールを知っておくと良いかもしれません。
【色彩心理】色の心理効果まとめ
色は、見た人にさまざまな効果を与える特性を持っています。
「暖かい」
「冷たい」
「落ち着いている」
「元気だ」
などありますね。この記事ではそういった色の特性について解説していきます。
色の心理効果にはどんなものがある？
- 熱い・危険などのイメージ
- 暖かい・冷たい
- 硬い・柔らかい
- 重い・軽い
例えば赤を見て暖かいように感じたり、反対に青を見て寒く感じたり。色は、見る人に対して様々な心理効果を与える性質を持っています。
色のイメージ
参考書やデザイン関連の本を参考に、一般的に言われている色のイメージをいくつか集めてみました。
明度や彩度を調節するとイメージはまた違ってきますが、人は色に対してさまざまなイメージを持っているのですね。
色の寒暖感
色を見た時に感じる「暖かい・冷たい」といった温度の感覚は、色の寒暖感と呼ばれています。
暖かいと感じる色を暖色、冷たいと感じる色を寒色、暖かくも冷たくもない色を中性色と言います。
色相別に寒暖の度合いをグラフで表してみると、このような感じになります。無彩色を除けばオレンジが最も暖かく、濃い青が最も冷たいのですね。
彩度と暖かさ
これらの色は色相によって区別されますが、暖色でも彩度を低くすれば暖かい印象が弱くなります。
興奮と沈静
暖色系の赤から黄色にかけての色で、鮮やかな色味のものは、見ていると興奮感を与えるとされています。
赤・オレンジ・ピンク・黄色などですね。こういった色でも、彩度を低くすると興奮感は弱まるとされています。
火を見ていると「なんだかテンション上がってきた！！」という気分になるのは、こういった効果があるからなのですね。
一方で寒色系の色で、彩度が低いものは、沈静効果があるとされています。
青・薄い水色・薄い紫などですね。鎮静剤などのパッケージに青が多いのもこのためです。
夜に青い街灯がつくのはこの効果を期待して、と聞いたことがあります。
色の進出と後退感
同じ距離にある色でも、色によって近くに見えたり遠くに見えたりする性質があります。
近くに見える色を進出色、遠くに見える色を後退色と言います。
グラフで見るとこんな感じです。一般的に赤、オレンジ、黄色系は近くに見え、青系は遠くに見えるように感じられます。
明度と進出感
色の進出感には明度が深く関わってきます。図だと左側の中央は飛び出して見え、右側の中央は奥まって見えますね。低明度色よりも高明度色の方が、より近くにあるように感じられます。
色の硬軟感
色が対象の硬さに影響を及ぼす性質を硬軟感と言います。
硬軟感にも明度が深く関わってきます。一般的に明度が高い色ほど柔らかな印象を与え、明度が低い色ほど硬い印象を与えると言われています。黒だと特に硬く感じられるわけですね。
色の軽重感
同じものでも色によって軽そうに見えたり、重そうに見えたりする性質を軽重感と言います。
軽重感にも明度が深く関わってきます。一般的に明度が高い色ほど軽そうに見え、明度が低い色ほど重そうに見えてしまいます。
宅配便などで白の段ボールが使われているのは、運ぶ際の心理的な負担を減らすためなのですね。
色のバランス感覚
また画像の左図のように、明度の低い色を下に、明度の高い色を上に配置すると、軽重感からバランスよい印象を与えます。
色の派手さ・地味さ
ファッションへの評価でよく使われる「派手・地味」ですが、一般的に彩度が高い色は派手な印象を、彩度が低い色は地味な印象を与えます。
暖色系の色でも彩度を低くすれば派手さが軽減され、青や緑といった寒色系の色でも彩度を上げれば一気に派手な印象になります。
彩度を調節してみると？
もう少し、彩度を調節した印象の違いを見てみましょう。
カフェなどで使われそうなバナーですね。左が彩度を薄くしたもの、右が彩度を上げたものです。受ける印象がガラッと変わりますね。
右は「現在大人気の〇〇カフェ！」という感じで、若者やビジネスマンから支持を得そうなイメージですね。
反対に左は、落ち着いた店内を思い浮かべ、リラックスできそうなカフェのイメージです。
まとめ
色が与えるさまざまな心理効果について解説しました。
色のイメージはもちろん、明度や彩度を調節するだけで色が与える印象はガラッと変わってくるのですね。
配色の際には、こういった効果も参考にするとグッと良いものに仕上がるかもしれません。
色彩とは？デザインのための色の基本と視覚効果について
色彩とは色のことであり、そこから彩りや色合いのことを指しても使われます。
この記事では、色の基本である「色相」「明度」「彩度」の3つの属性と、それらの視覚効果について解説していきます。
色彩とは？
先ほども述べたとおり、色彩とは色のことであり、そこから彩りや色合いを指しても使われます。
色彩豊かな〜などと表現する場合は、色がいっぱい使ってあって彩りが上手であるという意味になります。
色の三属性
色には色相・明度・彩度という3つの属性があります。
3つの属性を掛け合わせることで、たくさんの色が表現できているわけですね。
色相
たくさんある色をグループ分けした時に、青系や赤系など基本となる色のことを『色相』と言います。
赤系のピンク、青みがかった黒などと表現することがありますが、これらの大元になる色ですね。
色相環
色相を輪っか状に繋いだものを色相環と言います。カラーパレットは馴染みがありますね。
色相環で向かい合う2色を補色と言い、アクセントカラーと呼ばれる強調色も補色を使うのが一般的です。
明度
「色の明るさ」のことを明度と言います。明るい色を高明度、中間を中明度、暗い色を低明度と言います。
例えば珊瑚色とワインレッドでは、色相は同じ赤色なのですがそれぞれ色の明るさが違います。
明るさを変えることで、同じ色相の色でも印象が変わってくるわけですね。
カラーパレットで見ると分かりやすいですが、色相を白に寄せていくと高明度に、黒に寄せていくと低明度になります。
グレイスケール
最も高い明度である白と最も低い明度である黒を両端に置き、その間に明度順に灰色を配置したものをグレイスケールと言います。
グレイスケールを参考に、赤や青といった色の明度を図ることができます。
自分でどんな配色にするか決めるときは、明度を調節しながらこのように並べてみると良いでしょう。
彩度
「色の鮮やかさ」のことを彩度と言います。
「鮮やかってどんな感じ？」という人は、色のクッキリ具合・色の主張の強さと言えばイメージしやすいかと思います。
彩度の最も低い色は無彩色（黒、白、灰色）と呼ばれます。そのため彩度とは、もとの色に無彩色を混ぜていくことで調整できる度合いとされています。
画像のようなカラーピッカーでは、左下に寄せていくことで彩度の低い色へ調整することができます。
反対に一番右上に持っていけば、彩度の高い色にすることができます。
色を三属性で表してみると？
それでは実際に、3つの属性を使って色を表現してみましょう。
明度を高く・彩度を低くすると、より薄らとふわっとした印象になります。明度を低く・彩度を高〜中にすると、少し重めで落ち着いた印象になります。
同じ色相でも、明度や彩度を調整することで印象を変えられるわけですね。
色の視覚効果
ここからは配色にまつわる視覚効果について解説していきます。
補色残像
実験画像の左側にある青い星の中心の黒い点を20秒程見続けます。その後、右側の黒い点に視線を移すと……
このように有彩色（鮮やかな色）を見つめ続けたあとに、白や灰色の空間に目を移すと残像が見えるようになります。
ブログなどで背景色に鮮やかな色を使ってしまうと、このように目の負担に繋がるわけですね。白や灰色（たまに黒）を基調にすることで、目に優しい記事になるのですね。
色の対比
時間や空間上近くに配置された2色の差が強調される現象を、色の対比と言います。
先ほど解説した三属性によって、色相対比・明度対比・彩度対比の3種類が見られます。
明度対比
同じ色の図でも、背景の明度によって見え方が変わってくることを明度対比と言います。
背景と図の明度（明るさ）に差がある場合、背景が明るいと図はより暗く、背景が暗いと図はより明るく見えてしまいます。
色相対比
明度と同じように、色相が異なる色を組み合わせた場合に、背景の色相によって図の見え方が変わる現象を色相対比と言います。
一般的に背景の上に乗る図の面積が大きいほど、対比の効果は高くなると言われています。
彩度対比
明度、色相と同じように、彩度が異なる色を組み合わせた場合に、背景の彩度によって図の見え方が変わる現象を彩度対比と言います。
背景の彩度が低いとより鮮やかに、背景の彩度が高い（鮮やかだ）とよりくすんで見えてしまいます。
補色による対比
背景と図が補色の関係にある場合、図はより鮮やかに見えます。
「鮮やかな赤」と「鮮やかな緑」という補色を鮮やか同士で組んでしまうと、境界がチカチカするハレーションが起こることがあります。これは見ている人の目の負担になってしまいます。
鮮やか×鮮やかで組ませるのは、できれば避けたいところですね。
まとめ
色の3つの属性を理解しておけば、配色の際にどこをどう調節すれば良いかが分かるようになるはずです。
視覚効果についてはあまり使う機会はないかもしれませんが、こういう風に見えるのだなと知っておくだけでもためになるのではと思います。
WordPressの画像サイズの自動生成を停止する手順
WordPressでは、画像をアップロードした際に複数の画像サイズを自動生成するように設定されています。
この記事では、自動生成についてと停止する手順や生成された画像の削除について解説しています。
「なんのこと？」という人にも分かりやすいよう解説していきます。
画像サイズの自動生成とは？
WordPressでは記事に画像を挿入する際に、複数の画像サイズを選択できるようになっていますね。
サムネイル、中サイズ、大サイズなど選んだサイズに応じて、記事中で表示される画像サイズを変更することができます。
実はこれらのサイズの画像は、アップロードした際にWordPress側で自動で作成（複製）されているものなのです。
まだイメージしづらいかもしれませんね。Wordpessの画像の仕組みについて、もう少し詳しく見ていきましょう。
Wordpressの画像サイズの仕組み
例として中サイズ・大サイズの画像を見てみましょう。
2つの画像をデスクトップへドラッグ&ドロップで保存してみるとわかりますが、名前の後ろに計算式が付いているはずです。
そしてもちろん、画像の大きさ（◯KB）も異なっています。
つまりWordPressで扱う画像は、それぞれのサイズごとに、オリジナル画像から複製されてサーバーに保存されているのです。
画像は挿入時にリサイズされているわけではない
記事に挿入する画像サイズに応じて、サーバーからそれぞれのサイズの画像を持ってきているという仕組みなわけですね。
「挿入時に画像をリサイズしてくれているのだろう」と思いがちですが、実は同じ見た目の違うサイズの画像を使っているということなのです。
生成された画像はどうやって確認できる？
サーバーに保存された画像はFTPソフトを利用してチェックすることができます。
［ブログ名］［public_html］［wp-content］［uploads］と進み、その中の年数のファイルに保存されているはずです。
確かに、1枚の画像をWordPressにアップロードしただけなのに、別サイズの6種類の画像が作成・保存されていますね。
自動生成のデメリット
これらの画像サイズは、何も設定していなければアップロードするすべての画像に対して作成されます。
そのため画像を大量に使うブログなどは、サーバー容量の圧迫に繋がってしまいます。
たくさん記事を書いてからだと管理が大変になるので、なるべく早めに設定を変更しておくのがオススメです。
画像の自動生成を停止する手順
それでは自動生成を停止する手順について解説していきます。
この記事では初心者の方でも出来るよう、［メディア］の設定を変更する方法を解説していきます。
PHPファイルを修正する方法もありますが、ファイルを直接編集できる中級者向けなので今回は割愛します。そちらに関してはの記事が参考になります。
WordPress：画像アップロード時の自動生成をすべて停止する方法（Ver 5.3対応）-NxWorld
自動生成されるサイズ
- サムネイル 150×150
- 中サイズ 300×300
- 大サイズ 1024×1024
- スマホ用 768×768
WordPress側で自動生成されている画像サイズは、これら4種類になります。
上の3つは挿入時のオプションにあるので分かりやすいですが、実はスマホ用のサイズも生成されているので注意しましょう。
これら以外のサイズに関しては、導入しているテーマ側で設定されているものになります。テーマのデザインに関わっているものになるので、変更はしないようにしましょう。
メディア設定から停止する
サムネイル・中サイズ・大サイズに関しては、WordPressの設定から変更できます。
WordPressのメニューから［設定］［メディア］と進みます。
こちらの設定画面から自動生成を停止したいサイズの幅と高さを0に変更しましょう。終わったら変更を保存するのを忘れずに。
今回はすべてのサイズを停止したので、フルサイズとテーマオリジナルのサイズのみ作成されるようになりました。
スマホ用のサイズを停止する
スマホ用の画像サイズの停止は、少し特殊な方法になります。
まずはWordPressにログインします。
WordPressの管理画面のアドレスバーに、https://example.com/wp-admin/options.phpと入力します。exampleのところは、自身のドメインに合わせて変更してください。
そうするとすべての設定のページにアクセスできるかと思います。このページから
medium_large_size_wの項目を探しましょう。
見つかったら入力されている値を0に変更します。これでスマホ用のサイズが生成されなくなりました。
ちなみにこれらの変更は、変更後にアップロードした画像から適応されるようになります。
すでに作成された画像を削除する手順
ここからはすでに作成されている画像に対して、それらを削除する手順を解説していきます。
FTPソフトとプラグインを利用する方法の2種類を解説します。
記事に使用している画像サイズを削除してしまった場合に備えて、broken-link-checkerプラグインをダウンロードしておくのがオススメです。
FTPソフトを利用する
FTPソフトとは、サーバーに保管されたファイルを直接編集できるソフトのことです。
こちらを使ってサーバーに保存されている画像データを直接削除していきます。この記事では、Cyberduckというソフトを使っています。
注意
使用している画像まで削除してしまうと大変なので、行う前には画像ファイルだけバックアップを取っておきましょう。バックアップは、FTPソフトからPCのデスクトップ画面へ、ファイルをドラッグ&ドロップすればOKです。
Cyberduckを立ち上げて、ブログ名が記載されているアイコンをクリックします。
［ブログ名］［public_html］［wp-content］［uploads］と進みます。
uploadsファイルの中に、2019などの年数だけのファイルがあると思います。アップロードした画像は、年別にそれらのファイルにすべてまとめてあるので、順に削除していきましょう。
削除する画像は、テーマやご自分の使用している画像サイズに応じて調整してください。
左クリックで選択したら、右クリックでメニューを表示して削除を選択します。
プラグインを利用する
FTPソフトはよく分からないという方は、プラグインを利用して削除しましょう。この記事では、DNUIというプラグインを利用していきます。
※最終更新日から4年ほど経過しているのでエラー等起きる可能性があります。
有効化すると、管理画面の［ツール］の中に［DNUI〜］というメニューが増えているはずなので、こちらをクリックしましょう。
全部英語ですが、書かれている内容は注意事項や有料版の紹介などです。こちらのページの上部メニューから［images］をクリックします。
そうするとサーバーに保存されている画像が一覧で表示されます。
Not usedと書かれているものは、記事に使用されていない画像になります。またDeleteをクリックすると画像を削除、Delete allで一括削除することができます。
ただし、一括削除するとテーマオリジナルのサイズも削除してしまうのでオススメしません。
基本的にはすでに作成されてしまったサムネイル（150）・大サイズ（1024）・中サイズ（300）・スマホ（768）を削除していくのが良いでしょう。
まとめ
画像の自動生成と、停止・削除について解説しました。
不要な画像まで保存されているのは無駄に思えますが、簡単にサイズを変えられるのは便利です。
- 自身のブログで利用するサイズだけ設定しておくこと
- 定期的に不要な画像を削除すること
WordPressの画像管理では、この2つを意識しておくのが良いですね。
