AFFINGER6 カスタマイズ!メインカラーとデザイン&メニュー編

AFFINGER6 カスタマイズ!メインカラーとデザイン&メニュー編

トップページをチョットカッコよく!

「順番に1個1個」設定しながら覚えよるのがベスト!!

こんにちは "osaboo"です。"@osaboo_Bot"

osaboo

今回の記事の内容は... ^^

AFFINGERをインストールしたばかりだと、どこからカスタマイズすればよくわからないですよね。

AFFINGERには、サイト全体のデザイン(「色合い」や「メニュー」等)が、簡単に設定できるテンプレート機能が付いています。

このテンプレート機能を使って「トップページ」や「固定ページ」を自分仕様にカスタマイズしてカッコ良くしちゃいましょう!

「AFFINGERをインストールして、まだ何もカスタマイズしていないところから簡単にカッコ良くしていく手順をご紹介します。」

こんな方におすすめ!

  • アフィンガーを使い始めたけど思うようにカスタマイズできない...
  • アフィンガーは機能が多すぎてよくわからない...
  • 何から始めたらいいのかわからない...

この記事でわかること!

  • AFFINGER6 基本デザインカスタマイズ
    • サイトのメインカラーを設定しよう!
    • ヘッダー&サイドメニューを作ろう!
    • ヘッダーメニューの設定方法
    • サイドメニューの設定方法
  • まとめ!

AFFINGER6 基本デザインカスタマイズ【カラーパターンとデザインパターンの設定】

初期状態では自動で振り分けられる色(カラーパターン)とページ配置のデザイン(デザインパターン)がリセットされた状態になっています。

少しずつ変化させてどこを設定しているか理解しながら設定すると後々楽しく設定できます。

それでは、色付けから設定していきましょう。

サイトのメインカラーを設定しよう!全体設定【AFFINGER管理:サイト全体の設定】

初期のトップページ(サンプルページ)は、こんな画面です。

サイトのメインカラー設定-初期

色の指定がされてないので実にシンプルです。「当サイト管理人」は結構好きですが...ではここから色とデザインを変えていきましょう。

『AFFINGER管理>全体設定』を選択すると下画面が表示されます。

まずは、自分のイメージにあった基本的な色合い『カラーパターン』とサイトのデザイン『デザインパターン』を決めていきましょう。

AFFINGER6-全体設定-カラーパターン

『カラーパターン』と『デザインパターン』をお好みで選択してください。

この説明では下画面の様にカラーパターンを「グレー」デザインパターンを「ブログ」とします。

選択したら『Save』して確認してみましょう。

AFFINGER6-全体設定-カラーパターン-2

色のイメージが無かった箇所全体に『グレー(ダーク)』のカラーパターンが付加されたトップページの画面になります。

サイトを確認すると下画面の様になります。

サイトのメインカラー設定-変更後

これで基本となるサイトのイメージカラーとデザインが出来上がりました。
「超簡単 ^^」

osaboo

上画面をベースにメニューを設定していくよ!

ヘッダー&サイドメニューを作ろう!まずはメニュー項目の作成から...

メニューの項目を STEP01-02 でご紹介します。

メニュー表示用のカテゴリーを作成
【WordPress管理>投稿>カテゴリー】

メニュー作成の前にメニューの項目(カテゴリー)を作っておきましょう。

カテゴリーとは投稿を分類する「種類・範疇・部類・部門・領域」を意味します。(メニューの区分けになります。)

『WordPress管理>投稿>カテゴリー』をクリックします。

下記カテゴリーを作成します。

本記事では説明用に(仮)「カテゴリー1」「カテゴリー2」「カテゴリー3」「未分類」を作成します。(下画面)

メニュー表示用のカテゴリー

次にプルダウン用の子カテゴリーを作成します。項目を追加して『親カテゴリー』を指定するだけ!

(子カテゴリーを作らなくてもプルダウンメニューは作れますが解りやすい様に作成しておきます。)

メニュー表示用のカテゴリープルダウン用

以上でプルダウンメニューの完成です。「超簡単 ^^」

osaboo

上画面のカテゴリーをベースにメニュー項目を作成するよ!

ヘッダー&サイドメニューを作成【AFFINGER管理:メニュー設定】

『AFFINGER管理>メニュー』を選択すると下画面が表示されます。

ヘッダー&サイドメニュー設定

⒈「メニューを作ってない場合」は新規に作りましょう。⒉「メニューを作ってある場合」は、ここはスキップ」して「ヘッダーメニューの設定方法」に進んでください。

メニューはサイトの中身を如何に快適に観覧してもらうかを考慮してをメニュー化するのがおすすめです。

それではヘッダー&サイドメニューを作っていきましょう。(今回はヘッダーとサイドには同じメニューを使います。)

メニュー名を『Header&Side Navigation』として作成します。

『WordPress管理>外観>メニュー』をクリックします。

以下の画面が表示されます。

ホームページ・固定ページ・カテゴリーをメニューに追加作成します。次にメニューを表示させる場所を指定します。

最後に『メニューを保存』をクリックして完了です。

ヘッダー&サイドメニュー設定-2

プルダウンメニューは書き出し位置をずらすだけ! メニュー項目を「左クリック」したまま右にずらせは出来上がりです。

以上で「ヘッダー&サイドメニュー」が完了しました。

メニューの変更は、後から簡単にできるのでここでは表示確認を目的にメニューを作成しています。

osaboo

次は、ヘッダー用メニューがどんなふうに表示されるかみていくよ!

メニューが完成したらサイトを表示して確認してみましょう。

STDのメニュー表示はこんな感じです。

あちこちのサイトでよく見かける標準的なメニューの表示ですね。

画面には表示されて無いですが、プルダウンメニューも表示されます。

標準では、ヘッダーの領域に「サイトタイトル(上段左)」「ヘッダーメニュー(下段中央)」の2段表示になります。

(下画面はキャッチフレーズを表示しない設定にしてあります。)

『 STD 』ヘッダーメニュー表示画面

 STD-ヘッダーメニュー表示画面

当サイトの管理人は、チョットだけ人と違うのが好きなので下画面の感じがおすすめです。

ヘッダーの幅が狭くなってスッキリ見える!横列と違いプルダウンメニューもしっかり表現できます。
(ヘッダーメニュー表示画像-1 2 3を参照)

osaboo

シンプルだけど!よくない!? ^^")

『ウィジェットとガイドメニューを使った』幅の狭いヘッダーメニューの表示画面-1

幅の狭いヘッダーメニューの表示画面-1

プルダウンメニューもこんな感じで表現できます。

『ウィジェットとガイドメニューを使った』幅の狭いヘッダーメニューの表示画面-2

幅の狭いヘッダーメニューの表示画面-2

『ウィジェットとガイドメニューを使った』幅の狭いヘッダーメニューの表示画面-3

幅の狭いヘッダーメニューの表示画面-3
osaboo

それでは、お気に入りの「幅の狭いヘッダーメニュー」の作り方を説明するよ!

『WordPress管理>外観>ウィジェット』を選択して下画面を開きます。

次に『ナビゲーションメニュー』を『ヘッダー右(フッター)ウィジェット』に追加します。

WordPress管理-外観-ウィジェット

『AFFINGER>メニュー』を選択します。次に『PC用メインメニューを表示しない』にチェックを入れて『Save』します。

AFFINGER管理-メニュー設定

ヘッダーメニューの幅が広いと2段になってしまうので幅の調整をします。

WordPress管理-外観-カスタマイズ-各メニュー設定-PCヘッダーメニュー

『WordPress管理>外観>カスタマイズ>-各メニュー設定』を選択します。
次に『PCヘッダーメニュー』タブを開いて下にスクロールすると左画面が出てくるので『メニューの幅』を『80〜120』にして『公開』します。
(下画像では『100』に設定していますが、幅寸法は名称との枠のバランスを見て微調整してください。)

以上で「幅の狭いヘッダーメニュー」の完成です。超簡単でしょ ^^  アレンジは色々試してみてください。

osaboo

次はサイドバーに同じメニューを設定するよ!

サイドメニューの設定方法

メニューを作成したときに『メニューの位置』の設定でヘッダーメニュとサイドメニューにチェックを入れたので表示準備はできています。もし『サイドメニュー』にチェックを忘れたらチェックを入れましょう。

『WordPress管理>外観>ウィジェット』を選択して下画面を開きます。

次に『01_STINGERサイドバーメニュー』を『サイドバーウィジェット』に追加します。

インストール時に自動で割り付けられた「あまり使わないウィジェット」も削除します。
(削除は任意です。)

WordPress管理-外観-ウィジェット

ウィジェットの登録画面(詳細)

WordPress管理-外観-ウィジェット-利用できるウィジェット-01_STINGERサイドバーメニュー

メニューの選択手順
『01_STINGERサイドバーメニュー』→『サイドバーウィジェット』→『ウィジェットを追加』

補足

左画面は『『WordPress管理>外観>ウィジェット』を選択して『利用できるウィジェット>01_STINGERサイドバーメニュー』を選択した画面です。
01_STINGERサイドバーメニューをサイドバーウィジェットに追加する時の画面です。

ウィジェットの割り付け項目の確認画面(詳細)

WordPress管理-外観-ウィジェット-利用できるウィジェット

領域項目の『▲』をクリックすると中身が見れます。

補足

左画面は『『WordPress管理>外観>ウィジェット』を選択した時のサイドバーの領域に割り付けられている『利用できるウィジェット』を表示させた画面です。

(最上部にあるメニュー)『ライブプレビューで管理』を開いて確認しましょう。

サイドバーにメニューが割り付けられて、不要なウィジェットが削除されています。「下画面と同じ様になっていれば「OK」です。」

サイドバーメニューの表示画面

以上でサイドメニューの設定が完了しました。

あわせて読みたい!

AFFINGER6 スクロール時にヘッダー&メニューをtopに固定表示!
AFFINGER6 スクロール時にヘッダー&メニューをtopに固定表示!

AFFINGER6で「ヘッダーロゴ・ヘッダーメニュー・ヘッダー画像」を固定する方法をご紹介。CSSとJSの設定方法を画像付きで丁寧に説明しています。設定される部分の詳細説明もしているので初心者の方でヘッダー周りをカスタマイズしたい方必見です。

あわせて読みたい!

AFFINGER6 カスタマイズ【ヘッダー画像を全体に表示する方法!】
AFFINGER6 カスタマイズ【ヘッダー画像を全体に表示する方法!】

AFFINGER6を簡単に!大幅に!イメージチェンジさせる方法を初心者が実践。ヘッダー画像をtopページ全体に表示させる方法をご紹介。AFFINGER6を使って初心者でも簡単にカッコよくここまでできるカスタマイズの手順を丁寧にご紹介します。

まとめ!AFFINGER6 カスタマイズ!メインカラーとデザイン&メニュー編

サイトの基本的なカラーとメニューの設定を「標準のテンプレート機能」を使って、ご紹介しました。

まずは、大雑把にサイトの雰囲気を変える設定するとモチベーションが上がると思うので是非トライしてみてください。

細かく色々な設定箇所がありますが、サイトの運営をしながら少しずつ設定していくのも楽しいかと思います。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/



「稼ぐ」に特化したWordPressテーマ

action-affinger6-ex-1a

ACTION / AFFINGER

コスパ最強のWordPressテーマ

価格:14,800円(税込)

今なら漏れなく特典付き!!

AFFINGER6 ▶︎ 購入はこちら

「結果」を出すためのテーマ・プラグインが揃った戦略的セット

「コード管理・リンク計測」プラグイン