女子向けカスタマイズ

ブログを美しく魅せるポイント&WordPressカスタマイズまとめ

こんにちは、紺野恵実です。
デザインが素敵なブログやホームページを見るとワクワクしちゃいます♡

「ブログをおしゃれにしたい!…けど、何をどうしたらいいの?」という方に向けて、ブログデザインで気をつけること、カスタマイズの実例をご紹介しますね😄

1. ブログをおしゃれに見せるためにデザインのコンセプトを決める

デザインのコンセプト

私はホームページを作るときには、まずデザインのコンセプトを決めます。

ブログを組み立てながら、その都度デザインを決めると、チグハグな印象になってしまうんですよね。
デザインのコンセプトがあって、それにもとづく要素が揃っているだけで、ブログの世界観がぐっと引き締まると思います✨

1-1. デザインのコンセプト

デザインのコンセプトとは、ブログの世界観を表すキーワードです。

例えば、このサイトのコンセプトは「水彩の森」です。
森っぽくするために、ロゴを木にしたり、水彩画の葉っぱのモチーフを入れています。

ちなみに、コンセプトの理由は、緑が育っていく様子がブログの成長とリンクするかも?という思いつきです。それから、私は手描きっぽい雰囲気が好きなので、水彩をコンセプトに入れました。

ぜひ、あなたが好きなもの、心ときめくものをリストアップして、コンセプトにしてみてください✨

お仕事用のホームページだと、お客様に親しまれるコンセプトを決めるといいと思います。

1-2. カラー

色がまとまっていると、ブログに統一感が出てきます。また、どういう時にどの色を使うかルールを決めていると見る人にもわかりやすいです。
デザインコンセプト(カラー)

  1. テーマカラー ・・・ 一番よく使う。サイトの雰囲気を示す
  2. アクセントカラー ・・・ ちょこっと差し色として使う
  3. ベースカラー ・・・ 余白や背景に使う

テーマカラーは、一番よく使う色。タイトルや文字色にしたり、いろんなところで使います。文字にしても読みやすい濃い色がおすすめです。
アクセントカラーは注目をひきたい場所に使う色です。リンク色や強調文などに使ってみてください。
ベースカラーは背景に使う色です。基本は背景白のサイトがおおいと思うので、ワンポイントで背景色を変えるとメリハリが出ます。

私のサイトでは「森」がコンセプトなので、メインカラーが緑。
アクセントカラーは木の幹であるブラウン。記事の中で、お花をイメージしたサーモンピンクもちょっと入れています。
そして、ベースカラーは柔らかいベージュにしています。

coolorsというサービスを使って、配色を決めていきます。

coolors
色をクリックすると、類似色や濃淡を調整できます。

豆知識 WEBで使う色について
RGBと呼ばれる6文字のアルファベットで色を表します。頭にシャープがついています(例えば、#FFFFFFは白をしめすコードです。)

色をゼロから探す/決めるのは大変なので、とっかかりとして、プロが選んでくれてる色を使ってしまうのも手です!
色見本から、好きなイメージを選んでいきましょう。

また、 気になるサイトで使われている色を表示してくれるサービスもあります。
Web Site Color Picker | Webサイトで使われている”色”を抽出、分析します♪

1-3. フォント

フォントが変わると、ブログの印象が大きく変わります。
フォントを選ぶ

フォントは大きく3種類あります。

  • 丸ゴシック・・・柔らかい女性向けの雰囲気になります。
  • ゴシック体・・・オールマイティに使えるベーシックなフォント。文章が読みやすく、誠実な印象を与えます。
  • 明朝体・・・格式高い雰囲気が出ます

私は、地の文とワンポイント用に2種類使っています。
地の文 → 記事の文章、見出しのタイトルは「游ゴシック」「Avenir Next」 ※
ワンポイント → サイドバーのタイトルには手描きっぽい英文フォント「Satify」をGoogle Fontからダウンロードしています。

※地の文では、「WordPressブログ」など英語と日本語がまざる可能性があります。混ざった時に違和感が少ないことも大事なポイントです♪

フォントを選べるテーマもありますので、お使いのテーマを確認してみてくださいね。
(CSSの知識があれば自分で設定することもできます💖)

1-4. モチーフ

デザインコンセプト(モチーフ)

モチーフは、コンセプトを印象付ける図形やイラストです。
いろいろな場面のアクセントとして使います。

  • ロゴに使う
  • 見出しやカテゴリーを飾る
  • 背景画像に入れる

例えば、女性向けメディアなどでは、宝石や王冠マークを見出しに入れていたりします。女子のハートを掴むアクセントだなと思います^^
シンプルなものの方がいろんなところに使えます💖

アイコン付きの見出しサンプル

ブログの世界観を決めるデザインのおさらい

デザインコンセプトを元に、カラー、フォント、モチーフが決まっていると、統一感のあるサイトを作れます。
当サイトを例にすると、こんな感じになります。
デザインコンセプト

2. ブログをおしゃれに!カスタマイズ実例

ここからは先ほど決めたデザインのコンセプトを取り入れて、ブログをカスタマイズしていきます。

WordPressユーザー向けに話しています。そのほかのブログサービスの方は使えそうなところだけ、斜め読みしてください。

2-1. シンプル&おしゃれなデザインのテーマを選ぶ

レイアウトや余白など、見やすいなと思うテーマを好みの
私は、メニューやカテゴリーに装飾が少ないシンプルな白ベースのテーマがカスタマイズしやすくて好きです。

ちなみに、海外製のテーマは英文用に作られています。日本語の文章だと「あれ?思ったよりおしゃれじゃない?」イメージと違うことがあるので、ご注意くださいね。

2-2. ページの色を揃える

外観>カスタマイズから色を指定します。(テーマによっては、外観からカスタマイズできない場合もあります。その時は、CSSを変更していきましょう。)

テーマカラー リンク、見出しの色に
アクセントカラー 強調したい文字色、飾り枠に
ベースカラー 飾り枠の背景に

また、ブログで最も目にする投稿記事の色も揃えましょう。
見出し、引用文、枠線を変えるだけでも、記事が見やすく、印象に残りやすくなります。

2-3. フォントを変える

地の文のフォント

地の文のフォントはbodyに設定します。


body{
   font-family: "Avenir Next", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color:#5d5d5d;
}

フォントが複数並んでいるのは、ユーザーが使っている端末によって、入っているフォントが異なるためです。
ここでは、「Avenir Next」という英文フォントを使っていますが、もし、表示端末にそのフォントがなければ、次の「游ゴシック」で文字が表示されるようになります。(前から並んでいる順に優先的に使用されます。)

私は、地の文の文字色には、濃いめのグレーを使っています。
真っ黒よりも、柔らかく読みやすい印象を受けるので^^

この辺の設定は細かいので、詳しく知りたい方は「font-familyの書き方まとめ:CSSでフォント種類を指定しよう | サルワカ」をどうぞ。

ワンポイントでフォントを使う

プロフィールやカテゴリーなどはアクセントとして特徴のあるフォントを選んでもいいでしょう。
ここではGoogle Fontを使ったフォントの設定方法をご紹介します。

Google fontから使いたいフォントを選びます。

利用したいフォントの右上の「+」をクリックします。
googlefontを選ぶ①

右下に出てきた黒いバーの右の「-」をクリックします。
googlefontを選ぶ②

googlefontを選ぶ③

@importの部分が、フォントをインストールするためのコードです。


@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');

WordPressで使う場合には、style.cssに直接書き込みます。
外観>テーマの編集からstyle.cssを開いて更新してくださいね。

下の段に書いてあるfont-family: 'Roboto Slab', serif;はフォントを使いたい場所のタグ、クラスに設定します。


/* 見出し(h2)で使う場合 */
h2{
    font-family: 'Roboto Slab', serif;
    /* フォントのサイズや行の高さも一緒に調整しましょう。 */
}
豆知識
エックスサーバーを使っている方は、モリサワフォントを使えます。日本語の種類が豊富なので、よかったら使って見てくださいね。
Webフォント機能について | レンタルサーバー【エックスサーバー】
Webフォント機能について

2-4. モチーフを取り入れる

ロゴとして設定する

外観>カスタマイズ>ヘッダー画像から設定できます。
ロゴ画像をヘッダーに設定する

アイコンとして見出しに入れる

シンプルなモチーフはアイコンにして入れるのもおすすめです。

ここでは、WebアイコンFont Awesomeを使ったアイコンの飾り付け方法をご紹介します。

下準備として、functions.phpに以下のコードを記述してください。


add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
     wp_enqueue_style( 'load-fa', 'https://use.fontawesome.com/releases/v5.5.0/css/all.css' );
}

Font Awosmeの中からアイコンを選びます。
Font Awosmeの使い方

実際に使ってみた例をコードで書いてみますね。

See the Pen アイコンを使った飾り by Emi (@filledforest) on CodePen.

faviconにする

faviconとはブラウザのタブに表示されるワンポイントアクセントですね。お気に入り一覧などでも表示されます。単なる装飾だけでなく、サイトの目印になります。

WordPressでファビコン(favicon)を表示させる方法 | TechAcademyマガジン

2-5. おしゃれなアイキャッチ画像を入れる

文字だけのサイトと、画像があるサイトでは、断然イメージが変わります。

記事と記事の間に写真やイラストなど、画像を入れましょう。

自分で撮った写真を入れてもいいし、手描きで描いた図やイラストを写メとって載せてもいいと思います♪

作り方は「もう手放せない。ブログを彩るオシャレなバナーをサクッと作るよ」をどうぞ

ちなみに、私は記事の中で説明用の図はgoogle slideで作っています。(Powerpointでも画像編集ソフトでも自分に使いやすいやつで大丈夫です。)

デザインコンセプト
  • 背景白のスライドを開く
  • アイコン、テキスト、図形を載せる
  • 画面スクリーンショットを撮る
  • プレビュー(Macにプリインストールされてる画像編集ソフト)で切り抜く
  • 横幅640px〜800px程度にサイズを変更(PCでの記事の表示幅に合わせています)
  • jpeg形式で保存

画像作りでも、コンセプトで決めた色、モチーフを使って揃えたりします。

3. 【本格的にカスタマイズしたい人向け】おしゃれブログのデザインを参考にしよう!

センスを磨くには素敵なサイトを見て、こういうのがいい!ってビジュアルでの見本を持つことが一番!!

モデルさんに憧れて、女の子がファッションやメイクを真似るのと同じですね💄

特に海外ブログにはおしゃれなデザインがいっぱいあります^ ^

私はピンタレストでデザインを眺めては、気に入ったサイトのスクリーンショットやバナーを保存しています。

ここからは他サイトのデザインを参考にする手順を紹介していきます。本格的にWebデザインを学びたい方向けの情報になりますので、読み飛ばしてもらってもOKです。

どんなWordPressテーマを使っている?

このサイトにURLを入れると、使っているWordPressテーマやURLを確認できます。

WordPressテーマ

What WordPress Theme Is That?
(カスタマイズされている場合など、全てのWordPressサイトのテーマを見れるわけではないです。)

フォント、色は何?

Google Chromeの機能を拡張すると、サイトの色やフォントを見ていくことができます。

Color Pick Eye dropper
カラーピッカー

気になる色をクリックするとカラーコードを表示できます。

WhatFont

WhatFontでフォントを確認する

ページのフォント設定を確認できます。私は読みやすいと感じたページについて調べています。

<フォント設定で気にするところ>

文字色 Color 色は黒ではなくて、ちょっとグレーだったりする。
大きさ Font Size 基本は16px。見出しと地の文の大きさのさなどをチェック。
太さ Font Weight タイトルの場合は太字に設定されていることもあり。
行の高さ Line Height だいたい1.6~1.8くらいだと読みやすい

細かい装飾はどうなっている?

HTML/CSSの知識が必要になりますが、簡単に調べ方を説明しますね。

WebページはHTMLとCSSという2つのプログラムファイルで構成されています。

HTMLはWEB上で文章を表示するための書き方のこと。
<p>ここに文章がはいります</p>

タグ(カギカッコ<>)で文章を挟みます。このカギカッコの中身で段落や見出しなど、文章の構造を教えています。(pは文章の段落を意味しています)

CSSは文章をレイアウトしたり、装飾するための書き方です。CSSファイルにコードを書いていきます。

HTML/CSSの書き方に興味がある方は合わせて読んでみてください。
初心者向けCSS(スタイルシート)入門:基本的な書き方を総まとめ!

WebページはこのHTMLとCSSをベースに作成されていますので、コードを見るとデザインがどう作られているか中身を確認できちゃいます。

Google Chromeを使って、HTML/CSSを確認する方法を説明していきます。
ホームページの気になるデザイン部分にカーソルを合わせます。

右クリック>検証をクリックしてみてください。
右クリックから検証を開く

カーソルの合わせた部分のHTMLコードとCSSコードを見ることができます。
コードを確認する

HTMLやCSSのコードがわかってくると、そのコードを参考に自分のブログ装飾に反映できるようになります。

4. ホームページ作りに使える素材サイト

最後に、ホームページやブログ制作に使える画像や写真の素材をご紹介します。

Unsplash

Beautiful Free Images & Pictures | Unsplash

高品質な写真素材が無料で使えます。
海外サイトなので英語で検索してください。
写真右下の「⬇︎」をクリックすると、ダウンロードできます。

GIRLY DROP

おしゃれなフリー写真素材|GIRLY DROP(ガーリードロップ)
こちらは女子向けのフリー写真素材サイトです。
かわいい😍と思いつつ、ロマンチックすぎてこのサイトではつかっていません^^;

ICOOON Mono

シンプルなのウェブアイコンがたくさん。
この記事でも、図を作るときに使わせてもらいましたヾ(*´Ο`*)/

サイト上で色を変えてダウンロードして使います。

アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト

Creative Market

Fonts, Graphics, Themes and More ~ Creative Market

これも海外のサイトなのですが、本格的にブログメディアやホームページを作りたい人にはオススメのサイトです。だって、並んでいる素材のセンスがピカイチ✨

フォント、アイコン、イラスト、背景素材などWEBに使える画像が盛りだくさんです。気に入ったアイテムは有料で購入して、ダウンロードして使う形になります。

私の一押しはサイトのメニューの左上にある「Get Free Goods」です。
ユーザー登録(無料)すると、毎週配信される6つの素材セットを無料ダウンロードできます!

まとめ

以上、ブログを美しく魅せるためのポイントと実際にWordPressブログにカスタマイズする方法をご紹介してきました。
ブログを美しく魅せるためのポイントはデザインのコンセプトを決めて、色、フォント、モチーフを揃えて、雰囲気に統一感を出すことです。
ぜひお試しくださいませ。