BlogFarming

ブログを育てる、ブログファーミン!

Affinger5

【WordPress】テーマAffinger5/Wingのカスタマイズの一覧!これでもう迷わないはず!

更新日:

 

おじさん
Affinger5って色を変えたいとか思っても、どこで設定したらいいのか分かんなくなるんですよね
設定項目が多いぶん、ちょっと迷子になりやすいかもですね
うさぎ
おじさん
そこで一度カスタマイザーを全部見直すことにしました
一覧にしておくと、やりたいことを探しやすくなりそうですね
うさぎ

 

というわけで、今回はAffinger5のカスタマイザーを整理してみます。

 

この記事はAffinger5EX版(Wing)を元に書いています。他のバージョンには無い機能もあるかも知れませんが、ご了承ください。

 




 

カスタマイザーの見出し一覧

 

Affingerのカスタマイズは、「カスタマイザー(外観→カスタマイズ)」、Affinger5管理ウィジェットで行ないます。

 

まず、カスタマイザーの見出しの一覧を記載しますので、おおよそどの辺に何があるのか探しやすくなると思います。

 

全体カラー設定

  • Color Palette
  • 簡単設定を使用する
  • カスターマイザーをリセットする

ロゴ画像

  • ロゴ画像
  • モバイル用ロゴ画像

サイト基本情報

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

ヘッダー画像

  • 現在のヘッダー
  • おすすめ
  • ヘッダー画像エリア

背景画像

  • 背景画像

メニュー

  • メニュー
  • メニューの位置

基本エリア設定

  • 背景色
  • サイト背景色
  • ヘッダーエリア上
  • ヘッダーエリア
  • headerエリア
  • ヘッダー以下の背景色
  • 記事エリア背景色
  • サイドバー
  • 記事一覧の区切りボーダー
  • ページャーとPREV NEXTリンク

メニューのカラー設定

  • ヘッダーメニュー
  • サイドメニューウィジェット
  • スマートフォン
  • スマホ追加メニュー
  • スマホ追加メニュー2
  • スマホミドルメニュー
  • スマホフッターメニュー
  • ガイドメニュー

各テキストとhタグ(見出し)

  • 記事タイトル
  • H2タグ
  • H3タグ
  • H4タグ
  • H5タグ
  • まとめタグ
  • ウィジェットタイトル(サイドバー)
  • 記事タイトルのカテゴリ
  • 投稿日時・ぱんくず・タグ
  • 引用部分の背景色
  • NEW ENTRY & 関連記事
  • タグクラウド
  • 一括テキスト色強制変更
  • 記事内リンク色
  • 全てのリンクテキスト

オプションカラー

  • 記事内のWebアイコン(※要on-colorクラスを付与)
  • 数字リストのカラー
  • チェックリストのカラー
  • ステップ・ポイント
  • ブログカード
  • table(表)全体のカラー
  • RSS(購読する)ボタン
  • SNSボタン※一括
  • お知らせ
  • おすすめ記事
  • こんな方におすすめ
  • フリーボックスウィジェット
  • メモボックス
  • スライドボックス
  • ウィジェット問合せフォームボタン
  • オリジナルウィジェットボタン
  • 会話風ふきだしのカラー
  • 目次プラグイン(すごいもくじ)
  • コンタクトフォーム7送信ボタン
  • サイト管理者紹介
  • サムネイル画像
  • TOPに戻るボタン

ウィジェット

ウィジェットは「外観」→「ウィジェット」と同じ内容です。

 

ホームページ設定

  • ホームページの表示

追加 CSS

 

追加 CSSは、Affiger5に無い機能を追加する時などに使います。

 




 

設定項目の概要

 

カスタマイザーの見出し一覧を見ていただいたところで、次は、各設定項目の概要を紹介します。

 

「全体カラー設定」の概要

 

カスタマイザーの一番上の「全体カラー設定」は、おおまかにサイト全体のカラーを自分の選んだ色で簡単に設定できます。

 

サイト全体のカラーの設定

 

  • キーカラー
  • メインカラー
  • サブカラー
  • テキスト(一部)

この4つの色を決めてサイトのイメージを決めます。

 

 

メモ

最初は、この4つの色を決めるのも面倒かも知れません。そんなときは「Affiger5 管理」→「デザイン」で12色と5つのデザインパターンで始めるのもアリです。

 

 

 

Affinger5/Wingの全体のカラー設定を簡単に終わらせる!

  Affinger5(Wing)はカスタマイズできる項目が多いがゆえに、最初にデザインに凝りだすとなかなか記事を書くところまでいけません。   そこで、最初に用意されたカラーで簡 ...

続きを見る

 

ここで色とデザインを決めて「save」を押すとカスタマイザーにも自動的に反映されます。

 

例えば、「青(ビジネス)」を選ぶと下のように色が入力された状態になります。

 

おじさん
早くブログを始めたい方は、とりあえずこれでカラーを決めてしまえば楽ちんですね

 

カラー初期値のリセット

 

カラー設定を初めからやり直したいときは、ここでリセットします。

 

 

「ロゴ画像」の概要

 

ここではサイトのロゴ画像をヘッダー、フッター、モバイル用に設定できます。

 

ロゴ画像の登録

 

ロゴ画像の登録は、下の記事を参考にしてみてください。

Affinger5/Wingのロゴ画像・アイコン・ファビコンの設定方法

  Affinger5(Wing)のカスタマイズは、「外観」→「カスタマイズ」(カスタマイザー)と、「Affinger5 管理」の2箇所にあるため、ちょくちょく迷子になってしまいます。 &n ...

続きを見る

 

モバイルの表示の調整

 

下の方に、モバイル用のロゴ画像の位置や大きさを変えるチェックボックスがあります。

 

パソコン版のロゴの位置は、「Affiger5 管理」→「ヘッダー」でセンタリングだけ出来ます。

 

 

「サイト基本情報」の概要

 

 

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

 

サイト基本情報」では、サイトのタイトルやキャッチフレーズを編集できます

 

タイトルとキャッチフレーズの色の変更は、カスタマイザーの「基本エリア設定」→「サイトタイトルとキャッチフレーズの文字色」で変更できます。

 

また、タイトルとキャッチフレーズの上下は、「Affiger5 管理」→「ヘッダー」→「サイト名とキャッチフレーズを上下反対にする」で変更できます。

 

 

サイトアイコンの登録

 

下の方で、サイトアイコンを登録できます。

 

サイトアイコンは、ブラウザのブックマークやタブのマークになります。

 

iPhoneなどのアイコンは、「Affiger5 管理」→「会話・ファビコン等」→「apple-touch-icon画像」で設定します。

 

Affinger5/Wingのロゴ画像・アイコン・ファビコンの設定方法【WordPress】

  Affinger5(Wing)のカスタマイズは、「外観」→「カスタマイズ」(カスタマイザー)と、「Affinger5 管理」の2箇所にあるため、ちょくちょく迷子になってしまいます。 &n ...

続きを見る

 

 

「ヘッダー画像」の概要

 

 

ヘッダー画像の登録

 

ヘッダー画像も、カスタマイザー「Affiger5 管理」→「ヘッダー」の両方にカスタマイズ項目があります。

 

ヘッダーの構成はちょっと複雑です。画面で見ると下のようになっていて、ヘッダー画像は真ん中の電車のイラスト部分です。

 

 

ヘッダーは下の画像のように、何枚かの画像が重なって出来上がっています。

 

このことが理解できれば、カスタマイズもやりやすいと思います。

 

サンプルに示すトマト画像の「headerエリア」と「ヘッダーエリア」は別物なので注意してください
うさぎ
おじさん
ふむふむ「headerエリア」が一番下ということを覚えておけばいいというですね

 

 

 

このヘッダーをカスタマイズする箇所は色々な場所にあるので、整理しきれませんでした。

おじさん
なにか良い整理の仕方があれば追記します

 

ヘッダーの色や画像をカスタマイズするときは、次の場所を目安に探してみてください。

 

カスタマイザーの「ヘッダー画像」「基本エリア設定」「メニューのカラー設定」「ウィジェット(メニューの「外観」からも行けます)」。

 

「AFFINGER5管理」の「ヘッダー」「メニュー」「デザイン」。

 

メモ

初期設定ではヘッダーをカスタマイズしてもトップページ以外は画像が小さくなってしまいます。

AFFINGER5管理の「ヘッダー」→「表示設定」で全記事のヘッダーを大きくできます。

 

おじさん
ヘッダー画像をいじってたら、変更が反映されなくなったんだけど…
公式サイトに確認方法が記載されているので、 カスタマイザーが動かないとき を確認してみて
うさぎ

 

「背景画像」の概要

 

 

ここで、背景画像をアップロードすると、カスタマイズする項目が出てきます。

 

背景画像を入れず、単色で塗りつぶしたいときはカスタマイザーの「基本エリア設定」で設定します。

 

「基本エリア設定」の概要

 

「基本エリア設定」では、色々なエリアの背景を変更できます。

 

サイト背景と上部ライン

 

まず背景色サイト背景色サイト上部のラインを変更できます。

 

ここで、サイト背景色を選ぶと、背景色の分だけヘッダー部分も狭くなります。

 

ヘッダー画像を横幅いっぱいにしたいときは、背景色を設定しないようにしてください。

 

おじさん
配色は気持ち悪いかも知れないですが、分かりやすくするためなのでお許しください

 

ヘッダーエリア

 

ヘッダーエリアは、上の記事を参考にしてみてください。

 

サイトタイトルとキャッチフレーズの文字色は、ここで変更できます。

 

ヘッダーに電話番号を記載するときは、「Affiger5 管理」→「ヘッダー」の一番下に電話番号を登録する欄があります。

 

電話番号の文字の色は、カスタマイザーの「基本エリア設定」→「電話番号とヘッダーリンク」で変更できます。

 

記事エリアの背景

 

記事の文字部分の背景色ボーダー色を変更できます。

 

背景に画像を使ったときは、エリアを透過にするとオシャレな感じになります。

 

画像によっては記事が読みにくくなるので、注意が必要です

おじさん
やりすぎはダメですね

 

記事エリアを広げるボタンもここにあります。

 

640px→700pxに変更になり1行の文字数は増えますが、記事エリアの背景の大きさは変わりません

 

 

サイドバーの背景色と文字

 

記事横のサイドバーの文字と背景の色を変更できます。

 

初期設定では、サイドバーの上の部分が緑色になりません。

 

これは、サイドバーウィジェット部分しか背景色を変更できないからです。この部分は何かっていうと、新着記事です。

 

非表示にするには「Affiger5 管理」→「トップページ」→「記事一覧」 →「トップページのサイドバーの新着記事一覧を非表示にする」にチェックを入れて保存します。

 

 

これで、サイドバーが上に来ました!

 

フッターエリア

 

フッター(スクロールした最下部)部分の色や幅を編集できます。

 

記事一覧の区切りボーダー

 

トップページやカテゴリ別の記事一覧の区切りのラインの色を変更できます。

 

ページャーとPREV NEXTリンク

 

ページャーとは、記事一覧の下に出てくる記事送り機能のことです。ここで色を編集できます。

 

 

「メニュー・メニューのカラー設定」の概要

 

ここでいう「メニュー」は、サイト内を巡回しやすくするためのカテゴリーや固定記事のタイトルのことを言います。

 

どのタイトルやカテゴリーをメニューに表示するかは、「外観」→「メニュー」または、カスタマイザーの「メニュー」で編集できます。

 

メニューを設定する時には階層をつけて、メニューの種類が増えすぎないようにするのがオススメです。

 

「各テキストとhタグ」の概要

 

ここでは、記事内の段落ごとの見出しを設定できます。見出しには画像を使うことも出来ます

 

画像サイズは、公式サイトで見本画像をダウンロードできるので、それを参考にしてみてください。

 

公式サイト「チェック」素材と三角矢印

↑ のようなリンクの色も「各テキストとhタグ」で設定できます
うさぎ
おじさん
リンク色はクックパッドのような料理サイトでは緑色を使っているところもありますが、青色が無難ですね

 




 

「オプションカラー」の概要

 

投稿記事のオプションのカラーを設定します。

おじさん
カラーを設定しても、それをどこで使うのかが分かりにくいんですよね
設定したアイテムをプラグインのステ子 に登録しておけば、使いやすいわよ
うさぎ

 

 記事内のWebアイコン(※要on-colorクラスを付与)

 

記事投稿の上部の「スタイル」→「アイコン」で表示されるアイコンのからーを決めます。

 

「on-colorクラス」は、表示したい文字をなぞって、青く反転させてから表示したいアイコンの名称をクリックすればOKです。

 

きじを作成する画面をテキストモードにしてみて、<span class="hatenamark2 on-color"> はてなマーク</span>このようになっていればOKです。

 

 はてなマーク

チェックマーク

エクステンションマーク

 

Webアイコンの下の「チェックボックス」「チェックボックス(枠)」は、「スタイル」→「ボックス」→「チェックボックス(番号なしリスト)」の色です。

 

このチェックボックスは先に箇条書きを作っておいて、その後でコードで挟まないと作れないようです。

 

<div class="st-square-checkbox st-square-checkbox-nobox">

<ul>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>

</div>

 

  • ←のチェックボックスと枠の色
  • ←のチェックボックスと枠の色

 

同じく、「数字リストのカラー」「チェックリストのカラー」も、この「スタイル」→「ボックス」の「チェックリスト」「ナンバリング」のカラー設定です。

  1. ナンバリング
  2. ナンバリング

 

  • チェックリスト
  • チェックリスト

 

ステップ・ポイント

 

ステップとポイントは、記事投稿の「タブ」→「テキストパーツ」→にあります。

 

step
1
これはステップです

 

これはポイントです

 

ブログカード

 

ブログカードは下のような内部リンクを示すアイテムのことです。

関連記事
Affinger5/Wingの全体のカラー設定を簡単に終わらせる!【WordPress】

  Affinger5(Wing)はカスタマイズできる項目が多いがゆえに、最初にデザインに凝りだすとなかなか記事を書くところまでいけません。   そこで、最初に用意されたカラーで簡 ...

続きを見る

 

 

table(表)全体のカラー

 

表を作る前に設定しておくことで、カラーを入力する手間が省けます。

 

表は、記事上のテーブルから作成します。

 

 

カラーを設定していても、表ごとに変更することは可能です。

 

SNSボタン

 

記事下に表示されるSNSアイコンの色を変更できます。

お知らせ

 

ウィジェットの「07 STIGERお知らせエリア」をカスタマイズします。

おすすめ記事

 

おすすめ記事は、トップページの上部や記事下などに一覧で表示できます。

 

カラーはカスタマイザーで設定し、表示する記事番号や場所は「Affinger5管理」→「おすすめ記事一覧」で設定します。

 

また、記事の途中などに「おすすめ記事一覧」を挿入したい場合は、記事上の「タグ」→「記事一覧」→「おすすめ記事一覧」をクリックで挿入できます。

こんな方におすすめ

 

記事上の「タグ」→「ボックスデザイン」→「こんな方におすすめ」のボックスをカスタマイズできます。

 

(v)バージョン

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

 

[v]バージョン

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

 

フリーボックスウィジェット

 

ウィジェットにある「03 STIGERフリーボックス」をカスタマイズできます。

 

 

メモボックス

 

記事上のタグからメモボックスに行けるのですが、カスタマイザーをいじってもこのメモボックスは何も変わりません。

 

おじさん
他のメモボックスかな
分かり次第、追記しますね
うさぎ

 

スライドボックス

 

スライドボックスは、記事上の「タグ」→「ボックスデザイン」→「スライドボックス」で表示できます。

+ クリックするといいことがあるかも!

からっぽだった…

 

ウィジェット問合せフォームボタン

 

ウィジェットにある「02 STIGER問合せボタン」をカスタマイズします。

 

オリジナルウィジェットボタン

 

ウィジェットにある「06 STIGERオリジナルボタン」をカスタマイズします。

 

ウィジェット自体に色を変更するボタンがあり、基本的にそちらのほうが優先されます。

 

カスタマイザーでは、グラデーションを付けたり角を丸くしたり出来ます。

 

会話風ふきだしのカラー

 

なぜか、ここで吹き出しの背景色だけここで変更できます。

 

画像のアイコンは「Affinger5 管理」→「会話風アイコン」で登録します。

 

8個以上登録したいときは、有料版の「会話ふきだしプラグイン 」を購入するか、「WordPress 吹き出し」で検索すれば無料でも作れます。

 

おじさん
わたしは面倒くさがりなので、プラグインを買いました

 

目次プラグイン(すごいもくじ)

 

目次をカスタマイズできます。

 

有料プラグイン「SUGOIMOKUJI 」でなくても、無料プラグイン「Table of Contents Plus」もここでカスタマイズできます。

 

目次をコピペで作成!SUGOIMOKUJIもカスタマイズ!

ブログの目次は、検索で訪問してきたユーザーが記事を探しやすくなるだけでなく、記事の内部リンクになるのでSEO的にも重要です。   そこで今回は、WordPressの記事に目次を挿入する方法と ...

続きを見る

 

コンタクトフォーム7送信ボタン

 

プラグイン「Contact Form 7」の送信ボタンをカスタマイズできます。

 

サイト管理者紹介

 

ウィジェットの「11 STIGERサイト管理者紹介」をカスタマイズします。

 

書く文言は、「WordPressのメニュー」→「ユーザー」→「あなたのプロフィールで編集できます。

この機能は一人のユーザー(管理者)しか使えません。

 

 

サムネイル画像

 

サイドバーやトップページのサムネイル画像にを付けれます。

 

TOPに戻るボタン

 

ページを下にスクロールした時に出てくる「TOPに戻るボタン」をカスタマイズできます。

 

 

まとめ

 

今回は、Affinger5/Wingのカスタマイザーを紹介しました。

 

長い記事のようですが、まだ説明していないところもあって、Affinger5の機能の多さを改めて感じました。

 

わたし個人としても、まだまだ全然カスタムしていないので、これからドンドン改良していくつもりです。

もし、購入を迷っている方がいたら迷っている時間は無駄です。今すぐ買って、カスタマイズしていきましょう!

 

このブログはAffiger5/Wingを使っています


Affiger5/Wingの公式サイト

-Affinger5
-

Copyright© BlogFarming , 2019 All Rights Reserved Powered by AFFINGER5.