ブログ

【初心者向け】ワードプレスの人気テーマAFFINGER6をカスタマイズする方法【画像付き】

※アフィリエイト広告を利用しています

 

もっさん
AFFINGER6を入れてみたけど、デザインの方法が分からない。最初はどんなカスタマイズをすれば良いのだろう?

 

今回は、こんな悩みを解決していきます。

 

"もっさん"のワードプレスの始め方【第3巻】 今回は、

 

ワードプレスブログのデザインをしよう!

 

こちらの内容です。

 

\半額キャンペーン中、紹介リンク経由で最大10000円割引中/

一番お得にブログを始めたい方へ"もっさんブログ"限定最大10,000円割引の紹介リンクはこちらから

\クリックで紹介コードが自動適用されます/

※上記リンクをクリックで公式サイトへ移動できます。

 

ブログの開設がまだの方は、

”もっさん"のワードプレスの教科書【第1巻】から順番に進めていくことをおすすめします。

 

 

✅ 今回紹介していくAFFINGER6カスタマイズの内容

 

今回紹介するものは、必要最低限のカスタマイズです。本格的なカスタマイズはある程度記事数が増えてから行いましょう。

 

もっさん
最低限のカスタマイズを早めに終わらせて、記事を書く時間にあてましょう。

 

それでは、順番に解説していきます。

 

Contents
  1. AFFINGR6(アフィンガー6)をインストール
  2. 全体のカラー設定
  3. ヘッダーエリアの設定
  4. フッターエリアの設定
  5. サイドバーエリアの設定
  6. プロフィールカードの設定
  7. サイトロゴの設定
  8. まとめ

AFFINGR6(アフィンガー6)をインストール

  まずは、下記リンクからAFFINGER6(アフィンガー6)をインストールしましょう。

すでにインストールされている方は飛ばしてください。

\当ブログでは愛用しています/

AFFINGER6(WordPressテーマ)

 

>AFFINGER6を申し込む方はこちらから

※リンクをクリックで公式サイトに移動できます。

【2023年最新】ワードプレステーマ(AFFINGER6)の導入方法を図解で解説【初心者向け】

続きを見る

 

全体のカラー設定

まずは、

全体のカラー設定

をしていきます。

 

全体のカラーとは、、、

 

 

⬆︎上図の囲っている部分です。

 

変更方法は、ワードプレス管理画面から

「外観」→「カスタマイズ」

をクリックします。

 

⬆︎上図のようにクリックします。

 

次に、

「基本エリア設定」→「背景色」

をクリックします。

 

もっさん
今回は、試しにカラーコード「#eeee22」を入力しました。

 

 

背景色は、変更すると記事のイメージががらっと変わります。自分のイメージした記事デザインになるようにしましょう。

 

ちなみに、当ブログでは「#ffffff」を使用しています。個人的には薄めの色を推奨しています。

 

最後に「公開」をクリックするのを忘れないようにしましょう。

 

ヘッダーエリアの設定

次に、

ヘッダーエリアの設定

をしていきます。

⬆︎上図の囲っている部分です。

 

変更方法は、ワードプレス管理画面から

「外観」→「カスタマイズ」

をクリックしましょう。

 

⬆︎上図のようにクリックします。

次に、、、

「基本エリア設定」→「ヘッダーエリア」

をクリックします。

 

⬆︎上図の画面で背景色をクリックして変更します。

 

もっさん
参考までに当ブログでは、背景色は「#454c50」、文字色は「#ffffff」を使用しています。

 

最後に「公開」をクリックするのを忘れないようにしましょう。

 

フッターエリアの設定

次に、

フッターエリアの設定

をしていきます。

⬆︎上図の囲っている部分です。

 

変更方法は、ワードプレス管理画面から

「外観」→「カスタマイズ」

をクリックします。

 

⬆︎上図のようにクリックします。

次に、

「基本エリア設定」→「フッターエリア」

をクリックします。

 

 

もっさん
参考までに当ブログでは、背景色は「#6e777c」、文字色は「#000000」を使用しています。

 

最後に「公開」をクリックするのを忘れないようにしましょう。

 

サイドバーエリアの設定

次に、

サイドバーエリアの設定

をしていきます。

 

⬆︎上図の囲っている部分です。

 

もっさん
今回は、当記事でも使用している検索窓とカテゴリーの作り方について説明していきます。

 

検索窓の作り方

 

ワードプレス管理画面から

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

をクリックします。

⬆︎上図のようにクリックしていきます。

 

「ウィジェットを追加」をクリックしたら、名前を任意の形に変更します。

 

変更方法は、ワードプレス管理画面から

「外観」→「ウィジェット」→「サイドバーウィジェット」→「検索」→「任意の名前に変更」

をクリックします。

⬆︎上図のようにクリックしていきます。

 

もっさん
ちなみに、当記事ではブログ内検索と設定していますがここはお好みで設定しましょう。

 

カテゴリーの作り方

 

ワードプレス管理画面から

「外観」→「ウィジェット」→「カテゴリー」→「サイドバーウィジェット」→「ウィジェットを追加」

をクリックします。

⬆︎上図のようにクリックしていきます。

 

「ウィジェットを追加」をクリックしたら、名前を任意の形に変更します。

 

変更方法は、ワードプレス管理画面から

「外観」→「ウィジェット」→「サイドバーウィジェット」→「カテゴリー」→「任意の名前に変更」

をクリックします。

⬆︎上図のようにクリックしていきます。

 

ちなみに当ブログでは、デフォルト設定にしています。ここはお好みで変更しましょう。

⬆︎上図のように、なればサイドバーの設定は完了です。

 

もっさん
サイドバーを追加するだけで、デザイン性は高まりましたね。

 

プロフィールカードの設定

次に、

プロフィールカードの設定

をしていきます。

⬆︎上図の部分をプロフィールカードと呼びます。

 

こちらの内容に関しては、"もっさん"のワードプレスの教科書【第2巻】でも紹介しているので既に設定されている方は飛ばしてください。

 

ワードプレス管理画面から

「ユーザー」→「プロフィール」

をクリックします。

 

⬆︎上図のようにクリックします。

 

設定する項目は下記の5つです。

ニックネーム

ブログ上の表示名

各SNSのURL

プロフィール情報

プロフィール写真

 

⬆︎上図の項目を順番に入力していきましょう。

 

プロフィール写真に関しては、僕はココナラ に依頼しました。

>ココナラのクリエイターに依頼する

 

もっさん
プロフィールアイコンを作る時間を外注して、記事の投稿にあてることをおすすめします。

 

サイトロゴの設定

次に、

サイトロゴの設定

をしていきます。

 

 

⬆︎上図左側のアイコンを設定していきます。

 

もっさん
サイトアイコンは、自分のブログの看板みたいなイメージです。

 

これを設定しておくことで、読者がページを複数開いた時に自分のページを見つけてもらいやすくなります。

 

変更方法は、ワードプレス管理画面から

「外観」→「カスタマイズ」

をクリックします。

 

⬆︎上図のようにクリックします。

 

次に、、、

「基本エリア設定」→「サイト基本情報」

をクリックします。

⬆︎上図の「サイトアイコンを選択」から、アイコンを設定します。

アイコンサイズとして推奨は、「512×512」pxとされています。

 

もっさん
サイトアイコンは小さいためインパクトのあるものがおすすめです。

 

まとめ

今回紹介した、カスタマイズは下記の通りです。

 

 

ブログ始めたての方は、デザインは今回紹介した最低限の設定だけ終わらせておきましょう。

 

もっさん
デザインに時間をかけすぎないようにしましょう。大切なのはあくまでも記事の内容です。

 

続きはこちらから↓

もっさん

AI系発信者、ブロガー(27)、横浜市在住|SNS総フォロワー1万5000人。AIツール、ChatGPTを使いこなす人。 AI・資産形成・副業の情報をお届けしているブログです。 □記事の中で分からないところがあれば、ツイッターかインスタで気軽に聞いてくださいね。

-ブログ