広告

【上級編】AFFINGER|デザインカスタマイズで差をつける

【上級編】AFFINGER|デザインカスタマイズで差をつける

AFFINGER6での記事執筆からGoogle AdSense合格までを解説しました。

前回の記事は以下の流れで解説しているので、設定がまだの方は【中級編】を確認してみて下さい。

ブロックエディタと各主要ページ

  1. ブロックエディタ
  2. Google AdSense
  3. メニュー作成
  4. 記事を書く時に便利なおすすめプラグイン

【中級編】へ

この記事は前回設定の続きになります。


Google AdSenseの審査に通れば初心者は卒業です

ここからはライバルに差をつけるカスタマイズやデザインなどについて詳しく解説していきます。

こんな方におすすめ

  • サイト型とブログ型について
  • デザインのコツ
  • CSSの使い方について

今回はAFFINGER6でライバルに差をつけるデザインやカスタマイズについて解説していきます。

AFFINGER6の設定は公式サイトでも詳しく解説されています。

AFFINGER公式マニュアル

設定順一覧ページ

設定順一覧

サイトデザイン

サイト全体のデザインは読者に大きな影響を与えます。

サイトデザインは奥が深く、ブロガーの中では入門としてブログ型とサイト型があります。

ユーザーに分かりやすいようにサイトの形を整えて、動きを加えたりして興味を引いてもらうこともできます。

このようにそれぞれ特徴があります。

上級編としてAFFINGER6を使ってサイト型に挑戦してみましょう!

トップページをサイト型にする

設定方法自体はかなり簡単です。

サイト型カスタマイズ手順

  • 固定ページで新着記事一覧ページを作成
    • 空ページで新着記事を表示
    • パーマリンク設定
  • 固定ページでトップページを作成
    • メインページの作り込み
    • SNS用にそれぞれ設定
    • アイキャッチ設定
  • WordPressでそれぞれのページを設定する

サイトをより綺麗に見せようとすると、どうしても時間の掛かる項目なので少しずつ変えてみて下さい。

詳しい設定方法は「AFFINGER6|トップページをブログ型からサイト型にカスタマイズ」で解説しています。

解説を見ながら設定してみましょう!

デザインのコツと色使い

サイトをデザインする際は色使いに気をつける必要があります。

色使いのコツは「モノトーン+一色」が基本です。

様々な色で組み合わせて個性を出してもいいですが、簡単なのはモノトーンを含む3色構成です。

迷っている方は色の組み合わせを実際に見て決めるのがいいと思います。

詳しい記事は「AFFINGER|サイトのデザインと色使いのコツを学ぶ」で解説しました。

シンプルなサイトを目指しましょう!

CSSカスタマイズ

CSSのカスタマイズに挑戦してみましょう。

スタイルシートを編集してコードを記入できるようになると、より自分らしいサイトを作成することができます。

初心者の方は「AFFINGER6|スタイルシート(style.css)を編集する時の注意点について」を見ながら設定できるようになって下さい。

最初はコピペから初めて少しずつオリジナリティを出せるようになっていきましょう!

以下で初心者でも簡単にできるCSSカスタマイズを紹介します。

当サイトおすすめ書籍

筆者はサイト運営歴はそこそこ長いんですが、あんまり書籍を購入したことがありません。

ブログの本って自己啓発が多かったり、手にとってもよく分からない内容の物が多く、ネット上に掲載されている情報で十分だったりするんですよね。

そんな筆者でも読んで良かった!勉強になった!という本のみここで紹介しておきます。

価格2,420円(税込)1,980円(税込)3,080円(税込)2,860円(税込)
ページ数288ページ224ページ523ページ424ページ
ジャンルデザインデザインデザインデザイン
発売日2021/10/142020/06/122021/02/262021/07/31

是非参考程度に迷った時に見てみてください。

少しでもスキルアップできると、ここをこうしたいが実現できるので基本的にはネットで情報を集めて実践していくのがいいと思います。


ここまでで一通りの手順は終了になります。

カスタマイズやデザインは実践していけば上達していきます。

それ以上にサイト運営では、中身であるコンテンツが重要です。

常に記事の質とデザインを最新に保ちながらSEOについてもどんどん勉強していきましょう!

-設定方法
-,

PAGE TOP