MENU
ゆったりライフスタイルの提案・レビューブログ
  1. ホーム
  2. WordPress
  3. CSSカスタマイズ
  4. グローバルメニューをメガメニュー化する【SANGOカスタマイズ】

グローバルメニューをメガメニュー化する【SANGOカスタマイズ】

CSSカスタマイズ
グローバルメニューをメガメニュー化する

PR

※このサイトの記事には広告が含まれている場合があります。

クラゲ社長

PC表示のグローバルメニューをメガメニュー化したよ！

Before

After

2列表示バージョン

3列表示バージョン

デザインの変更点

  • サブカテゴリーを大きく表示
  • 表示エフェクトを追加
注意

環境によってはデザインが崩れたりする場合があります。
カスタマイズは自己責任で行なってください。

目次

カスタマイズ方法

WP管理画面の「外観→テーマ編集→スタイルシート（style.css）」に下記のコードをコピペする。

下記のコードではグレーカラーとなりますので、自分のブログカラーに合わせて色を変更してみよう。

cssコード

/*--------------------------------------
メガメニュー 2列表示
--------------------------------------*/
@media only screen and (min-width: 768px) {
.header--center .desktop-nav {
	position: relative;
}
.desktop-nav li {
	position: initial;
}
.desktop-nav li:hover:after {
	display: none;
}
.desktop-nav li a:hover {
	background: rgba(255, 255, 255, 0.15);
}
.desktop-nav li:hover .sub-menu{
	visibility: visible;
	opacity: 1;
	transition: all 0.3s ease 0.15s;
	transform: scaleY(1);;
}
.desktop-nav .sub-menu {/*サブメニュー*/
	visibility: hidden;
	display: block;
	width: 100%;
	transform: scaleY(0);
	padding: 5px;
	background: #e8e8e8;/*背景色*/
	border-radius: 3px;/*角丸*/
	opacity: 0;
}
.desktop-nav .sub-menu li {
	position: relative;
	float: left;
	width: 50%;
	border-bottom: initial;
	padding: 5px;
}
.desktop-nav .sub-menu li a {/*サブメニュー項目*/
	text-align: center;
	color: #555;/*文字色*/
	padding: 25px 0;/*ボタンの高さ*/
	font-size: 15px;/*文字サイズ*/
	position: relative;
	background: #fff;/*背景色*/
	border-radius: 3px;/*角丸*/
	box-shadow: 2px 2px 3px rgba(100,100,100,.2);/*ボタンの影*/
}
.desktop-nav .sub-menu li a:hover {/*サブメニュー項目ホバー*/
	background: #f5f5f5;/*背景色*/
}
.desktop-nav .sub-menu li a:after {/*右下三角ホバー*/
	content: "";
	bottom: 3px;
	right: 53px;
	border-top: 30px solid transparent;/*サイズ*/
	border-right: 30px solid transparent;/*サイズ*/
	position: absolute;
	z-index: 100;
	transition: 0.3s;
	transition-delay: 0s;
}
.desktop-nav .sub-menu li a:hover:after {/*右下三角ホバー*/
	border-right: 2em solid #aaa;/*色*/
	transform: translateX(50px);
	transition-delay: 0.2s;
}
.desktop-nav .sub-menu li a:before {/*右下三角*/
    content: "";
    bottom: 3px;
    right: 3px;
    border-top: 30px solid transparent;
    border-right: 30px solid #e2e2e2;/*色*/
    position: absolute;
    z-index: 90;
}
}

cssコード

/*--------------------------------------
メガメニュー 3列表示
--------------------------------------*/
@media only screen and (min-width: 768px) {
.header--center .desktop-nav {
	position: relative;
}
.desktop-nav li {
	position: initial;
}
.desktop-nav li:hover:after {
	display: none;
}
.desktop-nav li a:hover {
	background: rgba(255, 255, 255, 0.15);
}
.desktop-nav li:hover .sub-menu{
	visibility: visible;
	opacity: 1;
	transition: all 0.3s ease 0.15s;
	transform: scaleY(1);;
}
.desktop-nav .sub-menu {/*サブメニュー*/
	visibility: hidden;
	display: block;
	width: 100%;
	transform: scaleY(0);
	padding: 5px;
	background: #e8e8e8;/*背景色*/
	border-radius: 3px;/*角丸*/
	opacity: 0;
}
.desktop-nav .sub-menu li {
	position: relative;
	float: left;
	width: 33.333%;
	width : calc(100% / 3);
	border-bottom: initial;
	padding: 5px;
}
.desktop-nav .sub-menu li a {/*サブメニュー項目*/
	text-align: center;
	color: #555;/*文字色*/
	padding: 25px 0;/*ボタンの高さ*/
	font-size: 15px;/*文字サイズ*/
	position: relative;
	background: #fff;/*背景色*/
	border-radius: 3px;/*角丸*/
	box-shadow: 2px 2px 3px rgba(100,100,100,.2);/*ボタンの影*/
}
.desktop-nav .sub-menu li a:hover {/*サブメニュー項目ホバー*/
	background: #f5f5f5;/*背景色*/
}
.desktop-nav .sub-menu li a:after {/*右下三角ホバー*/
	content: "";
	bottom: 3px;
	right: 53px;
	border-top: 30px solid transparent;/*サイズ*/
	border-right: 30px solid transparent;/*サイズ*/
	position: absolute;
	z-index: 100;
	transition: 0.3s;
	transition-delay: 0s;
}
.desktop-nav .sub-menu li a:hover:after {/*右下三角ホバー*/
	border-right: 2em solid #aaa;/*色*/
	transform: translateX(50px);
	transition-delay: 0.2s;
}
.desktop-nav .sub-menu li a:before {/*右下三角*/
    content: "";
    bottom: 3px;
    right: 3px;
    border-top: 30px solid transparent;
    border-right: 30px solid #e2e2e2;/*色*/
    position: absolute;
    z-index: 90;
}
}

各カラーバージョン

各ブログのイメージカラーに合うようにカラーバージョンも用意しました。

青色メニュー

cssコード 
/*--------------------------------------
メガメニュー 2列表示 青色
--------------------------------------*/
@media only screen and (min-width: 768px) {
.header--center .desktop-nav {
	position: relative;
}
.desktop-nav li {
	position: initial;
}
.desktop-nav li:hover:after {
	display: none;
}
.desktop-nav li a:hover {
	background: rgba(255, 255, 255, 0.15);
}
.desktop-nav li:hover .sub-menu{
	visibility: visible;
	opacity: 1;
	transition: all 0.3s ease 0.15s;
	transform: scaleY(1);;
}
.desktop-nav .sub-menu {/*サブメニュー*/
	visibility: hidden;
	display: block;
	width: 100%;
	transform: scaleY(0);
	padding: 5px;
	background: #d0e5f7;/*背景色*/
	border-radius: 3px;/*角丸*/
	opacity: 0;
}
.desktop-nav .sub-menu li {
	position: relative;
	float: left;
	width: 50%;
	border-bottom: initial;
	padding: 5px;
}
.desktop-nav .sub-menu li a {/*サブメニュー項目*/
	text-align: center;
	color: #555;/*文字色*/
	padding: 25px 0;/*ボタンの高さ*/
	font-size: 15px;/*文字サイズ*/
	position: relative;
	background: #fff;/*背景色*/
	border-radius: 3px;/*角丸*/
	box-shadow: 2px 2px 3px rgba(100,100,100,.2);/*ボタンの影*/
}
.desktop-nav .sub-menu li a:hover {/*サブメニュー項目ホバー*/
	background: #f5f5f5;/*背景色*/
}
.desktop-nav .sub-menu li a:after {/*右下三角ホバー*/
	content: "";
	bottom: 3px;
	right: 53px;
	border-top: 30px solid transparent;/*サイズ*/
	border-right: 30px solid transparent;/*サイズ*/
	position: absolute;
	z-index: 100;
	transition: 0.3s;
	transition-delay: 0s;
}
.desktop-nav .sub-menu li a:hover:after {/*右下三角ホバー*/
	border-right: 2em solid #58a9ef;/*色*/
	transform: translateX(50px);
	transition-delay: 0.2s;
}
.desktop-nav .sub-menu li a:before {/*右下三角*/
    content: "";
    bottom: 3px;
    right: 3px;
    border-top: 30px solid transparent;
    border-right: 30px solid #cee5fa;/*色*/
    position: absolute;
    z-index: 90;
}
}

cssコード

/*--------------------------------------
メガメニュー 3列表示 青色
--------------------------------------*/
@media only screen and (min-width: 768px) {
.header--center .desktop-nav {
	position: relative;
}
.desktop-nav li {
	position: initial;
}
.desktop-nav li:hover:after {
	display: none;
}
.desktop-nav li a:hover {
	background: rgba(255, 255, 255, 0.15);
}
.desktop-nav li:hover .sub-menu{
	visibility: visible;
	opacity: 1;
	transition: all 0.3s ease 0.15s;
	transform: scaleY(1);;
}
.desktop-nav .sub-menu {/*サブメニュー*/
	visibility: hidden;
	display: block;
	width: 100%;
	transform: scaleY(0);
	padding: 5px;
	background: #d0e5f7;/*背景色*/
	border-radius: 3px;/*角丸*/
	opacity: 0;
}
.desktop-nav .sub-menu li {
	position: relative;
	float: left;
	width: 33.333%;
	width : calc(100% / 3);
	border-bottom: initial;
	padding: 5px;
}
.desktop-nav .sub-menu li a {/*サブメニュー項目*/
	text-align: center;
	color: #555;/*文字色*/
	padding: 25px 0;/*ボタンの高さ*/
	font-size: 15px;/*文字サイズ*/
	position: relative;
	background: #fff;/*背景色*/
	border-radius: 3px;/*角丸*/
	box-shadow: 2px 2px 3px rgba(100,100,100,.2);/*ボタンの影*/
}
.desktop-nav .sub-menu li a:hover {/*サブメニュー項目ホバー*/
	background: #f5f5f5;/*背景色*/
}
.desktop-nav .sub-menu li a:after {/*右下三角ホバー*/
	content: "";
	bottom: 3px;
	right: 53px;
	border-top: 30px solid transparent;/*サイズ*/
	border-right: 30px solid transparent;/*サイズ*/
	position: absolute;
	z-index: 100;
	transition: 0.3s;
	transition-delay: 0s;
}
.desktop-nav .sub-menu li a:hover:after {/*右下三角ホバー*/
	border-right: 2em solid #58a9ef;/*色*/
	transform: translateX(50px);
	transition-delay: 0.2s;
}
.desktop-nav .sub-menu li a:before {/*右下三角*/
    content: "";
    bottom: 3px;
    right: 3px;
    border-top: 30px solid transparent;
    border-right: 30px solid #cee5fa;/*色*/
    position: absolute;
    z-index: 90;
}
}

緑色メニュー

cssコード 
/*--------------------------------------
メガメニュー 2列表示 緑色
--------------------------------------*/
@media only screen and (min-width: 768px) {
.header--center .desktop-nav {
	position: relative;
}
.desktop-nav li {
	position: initial;
}
.desktop-nav li:hover:after {
	display: none;
}
.desktop-nav li a:hover {
	background: rgba(255, 255, 255, 0.15);
}
.desktop-nav li:hover .sub-menu{
	visibility: visible;
	opacity: 1;
	transition: all 0.3s ease 0.15s;
	transform: scaleY(1);;
}
.desktop-nav .sub-menu {/*サブメニュー*/
	visibility: hidden;
	display: block;
	width: 100%;
	transform: scaleY(0);
	padding: 5px;
	background: #E2F7F4;/*背景色*/
	border-radius: 3px;/*角丸*/
	opacity: 0;
}
.desktop-nav .sub-menu li {
	position: relative;
	float: left;
	width: 50%;
	border-bottom: initial;
	padding: 5px;
}
.desktop-nav .sub-menu li a {/*サブメニュー項目*/
	text-align: center;
	color: #555;/*文字色*/
	padding: 25px 0;/*ボタンの高さ*/
	font-size: 15px;/*文字サイズ*/
	position: relative;
	background: #fff;/*背景色*/
	border-radius: 3px;/*角丸*/
	box-shadow: 2px 2px 3px rgba(100,100,100,.2);/*ボタンの影*/
}
.desktop-nav .sub-menu li a:hover {/*サブメニュー項目ホバー*/
	background: #f5f5f5;/*背景色*/
}
.desktop-nav .sub-menu li a:after {/*右下三角ホバー*/
	content: "";
	bottom: 3px;
	right: 53px;
	border-top: 30px solid transparent;/*サイズ*/
	border-right: 30px solid transparent;/*サイズ*/
	position: absolute;
	z-index: 100;
	transition: 0.3s;
	transition-delay: 0s;
}
.desktop-nav .sub-menu li a:hover:after {/*右下三角ホバー*/
	border-right: 2em solid #7CDDCD;/*色*/
	transform: translateX(50px);
	transition-delay: 0.2s;
}
.desktop-nav .sub-menu li a:before {/*右下三角*/
    content: "";
    bottom: 3px;
    right: 3px;
    border-top: 30px solid transparent;
    border-right: 30px solid #BAEDE4;/*色*/
    position: absolute;
    z-index: 90;
}
}

cssコード

/*--------------------------------------
メガメニュー 3列表示 緑色
--------------------------------------*/
@media only screen and (min-width: 768px) {
.header--center .desktop-nav {
	position: relative;
}
.desktop-nav li {
	position: initial;
}
.desktop-nav li:hover:after {
	display: none;
}
.desktop-nav li a:hover {
	background: rgba(255, 255, 255, 0.15);
}
.desktop-nav li:hover .sub-menu{
	visibility: visible;
	opacity: 1;
	transition: all 0.3s ease 0.15s;
	transform: scaleY(1);;
}
.desktop-nav .sub-menu {/*サブメニュー*/
	visibility: hidden;
	display: block;
	width: 100%;
	transform: scaleY(0);
	padding: 5px;
	background: #E2F7F4;/*背景色*/
	border-radius: 3px;/*角丸*/
	opacity: 0;
}
.desktop-nav .sub-menu li {
	position: relative;
	float: left;
	width: 33.333%;
	width : calc(100% / 3);
	border-bottom: initial;
	padding: 5px;
}
.desktop-nav .sub-menu li a {/*サブメニュー項目*/
	text-align: center;
	color: #555;/*文字色*/
	padding: 25px 0;/*ボタンの高さ*/
	font-size: 15px;/*文字サイズ*/
	position: relative;
	background: #fff;/*背景色*/
	border-radius: 3px;/*角丸*/
	box-shadow: 2px 2px 3px rgba(100,100,100,.2);/*ボタンの影*/
}
.desktop-nav .sub-menu li a:hover {/*サブメニュー項目ホバー*/
	background: #f5f5f5;/*背景色*/
}
.desktop-nav .sub-menu li a:after {/*右下三角ホバー*/
	content: "";
	bottom: 3px;
	right: 53px;
	border-top: 30px solid transparent;/*サイズ*/
	border-right: 30px solid transparent;/*サイズ*/
	position: absolute;
	z-index: 100;
	transition: 0.3s;
	transition-delay: 0s;
}
.desktop-nav .sub-menu li a:hover:after {/*右下三角ホバー*/
	border-right: 2em solid #7CDDCD;/*色*/
	transform: translateX(50px);
	transition-delay: 0.2s;
}
.desktop-nav .sub-menu li a:before {/*右下三角*/
    content: "";
    bottom: 3px;
    right: 3px;
    border-top: 30px solid transparent;
    border-right: 30px solid #BAEDE4;/*色*/
    position: absolute;
    z-index: 90;
}
}

ピンク色メニュー

cssコード 
/*--------------------------------------
メガメニュー 2列表示 ピンク色
--------------------------------------*/
@media only screen and (min-width: 768px) {
.header--center .desktop-nav {
	position: relative;
}
.desktop-nav li {
	position: initial;
}
.desktop-nav li:hover:after {
	display: none;
}
.desktop-nav li a:hover {
	background: rgba(255, 255, 255, 0.15);
}
.desktop-nav li:hover .sub-menu{
	visibility: visible;
	opacity: 1;
	transition: all 0.3s ease 0.15s;
	transform: scaleY(1);;
}
.desktop-nav .sub-menu {/*サブメニュー*/
	visibility: hidden;
	display: block;
	width: 100%;
	transform: scaleY(0);
	padding: 5px;
	background: #FFF2F5;/*背景色*/
	border-radius: 3px;/*角丸*/
	opacity: 0;
}
.desktop-nav .sub-menu li {
	position: relative;
	float: left;
	width: 50%;
	border-bottom: initial;
	padding: 5px;
}
.desktop-nav .sub-menu li a {/*サブメニュー項目*/
	text-align: center;
	color: #555;/*文字色*/
	padding: 25px 0;/*ボタンの高さ*/
	font-size: 15px;/*文字サイズ*/
	position: relative;
	background: #fff;/*背景色*/
	border-radius: 3px;/*角丸*/
	box-shadow: 2px 2px 3px rgba(100,100,100,.2);/*ボタンの影*/
}
.desktop-nav .sub-menu li a:hover {/*サブメニュー項目ホバー*/
	background: #f5f5f5;/*背景色*/
}
.desktop-nav .sub-menu li a:after {/*右下三角ホバー*/
	content: "";
	bottom: 3px;
	right: 53px;
	border-top: 30px solid transparent;/*サイズ*/
	border-right: 30px solid transparent;/*サイズ*/
	position: absolute;
	z-index: 100;
	transition: 0.3s;
	transition-delay: 0s;
}
.desktop-nav .sub-menu li a:hover:after {/*右下三角ホバー*/
	border-right: 2em solid #FCCFDB;/*色*/
	transform: translateX(50px);
	transition-delay: 0.2s;
}
.desktop-nav .sub-menu li a:before {/*右下三角*/
    content: "";
    bottom: 3px;
    right: 3px;
    border-top: 30px solid transparent;
    border-right: 30px solid #FDE7ED;/*色*/
    position: absolute;
    z-index: 90;
}
}

cssコード

/*--------------------------------------
メガメニュー 3列表示 ピンク色
--------------------------------------*/
@media only screen and (min-width: 768px) {
.header--center .desktop-nav {
	position: relative;
}
.desktop-nav li {
	position: initial;
}
.desktop-nav li:hover:after {
	display: none;
}
.desktop-nav li a:hover {
	background: rgba(255, 255, 255, 0.15);
}
.desktop-nav li:hover .sub-menu{
	visibility: visible;
	opacity: 1;
	transition: all 0.3s ease 0.15s;
	transform: scaleY(1);;
}
.desktop-nav .sub-menu {/*サブメニュー*/
	visibility: hidden;
	display: block;
	width: 100%;
	transform: scaleY(0);
	padding: 5px;
	background: #FFF2F5;/*背景色*/
	border-radius: 3px;/*角丸*/
	opacity: 0;
}
.desktop-nav .sub-menu li {
	position: relative;
	float: left;
	width: 33.333%;
	width : calc(100% / 3);
	border-bottom: initial;
	padding: 5px;
}
.desktop-nav .sub-menu li a {/*サブメニュー項目*/
	text-align: center;
	color: #555;/*文字色*/
	padding: 25px 0;/*ボタンの高さ*/
	font-size: 15px;/*文字サイズ*/
	position: relative;
	background: #fff;/*背景色*/
	border-radius: 3px;/*角丸*/
	box-shadow: 2px 2px 3px rgba(100,100,100,.2);/*ボタンの影*/
}
.desktop-nav .sub-menu li a:hover {/*サブメニュー項目ホバー*/
	background: #f5f5f5;/*背景色*/
}
.desktop-nav .sub-menu li a:after {/*右下三角ホバー*/
	content: "";
	bottom: 3px;
	right: 53px;
	border-top: 30px solid transparent;/*サイズ*/
	border-right: 30px solid transparent;/*サイズ*/
	position: absolute;
	z-index: 100;
	transition: 0.3s;
	transition-delay: 0s;
}
.desktop-nav .sub-menu li a:hover:after {/*右下三角ホバー*/
	border-right: 2em solid #FCCFDB;/*色*/
	transform: translateX(50px);
	transition-delay: 0.2s;
}
.desktop-nav .sub-menu li a:before {/*右下三角*/
    content: "";
    bottom: 3px;
    right: 3px;
    border-top: 30px solid transparent;
    border-right: 30px solid #FDE7ED;/*色*/
    position: absolute;
    z-index: 90;
}
}

黄色メニュー

cssコード 
/*--------------------------------------
メガメニュー 2列表示 黄色
--------------------------------------*/
@media only screen and (min-width: 768px) {
.header--center .desktop-nav {
	position: relative;
}
.desktop-nav li {
	position: initial;
}
.desktop-nav li:hover:after {
	display: none;
}
.desktop-nav li a:hover {
	background: rgba(255, 255, 255, 0.15);
}
.desktop-nav li:hover .sub-menu{
	visibility: visible;
	opacity: 1;
	transition: all 0.3s ease 0.15s;
	transform: scaleY(1);;
}
.desktop-nav .sub-menu {/*サブメニュー*/
	visibility: hidden;
	display: block;
	width: 100%;
	transform: scaleY(0);
	padding: 5px;
	background: #FFF4DB;/*背景色*/
	border-radius: 3px;/*角丸*/
	opacity: 0;
}
.desktop-nav .sub-menu li {
	position: relative;
	float: left;
	width: 50%;
	border-bottom: initial;
	padding: 5px;
}
.desktop-nav .sub-menu li a {/*サブメニュー項目*/
	text-align: center;
	color: #555;/*文字色*/
	padding: 25px 0;/*ボタンの高さ*/
	font-size: 15px;/*文字サイズ*/
	position: relative;
	background: #fff;/*背景色*/
	border-radius: 3px;/*角丸*/
	box-shadow: 2px 2px 3px rgba(100,100,100,.2);/*ボタンの影*/
}
.desktop-nav .sub-menu li a:hover {/*サブメニュー項目ホバー*/
	background: #f5f5f5;/*背景色*/
}
.desktop-nav .sub-menu li a:after {/*右下三角ホバー*/
	content: "";
	bottom: 3px;
	right: 53px;
	border-top: 30px solid transparent;/*サイズ*/
	border-right: 30px solid transparent;/*サイズ*/
	position: absolute;
	z-index: 100;
	transition: 0.3s;
	transition-delay: 0s;
}
.desktop-nav .sub-menu li a:hover:after {/*右下三角ホバー*/
	border-right: 2em solid #FFD168;/*色*/
	transform: translateX(50px);
	transition-delay: 0.2s;
}
.desktop-nav .sub-menu li a:before {/*右下三角*/
    content: "";
    bottom: 3px;
    right: 3px;
    border-top: 30px solid transparent;
    border-right: 30px solid #FFE6A8;/*色*/
    position: absolute;
    z-index: 90;
}
}

cssコード

/*--------------------------------------
メガメニュー 3列表示 黄色
--------------------------------------*/
@media only screen and (min-width: 768px) {
.header--center .desktop-nav {
	position: relative;
}
.desktop-nav li {
	position: initial;
}
.desktop-nav li:hover:after {
	display: none;
}
.desktop-nav li a:hover {
	background: rgba(255, 255, 255, 0.15);
}
.desktop-nav li:hover .sub-menu{
	visibility: visible;
	opacity: 1;
	transition: all 0.3s ease 0.15s;
	transform: scaleY(1);;
}
.desktop-nav .sub-menu {/*サブメニュー*/
	visibility: hidden;
	display: block;
	width: 100%;
	transform: scaleY(0);
	padding: 5px;
	background: #FFF4DB;/*背景色*/
	border-radius: 3px;/*角丸*/
	opacity: 0;
}
.desktop-nav .sub-menu li {
	position: relative;
	float: left;
	width: 33.333%;
	width : calc(100% / 3);
	border-bottom: initial;
	padding: 5px;
}
.desktop-nav .sub-menu li a {/*サブメニュー項目*/
	text-align: center;
	color: #555;/*文字色*/
	padding: 25px 0;/*ボタンの高さ*/
	font-size: 15px;/*文字サイズ*/
	position: relative;
	background: #fff;/*背景色*/
	border-radius: 3px;/*角丸*/
	box-shadow: 2px 2px 3px rgba(100,100,100,.2);/*ボタンの影*/
}
.desktop-nav .sub-menu li a:hover {/*サブメニュー項目ホバー*/
	background: #f5f5f5;/*背景色*/
}
.desktop-nav .sub-menu li a:after {/*右下三角ホバー*/
	content: "";
	bottom: 3px;
	right: 53px;
	border-top: 30px solid transparent;/*サイズ*/
	border-right: 30px solid transparent;/*サイズ*/
	position: absolute;
	z-index: 100;
	transition: 0.3s;
	transition-delay: 0s;
}
.desktop-nav .sub-menu li a:hover:after {/*右下三角ホバー*/
	border-right: 2em solid #FFD168;/*色*/
	transform: translateX(50px);
	transition-delay: 0.2s;
}
.desktop-nav .sub-menu li a:before {/*右下三角*/
    content: "";
    bottom: 3px;
    right: 3px;
    border-top: 30px solid transparent;
    border-right: 30px solid #FFE6A8;/*色*/
    position: absolute;
    z-index: 90;
}
}

まとめ

グローバルメニューのサブメニューを大きく見やすいデザインにカスタマイズしてみました。

各ブログのイメージカラーに合うデザインも用意したのでぜひ使ってみてください。

クラゲ社長

デフォルトデザインで一番気になっていた点だったのでこのカスタマイズはお気に入り！

CSSカスタマイズ
SANGO
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

infosooness

関連記事

コメント

コメントする

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

目次