BLUES > nada icons のスマホ表示時のメニューに罫線を入れたい @ 2016/1/9 13:24
テーマに「nada icons」を使用しています。スマートフォンで表示した時のメニューの部分がベタの背景に「メニュー項目」の文字が並んでいるだけなので何とか「メニュー項目」毎に罫線で四角に区切って見やすくする方法はないでしょうか？超初心者なので色々試行錯誤しながらやっておりますが調べてもわかりませんでした。ご存知の方がいらっしゃいましたらご教示頂ければ助かります。どうぞ宜しくお願い致します。こんな感じです。

BLUES > nada icons のスマホ表示時のメニューに罫線を入れたい @ 2016/1/9 13:24

テーマに「nada icons」を使用しています。
スマートフォンで表示した時のメニューの部分がベタの背景に「メニュー項目」の文字が並んでいるだけなので
何とか「メニュー項目」毎に罫線で四角に区切って見やすくする方法はないでしょうか？
超初心者なので色々試行錯誤しながらやっておりますが調べてもわかりませんでした。
ご存知の方がいらっしゃいましたらご教示頂ければ助かります。
どうぞ宜しくお願い致します。
こんな感じです。

katokaisya > Re: nada icons のスマホ表示時のメニューに罫線を入れたい @ 2016/3/24 10:46
はじめまして。katoともうします。 app/webroot/theme/nada-icons/css/smartphone/style.css の１０行目付近の `.global-menu li a{ display:block; width:106px; padding:6px 0; color: #FFFFFF; text-decoration: none; line-height: 1.2em; }` を `.global-menu li a{ display:block; width:105px; height: 51px; padding:6px 0; color: #FFFFFF; text-decoration: none; line-height: 1.2em; border-right: solid 1px #fff; border-bottom: solid 1px #fff; }` に書き換えれば、白い罫線が入れられます。 ※縦幅と横幅の関係で、普通にborder指定するとおかしくなるので、aタグの横幅をマイナス１ｐｘして、高さを固定し、右側と下側だけにborderを入れています。

katokaisya > Re: nada icons のスマホ表示時のメニューに罫線を入れたい @ 2016/3/24 10:46

はじめまして。katoともうします。
app/webroot/theme/nada-icons/css/smartphone/style.css
の
１０行目付近の

.global-menu li a{
	display:block;
	width:106px;
	padding:6px 0;
	color: #FFFFFF;
	text-decoration: none;
	line-height: 1.2em;
}

を

.global-menu li a{
	display:block;
	width:105px;
	height: 51px;
	padding:6px 0;
	color: #FFFFFF;
	text-decoration: none;
	line-height: 1.2em;
	border-right: solid 1px #fff;
	border-bottom:  solid 1px #fff;
}

に書き換えれば、白い罫線が入れられます。
※縦幅と横幅の関係で、普通にborder指定するとおかしくなるので、aタグの横幅をマイナス１ｐｘして、高さを固定し、右側と下側だけにborderを入れています。

スレッド表示 | 新しいものから

前のトピック | 次のトピック | トップ

nada icons のスマホ表示時のメニューに罫線を入れたい

キーワード検索