部品集(メニュー3・4・5列)

Youtube動画もご覧下さい

ワードプレス制作・ホームページ制作

バナーメニュー(3列)

HtmlとCSSを指定位置に貼り付けて下さい

バナーとリンク先を修正して完了です。

/ CSS /

/************************************
** バナーメニュー(3列)
************************************/
.menu3-parts ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu3-parts ul::after {
content: “”;
display: block;
clear: both;
}
.menu3-parts ul li {
float: left;
width: 32%;
box-sizing: border-box;
}
.menu3-parts ul li a {
display: block;
padding: .1em .1em;
text-decoration: none;
color: #333;
background: #fff;
text-align: center;
}
.menu3-parts ul li a:hover {
background: #eee;
}

<nav class="menu3-parts">
<ul>
	<li><a href="#"><img src="https://operation.no1.systems/wp-content/uploads/2020/01/1.png" width="300" height="250" alt="" class="wp-image-3314 aligncenter size-full" /></a></li>
	<li><a href="#"><img src="https://operation.no1.systems/wp-content/uploads/2020/01/2.png" width="300" height="250" alt="" class="wp-image-3315 aligncenter size-full" /></a></li>
	<li><a href="#"><img src="https://operation.no1.systems/wp-content/uploads/2020/01/5.png" width="300" height="250" alt="" class="wp-image-3318 aligncenter size-full" /></a></li>
</ul>
</nav>/* Your code... */
/************************************
** バナーメニュー(3列)
************************************/
.menu3-parts ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu3-parts ul::after {
content: "";
display: block;
clear: both;
}
.menu3-parts ul li {
float: left;
width: 32%;
box-sizing: border-box;
}
.menu3-parts ul li a {
display: block;
padding: .1em .1em;
text-decoration: none;
color: #333;
background: #fff;
text-align: center;
}
.menu3-parts ul li a:hover {
background: #eee;

バナーとリンク先を修正して完了です。

<nav class="menu4-parts">
<ul>
	<li><a href="#"><img src="https://operation.no1.systems/wp-content/uploads/2020/01/1.png" width="300" height="250" alt="" class="wp-image-3314 aligncenter size-full" /></a></li>
	<li><a href="#"><img src="https://operation.no1.systems/wp-content/uploads/2020/01/2.png" width="300" height="250" alt="" class="wp-image-3315 aligncenter size-full" /></a></li>
	<li><a href="#"><img src="https://operation.no1.systems/wp-content/uploads/2020/01/5.png" width="300" height="250" alt="" class="wp-image-3318 aligncenter size-full" /></a></li>
	<li><a href="#"><img src="https://operation.no1.systems/wp-content/uploads/2020/01/4.png" width="300" height="250" alt="" class="wp-image-3317 aligncenter size-full" /></a></li>
</ul>
</nav>
/************************************
** バナーメニュー(4列)
************************************/
.menu4-parts ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.menu4-parts ul::after {
	content: "";
	display: block;
	clear: both;
}
.menu4-parts ul li {
	float: left;
	width: 24%;
	box-sizing: border-box;
}
.menu4-parts ul li a {
	display: block;
	padding: .1em .1em;
	text-decoration: none;
	color: #333;
	background: #fff;
	text-align: center;
}
.menu4-parts ul li a:hover {
	background: #eee;
}/* Your code... */

バナーとリンク先を修正して完了です。

<nav class="menu5-parts">
<ul>
	<li><a href="#"><img src="https://operation.no1.systems/wp-content/uploads/2020/01/1.png" width="300" height="250" alt="" class="wp-image-3314 aligncenter size-full" /></a></li>
	<li><a href="#"><img src="https://operation.no1.systems/wp-content/uploads/2020/01/2.png" width="300" height="250" alt="" class="wp-image-3315 aligncenter size-full" /></a></li>
	<li><a href="#"><img src="https://operation.no1.systems/wp-content/uploads/2020/01/5.png" width="300" height="250" alt="" class="wp-image-3318 aligncenter size-full" /></a></li>
	<li><a href="#"><img src="https://operation.no1.systems/wp-content/uploads/2020/01/4.png" width="300" height="250" alt="" class="wp-image-3317 aligncenter size-full" /></a></li>
	<li><a href="#"><img src="https://operation.no1.systems/wp-content/uploads/2020/01/5.png" width="300" height="250" alt="" class="wp-image-3317 aligncenter size-full" /></a></li>
</ul>
</nav>
/************************************
** バナーメニュー(5列)
************************************/
.menu5-parts ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.menu5-parts ul::after {
	content: "";
	display: block;
	clear: both;
}
.menu5-parts ul li {
	float: left;
	width: 19%;
	box-sizing: border-box;
}
.menu5-parts ul li a {
	display: block;
	padding: .1em .1em;
	text-decoration: none;
	color: #333;
	background: #fff;
	text-align: center;
}
.menu5-parts ul li a:hover {
	background: #eee;
}