たかけのブログのWordPress設定

日記カテゴリー

このブログで設定している項目をメモがてら残します。

ほぼほぼ自分たちのための備忘録です。

随時更新予定

前提

  • テーマは、affiger6 Tiger
  • 色はGoogleMaterialDesignを使用する
  • サーバはAWS Lightsailを利用

プラグイン

導入しているプラグインとその用途です。

プラグイン名用途
Autoptimizeサイトの高速化
Compress JPEG & PNG images画像ファイルの圧縮とリサイズ
Contact Form 7お問い合わせページの作成
Enlighter – Customizable Syntax Highlighterソースコード系のシンタックスハイライト用
Gutenberg 用ブロックプラグイン2Affinger6でGutenbergを使うときに利用
Invisible reCaptchaお問い合わせページにreCaptchaを導入するために利用
MathJax-LaTeX数式を書くときに利用
Really Simple SSLhttps対応
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;
}

コメントを残す

メールアドレスが公開されることはありません。