「キュン♥」となる可愛いブログ・ホームページの作り方完全ガイド

以前にWordPressテーマ「STINGER PLUS+」を公開した際に作成したサンプルサイトが「可愛い！」と特に女性の方から非常に好評をいただきました。

可愛いサンプル

クールなサンプル（有料）

ただ現在「STINGER PLUS+」が配布終了しておりまして、代りに有料テーマ「AFFINGER4」にて同じサンプルを作りなおしております。

でもこれ、ほとんど「micata2（無料版）（※配布終了。現在はSTINGER PLUS）」でも同じような作成ができるのです。

サンプルサイトに使用している素材も有料のものが多いのですが無料でも十分に代替えできるサービスがたくさんあります。一緒に紹介していきながら、はじめての方でも無料で可愛いサイトができるように順番にわかりやすく解説したいと思います。

サンプルにある「オリジナルボタン」「スマホの下部挿入エリア」「広告エリア」及び「YouTube背景」は有料版（AFFINGER4）のみとなっております。AFFINGER4御利用の方は下部の方にて併せて説明しておりますのでご参考下さい。

※このページではサンプルのようなサイト作成方法を紹介しておりますが全く同じになることを保証するものではございません。悪しからずご了承下さいませ

可愛いブログ・ホームページの作り方

まずは「可愛い」を作る下準備！

料理は素材が命と言いますが、ホームページも素材が命です。

まずはサイトに使用する可愛い素材や配色するカラーを決めておくと作成が一気に捗りますよ。

可愛い素材の用意しよう

写真素材

サンプルサイトの画像は主に「ShutterStock」というサービスを利用しています。その他には、日本の素材が多い「PIXTA」がリーズナブルなのでよく利用します。ただこちらはリーズナブルとはいえ有料です。

そこで「無料」でもオシャレな画像が入るサイトがコチラ

おすすめの無料の代替え画像サービス「pixabay」

画像だけでなくベクター画像や動画も検索できる無料素材サイト。その数なんと800,000枚以上。

https://pixabay.com/

御存知の方も多いかもしれませんが「pixabay」はCreative Commons CC0にて無償配布されていて、改変、配布、および使用に関しては、商用利用に際してもロイヤリティーフリー。 著作権の帰属先の表示は不要なのにクオリティも高く気に入っているサービスです。

「Baby（赤ちゃん）」と検索すると以下のように十分使えそうな素材がたくさん見つかります。

一度、メール登録（無料）をしておくと毎回画像認証する手間が省けるのでおすすめです。

PickUp！可愛いが溢れるガーリー素材サイト

可愛い素材を中心としたガーリーな素材サイトを紹介します。

 背景画像を用意しよう

サンプルサイトの背景は「subtlepatterns.com」という無料素材サービスを利用しています。数が豊富というわけではありませんがシンプルで使いやすい素材があるので気に入っています。シンプルって可愛さを演出するのに大切なんですよね。

サンプルに使用した素材はコチラ

無料の画像加工ツールでさらに可愛く！

素材をいい感じに加工するとサイトの可愛さもグッと上がります。

サンプルサイトをスマホで見た時に下にいる動物たちは背景が透けている「png」と呼ばれる形式の画像で保存しています。

通常、このようなサイトはPhotoshopなどで作成するのですが「ipiccy」という無料のWebサービスで作成する事も可能です。

http://ipiccy.com/

Chromeの拡張アプリもあります。

https://chrome.google.com/webstore/detail/imokeandodnlammaoenbgcnbhigjbpjh?hl=ja

好きなサイズで作成ができ画像のアップロードやトリミングはもちろん、様々な加工ができる優れものです。

作成した素材は「jpg」か「png」でダウンロードできます。

※テキストも入れれますが英字のみとなります。テキストを日本語で入れたい方は無料ソフトのGIMPなどが良いかも

参考無料で作る！バナーの作り方 ～ フリーソフトGIMPのわかりやすい使い方

背景が透過した画像配布サービス

またiPadアプリの「合成写真 合成スタジオ」でも簡単に背景を消した画像が作成できます。広告が入りますが無料で使用できます。

itune store合成写真 合成スタジオ

可愛いカラーの選び方

サイトを作る時は基本色は3～4つ決めておくと統一感のあるデザインに仕上がります。逆にそれ以上のカラーがあると統一感が無くどことなく落ち着かないサイトになってしまうので注意。

3～4のカラーも出来れば

とするとさらに統一感が増します。

ちなみにサンプルサイトは以下のカラーとなっています。

このサイトはBabyらしさを出す為に少し配色を多めにしています。

明るい色の彩度の低いカラーを選ぶと可愛いサイトの印象になりますよ。

参考カラー配色で迷わない！シーン別配色見本32パターン
参考カテゴリー別配色アイデア100

ホームページ作成の流れ

作成の前提として、すでにWordPressのインストール、テンプレートの「micata2（無料）※配布終了」の有効化までは作業が完了しており記事も数ページあると仮定して作成していきます。WordPressのインストール方法などがわからない方は以下を参考にして下さい。

素材の準備が整ったところでいよいよサイトの作成に入ります。

「micata2」ではHTMLやCSSなど難しい知識は不要です。管理画面からサクサクと作成していきましょう。ちなみにサンプルサイトで用意した主な画像は以下の通りです。

順番に「ヘッダー用のロゴ」「フッター用のロゴ」「タイトルの背景アイコン」「hタグの背景アイコン」「スマホ用のフッターアイコン」です。これらが必ず必要というわけではありません。

ロゴも通常は1つで良いのですが今回はフッターに色を設定した為、黒では見にくくなり白色を用意しました。使用しているフォントは「ふい字」です。

参考日本語のかわいいフォント一覧

最初にしておきたいWordPressの基本設定

メニューの設定

最初にしておきたいテーマの基本設定

テーマオリジナルで用意してあるいくつかの設定を予め有効化しておきます。

※画像は「AFFINGER4」を使用しているため、「micata2」にはない機能も表示されています。ご了承下さい。

1- オリジナルカスタマイザーの使用を有効化

2- ヘッダー設定

3- サムネイル画像設定

4- Googleフォントの設定

5- トップページの設定

6- 投稿・固定記事設定

7- スライドショーの設定

8- メニュー設定

9-スマホ用ボタンの追加

10- ページTOPボタンを非表示

11- おすすめ記事一覧の作成

12- アイコン・ファビコンの設定

13- 演出

カスタマイザーでカラーとデザインの設定

「外観」＞「カスタマイズ」でサイトのカラーなどを変更していきます。

主要な箇所は画像を添付するので拡大クリックで設定を確認して下さい。

おさらいとなりますがサンプルサイトのカラーは以下の通りです。

0- 簡単！全体設定

1- ロゴの設定

2- ヘッダー画像の設定

3- 背景の設定

4- 見出しの設定

5- その他カラーやレイアウトの設定

基本エリア設定 

[+]メニューのカラー設定

[+]各テキストとhタグの見出し

[+]オプションカラー

ウィジェットの設定

ウィジェットからサイドバーに様々なコンテンツが挿入できます。

※サンプルでは➀「オリジナルボタン」と②「フリーボックス」が挿入されていますが➀「オリジナルボタン」はPro版のみとなります。

FontAwesomeの利用

広告エリアとスマホ用下部画像の設定

広告スクロール

フッターの下部画像の登録

 これ以下は申し訳ありませんがAFFINGER4利用の方の為の解説となります。

アドセンス広告の登録

モバイルヘッダー

モバイルで見た時のロゴはカスタマイザーの「ロゴ画像」で設定できます

サンプルのようにセンター寄せにしたい場合はstyle.cssに

#st-mobile-logo {
  	text-align:center;
}

を追記して下さい。
ロゴを少し大きめに表示したい場合は以下を追記してみて下さい

#st-mobile-logo {
    padding: 10px 10px;
  	text-align:center;
}

#st-mobile-logo img {
    height: 30px; //ロゴの高さ
}

#st-mobile-logo a {
    line-height: 30px; //ロゴの高さ
}

まとめ

長くなりましたが以上です。

最後に今回、「可愛い無料のホームページ・ブログを作る」で紹介した主なツールなどのリンクをまとめておきます。

マニュアルでは他のことも記載されているので宜しければご活用ください。

【おまけ】ホームページやブログの作成に使えそうな無料サービス

最後にその他のホームページやブログの作成に使えそうな無料サービスを列挙しておきます。世の中には知っていると便利なサイトがたくさんあるんですよね。

ツール系

可愛いサンプル

クールなサンプル（有料）