【THE THOR】おすすめカテゴリーを表示させるカスタマイズ

INDEX

WordPressテーマ THE THOR（ザ・トール）
1. WordPressテーマ THE THOR（ザ・トール）でのおすすめカテゴリー表示について
おすすめカテゴリーを表示させるための設定
おすすめカテゴリーを表示させるカスタマイズ
1. カスタマイズ内容
2. カスタマイズ後のトップページのおすすめカテゴリー
最後に

WordPressテーマ THE THOR（ザ・トール）

別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

今回は、WordPressテーマ THE THOR（ザ・トール）での「おすすめカテゴリーを表示させる」カスタマイズについてまとめてみました。

WordPressテーマ THE THOR（ザ・トール）でのおすすめカテゴリー表示について

WordPressテーマ THE THOR（ザ・トール）で、おすすめカテゴリーを表示させる機能は現時点でありません。

そこで、「おすすめカテゴリーを表示させる」ためのカスタマイズを行いたいと思います。

おすすめカテゴリーを表示させるカスタマイズ

WordPressテーマ THE THOR（ザ・トール）で「おすすめカテゴリーを表示させる」ためのカスタマイズを行います。

カスタマイズ内容

WordPressテーマ THE THOR（ザ・トール）で「おすすめカテゴリーを表示させる」ためのカスタマイズの内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。

なお、カスタマイズには自分がメモしたメニューのID(.menu-item-○○○○)を入力する必要があります。

/************************************
** ■おすすめカテゴリー
************************************/
.l-main .widget.widget-main.u-shadow.widget_nav_menu { /*基本設定*/
	padding: 0;
	margin: 0 0 30px 0;
	box-shadow: none; /*シャドー（影）クリア*/
	text-align: center; /*文字中央位置決め*/
}
.menu-item-6524,
.menu-item-6525,
.menu-item-6526,
.menu-item-6527,
.l-main .widget.widget_nav_menu ul.menu { /*基本設定*/
	display: inline-block;
	border: none;
}

.l-main .widget-main .heading.heading-widget { /*タイトル（おすすめカテゴリー）*/
	text-align: center; /*中央位置決め*/
	background-color: #fff!important; /*バックカラー*/
	color: #191919; /*文字色*/
	margin-bottom: 0px; /*マージンクリア*/
	font-size:18px; /*フォントサイズ*/
	text-decoration: underline; /*アンダーライン*/
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
	.l-main .widget-main .heading.heading-widget { /*タイトル（おすすめカテゴリー）*/
		font-size: 14px; /*フォントサイズ*/
	}
}

.menu-item-6524,
.menu-item-6525,
.menu-item-6526,
.menu-item-6527 { /*各カテゴリーの枠設定*/
	position: relative;
	overflow: hidden;
	width: 265px; /*各カテゴリー横幅*/
	border: 2px solid #fe619a!important; /*枠設定*/
	margin: 1px 2px; /*マージン設定*/
	border-radius: 8px; /*角丸コーナー*/
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
	.menu-item-6524,
	.menu-item-6525,
	.menu-item-6526,
	.menu-item-6527 {
		width: 230px; /*各カテゴリー横幅*/
	}
}

.l-main .widget.widget_nav_menu ul.menu li a { /*各カテゴリーの項目設定*/
	font-weight:700; /*フォント太さ*/
	padding: 10px 0; /*高さ*/
	font-size: 16px; /*フォントサイズ*/
	background:linear-gradient(to bottom, #ffddee, #fe619a)!important;
	border: none!important;
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
	.l-main .widget.widget_nav_menu ul.menu li a { /*各カテゴリーの項目設定*/
		font-size: 14px; /*フォントサイズ*/
	}
}
.l-main .widget.widget_nav_menu ul.menu li a:hover { /*各カテゴリー項目 ホバー時*/
	text-decoration:none; /*アンダーライン*/
	font-weight:700; /*フォント太さ*/
	background:linear-gradient(to top, #fe619a,#fe619a)!important;*/
}

.l-main .widget.widget_nav_menu ul li a:before { /*アイコン*/
	font-family: "Font Awesome 5 Free";/*FontAwesome 5に設定*/
	content: "\f07b"; /*親カテゴリのアイコン*/
	color: #fff; /*アイコンカラー*/
	font-size: 16px;
	font-weight: 900;
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
	.l-main .widget.widget_nav_menu ul li a:before { /*アイコン*/
		font-size: 14px; /*フォントサイズ*/
	}
}