WordPressのテーマ(STINGER8)でカスタマイズした時の変更した内容を記載したいと思います。
バージョンなどでソースの内容は異なると思います。
環境
| OS/ミドルウェア | バージョン |
|---|---|
| CentOS | 7.2.1511 |
| Apache | 2.4.6 |
| PHP | 7.0.28 |
| MySQL | 5.7.21 |
| WordPress | 4.9.4 |
テーマのインストール
下記URLを参考にインストールする。
参考URL → STINGER PLUS+及び8のインストールと子テーマ導入
ヘッダー画像の変更
WordPress管理画面の「外観」→「ヘッダー」
[新規画像を追加]をクリック
ファイルをアップロードからファイルをアップします。
[選択して切り抜く]をクリック
画像の位置をずらし、[画像切り抜き]をクリック
[公開]をクリック
h１スタイル変更
WordPress管理画面の「外観」→「テーマの編集」
対象ファイル：STINGER8 Child: スタイルシート (style.css)
ファイルの場所：wordpress/wp-content/themes/stinger8-child/style.css
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*記事タイトル ----------------------------------------------------*/ .entry-title, .post .entry-title { border-top: solid 2px #1e73be; border-bottom: solid 1px #1e73be; padding: 5px 15px; padding-top: 8px; padding-bottom: 8px; /*-- ここまで --*/ } |
▼変更前▼
▼変更後▼
h２スタイル変更
WordPress管理画面の「外観」→「テーマの編集」
対象ファイル：STINGER8 Child: スタイルシート (style.css)
ファイルの場所：wordpress/wp-content/themes/stinger8-child/style.css
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/*中見出し ----------------------------------------------------*/ h2 { background: #1e73be; color: #ffffff; position: relative; border: none; margin-bottom: 30px; padding-left: 25px!important; padding-top: 20px!important; padding-bottom: 20px!important; /*-- ここまで --*/ } |
▼変更前▼
▼変更後▼
h３スタイル変更
WordPress管理画面の「外観」→「テーマの編集」
対象ファイル：STINGER8 Child: スタイルシート (style.css)
ファイルの場所：wordpress/wp-content/themes/stinger8-child/style.css
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/*小見出し ----------------------------------------------------*/ .post h3 { border-left:8px solid #1e73be; border-bottom:1px solid #1e73be; font-size: 19px; line-height: 27px; padding-left: 20px; /*-- ここまで --*/ } |
▼変更前▼
▼変更後▼
h４スタイル変更
WordPress管理画面の「外観」→「テーマの編集」
対象ファイル：STINGER8 Child: スタイルシート (style.css)
ファイルの場所：wordpress/wp-content/themes/stinger8-child/style.css
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 |
/*小見出し ----------------------------------------------------*/ .post h4 { background: #FFFFFF; border-bottom:1px solid #1e73be; font-size: 17px; /*-- ここまで --*/ } |
▼変更前▼
▼変更後▼
ヘッダー部分の変更
WordPress管理画面の「外観」→「テーマの編集」
対象ファイル：STINGER8 Child: スタイルシート (style.css)
ファイルの場所：wordpress/wp-content/themes/stinger8-child/style.css
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/*ヘッダー ----------------------------------------------------*/ #headbox-bg { background: #000;/* 背景色 */ /*-- ここまで --*/ } /*ヘッダーのサイト名 ----------------------------------------------------*/ #header-l .sitename a { color: #fff;/* 文字色 */ /*-- ここまで --*/ } /*ヘッダーのサイト名[ホバー] ----------------------------------------------------*/ #header-l .sitename a:hover { color: #F00;/* 文字色 */ /*-- ここまで --*/ } /*ヘッダーのキャッチフレーズ ----------------------------------------------------*/ #header-l .descr { color: #fff;/* 文字色 */ /*-- ここまで --*/ } |
▼変更前▼
▼変更後▼
メニューバーのカラー変更方法(PC)
WordPress管理画面の「外観」→「テーマの編集」
対象ファイル：STINGER8 Child: スタイルシート (style.css)
ファイルの場所：wordpress/wp-content/themes/stinger8-child/style.css
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/*メニューバー背景色変更(PC) ----------------------------------------------------*/ #st-menubox { background: #3669ba;/* 背景色 */ /*-- ここまで --*/ } /*メニューバー文字色(PC) ----------------------------------------------------*/ header .smanone ul.menu li a{ color: #fff;/* 文字色 */ /*-- ここまで --*/ } |
▼変更前▼
▼変更後▼
メニューバーのカラー変更方法(スマホ)
WordPress管理画面の「外観」→「テーマの編集」
対象ファイル：STINGER8 Child: スタイルシート (style.css)
ファイルの場所：wordpress/wp-content/themes/stinger8-child/style.css
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
/*ヘッダーのメニューバー(スマホ) ----------------------------------------------------*/ #s-navi dt.trigger .op { background: #3669ba; /* 背景色 */ color: #fff; /* マーク色 */ /*-- ここまで --*/ } /*ヘッダーのメニューバーの項目>(スマホ) ----------------------------------------------------*/ .acordion_tree ul.menu li .fa { color: #fff; /* 文字色 */ /*-- ここまで --*/ } /*ヘッダーのメニューバーの項目(スマホ) ----------------------------------------------------*/ .acordion_tree ul.menu li a { color: #fff; /* 文字色 */ /*-- ここまで --*/ } /*ヘッダーのメニューバーの項目[ホバー](スマホ) ----------------------------------------------------*/ .acordion_tree ul.menu li a:hover { color: #F00; /* 文字色 */ /*-- ここまで --*/ } |
▼変更前▼
▼変更後▼
フッター部分の変更
WordPress管理画面の「外観」→「テーマの編集」
対象ファイル：STINGER8 Child: スタイルシート (style.css)
ファイルの場所：wordpress/wp-content/themes/stinger8-child/style.css
[ファイルの中身]
|
1 2 3 4 5 6 |
/*フッター ----------------------------------------------------*/ #footer { background: #000; /* 背景色 */ color: #fff; /* 文字色 */ } |
▼変更前▼
▼変更後▼
ヘッダー用メニュー
HOME
[デフォルト状態]
WordPress管理画面の「外観」→「メニュー」
メニュー名を入力して[メニューを作成]をクリックします。ここでは「ヘッダー用」と入力してみます。
すべて表示の中にある「ホーム」をチェックし、「ヘッダー用メニュー」をチェックし、[メニューに追加]をクリック。
ナビゲーションラベルを「HOME」に変更し、[メニューを保存]をクリック。
変更されているか確認します。
お問い合わせ
インストール〜設定
まずは、下記のサイトを参考に、インストール〜設定までします。
参考サイト → Contact Form 7の使い方と設定方法
日本語対応
最新のバージョンだと日本語版がないらしく、英語になっている。なので、日本語対応したいと思います。
下記のサイトを参考に、設定します。
参考サイト → 『Contact Form 7』を日本語になってない？日本語化する手順(ファイルを使用)
参考サイト → 「Contact Form 7」を日本語にする、おそらく1番手っ取り早い方法(手動)
メニューバーに追加
WordPress管理画面の「外観」→「メニュー」
すべて表示の中にある「お問い合わせ」をチェックし、[メニューに追加]をクリック。
[メニューを保存]をクリック。
変更されているか確認します。
フッター用メニュー
[デフォルト状態]
メニューバーに追加
WordPress管理画面の「外観」→「メニュー」
[新規メニューを作成]をクリック
メニュー名を入力して[メニューを作成]をクリックします。ここでは「フッター用」と入力してみます。
すべて表示の中にある「ホーム」「お問い合わせ」をチェックし、「フッター用メニュー」をチェックし、[メニューに追加]をクリック。
ナビゲーションラベルを「HOME」に変更し、[メニューを保存]をクリック。
変更されているか確認します。
スマートフォン用メニュー
[デフォルト状態]
メニューバーに追加
WordPress管理画面の「外観」→「メニュー」
[新規メニューを作成]をクリック
メニュー名を入力して[メニューを作成]をクリックします。ここでは「スマートフォン用」と入力してみます。
すべて表示の中にある「ホーム」「お問い合わせ」をチェックし、「スマートフォン用」をチェックし、[メニューに追加]をクリック。
ナビゲーションラベルを「HOME」に変更し、[メニューを保存]をクリック。
変更されているか確認します。
