ワードプレス開設&設定

【アフィンガー5】外観デザイン設定の必須8項目!やり方&コツを伝授~私の場合~

外観デザイン設定

ワードプレスの初期設定まで終わったら、記事投稿の前にもうひとつやっておいたほうが良いことがあります。

\ ワードプレスの初期設定はこちら /

それは、ワードプレスの外観デザイン設定

デザインをしっかり最初に整えておかないと、記事を書いても見た目がゴチャゴチャしてしまったり、記事作成の機能も効果的に使えません。

ノコ
デザイン自体は一度設定しても、後でどのようにも変更できるので、まずはできるだけシンプルに設定していきましょう!
デザインに時間をかけすぎても、もったいないもんね。
ポンポコ

ワードプレスの
外観デザイン設定する前にテーマカラーを決めよう!

テーマカラー

ワードプレスの外観デザインを設定する時、まず決めておくべきなのは、「自分のブログのテーマカラー」です。

こちらのブログのテーマカラーは、「黄色」!

ノコ
黄色は”ハッピーなで明るいイメージ”があるからすぐにこの色を選んだよ。
そんな感じでパッと決めても大丈夫ってことだね!
ポンポコ

そして、テーマカラーを補助するような色をサブカラーとして、ツイッターで情報発信している可愛いアイコンがすでにあったので、そのアイコンから「赤」にしました。

こちらのサイトでは、この2つのカラーをベースに外観を決めています。

この二つのカラーは、原色そのままで使ってしまうと、目がチカチカしてしまうので、少しくすんだ色や白の混じったような色など・・原色から少しずらすと自然となじみます。

私は、同系色の2色にしましたが、全く異なる反対色の色にすると、もっとカラフルではっきりとしたサイトにすることができます。

  • 赤と緑
  • 黄色と青
  • 黄緑と紫

など!

カラーだけ決めちゃえば、特にデザインの知識やセンスがなくても大丈夫!

アフィンガー5ならあとは外観設定をすれば、簡単に素敵なブログデザインになります。

ノコ
センスのかけらもない私でも大丈夫だったので安心してください。

ワードプレス(アフィンガー5)での
外観デザイン設定の必須8項目~ノコの場合~

複数の葉

ワードプレスで外観デザインの設定をする場合、アフィンガー5では、様々な細かい部分の設定まで行うことができます

でも、早くデザイン設定は終えて、ブログ記事を書いていきたい。
ポンポコ
ノコ
そこで、最低限押さえておかなければならない項目はどれなのか?私がこのサイトで設定している必須項目をお伝えするね!

\ アフィンガー5のレビュー記事はこちら /

>>> 【アフィンガー5レビュー】4大特典付きで購入可能!ブログ初心者におすすめの理由!

 

外観デザインで設定しておきたい項目はこちら・・!

  • ロゴ画像設定
  • サイト基本情報
  • ヘッダー画像
  • 基本エリア設定
  • メニューのカラー設定
  • 各テキストとhタグ
  • オプションカラー
  • サイドバー

このつの項目です。

ココさえ押さえておけば、あとの細かいところは、記事を書きながら整えていけばOK!

ノコ
たくさんあるけど、一度整えれば、あとはあまり触ることはないから、最初にパパっと設定しちゃおう。

超初心者でもわかる!
アフィンガー5の外観デザイン設定のやり方

超初心者でもわかる

では、具体的にどのように設定していくのか、一緒に一つずつ確認していきましょう。

ロゴ画像設定

「外観」 > 「カスタマイズ」から、「ロゴ画像」を選ぶと、サイトのロゴ画像を設定できます。

ロゴ画像選択

ロゴ画像設定

私の場合、ロゴ画像は、無料のロゴ作成サイトで作りました。

私が使ったのは、”無料ロゴ作成.com”というサイト。

>>> 無料ロゴ作成.comはこちら

特に登録なども必要なく、10分くらいでロゴが簡単に作れちゃいます。

このロゴ作成で意識したことは、テーマカラーが黄色なので、その上に載せても目立つようにしたこと

そこで、白い縁取りに文字はサブカラーの赤を使いました。

何個か作ってみて、自分のサイトに実際に載せてみて、一番しっくりくるものを選べばよいかと思います

もちろん、ロゴ作成に自信がない場合は、「ココナラ」などで得意な方に作成をお願いすればOK。

”ココナラ”は、自分の得意を売り買いするサイトで、一般の方に頼めば、500円ほどで制作してもらうことができます。

ココナラはこちら >>> coconala.com

ロゴ画像のサイズは、はっぴーノコブログでは「320px × 65px」程度。

ノコ
作成したり依頼するときは、そのくらいの大きさでお願いするのがおススメです。

サイト基本情報

「外観」 > 「カスタマイズ」から、「サイト基本情報」を選ぶと、サイトの基本情報を入力できます。

サイト情報選択

サイト基本情報で入力設定するのは以下の2つの項目。

  • サイトのタイトル
  • キャッチフレーズ

もうひとつサイトアイコンという項目もありますが、ひとまずこの2つだけ設定してあればOKです。

サイトのタイトルとキャッチフレーズ

「サイトのタイトル」はまさにサイトの顔となるサイトの名前です。

サイトのタイトルは、いろいろなジャンルの記事を書くことになるトレンドブログであれば、どんなタイトルでも大丈夫ですが、もし、自分の得意な分野があるのであれば、それに沿ったタイトルにすると良いかと思います。

ここに注意

ただ、アドセンス広告収入を得るためには、アドセンス申請をすることになるので、その際に引っかかってしまうような「トレンドニュース」や「速報~」などのトレンド感満載のタイトルはNGです

つぎの「キャッチフレーズ」は、「ブログ説明」とも呼ばれる項目。

ブログの内容がわかるような説明文にしましょう。

ノコ
こちらは、後から変更することもできるので、ひとまずの文章でも大丈夫です。

ヘッダー画像

テントウムシ

「外観」 > 「カスタマイズ」から、「ヘッダー画像」でヘッダー画像を設定できます。

ヘッダー画像選択

ヘッダー画像設定

ヘッダー画像は、私の場合は、ツイッターのヘッダー画像があったので、それを使いましたが、無料画像サイトから選んで自分で作ることができます。

そこで使うと便利なのが、「Photo scape X」という無料画像編集ソフト。

(Windows10やMacだと「Photo scape X」ですが、10以前のWindowsだと「Photo scape 」になります)

使い方さえ慣れてしまえば、とっても使いやすいソフトで、のちのちアイキャッチ画像を作る時にも使うことができるので、かなりおススメです!

この「Photo scape X」に無料画像サイトから選んだ画像をドロップさせて、加工すれば、簡単にヘッダーが画像を作ることができちゃいます

私が使っている「AFFINGER5」では、ヘッダー画像の推奨サイズが「 2200 × 500 ピクセル」となっているので、それに合わせてサイズ変更して作ればOK。

テーマによって推奨サイズは異なるので、確認してくださいね。

メモ

その際、無料ダウンロードしてきた画像をそのままサイズ変更してしまうと、画像がゆがんでしまうので、一度大まかに使いたい個所を4:1くらいの大きさで切り取ってから、 2200 × 500 ピクセルにサイズ変更するのがおススメです。

もちろんこの時も、自分で作成せず、ココナラなどで安く作ってもらっちゃうという方法も! >>> coconala.com

あなたの大切な時間を無駄遣いしないために、苦手な部分は、得意な人に頼んでしまうというのも良い方法です。

基本エリア設定

基本エリア設定では、各エリアの配色を決めていきます。

基本エリア設定選択

この配色は最初に決めた「自分のサイトのテーマカラー」をベースに設定していきます。

配色を決めるたびに、右のサイト画面でその状態を確認することができるので、自分の好きなようにバランスをみて決めていけばOKです。

最低限、配色を決めておけば良い項目は・・

  • 背景色
  • ヘッダーエリア(背景色)
  • mainエリア(記事)(背景色)
  • フッターエリア(フッター文字色・背景色)
  • 記事一覧の区切りボーダー(ボーダーカラー)

この5つ

最低限ここが抑えられていれば、サイトの色をバランスよく設定することができます。

メニューのカラー設定

キノコメニュー

ここではPCなどでサイトのトップページの上の方に表示される「グローバルメニュー」の色を決めることができます。

メニューのカラー設定

こちらも、「テーマカラー」や「サブカラー」を使って、バランスよく調節していきます。

私の場合は、メニューのカラーは、先に設定した背景色の色よりも少し濃い目の色にして、「メニュー」というエリアがわかるように設定してあります。

この部分をサブメニューで目立たせるのもよさそうですよね!

ノコ
いろいろと自分の好みのサイトをネットで探してみてマネしてみるとうまくいくよ。

各テキストとhタグの設定

「各テキストとhタグの設定」では、記事タイトルや見出しの色を決めることができます

見出しとタグ選択

最低限設定しておきたいところは・・

  • 記事タイトル
  • H2タグ
  • H3タグ
  • ウィジェットタイトル(サイドバー)
  • NEW ENTRY&関連記事

この

ウィジェットタイトル設定

関連記事カラー設定

この5つの項目の色を設定しておけば、記事を書いても問題なく投稿することができます。

オプションカラーの設定

ここでは、記事作成時に使う「数字リストのカラー」や「ブログカード」「会話風吹き出し」「目次プラグイン」などの、様々な細かいカラーの設定ができます。

オプションカラー選択

オプションカラーには、実際に記事を書きながら、その機能を使ってみて、色を調整することが必要になってくる項目が多いので、ここでは、一番最後の「トップに戻る」ボタンのカラーの設定だけすればOKです。

トップに戻るの場所

その他のオプションカラーの各項目については、記事を書きながら、配色を決めると良いかと思います。

サイドバーの設定

まっすぐ伸びる線路

サイドバーの設定は、これまで行ってきた『外観 > カスタマイズ』ではなく、『外観 > ウィジェット』から設定していきます。

ウィジェットの設定

そして、「サイドバーウィジェット」に表示したいウィジェットを入れていきます。

記事投稿前に設定したいサイドバーの項目はこちら!

  • サイト管理者情報
  • WordPress Popular Posts
  • 最近の投稿
  • Rerated Posts
  • 検索

この5つです!

サイドバーに様々なウィジェットを設定するには・・

左側の「利用できるウィジェット」から必要なものを一つずつ選んで、サイドバーにウィジェットを追加していきます。

  1. 「利用できるウィジェット」の中から必要なものを左クリックして選択、そのまま「サイドバーウィジェット」にドラッグする
  2. 「利用できるウィジェット」の中の必要な項目の右側の▼をクリックして、「サイドバーウィジェット」を選択する

の1か2のどちらかの方法で、ウィジェットを追加することができます

ウィジェットの追加方法

ウィジェット追加方法2

ノコ
追加したウィジェットは、タイトルを入力して、「保存」を忘れないようにしてくださいね!

メモ

「サイト管理者紹介」については、先に「ユーザー」から「あなたのプロフィール」にてプロフィール画像と紹介文を記入しておくとスムーズです。

ユーザーからプロフィール情報入力

追加したウィジェットの中の「Wordpress Popular Posts」については、

  • 最大表示数を6-8件
  • ソート順は「総閲覧数」
  • フィルターを「過去24時間」
  • 投稿タイプを「Post」
  • 投稿設定の「アイキャッチ画像を表示」にチェックを入れ、サイズを75px×75pxに設定

するのがトレンドブログにはおススメです。

人気記事の設定1

人気記事の設定2

設定したら「保存」をクリック!

また、追加するウィジェットを間違えてしまった場合には、

  1. 削除したいウィジェットの右側の▼をクリックしてウィジェットを開き、一番下の「削除」をクリックする
  2. 削除したいウィジェットをドラッグして左側に戻す

の1か2のいずれかの方法で削除することができます。

ノコ
デフォルトでサイドバーに表示されている「メタ情報」などのウィジェットは削除してね。

 

まとめ

ワードプレスの初期設定が終わったら、記事投稿の前に「外観デザイン」の設定を済ませましょう。

アフィンガー5では、細かい項目まで色の設定などをすることができますが、最初から完璧に配色することは難しいです。

まずは、ざっくりと自分のテーマカラーを決めて、サクッと設定をして、サイドバーを整えて、記事投稿を始めてしまうのがおススメ。

細かい部分は記事を書きながら、微調整していくと効率がよいです。

実際に私が、ワードプレス(アフィンガー5)で最低限設定すれば記事投稿できた、「外観デザインに関する必須項目は8つ」。

これだけ設定しておけば、記事投稿をしても問題なく、表示することができます。

ノコ
はじめに設定するデザインはサクッと決めて、少しでも早く記事の投稿を始めちゃおう!

 

  • この記事を書いた人

ノコ

3人の子育てをしながら、まったくの知識ゼロの状態からブログをスタートして、今ではブログの先生もしているノコと申します。 ブログを始めようと決めたきっかけは、子供の夢を応援するために引っ越しをしたこと。 引っ越し後に再就職を考えたとき、「これからは子供と一緒の時間を大切にしたい!それが実現できる仕事をしたい!」という思いから、その条件を満たす仕事としてネットで見つけたのがブログでした。 その後ブログ開始から5か月でブログ総収益100万円を達成。 そして、現在はブログの情報発信とともにブログの先生として日々サポートに全力投球しています。 メルマガでは、主なアクセスがたった3記事の月でも月収10万円という実績もレポートにて配信中。 アドセンスに楽天アマゾンなどの物販アフィリエイトを組み合わせて効率よくブログを収益化することが得意なので、その方法についてもメルマガで随時お伝えしています。 メルマガはこちらから https://happynoco.com/1up/oneup-mailform/

-ワードプレス開設&設定

© 2021 はっぴーノコブログ Powered by AFFINGER5