当ページのリンクには広告が含まれています。

AFFINGER6 管理【全体設定タブ】サイト全体の設定を完全解説!

AFFINGER6【管理全体設定タブ】サイト全体の設定を完全解説!

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

AFFINGER 管理全体設定タブメニューで出来る 詳細設定の内容を初心者さん向けにわかりやすくご紹介します。

AFFINGER6の「サイト全体設定」では、基本となるカラーパターンやデザインパターンなどサイトの大枠なデザインを決めることができます。

初心者さんにとっては「設定内容がどの箇所に反映されているのかわからない」逆に言えば…「この部分の色や形を変えたいのにどこで設定すれば良いのかわからない」ということが多々あります。

この記事では、このような悩みを解決するお手伝いをします。

こんな方におすすめ!

  • AFFINGER6の初心者さん
  • オンリーワンのサイトにカスタマイズしたい
  • AFFINGER6のカスタマイズを詳しく知りたい

この記事でわかること!

  • AFFINGER 管理:全体設定タブ(サイト全体の設定)の概要
  • サイト全体の設定:パターン・シャドウ
    1. カラーパターン
    2. デザインパターン(カスタマイザーの初期値及びリセット値)
    3. ドロップシャドウ
    4. テキストシャドウ
  • サイト全体の設定:カテゴリーリンク(サイドバー / フッター)
  • サイト全体の設定:サイト全体のレイアウト一括設定※ここの設定が最優先されます
  • サイト全体の設定:サムネイル画像設定
    1. 記事一覧
    2. ブログカード・埋め込みURL
    3. スライド・カード型 サムネイル画像の縦横比
  • サイト全体の設定:抜粋設定
  • サイト全体の設定:フォントのサイズ
  • サイト全体の設定:フォントの種類
  • まとめ!

それではご覧ください!

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

AFFINGER 管理:全体設定タブ(サイト全体の設定)の概要

この章では、AFFINGER 管理:全体設定タブ(サイト全体の設定)の概要をご紹介します。

以下のメニューから「サイト全体の設定」ページを開いて確認します。

『AFFINGER管理>全体設定』をクリックします。

※ ピンク色の破線部の設定項目を解説します。

※ 本記事の設定では『AFFINGER管理』のメニューを編集します。

ロリポップレンタルサーバーをお使いの方は、ドメインの『WAFの設定』を一時的に無効 にしてください。◀︎『403 Error』が出た場合。

AFFINGER6&ロリポップ!レンタルサーバー『403 Error』が出た時の対処方法!
AFFINGER6&ロリポップ!レンタルサーバー『403 Error』が出た時の対処方法!

ロリポップ!レンタルサーバーを使用してAFFINGER6(ACTION)のヘッダー等の表示系をカスタマイズするとセーブ時に『403 Error』が表示されセーブできない! こんな時はロリポップユーザー専用ページにログインしてWAFの設定を無効にするだけ!

各設定項目で、できることを以下に整理しました。^^/

パターン・シャドウ

サイト全体の雰囲気を大きく変えることができます。

「へーダー・サイドバー・フッター」をまとめてアレンジでき、 基本的なサイトのスタイル変更が簡単にできるようになっています。

初めての方は、カラーパターンとデザインパターンから簡易設定すると時短できます。

主な項目は以下の通りです。

  • カラーパターン
  • デザインパターン(カスタマイザーの初期値及びリセット値)
  • ドロップシャドウ
  • テキストシャドウ

※ 詳細は 次の章でご紹介します。

カテゴリーリンク(サイドバー / フッター)

サイドバーやフッターにカテゴリーリンクの簡易デザインが適応できます。また、EXではカテゴリーリンクにサムネイル画像を表示することもできます。

サイト全体のレイアウト一括設定※ここの設定が最優先されます

PC観覧時のサイトの幅を変更したり「1カラム・LP化」などの設定ができます。また、LP時のヘッダー表示やスマホのサイドバー表示の選択が設定できます。

サムネイル画像設定

サムネイル画像のサイズやデザインの設定ができます。「記事一覧・ブログカード・埋め込みURL・スライド・カード型 サムネイル画像」を個別に設定できます。

主な項目は以下の通りです。

  • 記事一覧
  • ブログカード・埋め込みURL
  • スライド・カード型 サムネイル画像の縦横比

※ 詳細は 次の章でご紹介します。

抜粋設定

抜粋(メタディスクリプション)の表示文字数や「PC/スマホ」での細かい抜粋の「表示・非表示」設定ができます。

フォントのサイズ

「スマホ・タブレット・PC」のフォントサイズと行間の設定が個別に設定でき、各設定項目は、「Pタグ・記事タイトル・H2-4・記事一覧」など、細かい設定ができます。また、Pタグ下の余白量と字間のスペースを一括で設定できます。

フォントの種類

標準で7種類のフォントから選択することができ、Googleフォントの使用も可能です。

フォント使用箇所の設定も自由に選択できるので、色々なセクションでフォントを分ける?!凝った文字表示設定も可能です。「おすすめしませんが…」

それでは順番に見ていきましょう。

サイト全体の設定:パターン・シャドウ

この章では、パターン・シャドウの設定と表示イメージをご紹介します。

設定項目は、以下の通りです。

AFFINGER 管理:全体設定タブ|パターン・シャドウ
設定項目

補足

上画面の最下部にある以下の項目にチェックを入れておきましょう。

  • カスタマイザー用CSSを<style>で出力

設定がうまく反映されない場合が あるようです。
当サイトでの不具合は未確認ですが、当初から『ON』にしています。参考

カラーパターン

カラーバターンは、「ヘッダー・フッター・サイドバー」の色合いを好みに合わせて設定できます。

以下は、色を指定していない状態のイメージと設定です。

デザインパターン(カスタマイザーの初期値及びリセット値)の設定が『リセット』の場合、カラーパターンの設定が反映されません。(NG)
チェックを『ノーマル・ブログ』など他にデザインにチェックを切り替えてからカラーパターンを設定しましょう。

逆に カラーパターンの設定が『リセット』場合、デザインパターンの設定は反映されます。(OK)

  • リセット →『ノーマル or ブログ』が おすすめです。

カラーパターンのバリエーションは以下のようになります。好みに合わせてカラーを選んでください。
サンプルでは、デザインパターンを『ブログ』としています。
※ 画像はクローズアップして確認できます。

デザインパターン(カスタマイザーの初期値及びリセット値)

デザインパターンは、「サイドバー部」のデザインを好みに合わせて設定できます。

デザインパターンのバリエーションは以下のようになります。好みに合わせて、サイドバーのデザインを選択できます。サンプルでは、個々にカラーパターンも変えて表示しています。
※ 画像はクローズアップして確認できます。

ドロップシャドウ

ドロップシャドウは、以下の設定項目に対して一括で『影』を付けることができます。

その他の適応ID及びクラスの窓(枠欄)に入力することで、個別に指定することもできます。

記事に重量感(メリハリ)が欲しい場合には、チェックを入れてみてください。

設定項目は以下の通りです。「ちなみに…筆者は影付きが好きです。^^"」

補足

  • 以下の要素にドロップシャドウを追加します』にチェックを入れ、且つ『その他の適応ID及びクラス』を個別に入力した場合、重複した要素の『影』が濃く表示されます。
  • 以下の要素にドロップシャドウを追加します』のチェックを外し、『その他の適応ID及びクラス』を個別に入力した場合、その要素のみに『影』が表示されます。
  • 以下の要素にドロップシャドウを追加します
  • その他の適応ID及びクラス:個別に入力する
    • 適応ID・クラスの入力例:『.st-kaiwa-hukidashi,.st-header-flexwrap,.freebox,.st-mybox,.clip-memobox,.main』

主な適応ID及びクラスは以下の通りです。(参考にしてください)

ブロック名称適応ID及びクラス
AFFINGER:会話ふきだし.st-kaiwa-hukidashi
AFFINGER:バナー風ボックス.st-header-flexwrap
AFFINGER:タイトル付きフリーボックス.freebox
AFFINGER:マイボックス.st-mybox
AFFINGER:メモ.clip-memobox
メインエリアmain

表示イメージと設定項目の違いは以下の通りです。好みに合わせてチェックを入れてください。

yajirusi-sita-80x40

テキストシャドウ

テキストシャドウは、サイトの名前やタイトルなどに『影』を付けることができます。

表示の違いは微妙なので…「あまりおすすめできない」かな?

osaboo
osaboo

適応ID及びクラスの窓(枠欄)に入力すると、その要素に『影』を付けることができます。

補足

  • 適応ID及びクラス:個別に入力する
    • 適応ID・クラスの入力例:『header,.sitename a』

主な適応ID及びクラスは以下の通りです。(参考にしてくださいね)

ブロック名称適応ID及びクラス
ヘッダーheader
サイト名.sitename a
不明.head-teino

表示イメージと設定項目の違いは以下の通りです。好みに合わせて「適応ID及びクラス」を入力してください。

yajirusi-sita-80x40

サイト全体の設定:カテゴリーリンク(サイドバー / フッター)

この章では、カテゴリーリンク(サイドバー / フッター)の設定と表示イメージをご紹介します。

サイドバーやフッターに設置するカテゴリーリンクのカラー設定(単独)ができます。

カラーパターンとは違う色で設定できるので、カテゴリーリンクをきわ立てるのに役立ちます。

カテゴリーリンクに簡易デザイン適応にチェックを入れ、好みに合わせてカラーを選択してください。

設定項目は、以下の通りです。

参考例は以下のようになります。

AFFINGER 管理:全体設定タブ|カテゴリーリンク(サイドバー / フッター)|イメージ|チェックON
表示イメージ

表示イメージと設定項目の違いは以下の通りです。お好みでカラーを変更してみてください。

AFFINGER 管理:全体設定タブ|カテゴリーリンク(サイドバー / フッター)|赤イメージ|チェックOFF
表示イメージ
AFFINGER 管理:全体設定タブ|カテゴリーリンク(サイドバー / フッター)|赤設定|チェックOFF
設定項目
AFFINGER6 カスタマイズ!メインカラーとデザイン&メニュー編
AFFINGER6 カスタマイズ!メインカラーとデザイン&メニュー編

AFFINGER6をインストールしたけど、どこからカスタマイズすれば良く解らないという方必見です。インストール直後の画面から「サイト全体のデザイン」や「メニュー」等、AFFINGER6標準のテンプレート機能を使って簡単デザイン!カスタマイズ手順をご紹介。

サイト全体の設定:サイト全体のレイアウト一括設定※ここの設定が最優先されます

この章では、サイト全体のレイアウト一括設定をご紹介します。

サイトの幅が狭いと感じたり、1カラムにしたい場合は 以下の設定項目で一括設定できます。

設定項目は、以下の通りです。

AFFINGER6 サイトの幅を設定【初期設定値1060pxは狭すぎる!ベストな設定値は?】
AFFINGER6 サイトの幅を設定【初期設定値1060pxは狭すぎる!ベストな設定値は?】

AFFINGER6でデフォルトのサイト幅はちょっと狭いと感じませんか?!AFFINGER6なら超簡単にサイト全体の幅やmainエリア(記事)の幅を変更できるんです。Googleアドセンス広告の横並び2列表示の設定も超簡単です。初心者向けに図解で詳しく解説。

サイト全体の設定:サムネイル画像設定

この章では、サムネイル画像設定をご紹介します。

この章でご紹介する「設定項目」画面の最上部では、アイキャッチ画像など個々のページに画像が設置されていない場合に表示させる サムネイル専用のデフォルト画像が設定できます。

yajirusi-sita-80x40

サイトのイメージ画像があれば、その画像をアップロードするとオシャレ感が UPすると思います。

「記事一覧・ブログカード・埋め込みURL・スライド・カード型 サムネイル画像の縦横比」の設定項目は、次章で ご紹介します。

設定項目は、以下の通りです。

それでは順番に見ていきましょう。

記事一覧

記事一覧は、サムネイル画像の表示デザインが 設定できます。

設定項目は、以下の通りです。
※ 当サイトでは以下のように設定しています。(2024/05/14)参考にしてみてください。

大小色々なデザインが可能です。好みに合わせて選んでください。(以下サンプルの他にもいろいろできます)

ブログカード・埋め込みURL

ブログカード・埋め込みURLは、サムネイル画像の表示デザインが 設定できます。

設定項目は、以下の通りです。
※ 当サイトでは以下のように設定しています。(2024/05/14)参考にしてみてください。

AFFINGER 管理:全体設定タブ|サムネイル画像設定|ブログカード・埋め込みURL
設定項目

大小色々なデザインが可能です。好みに合わせて選んでください。(以下サンプルの他にもいろいろできます)

スライド・カード型 サムネイル画像の縦横比

スライド・カード型 サムネイル画像の縦横比は、サムネイル画像の縦横比のデザインが設定できます。画像がが切れてしまう場合(サンプル)は、『縦横比・基準』をそれぞれ調整します。

設定項目は、以下の通りです。
※ 当サイトでは以下のように設定しています。(2024/05/14)参考にしてみてください。

AFFINGER 管理:全体設定タブ|サムネイル画像設定|スライド・カード型 サムネイル画像の縦横比
設定項目

  • 1200x630(px)

上記の設定と画像サイズを合わせて使用するとほぼいい感じになるかと…細かい設定や確認が面倒な方は真似してみてくださいね。

画像サイズと表示状況に応じて調整します。

サイト全体の設定:抜粋設定

この章では、抜粋設定をご紹介します。

抜粋の文字数と表示箇所に対する表示設定ができます。

設定項目は、以下の通りです。

メタディスクリプションの「書き方・文字数・SEO対策と注意事項」徹底的に調べてみた! | osaboo.com
メタディスクリプションの「書き方・文字数・SEO対策と注意事項」を掘り下げてご紹介。PCとSPでの表示数の違いやメタディスクリプションが反映されない理由等...

サイト全体の設定:フォントのサイズ

この章では、フォントのサイズをご紹介します。

フォントのサイズを「スマホ(~599px)・タブレット(959px~600px)・PC(960px以上)」などの観覧時毎に、細かく設定できます。

細かすぎて大変!!
まずは…デフォルトでどんな感じか確認してから変更していこう!!
一括で編集OK:書き終わった記事も一気に編集できるから!記事を書き進める中で、見栄えを確認しつつ…調整していくといいよ。

osaboo
osaboo

設定項目は、以下の通りです。

サイト全体の設定:フォントの種類

この章では、フォントの種類をご紹介します。

フォントの種類を「全体・記事タイトル・見出し・ウィジェット」などに分けて細かく設定できます。また、Googleフォントを反映させることもできます。

細かすぎて大変!!
まずは…デフォルトでどんな感じか確認してから変更していこう!!
フォントサイズと同じようにじっくりいこう。^^
注意 Googleフォントを使う場合は、サイト速度を注視(遅くなる!)&いじりすぎはマイナス効果!!

osaboo
osaboo

設定項目は、以下の通りです。

AFFINGER6 カスタマイズ【サイトデザインの設定ポイントをまとめてみた!】
AFFINGER6 カスタマイズ【サイトデザインの設定ポイントをまとめてみた!】

AFFINGER6を使った!オリジナリティーと機能性をアップさせるために必要なカスタマイズ箇所と設定方法をご紹介。サイトデザインの設定ポイントを『トップページ・フォント・サイドバー』に分けて解説。初心者さん向けに丁寧に解説しています。

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

まとめ!AFFINGER6 管理【全体設定タブ】サイト全体の設定を完全解説!

AFFINGER6 管理画面で行う『全体設定タブ:サイト全体の設定』の各設定項目について初心者さん向けにご紹介しました。WordPressテーマ AFFINGER6専用の拡張機能を有効に使うために、お役に立てば嬉しいです。

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

-基本設定_AFFINGER
-,