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

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

はじめに

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

スマホ、タブレット画面サイズのメニューボタンに、
「立体感」の「inset、outset」を設定することで、
メニューボタンに影が付いて、タップした感じが出るんじゃないかな?
で、設定してみました。

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

スマホ、タブレット画面サイズのメニュー設定は
「6-2「メニュー」編 スマホ、タブレット」で既に一度行っていますが、
今回はその設定は引き継がずに初期設定の状態で進めていきます。

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

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

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

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

.menu-toggle {
	background-color: transparent;
	border: 1px solid #d1d1d1;
	color: #1a1a1a;
	font-size: 13px;
	font-size: 0.8125rem;
	margin: 1.076923077em 0;
	padding: 0.769230769em;
}

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

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

	font-size: 13px;
	font-size: 0.8125rem;
	margin: 1.076923077em 0;
	padding: 0.769230769em;

今回の設定に不要なソースコードは削除が可能です。

	background-color: transparent;
	border: 1px solid #d1d1d1;

こちらも削除可能ですが残しています。

/* スマホ、タブレット画面メニュー「outset」 */
.menu-toggle {
	background-color: transparent;
	border: 5px outset #d1d1d1; /* 7-2:solidをoutsetに変更 */
	color: #1a1a1a;
}

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

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


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

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

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

.menu-toggle.toggled-on,
.menu-toggle.toggled-on:hover,
.menu-toggle.toggled-on:focus {
	background-color: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
}

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

.menu-toggle.toggled-on,
.menu-toggle.toggled-on:hover,
.menu-toggle.toggled-on:focus {
	background-color: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
	border: 5px inset #ff0;  /* その7-2:罫線「5px、inset」を追加設定 */
}

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

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

	background-color: #fff;
	color: #1a1a1a;

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

/* メニューをタップした時に罫線「inset」 */
.menu-toggle.toggled-on,
.menu-toggle.toggled-on:hover,
.menu-toggle.toggled-on:focus {
	background-color: #fff;  /* 7-2:背景色を変更 */
	border-color: #1a1a1a;	
	color: #1a1a1a;  /* 文字色を変更 */
	border: 5px inset #0b6617;  /* その7-2:罫線「5px、inset」を追加設定 */
}

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

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

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


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

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

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

.menu-toggle:hover,
.menu-toggle:focus {
    background-color: transparent;
    border-color: #007acc;
    color: #007acc;
}

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

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

    background-color: #fff;
    border: 5px inset #0b6617;  /* その7-2:罫線「5px、inset」を追加設定 */

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

/* メニューボタンをタップして、タイトル一覧を閉じた時に罫線「inset」 */
.menu-toggle:hover,
.menu-toggle:focus {
    background-color: #fff;  /* 7-2:背景色を変更 */
    border-color: #007acc;
    color: #1a1a1a;  /* 7-2:文字色を変更 */
    border: 5px inset #0b6617;  /* その7-2:罫線「5px、inset」を追加設定 */	
}

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

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


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

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

さいごに

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

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

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

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク