bootstrap4.5 "아이네"
머리 へいれるもの
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
body{font-size:19px !important;}
*{
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif !important;
}
/********************** 見出し **********************/
h1,h2,h3,h4{
line-height:1.6em;
}
h1{font-weight:bold;
}
h2{font-weight:bold;
}
h3{font-weight:bold;
}
h4{font-weight:bold;
}
/*********************************************************/
p{
line-height:1.9;
}
/************* IMG ****************/
img{
max-width:100%;
margin:20px 0;
}
#pankuzu{
font-size:14px;
}
.eye-single{
display:block;
margin:30px auto;
max-width:800px;
}
@media (max-width: 700px){
img {
max-width:100%!important;
}
}
/*********************************************/
/***********************header****************/
.iine-contents-header{
background:#666;
padding:12px;
text-align:center;
font-size:20px;
margin-bottom:20px;
}
.iine-contents-header a{
text-decoration:none;
color:#fff !important;
}
/************************************************
/***ハンバーガーメニュー****/
#nav-drawer {
position: fixed;
top:20px;
right:20px;
z-index:999;
}
/*チェックボックス等は非表示に*/
.nav-unshown {
display:none;
}
/*アイコンのスペース*/
#nav-open {
display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;
}
/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 3px;/*線の太さ*/
width: 25px;/*長さ*/
border-radius: 3px;
background: #000;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -8px;
}
#nav-open span:after {
bottom: -16px;
}
/*閉じる用の薄黒カバー*/
#nav-close {
display: none;/*はじめは隠しておく*/
position: fixed;
z-index: 99;
top: 0;/*全体に広がるように*/
left: 0;
right:0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}
/*中身*/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/*最前面に*/
width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/
max-width: 330px;/*最大幅(調整してください)*/
height: 100%;
background: #fff;/*背景色*/
transition: .3s ease-in-out;/*滑らかに表示*/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/*左に隠しておく*/
text-align:left;
}
#nav-content ul{margin:0;padding:0;}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
display: block;/*カバーを表示*/
opacity: .5;
}
#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示(右へスライド)*/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
#nav-content img{
width:90% !important;
display:block;
margin:12px auto;
}
#nav-content li {
background:#666;
border-top:1px solid white;
padding:12px;
color:#fff;
margin:0;
}
/*******************************************/
</style>
몸에 入れるもの
<header class="iine-contents-header">
<a href="#">サイト名</a>
<div id="nav-drawer">
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content">
<ul>
<a href="#"><li>テキストテキストテキスト</li></a>
<a href="#"><li>テキスト</li></a>
<a href="#"><li>テキストテキスト</li></a>
<a href="#"><li>テキストテキスト</li></a>
</ul>
</div>
</div>
</header>
<div class="container">
<nav id="topicPath"><?php the_breadcrumb() ?></nav>
<h1 class="my-5"><?php echo get_the_title(); ?></h1>
<div class="eye-single">
<?php the_post_thumbnail(); ?>
</div>
<?php echo replace_body($post->post_content); ?>
<?php get_footer(); ?>
</div>
</body>
の直前까지.
Reference
이 문제에 관하여(bootstrap4.5 "아이네"), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kumamon/bootstrap4-5-iine-10l5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)