WordPress Twenty Sixteen カスタマイズ 7-2「罫線」編 スマホ タブレット タップした時

ごけたです。
プッシュではなくタップなんですよね。
 
 

はじめに

WordPress Twenty Sixteen カスタマイズ その7-2
今回は「その7」の「1-1:罫線の種類 その1」の中で、
「groove、ridge、inset、outset」を紹介したものの、
使用する場面がなかなか浮かばす、やっと浮かんだのが「inset、outset」でした。

メニューの括りでもよかったのですが、
罫線の表示変更なので今回は罫線の括りにしています。

 
 
ページ構成
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。
リンクは予告なく削除される場合がございます。
OSはWindows、ブラウザーはchrome、
レンタルサーバーはエックスサーバーです。
 

※文中に「親」という言葉が度々出てきます。
ここでの「親」とは「子テーマ」ではない、
元々のTwenty Sixteenの各ファイルのことです。
カスタマイズは「子テーマ」で行っているので、
その対比として「親」、「親テーマ」と呼んでいます。
 
 

1:メニューボタンをの罫線を「outset」に変更してみる

スマホ、タブレット画面サイズでのメニューボタンを「outset」に変更して
突起している感じを出してみます。
 

「メニュー」の設定は親の「style.css」ファイルの
1634-1642行目前後のソースコードで行います。

「border: 1px solid #d1d1d1;」
既に罫線の設定があるので、太さと種類を変更します。
効果が分かりやすいように「1px」を「5px」に。
罫線の種類を「solid」から「outset」に変更します。

こちらのソースコードをwordpressの管理画面のメニューから
「外観」→「テーマの編集」の「style.css」ファイルの一番下にコピペして下さい。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

ここではソースコードの上に
「/* スマホ、タブレット画面メニュー「outset」 */」とタイトルを付けました。

 
 

メニューボタンの罫線が変更され、盛り上がっている感じが出ているか確認します

2:メニューボタンをタップした時の罫線を「inset」に変更してみる

今後は上記の「1」とは反対に罫線を「inset」設定して
へこんでいる感じにします。
 

メニューをタップしてへこんだ感じにさせる時の設定は
親の「style.css」ファイルの1655-1611行目前後の
ソースコードに追加入力で行います。
 

罫線の設定ですから「border」で始まり、「太さ、罫線の種類、色」の指定になります。
ここでは効果が分かりやすように「5px」にしました。
罫線の種類が「inset」になります。
色はこれまでに合わせて「0b6617」にしました。

「border-color: 5px inset #066617;」
こちらを「color: #fff;」の下に追加入力します。
 

さらに効果を分かりやすくするために、背景色と文字の色を入れ替えて設定しています。
 

こちらのソースコードをwordpressの管理画面のメニューから
「外観」→「テーマの編集」の「style.css」ファイルの一番下にコピペして下さい。
「テーマの編集」画面一番下の「ファイルの更新」ボタンをクリックします。

ここではソースコードの上に
「/* メニューをタップした時に罫線「inset」 */」とタイトルを付けました。

「border: 5px inset #0b6617;」の横に作業工程が分かるように
「/* その7-2:罫線「5px、inset」を追加設定 */」と追加タイトルを付けました。
「;」と「/」との間は半角スペースで2つほど空けています。

 
 

メニューの罫線と色が変更され、タップした感じに出ているか確認します。

2-1:メニューボタンを閉じる時のメニューボタンの罫線を「inset」に変更

メニューボタンをタップするとメニュー一覧が表示されます。
もう一度メニューボタンをタップするとメニュー一覧が閉じます。
メニュー一覧を閉じる時のメニューボタンの罫線も「inset」に変更します。

メニューボタンをタップして、メニュータイトル一覧を閉じた時の
ソースコードは親の「style.css」ファイルの1648-1653行目前後にあります。

ここにも「inset」を追加入力するので、「color: #007acc;」の下に
「border: 5px inset #0b6617;」を一旦コピペします。
一番下の「ファイルの更新」ボタンをクリックします。

ここでもさらに効果を分かりやすくするために、背景色と文字の色を変更しました。
「背景色と文字」は「1」と同じ設定に。
「inset」はタップして閉じた時の「青系」に戻しています。

色指定を変更したこちらのソースコードを
「/* メニューをタップした時に罫線「inset」 */」の下にコピペします。
一番下の「ファイルの更新」ボタンをクリックします。

ここではソースコードの上に
「/* メニューボタンをタップして、タイトル一覧を閉じた時に罫線「inset」 */」
とタイトルを付けました。
 
 

スマホ、タブレット画面サイズでメニューを2回タップして
罫線と色が変更されてタップした感じが出ているか確認します。

タップした感じが出ている。と
個人的感想止まりでないことを願います。
 
 

さいごに

スマホ、タブレット画面のみのメニューボタンですが、
投稿内容によってはPCよりスマホ、タブレットからの
アクセスが多い方も多数いるはずです。

罫線の設定を変更するだけで、印象を変えて、
他の方との差別化に役立つかも知れません。

最後までお合い下さいまして有難うございました。