日記

たかけのブログの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マテリアルアイコンを利用する

会話アイコン

必要なアイコンを設定します

ファビコンの設定

下記から画像を選択する。画像は512x512以上が推奨。

「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン」

※ファビコンとは、タブ画像の左等に表示されるアイコンのことです。

ヘッダの色やスタイル設定

ヘッダの設定は、下記から行う

「外観」→「カスタマイズ」→「見出しタグ(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;
}
  • この記事を書いた人

たかけ

このブログは、犬と暮らす夫婦が自分達の備忘録のために書いているブログです。 夫婦は共にIT系企業に勤めるサラリーマンで、お犬様は女の子の柴犬です。 仕事で勉強したIT系のこと、投資、愛犬のことなどを記事にしています。

-日記
-