AFFINGER6EX - 備忘録。

2024年8月20日 2024年8月22日

注意：これは管理者の個人的な「備忘録」です。

目次でございます。

1 AFFINGER6EXの設定は面倒くさい
2 AFFINGER6EXでメニューを表示させることができる場所
3 AFFINGER6EXでヘッダーナビゲーションとは？
4 AFFINGER6EXでヘッダーナビゲーションエリアにメニューを表示させる
5 AFFINGER6EXでヘッダーナビゲーションエリアのメニューをスクロール固定追尾にする
6 AFFINGER6EXでヘッダー画像のエリアを消す
7 AFFINGER6EXでヘッダー画像エリアの高さを調節する
8 AFFINGER6EXでヘッダー画像エリアの背景色を変える
9 AFFINGER6EXでヘッダー画像の配置場所を調節する
10 AFFINGER6EXでヘッダー画像の背景画像を繰り返さない
11 AFFINGER6EXでヘッダー画像の横幅を100％にする
12 AFFINGER6EXでヘッダー画像の背景画像を幅100％のレスポンシブにする
13 AFFINGER6EXでヘッダー画像の背景画像をパララックス風にする（PCのみ）
14 AFFINGER6EXでヘッダー画像の背景画像をPCで非表示、スマホ・タブレットで表示
15 AFFINGER6EXでヘッダーのサイト名横にロゴを表示させる
16 AFFINGER6EXでサイト名をロゴに変換する
17 AFFINGER6EXで画像遅延読み込みの設定
18 AFFINGER6EXでCSS更新時、ユーザーのブラウザでも更新されるようにするコード
19 AFFINGER6EXで、PC＆タブレット表示/スマホ非表示

AFFINGER6EXの設定は面倒くさい

設定を変更できる場所が「AFFENGER管理」

はじめに（SAVE　＞　パーマリンク　＞　デザインパターン　＞　メニュー　＞　ヘッダー画像　＞　WP自動更新設定の確認　）
管理メモ
全体設定（デザインパターン・ドロップシャドウ・テキストシャドウ・カテゴリリンクサムネイル・サイト全体のレイアウト一括設定・カラム・サムネイル画像設定・ブログスライドカード・抜粋設定・フォントサイズ設定・くP）タグの下の余白設定・文字間レタースペーシング・グーグルフォント・・・・・・・）
メニュー（２段目のヘッダーメニュー・１番上のヘッダーナビエリアのメニューON・OFF・スマホスライドメニュー・スマホ追加メニュー１と２・スマホにミドルメニューを有効化・スマホにヘッダーメニューを有効化・スマホのフッターメニューの有効化）
ヘッダー（ヘッダーナビゲーションエリア・タイトルとキャッチフレーズ・高さ・表示・非表示・分割・電話番号・・・ヘッダー画像エリア・すべて非表示・高さトリミング・スライドショー・ヘッダーコンテンツ自由に入力・コンテンツ全体を上下左右中央寄せ・背景を暗くする・・・・記事スライドショー・ヘッダーに記事をスライドショー・カテゴリリンクを非表示・スライドショーの矢印アイコン・停止）
ヘッダー下・おすすめ（ヘッダーにカード型リンク４つ・角丸・サムネイルスライドショー（記事ID）・センター寄せ（スマホ）・画像+テキスト・おすすめ記事一覧の各種表示場所）
トップページ（自由に入力エリア・トップページのレイアウト・新着記事表示・固定ページフロントにも表示・タブ式カテゴリー記事一覧・NEWS（お知らせ）の表示・YouTube背景動画）
投稿・固定記事（カテゴリータグの表示・非表示・投稿日更新日・固定ページ表示・パンくずの非表示・コメント設定・アイキャッチ設定・記事一覧のカードデザイン化・この記事を書いた人・関連記事一覧・管理画面の記事一覧）
SNS/OGP（SNS各種ボタン・ツイッター・フェイスブック）
SEO（トップタイトル・メタディスクリプション・パンくずのホーム書き換え・タイトルの末尾やトップに追加するテキスト・構造化データ設定schema.org・表示速度優先ベータ版）
Google・広告・AMP（アナリティクス・サーチコンソール・AMP・アドセンス・インフィード広告・見出し前に広告挿入（h2-3,１番目～10番目）・Google自動広告の設定を自由に入力・非表示設定・スマホフッター広告・広告の明記・AMP対応）
会話アイコン
その他（Chromeの縮小画像に生じるぼかしを軽減・target="_blank"・rel="noopener noreferrer"・無限スクロール・セルフ品バック・RSSフィード・jsによるスムーススクロール・広告スクロール追尾・スマホ閲覧時に横揺れを強制改善・FontAwesomelcons4.7.0・コピーライトの年と著作権者の名称・無効化するウィジェットを選択・検索結果EX（除外するID）・演出アニメーション（上から下、など）・記事エリアの画像表示をスクロールでフェードイン・サイト全体の画像表示をスクロールでフェードイン・記事タイトルをフェードイン・遅延読み込みWP本体のLazyLoadを有効にする・・・・コードの出力（headに出力するコード【CSSの読み込み（フォーラムで実施）】）（body直後に出力するコード）（body直前に出力するコード）・・・・管理画面・WPの自動更新・テーマのアップデート更新通知）
機能を強化する（各種専用プラグインの紹介）

ただ、設定は「AFFINGER管理」だけではない。

外観　＞　「カスタマイズ」で17つの設定。（AFFINGER管理と「内容が被る」から始末に終えない）

全体カラー設定（リセットあり）
サイト基本情報（タイトル・キャッチフレーズ・サイトアイコン（ブラウザタブなどの。ファビコンか。））
背景（背景画像・背景色・ヘッダーエリア・ヘッダー以下のエリア）
ロゴ（タイトルをロゴ化。その場合タイトル横に設置してるアイコンロゴも消える。）
メニュー（PCヘッダーメニュー・サイドメニュー（ウィジェット）・スマホスライド・スマホミドル・スマホフッター・ガイドメニュー・ボックスメニュー）
ヘッダーナビゲーション（PC・スマホ）（スクロール固定・上部の色など）
ヘッダー画像（ヘッダーエリア2200×500・横100％・表示させない（画面サイズに応じて最大にする））
サブエリアの色（インフォメーションエリア・サムネイルスライドショー・ヘッダーバナーエリア）
メインエリア（ページャーとPREV NEXTリンク）
サイドバー（サイドバーを左にする）
フッター（色など）
見出し/テキスト（H２～５タグ・ウィジェットタイトル・カテゴリ・パンくず・投稿日時・タグ・テキスト色）
オプション/その他（プロフィールカード・すごいもくじ・会話ふきだしカラーボーダー・リスト・タイムライン・表・検索フォーム・RSSボタン・SNSボタン・お知らせ・おすすめ記事・問い合わせボタン（ウィジェット）・オリジナルボタン・フリーボックス・メモ・スライドボックス・ステップカウントポイント・コンタクトフォーム７送信ボタン・webアイコン（スタイル）
TOPに戻るボタン
ウィジェット
ホームページ設定
追加CSS

そして、外観　＞　「メニュー」　

最後に、外観　＞　「ウィジェット」

AFFINGER6EXでメニューを表示させることができる場所

ページの１番上「ヘッダーナビゲーション」エリアに表示させることが可能（横列）。スクロール固定も可。
上から２番目の「ヘッダー画像エリア」の上部または下部に差し込むことが可能
２カラム時に「ウィジェット」と「外観　＞　メニュー」　のコンボ　で　サイドバーに表示させることが可能
スマホ用にヘッダー画像エリアの下？に「ミドルメニュー表示」が可能。２列or３列
フッターに表示可能。（スマホはフッタースクロール固定が可能。）

AFFINGER6EXでヘッダーナビゲーションとは？

ヘッダーナビゲーションエリアは、

1番上のサイトタイトルが表示されているエリアのこと。

AFFINGER6EXでヘッダーナビゲーションエリアにメニューを表示させる

AFFINGER管理　＞　メニュー　＞　PC ヘッダーメニュー　＞　「ヘッダーメニュー（横列）を有効化（960px以上）ヘッダー右部コンテンツ（電話番号・ヘッダー右ウィジェット）は無効化されます」にチェックを入れる。
外観　＞　メニュー　にて、メニューを作り、下部の表示場所の「ヘッダーメニュー（横列）」にチェックを入れる。