このサイトで現在使用しているWordPressのテーマ「Twenty Seventeen」のカスタマイズ方法を、備忘録も兼ねて紹介します。
ここで紹介するカスタマイズは、大きく分けて２種類あります。
管理画面の外観＞カスタマイズから選択できるデフォルトのカスタマイズと、もう１つはコード記述によるオリジナルの「詳細カスタマイズ」になります。
いずれにせよカスタマイズは、必ず子テーマを作成して、子テーマをカスタマイズしてくださいね。そうしないと、テーマが更新アップデートされた時に、それまでのカスタマイズがリセットされて消えてしまうので。
基本編
1-01 子テーマの作成
カスタマイズは、子テーマを作成して有効化し、そこに加えます。
そうすることで、親テーマである「Twenty Seventeen」が更新でアップデートされても、カスタマイズ内容が上書きされることなく、引き継がれます。
この記事を読む
1-02 基本構造とデフォルトのカスタマイズについて
WordPressのテーマ「Twenty Seventeen」がどういう構造でできているかの説明と、それに対応するデフォルトのカスタマイズの解説です。
この記事を読む
1-03 ホームページ設定やテーマオプションが表示されない
「Twenty Seventeen」のカスタマイザーに、テーマオプションや固定ページの設定が表示されなくなってしまった時の対処方法です。
この記事を読む
詳細カスタマイズ
2-01 フッター に自分のコピーライトを表記する
WordPress公式テーマのフッターには、デフォルトでは「Proudly powered by WordPress」と表示され、wordpress.orgへのリンクが貼られています。
この表記を自分のコピーライトにする方法です。
この記事を読む
2-02 アドセンス審査コードの貼り付け
アドセンスの審査に申請するとコードを<head></head>タグ内に貼るよう指示がありますが、ワードプレス のテーマ「Twenty Seventeen」の子テーマに、このコードの貼り付け方法です。これはそのまま自動広告の設定にもなります。
この記事を読む
2-03 スマホ表示でハンバーガーメニューを上部固定
「Twenty Seventeen」では、パソコン画面の場合は、下にスクロールしても「メニューバー」は上部に固定され、常に見える状態ですが、スマホのハンバーガーメニュー（三メニュー）は、スクロールすると無くなってしまう。
これを上部に常に固定するためのカスタマイズです。
この記事を読む
2-04 スマホ表示でハンバーガーメニューの文字を消す
スマホ表示のハンバーガーメニューの「三」の横にある「メニュー」というカタカナ文字を消したり英文字に変更するカスタマイズです。
この記事を読む
2-05 フロントページのセクション数を変更
「Twenty seventeen」のデザインの特徴である、フロントページをスクロールすると流れるように表示されるコンテンツ（文章）と画像のホームページセクション。これはデフォルトでは4つ設定できるようになっています。この数を増やしたい時のカスタマイズ方法です。
この記事を読む
2-06 特定のブロックにだけ背景色をつける
「Twenty Seventeen」で、コードを記載したブロックなど、特定のブロックボックスにだけ、背景色をつけたい時のカスタマイズです。
この記事を読む
2-07 「モデレートしてください」メールを止める
WordPressでは、記事内で別の「記事」のリンクを貼った際に、
「あなたの記事のURLが別の記事で紹介されました！」というお知らせメールを、管理者に送るピンバック機能が標準装備されています。
自分の記事内に別の記事（内部リンク）を貼っても同じように、ピンバック要請のメールが来るので、今回はそれを止めます。
この記事を読む
2-08 見出しのデザイン変更する
「Twenty Seventeen」の見出しのデザイン変更方法です。
デフォルトのままだと、記事内のh2とh3が大きすぎるように思ったので、文字を小さくし、h2は左に8pxの罫線を入れ、背景に薄いグレーを入れました。文字色もグレーから黒色に。
h3は下線2px入れました。
この記事を読む
2-09 パンくずリストを設置
パンくずリストをプラグイン「「Breadcrumb NavXT」で設置し、カスタマイズする方法です。表示中の記事タイトルをパンくずリスト末尾から削除したり、アイコンを加えたりします。
この記事を読む
2-10 アイコンフォントを利用する
「font Awesome」のアイコンフォントを「Twenty Seventeen」で利用する方法です。
「Font Awesome」はアイコン版のWebフォントで、無料版と有料版があります。ホーム、ページ、フォルダ、メール、ショップ、SNSなどのアイコンが、無料のものだけでも1600種以上あります。
この記事を読む
2-11 任意の画像にのみ枠線をつける
画像をアップした時に、白っぽい画像だとどこまでが画像なのか紛らわしい場合があります。
そんな時に、特定の画像にだけ枠線をつける方法です。
この記事を読む
2-12 コピーガード
テキストや画像のコピーをできなくするCSSです。
この記事を読む
2-13 スマホ表示でのトグルメニューの背景色変更
スマホ表示でハンバーガーメニューをタッチすると、トグルメニュー（アコーデオンメニュー）がダララーッと開くが、その時に「メニュー」の文字周りが、濃いグレーになる。
この記事を読む
2-14 セキュリティを強化とパクリ防止
.htaccessファイルに追記して、セキュリティ強化やパクリを防止する方法です。
この記事を読む
2-15 メニューの調整・背景色などの変更
メニューが増えた時に、メニューの間隔を詰めて調整できます。
この記事を読む
2-16 メニューバー横の矢印を消す
メニューバー横の矢印を消す方法です。
この記事を読む
2-17 特集テーマのアイキャッチ画像表示の調整
特集テーマの画像がドーンと大きく表示されるので、非表示にしたり、高さをします。
この記事を読む
2-18 カラーパレットの色変更
標準カラーパレットは12色ですが、他の色に変更する方法です。
この記事を読む