こんにちは "osaboo"
です。"@osaboo_Bot"
AFFINGER 管理の「全体設定」タブのメニューでできる 詳細設定の内容を初心者さん向けにわかりやすくご紹介します。
それではご覧ください！
＼初心者でも安心！ コスパ最強の洗練されたWordPressテーマ／
＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／
- 少しづつ増え続ける当サイトオリジナル特典付！-
AFFINGER 管理：全体設定タブ（サイト全体の設定）の概要
この章では、AFFINGER 管理：全体設定タブ（サイト全体の設定）の概要をご紹介します。
以下のメニューから「サイト全体の設定」ページを開いて確認します。
※ ピンク色の破線部の設定項目を解説します。
※ 本記事の設定では『AFFINGER管理』のメニューを編集します。
ロリポップレンタルサーバーをお使いの方は、ドメインの『WAFの設定』を一時的に無効 にしてください。◀︎『403 Error』が出た場合。
-
-
AFFINGER6＆ロリポップ！レンタルサーバー『403 Error』が出た時の対処方法！
ロリポップ！レンタルサーバーを使用してAFFINGER6（ACTION)のヘッダー等の表示系をカスタマイズするとセーブ時に『403 Error』が表示されセーブできない！ こんな時はロリポップユーザー専用ページにログインしてWAFの設定を無効にするだけ！
各設定項目で、できることを以下に整理しました。^^／
・パターン・シャドウ
サイト全体の雰囲気を大きく変えることができます。
「へーダー・サイドバー・フッター」をまとめてアレンジでき、 基本的なサイトのスタイル変更が簡単にできるようになっています。
初めての方は、カラーパターンとデザインパターンから簡易設定すると時短できます。
※ 詳細は 次の章でご紹介します。
・カテゴリーリンク（サイドバー / フッター）
サイドバーやフッターにカテゴリーリンクの簡易デザインが適応できます。また、EXではカテゴリーリンクにサムネイル画像を表示することもできます。
・サイト全体のレイアウト一括設定※ここの設定が最優先されます
PC観覧時のサイトの幅を変更したり「1カラム・LP化」などの設定ができます。また、LP時のヘッダー表示やスマホのサイドバー表示の選択を設定できます。
・サムネイル画像設定
サムネイル画像のサイズやデザインの設定ができます。「記事一覧・ブログカード・埋め込みURL・スライド・カード型 サムネイル画像」を個別に設定できます。
※ 詳細は 次の章でご紹介します。
・抜粋設定
抜粋（メタディスクリプション）の表示文字数や「PC/スマホ」での細かい抜粋の「表示・非表示」設定ができます。
・フォントのサイズ
「スマホ・タブレット・PC」のフォントサイズと行間の設定が個別に設定でき、各設定項目は、「Pタグ・記事タイトル・H2-4・記事一覧」など、細かい設定ができます。また、Pタグ下の余白量と字間のスペースを一括で設定できます。
・フォントの種類
標準で7種類のフォントから選択することができ、Googleフォントの使用も可能です。
フォント使用箇所の設定も自由に選択できるので、色々なセクションでフォントを分ける？！凝った文字表示設定も可能です。「おすすめしませんが…」
それでは順番に見ていきましょう。
パターン・シャドウ
この章では、パターン・シャドウの設定と表示イメージをご紹介します。
設定項目は、以下の通りです。
補足
上画面の最下部にある以下の項目にチェックを入れておきましょう。
- カスタマイザー用CSSを<style>で出力
設定がうまく反映されない場合が あるようです。
当サイトでの不具合は未確認ですが、当初から『ON』にしています。参考
カラーパターン
カラーバターンは、「ヘッダー・フッター・サイドバー」の色合いを好みに合わせて設定できます。
以下は、色を指定していない状態のイメージと設定です。
カラーパターンのバリエーションは以下のようになります。好みに合わせてカラーを選んでください。
サンプルでは、デザインパターンを『ブログ』としています。
※ 画像はクローズアップして確認できます。
デザインパターン（カスタマイザーの初期値及びリセット値）
デザインパターンは、「サイドバー部」のデザインを好みに合わせて設定できます。
デザインパターンのバリエーションは以下のようになります。好みに合わせて、サイドバーのデザインを選択できます。サンプルでは、個々にカラーパターンも変えて表示しています。
※ 画像はクローズアップして確認できます。
ドロップシャドウ
ドロップシャドウは、以下の設定項目に対して一括で『影』を付けることができます。
その他の適応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 |
表示イメージと設定項目の違いは以下の通りです。好みに合わせてチェックを入れてください。
テキストシャドウ
テキストシャドウは、サイトの名前やタイトルなどに『影』を付けることができます。
表示の違いは微妙なので…「あまりおすすめできない」かな？
適応ID及びクラスの窓（枠欄）に入力すると、その要素に『影』を付けることができます。
補足
- 適応ID及びクラス：個別に入力する
- 適応ID・クラスの入力例：『header,.sitename a』
主な適応ID及びクラスは以下の通りです。（参考にしてくださいね）
| ブロック名称 | 適応ID及びクラス |
|---|---|
| ヘッダー | header |
| サイト名 | .sitename a |
表示イメージと設定項目の違いは以下の通りです。好みに合わせて「適応ID及びクラス」を入力してください。
カテゴリーリンク（サイドバー / フッター）
この章では、カテゴリーリンク（サイドバー / フッター）の設定と表示イメージをご紹介します。
サイドバーやフッターに設置するカテゴリーリンクのカラー設定（単独）ができます。
カラーパターンとは違う色で設定できるので、カテゴリーリンクをきわ立てるのに役立ちます。
カテゴリーリンクに簡易デザイン適応にチェックを入れ、好みに合わせてカラーを選択してください。
設定項目は、以下の通りです。
参考例は以下のようになります。
表示イメージと設定項目の違いは以下の通りです。お好みでカラーを変更してみてください。
「カラーパタン・デザインパターン」などのサイトデザインについて…以下の記事で詳しくご紹介しています。「あわせてご覧ください」
-
-
AFFINGER6 カスタマイズ！メインカラーとデザイン＆メニュー編
AFFINGER6をインストールしたけど、どこからカスタマイズすれば良く解らないという方必見です。インストール直後の画面から「サイト全体のデザイン」や「メニュー」等、AFFINGER6標準のテンプレート機能を使って簡単デザイン！カスタマイズ手順をご紹介。
サイト全体のレイアウト一括設定※ここの設定が最優先されます
この章では、サイト全体のレイアウト一括設定をご紹介します。
サイトの幅が狭いと感じたり、1カラムにしたい場合は 以下の設定項目で一括設定できます。
設定項目は、以下の通りです。
サイトの幅について…以下の記事で詳しくご紹介しています。「あわせてご覧ください」
-
-
AFFINGER6 サイトの幅を設定【初期設定値1060pxは狭すぎる！ベストな設定値は？】
AFFINGER6でデフォルトのサイト幅はちょっと狭いと感じませんか？！AFFINGER6なら超簡単にサイト全体の幅やmainエリア（記事）の幅を変更できるんです。Googleアドセンス広告の横並び2列表示の設定も超簡単です。初心者向けに図解で詳しく解説。
サムネイル画像設定
この章では、サムネイル画像設定をご紹介します。
この章でご紹介する「設定項目」画面の最上部では、アイキャッチ画像など個々のページに画像が設置されていない場合に表示させる サムネイル専用のデフォルト画像を設定できます。
サイトのイメージ画像があれば、その画像をアップロードするとオシャレ感が UPすると思います。
「記事一覧・ブログカード・埋め込みURL・スライド・カード型 サムネイル画像の縦横比」の設定項目は、次章で ご紹介します。
設定項目は、以下の通りです。
それでは順番に見ていきましょう。
記事一覧
記事一覧は、サムネイル画像の表示デザインが 設定できます。
設定項目は、以下の通りです。
※ 当サイトでは以下のように設定しています。（2024/05/14）参考にしてみてください。
大小色々なデザインが可能です。好みに合わせて選んでください。（以下サンプルの他にもいろいろできます）
ブログカード・埋め込みURL
ブログカード・埋め込みURLは、サムネイル画像の表示デザインが 設定できます。
設定項目は、以下の通りです。
※ 当サイトでは以下のように設定しています。（2024/05/14）参考にしてみてください。
大小色々なデザインが可能です。好みに合わせて選んでください。（以下サンプルの他にもいろいろできます）
スライド・カード型 サムネイル画像の縦横比
スライド・カード型 サムネイル画像の縦横比は、サムネイル画像の縦横比のデザインを設定できます。画像が切れてしまう場合（サンプル）は、『縦横比・基準』をそれぞれ調整します。
設定項目は、以下の通りです。
※ 当サイトでは以下のように設定しています。（2024/05/14）参考にしてみてください。
画像サイズと表示状況に応じて調整します。
抜粋設定
この章では、抜粋設定をご紹介します。
抜粋の文字数と表示箇所に対する表示設定ができます。
設定項目は、以下の通りです。
フォントのサイズ
この章では、フォントのサイズをご紹介します。
フォントのサイズを「スマホ（～599px）・タブレット（959px～600px）・PC（960px以上）」などの観覧時毎に、細かく設定できます。
細かすぎて大変！！
まずは…デフォルトでどんな感じか確認してから変更していこう！！
一括で編集OK：書き終わった記事も一気に編集できるから！記事を書き進める中で、見栄えを確認しつつ…調整していくといいよ。
設定項目は、以下の通りです。
フォントの種類
この章では、フォントの種類をご紹介します。
フォントの種類を「全体・記事タイトル・見出し・ウィジェット」などに分けて細かく設定できます。また、Googleフォントを反映させることもできます。
細かすぎて大変！！
まずは…デフォルトでどんな感じか確認してから変更していこう！！
フォントサイズと同じようにじっくりいこう。^^
注意 Googleフォントを使う場合は、サイト速度を注視（遅くなる！）＆いじりすぎはマイナス効果！！
設定項目は、以下の通りです。
フォントのサイズ・種類について…以下の記事で目安となるサイズ・種類を詳しくご紹介しています。
「あわせてご覧ください」
-
-
AFFINGER6 カスタマイズ【サイトデザインの設定ポイントをまとめてみた！】
AFFINGER６を使った！オリジナリティーと機能性をアップさせるために必要なカスタマイズ箇所と設定方法をご紹介。サイトデザインの設定ポイントを『トップページ・フォント・サイドバー』に分けて解説。初心者さん向けに丁寧に解説しています。
＼初心者でも安心！ コスパ最強の洗練されたWordPressテーマ／
＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／
- 少しづつ増え続ける当サイトオリジナル特典付！-
まとめ！AFFINGER 管理【全体設定】タブのサイト全体の設定を完全解説！AFFINGER6
AFFINGER6の管理画面で行う『全体設定タブ：サイト全体の設定』の各設定項目について初心者さん向けにご紹介しました。WordPressテーマ AFFINGER6専用の拡張機能を有効に使うために、お役に立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
