ブログ

【初心者向け】AFFINGERでブログデザインを完成させる完全ガイド

<景品表示法に基づく記載>当サイトのコンテンツには、広告を記載している場合があります。

  1. HOME >
  2. ブログ >

【初心者向け】AFFINGERでブログデザインを完成させる完全ガイド

 

AFFINGERを導入してみたけど、難しそうで、なかなかブログがおしゃれにならない…。分かりやすいマニュアルが欲しいなぁ。

 

こういった疑問にお答えします。

 

 

そんな私はブログ歴3年で月収30万のママブロガーです。

 

今回新たにAFFINGERでブログを作成し、デザイン設定を行いましたのでやったこと全部公開していきます。

 

同じようにしていけば明日からもう記事を書けるようになりますよ!

 

それでは早速デザイン設定をしてきましょう。

 

ブログをまだAFFINGERを導入していない方へ

デザインはAFFINGER仕様で仕上げていくので、まだ導入していない方はこちらから10分で登録できます。

>>AFFINGERを10分で導入する

 

AFFINGERは簡単にハイクオリティのサイト設計ができるので、おすすめですよ。

 

アフィリエイトを時短して稼ぎたいなら、AFFINGERはなによりの心強い武器になってくれます。

【簡単解説】ママブロガーがAFFINGERを使った結果をレポ!メリット・デメリット教えます

  ブログを始めて、今は無料テーマを使ってるけどなかなか稼げないなぁ。AFFINGERがいいってきくけど実際どうなの?使ってる人のリアルなレポが知りたい!   こういった疑問にお答 ...

続きを見る



【初心者向け】AFFINGERでブログデザインを完成させる完全ガイド

 

それでは早速AFFINGERでブログ全体のデザインを設定していきます。

 

ちなみに、今の私のサイトの状態はこんな感じです。

 

 

 

何とも言えない、ザ初期設定のブログです。

 

今この段階で私がやっていることは以下のこと。

 

カテゴリーの設定

お問い合わせフォームの設置

プライバシーポリシーの設置

 

上記の作り方が分からないという方はこちらを見ればすぐに作れますよ。

>>>【これはやっとくべき!】WordPressの初期設定7個を簡単に解説

 

また、デザイン変更したときに変化が分かりやすいようにサンプル記事を4つ、それぞれのカテゴリーに設定して投稿しています。

 

ここまで状況を整理したうえで、それでは早速AFFINGERでブログを作っていきましょう!

 

今回は初期設定のブログを以下のようなサイトに変えていきます。完成形はこちらです。

 

 

だいぶ明るく、見やすくなりました。

 

難しいことはありません。やることはたったの4つです。

 

 

①サイト全体のカラー変更

「AFFINGER管理」→「AFFINGER設定」→「全体設定」→「サイト全体のレイアウト」→「カラーパターン」をクリック。

 

 

いろんな色がのっているので、自分のブログのイメージに合うものを選択して、「Save(保存)」を押しましょう。

 

保存したら自分のブログサイトのURLを新しいタブで開き、どのようなデザインになっているか確認。

 

 

私は赤色を選んだのでこんな感じになりました。

 

 

②カテゴリーをトップページに表示

「AFFINGER管理」→「AFFINGER設定」→「全体設定」→「ヘッダー下/おすすめ」→「ヘッダーカード」をクリック。

 

 

ここを設定しておくことでトップページにカテゴリーが設置されます。

 

「アップロード」を押してそのカテゴリーイメージの画像をアップ

フリー素材でもOK!

 

テキスト

カテゴリー名を記入(例:ダイエット)

 

サブテキスト

あってもなくても大丈夫です。(例:1ヶ月で5kg痩せました)

 

リンク先URL

自分のブログページのカテゴリー名をクリックして出てきたページのURLをコピーして貼り付けます。

 

 

これをカテゴリーの数だけ繰り返して、下の「テキストのある背景画像を暗くする」にチェックをいれて、「Save」をクリック。

 

 

こんな感じで上にカテゴリーが表示されました。

 

 

③メニューを追加

「外観」→「メニュー」→「メニュー名を入力(なんでもOK)」→「サイドメニュー」にチェック→「メニューを追加」をクリック。

 

そうすると左の「メニュー項目を追加」ができるようになるので、そこから「お問い合わせフォーム」「プライバシーポリシー」「カテゴリー」にチェックをいれて「メニューに追加」

 

 

それができたら次は

 

 

「外観」→「ウィジェット」→「STINGERサイドバーメニュー」→「サイドバーウィジェット」→「ウィジェットを追加」をクリック。

 

このときすでに「ブロック」というカードが設置されていると思いますが、私はいらないなと思ったので削除しました。

 

サイドバートップのブロックカードもこの時削除したよ!

 

そうすると

 

 

こんな感じで横に追加されています。

 

④検索・プロフィールカードを追加

「外観」→「ウィジェット」→「検索」→「サイドバートップ」→「ウィジェットを追加」をクリック。

 

 

同様に「STINGERプロフィールカード」も同じようにサイドバートップに追加します。

 

次にプロフィールの内容を変えていきます。

 

「ユーザー」→「プロフィール」→「あなたについて」の部分に自分の自己紹介を入力。

 

 

このちょっと上にニックネームを設定できるところもあるので、ここもしっかり記入しておきましょう。

 

「外観」→「カスタマイズ」→「オプション」→「プロフィールカード」をクリックするとプロフィール画像も変更できます。

 

 

はい、サイドにプロフィールができました。

 

これで以下のような見苦しくないサイトが完成しました。

 

 

やり方が分かれば簡単です。

 

【追加】フォント・行間を読みやすいサイズに変更

記事作成をすすめていて、フォントが少し読みにくいなと感じたので、変更しました。

 

「AFFINGER6管理」→「全体設定」→「フォントのサイズ」をクリック。

 

ブログ

 

このような設定にしました。行間がひろくなり見やすくなりました。

 

次にフォントの種類を変更します。

 

「AFFINGER6管理」→「全体設定」→「フォントの種類」→「その他(優先)」をクリック。

 

ブログ

 

フォントのコードは以下のコードです。

 

font-family:Noto, "Hiragino Sans", Helvetica, Arial, sans-serif;

 

このコードをコピーして貼り付け、更新ボタンを押せば完了です。

 

 

【追加】メタ情報を非表示

今のままだとメタ情報「サイト管理、ログアウト、投稿フィード」などなどが表示されっぱなしになってます。

 

これをこのままにしておくと悪意あるユーザーに乗っ取られる可能性が…。

 

『ダッシュボード』→『AFFINGER管理』→『その他』→『ウィジェット』の『無効化するウィジェット』を探します。

 

 

そのとは『無効化するウィジェット』から『メタ情報』にチェックを入れてsaveすればOKです!

 

 

【まとめ】AFFINGERのカスタマイズは簡単にできる

 

AFFINGERは直感的にカスタマイズできるので、専門知識ゼロの初心者の方でも簡単にサイト作りすることができます。

 

実際、今回作成したデザインは基本を設定しただけなので、まだまだ変えられるところはたくさんあります。

 

ヘッダーの画像を変えたり、背景の色を変えたり、これをするだけでもまたガラッと印象が変わってきますよ。

 

ちなみに、この部分を変えるのは「外観」→「カスタマイズ」で色々さわってみると、「あ、こんな風になるんだ」と実感できると思うので、まずはやってみてください。

 

いやいや、もうデザインはいいよ、という方は今回のデザインだけでも十分見やすくはなっているので、このまま終わっても大丈夫です。

 

実際、記事を書かなければ、どれだけデザインに時間をかけても収益はあがりません。

 

最低限自分の納得いくものができあがったら、次は収益をあげるために記事を書いていきましょう!

 

ブログで稼ぎたいならASPサイトを登録

ASPサイトはたくさんありますが、私が月30万稼ぐことができたASPサイトは3つのみなのでそれをこちらで公開しています。

>>稼げるASPサイトを見てみる

 

ブログで稼ぎたいならASPサイトに登録は必須です!

 

登録の仕方から広告の貼り方まで、丁寧に解説している記事も載せてあるので参考にしてみてください。

 

私は5記事から10記事程度書いたら申請する予定です。

【2023年最新】ママブロガーが登録すべきおすすめASPサイト3選【簡単です】

  ブログでアフィリエイトで稼いでみたいけど、たくさんありすぎてどこがいいのか分からないなぁ。。 ママでもできる広告があるサイトってどこがあるの?たくさん登録しすぎても使いこなせないし、本当 ...

続きを見る



 

 

 

-ブログ

© 2024 なぁブログ Powered by AFFINGER5