このブログで設定している項目をメモがてら残します。
ほぼほぼ自分たちのための備忘録です。
随時更新予定
前提
- テーマは、affiger6 Tiger
- 色はGoogleMaterialDesignを使用する
- サーバはAWS Lightsailを利用
目次 非表示
プラグイン
導入しているプラグインとその用途です。
| プラグイン名 | 用途 |
|---|---|
| Autoptimize | サイトの高速化 |
| Compress JPEG & PNG images | 画像ファイルの圧縮とリサイズ |
| Contact Form 7 | お問い合わせページの作成 |
| Enlighter – Customizable Syntax Highlighter | ソースコード系のシンタックスハイライト用 |
| Gutenberg 用ブロックプラグイン2 | Affinger6でGutenbergを使うときに利用 |
| Invisible reCaptcha | お問い合わせページにreCaptchaを導入するために利用 |
| MathJax-LaTeX | 数式を書くときに利用 |
| Really Simple SSL | https対応 |
| Site Kit by Google | アクセス解析用 |
| Table of Contents Plus | 目次表示用 |
| TablePress | 複雑な表を作成するときに利用する |
| WP Fastest Cache | 高速化用 |
| WP Mail SMTP | このサイトからメールを送るために利用 |
| WPS Hide Login | ログイン画面のURLを変更するために利用 |
| XML Sitemaps | ブログのサイトマップを送信するために利用 |
Affinger6の設定
「AFFINGER管理」から設定している項目をまとめます。
全体設定
- カラーパターン：グレー（やさしい）
- デザインパターン：ブログ（初心者おすすめ）
- 【チェック】Googleフォントに「display=swap」を付与（表示速度改善）
- フォント全体：font-family:Noto, “Hiragino Sans”, Helvetica, Arial, sans-serif;
- フォントタイトル：font-family:Noto, “Hiragino Sans”, Helvetica, Arial, sans-serif;
- 【チェック】Googleマテリアルアイコンを利用する
会話アイコン
必要なアイコンを設定します
ファビコンの設定
下記から画像を選択する。画像は512×512以上が推奨。
「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン」
※ファビコンとは、タブ画像の左等に表示されるアイコンのことです。
ヘッダの色やスタイル設定
ヘッダの設定は、下記から行う
「外観」→「カスタマイズ」→「見出しタグ（hx）/テキスト」
下記は、各タグで設定している値を紹介しています。
h4タグ以下は使わないと決めているので、設定していません。
h2タグ
- 文字色：#000000
- 背景色：#eeeeee
- ボーダー色：#92949c
- 【チェック】ボーダーを上下のみにする
- 【チェック】左ラインデザインに変更
- 上下の余白：15
h3タグ
- 文字色：#000000
- 背景色：#92949c
- 背景色（グラデーション上部）：#92949c
- ボーダー色：#000000
- ボーダー色（サブ）：#000000
- 【チェック】グラデーションアンダーラインに変更（要ボーダー色）
- 左の余白：20
- 上下の余白：10
h3タグに関しては、左の余白
目次を横に表示
まず、ページの横に目次を表示させます。
「外観」→「ウィジェット」に移動し、「スクロール広告用」というウィジェットにTOC＋（Table of Content+）のウィジェットを追加します。
これでページ横に追従型の目次が表示されます。
ただ、自分の環境だとh2とh3タグのインデントがそろってしまうので、下記のCSSを導入してインデントを付けています。
/* TOC+ */
#toc-widget-2 ul>li>ul{ margin-left: 1em;
}
#toc_container p.toc_title+ul.toc_list>li { margin-bottom: 0.0em; padding-bottom: 0em;
}
#toc_container p.toc_title+ul.toc_list { margin-top: 0.5em;
}
#toc_container { border-radius: 9px; margin-top: 30px;
}
#toc_container li { padding-left: 0.3em !important;
}
#toc_container ul>li>ul>li { margin-bottom: 1px; margin-left: 2em;
}