【まとめ】ワードプレステーマ『Minimal』のデザインカスタマイズ【副業ブログのノウハウ #13】

 <h1 class="title">
 <?php } ?>
 <?php if ( is_mobile() ) : ?>
 <a href="<?php echo home_url(); ?>"><img src='h★スマホ用のロゴ画像★' alt="ロゴ" class="logo-sp" style="width:90%;" /></a>
 <p style="color:#D2C2B0;margin-top:-10px; font-size:14px;">キャッチコピー</p>
 <?php else: ?>
 <a href="<?php echo home_url(); ?>"><img src='★PC用のロゴ画像★'　　 alt="ロゴ" style="width:500px; height:50px; " /></a>
 <?php endif; ?>
 <?php if (is_front_page()) { ?>
 </h1>

.twitter-tweet{
	margin: 0 auto;
max-width: 90%!important;
}

/*文字サイズ（サイドメニューやら小さい文字を大きく）*/

.author p {
font-size: 14px;
}

footer p, footer a {
font-size: 14px;
}

ul.list-unstyled{
line-height: 0;
}

main .wrap .meta {
text-align: center;
font-size: 15px;
}

/*————————-
 引用
————————-*/



blockquote {
    position: relative;
    padding: 10px 15px 10px 40px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;

}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 18px;
    left: 15px;
    vertical-align: middle;
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    color: #cfcfcf;
    font-size: 20px;
    line-height: 1;
    font-weight: 900;

}

blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.8em;
}

function add_ads_before_h2($the_content) {
if (is_single()) {
$ads = <<< EOF

<div style="padding-left:20px;padding-right:80px;margin-top:50px;margin-bottom:50px;">

★★自分のアドセンスコードをここにコピペしてください★★

</div>

<div style="clear:both"></div>
EOF;
	$h2 = '/^.+?<\/h2>$/im';//H2見出しのパターン

	if ( preg_match_all( $h2, $the_content, $h2s )) {
		if ( $h2s[0] ) {

			// 1つ目のh2見出しの上にアドセンス挿入
			if ( $h2s[0][0] ) {
				$the_content  = str_replace($h2s[0][0], $ads.$h2s[0][0], $the_content);
			}

			// 2つ目のh2見出しの上にアドセンス挿入
			if ( $h2s[0][1] ) {
				$the_content  = str_replace($h2s[0][1], $ads.$h2s[0][1], $the_content);
			}
			
			
			// 3つ目のh2見出しの上にアドセンス挿入
			if ( $h2s[0][2] ) {
				$the_content  = str_replace($h2s[0][2], $ads.$h2s[0][2], $the_content);
			}

			
			// 4つ目のh2見出しの上にアドセンス挿入
			if ( $h2s[0][3] ) {
				$the_content  = str_replace($h2s[0][3], $ads.$h2s[0][3], $the_content);
			}
			
			// 5つ目のh2見出しの上にアドセンス挿入
			if ( $h2s[0][4] ) {
				$the_content  = str_replace($h2s[0][4], $ads.$h2s[0][4], $the_content);
			}

			// 6つ目のh2見出しの上にアドセンス挿入
			if ( $h2s[0][5] ) {
				$the_content  = str_replace($h2s[0][5], $ads.$h2s[0][5], $the_content);
			}			
			
			// 7つ目のh2見出しの上にアドセンス挿入
			if ( $h2s[0][6] ) {
				$the_content  = str_replace($h2s[0][6], $ads.$h2s[0][6], $the_content);
			}

		}
	}
}
return $the_content;
}
add_filter('the_content','add_ads_before_h2');

<div style="padding-left:20px;padding-right:80px;margin-top:50px;margin-bottom:50px;">

// 7つ目のh2見出しの上にアドセンス挿入
			if ( $h2s[0][6] ) {
				$the_content  = str_replace($h2s[0][6], $ads.$h2s[0][6], $the_content);
			}

<div class="pre">グレーの枠で囲いたいテキスト</div>

<p class="point"><i class="fa fa-check" aria-hidden="true"></i>チェックマークつけたいテキスト</p>

<span class="pink_line">蛍光マーカー（赤）くしたいテキスト</span>

<span class="blue_line">蛍光マーカー（青）くしたいテキスト</span>

<span class="yellow_line">蛍光マーカー（黄）にしたいテキスト</span>

<div class="pre2">青いボックスで囲いたいテキスト</div>

<div class="pre3">点線で囲いたいテキスト</div>

/*蛍光ペン*/

.pink_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, 
#FFDFEF 0%) repeat scroll 0 0;}

.blue_line{background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%,
 #cce5ff 0%) repeat scroll 0 0;}

.yellow_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, 
#ffffbc 0%) repeat scroll 0 0;}

/*枠付きボックス（グレー）*/

.single div.pre {
font-size: 16px;
padding: 20px;
background-color: #fafafa;
outline: 1px solid #f0f0f0;
border-color: #f0f0f0;
text-align: left;
margin: 40px;
margin-bottom: 60px;
margin-top: 15px;
}

/*枠付きボックス（青枠）*/

.single div.pre2 {
font-size: 16px;
padding: 20px;
background-color: #F8F9FF;
outline: 1px solid #f0f0f0;
border-color: #4865B2;
text-align: left;
margin: 40px;
margin-bottom: 60px;
margin-top: 15px;
}

/*枠付きボックス（青点線）*/

.single div.pre3 {
font-size: 16px;
padding: 20px;
background-color: #F8F9FF;
outline: 1px dashed #4865B2;
border-color: #4865B2;
text-align: left;
margin: 40px;
margin-bottom: 60px;
margin-top: 15px;
}

<code>ここに文字入れる</code>

code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}

.wp-block-image {
width: 90%;
margin: 10px auto;
}

display: block;
border: 2px solid #F0F0F0;
padding: 1.2em 1em;
background-color: #FAFAFA;
line-height: 1.7;

display: block;
border: 2px solid #F0F0F0;
padding: 1.2em 1em;
background-color: #F8F9FF;
line-height: 1.6;

display: block;
border: 1px dashed #4865B2;
padding: 1.2em 1em;
background-color: #F8F9FF;
line-height: 1.6;

padding: .3em;
text-align: center;
background-color: #EE7917;
color: #ffffff;
font-size: 90%;
margin-right: 5px;

padding: .3em;
text-align: center;
background-color: #2B418B;
color: #ffffff;
font-size: 90%;
margin-right: 5px;

padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;

display: block;
position: relative;
line-height: 1.4;
background: #ffffff;
border: 0px solid #acf;
padding: 1em 1em 1em 1.0em;
font-size: 1.3em;
font-weight: 600;

[after] content: ” “;
[after] display: block;
[after] width: 0;
[after] height: 50%;
[after] position: absolute;
[after] top: 25%;
[after] left: 3.4em;
[after] opacity: 0.6;
[after] border-right: 0px dashed;
[after] border-right-color: #76b3f7;

[before] font-weight: 900;
[before] font-size: 0.6em;
[before] font-family: “Font Awesome 5 Free”, “Font Awesome 5 Brands”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
[before] content: “\f00c”;
[before] color: #6C9FCE;
[before] display: inline-block;
[before] position: absolute;
[before] top: 50%;
[before] left: 0em;
[before] transform: translateY(-50%) scale(1.5);

[before] line-height: 1;
[before] font-size: 1em;
[before] font-family: “Font Awesome 5 Free”,”Font Awesome 5 Brands”,Aharoni,”Arial Black”,Impact,Arial,sans-serif;
[before] content: “\f138”;
[before] font-weight: 900;
[before] padding-right: .2em;
[before] margin-right: .2em;
[before] color: #333;

[before] line-height: 1;
[before] font-size: 1em;
[before] font-family: “Font Awesome 5 Free”,”Font Awesome 5 Brands”,Aharoni,”Arial Black”,Impact,Arial,sans-serif;
[before] content: “\f058”;
[before] font-weight: 900;
[before] padding-right: .2em;
[before] margin-right: .2em;
[before] color: #ED5B65;

text-decoration: underline;

border: solid 1px #777777;
border-radius: 2px;
box-shadow: 2px 2px 2px #DEDEDE;
padding-top: 1px;
padding-bottom: 1px;
background-color: #F9F9F9;
color: #605857;
font-size: .8em;
padding-left: 6px;
padding-right: 6px;

Warning: Use of undefined constant _aioseop_description – assumed ‘_
aioseop_description’ (this will throw an Error in a future version of PHP) in 
/home/manabubb/manabubb.xsrv.jp/public_html/minimal/
wp-content/themes/minimal/search.php on line 43

実際に出たエラーメッセージ

<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>

<?php the_excerpt(); ?>

<?php if ( is_home() || is_front_page() ) : ?>

<!-- TOP3カラム表示 -->
<div class="col-xs-12 picks">

<div class="col-xs-12 col-sm-4 wrap topcolbox">
<div itemscope="" itemtype="http://schema.org/ImageObject" class="thumbnail">

<a style="background-image:url(https://www.monkeychop69.com/wp-content/uploads/2019/05/minimal1.jpg" title="【マナブログ】ワードプレステーマ『Minimal』のデザインカスタマイズ【まとめ】" itemprop="url" class="thumbnail-img topthumb-img"></a>

</div>

<h2 class="title topttlorg" itemprop="name headline">

<a href="https://www.monkeychop69.com/2019/05/06/minimal/" title="【マナブログ】ワードプレステーマ『Minimal』のデザインカスタマイズ【まとめ】" itemprop="url">【マナブログ】ワードプレステーマ『Minimal』のデザインカスタマイズ<br>【まとめ】</a>
</h2>
<div class="readmore"><a href="https://www.monkeychop69.com/2019/05/06/minimal/">READ MORE</a></div>
</div>



<div class="col-xs-12 col-sm-4 wrap center topcolboxcenter">

<div itemscope="" itemtype="http://schema.org/ImageObject" class="thumbnail">

<a style="background-image:url(https://www.monkeychop69.com/wp-content/uploads/2019/06/demore.png" title="【副業しないと老後が危ない!?】サラリーマン会社員デザイナーにおすすめな副業３選【老後必要資金は2,000万】" itemprop="url" class="thumbnail-img topthumb-img"></a>

</div>

<h2 class="title topttlorg" itemprop="name headline">

<a href="https://www.monkeychop69.com/2019/06/13/fukugyo-designer/" title="副業しないと老後が危ない!?】サラリーマン会社員デザイナーにおすすめな副業３選【老後必要資金は2,000万】" itemprop="url">【副業しないと老後が危ない!?】サラリーマン会社員デザイナーにおすすめな<br>副業３選【老後必要資金は2,000万】</a>
</h2>
<div class="readmore"><a href="https://www.monkeychop69.com/2019/06/13/fukugyo-designer/">READ MORE</a></div>
</div>

<div class="col-xs-12 col-sm-4 wrap topcolbox">
<div itemscope="" itemtype="http://schema.org/ImageObject" class="thumbnail">
<a style="background-image:url(https://www.monkeychop69.com/wp-content/uploads/2019/07/webd1.png" title="グラフィックデザイナーからwebデザイナーへの転職方法【基本独学でOK】" itemprop="url" class="thumbnail-img topthumb-img"></a>
</div>
<h2 class="title topttlorg" itemprop="name headline">
<a href="https://www.monkeychop69.com/2019/07/08/designer-webdesigner/" title="グラフィックデザイナーからwebデザイナーへの転職方法【基本独学でOK】" itemprop="url">グラフィックデザイナーから<br>webデザイナーへの<br>転職方法【基本独学でOK】</a>
</h2>
<div class="readmore"><a href="https://www.monkeychop69.com/2019/07/08/designer-webdesigner/">READ MORE</a></div>
</div>

<?php endif; ?>	
	

/* トップ3カラム */
@media (min-width: 768px) {
main .container .topcolbox{
  width: 31.33333%;
  margin-top: 30px;
  padding-bottom: 40px;
}}
@media (max-width: 479px) {
main .container .topcolbox{
  padding-bottom: 5px;
}}
@media (min-width: 768px) {
main .container .topcolboxcenter{
  width: 31.33333%;
  margin-top: 30px;
  margin-right: 3%;
  margin-left: 3%;
  padding-bottom: 40px;
}}
@media (max-width: 479px) {
main .container .topcolboxcenter{
  padding-bottom: 5px;
}}
main .wrap .thumbnail .topthumb-img{
  height: 170px;
}
main .container .topttlorg{
  font-size: 18px;
  padding-left: 5px;
  padding-right: 5px;
}

border: solid 1px #777777;
 border-radius: 2px;
 box-shadow: 2px 2px 2px #DEDEDE;
 padding-top: 1px;
 padding-bottom: 1px;
 background-color: #F9F9F9;
 color: #605857;
 font-size: .8em;
 padding-left: 6px;
 padding-right: 6px;

@media screen and (max-width : 767px){
 html,
 body {
 overflow-x: hidden!important;
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
 }
}

Warning: Use of undefined constant _aioseop_description - assumed '
_aioseop_description' (this will throw an Error in a future version of PHP) in 
/home/masuo3/monkeychop69.com/public_html/wp-content/themes/minimal_blue
/tag.php on line 38

<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>

<?php the_excerpt(); ?>

<div style="position: relative; padding-bottom: 56.25%;">
  <iframe 
    style="position: absolute; top: 0; left: 0; width: 90%; height: 90%;" 
    src="https://www.youtube.com/embed/【youtube動画のID】 "
    frameborder="0" 
    allow="autoplay; 
    encrypted-media" 
    allowfullscreen>
  </iframe>
</div>

#toc_container {
  margin-bottom: 40px;
	  margin-left:auto;
		  margin-right:auto;
	width:90%;
	margin-top:50px;
  padding: 15px 20px;
  background: #fff;
  border: 5px solid #F7F7F7;
  border-radius: 2px;
  color: #666; 
   text-align: center;
}

#toc_container .toc_title {
    text-align: center;
  margin-bottom: 35px;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0px;
  border-bottom: 2px solid #dedede; }

#toc_container ul {
border: initial;

}

#toc_container li {
  position: relative;
  margin-bottom: 15px;
	　margin-right:10px;
  margin-left: 6px;
  line-height: 1.3em; 
  border:solid 0px;
	margin-top:10px;

}

#toc_container li:before{content:"»";
display:inline-block;width:1.5em;
	color:#3379B7;
	margin-left:0em;
margin-right:-0.7em;
}

#toc_container {
  margin-bottom: 40px;
	  margin-left:auto;
		  margin-right:auto;
	width:90%;
	margin-top:50px;
  padding: 15px 20px;
  background: #fff;
  border: 5px solid #F7F7F7;
  border-radius: 2px;
  color: #666; 
   text-align: center;

}

#toc_container .toc_title {
    text-align: center;
  margin-bottom: 35px;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0px;
  border-bottom: 2px solid #dedede; }

#toc_container ul {
border: initial;
margin-bottom:50px;

}

#toc_container li {
  position: relative;
  margin-bottom: 15px;
	　margin-right:10px;
  margin-left: 6px;
  line-height: 1.3em; 
  border:solid 0px;
	margin-top:10px;

}

#toc_container ul li:before{content:"»";
display:inline-block;width:1.5em;
	color:#3379B7;
	margin-left:0em;
margin-right:-0.7em;
}

#toc_container a {
	font-weight:normal;
	line-height:10px;
}

<p style="margin-bottom: 10px;"><span style="font-size: 14px;color: #fff;margin-right: 10px;background-color: #ee7917;border-radius: 2px;padding: 8px 8px 7px;">人気記事</span><a href="ここにURL">ここに記事タイトル</a></p>

<p style="margin-bottom: 10px;"><span style="font-size: 14px;color: #fff;margin-right: 10px;background-color: #ee7917;border-radius: 2px;padding: 8px 8px 7px;">人気記事</span><a href="ここにURL">ここに記事タイトル</a></p>
 
 

<ul class="sns_button list-unstyled clearfix">
	<li class="facebook-btn-icon col-xs-2">
		<a class="facebook-btn-icon-link" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" target="_blank">
			<span class="icon-facebook"></span>
			facebook
		</a>
	</li>
	<li class="twitter-btn-icon col-xs-2">
		<a class="twitter-btn-icon-link" href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>" target="_blank">
			<span class="icon-twitter"></span>
			<span class="sns-share-small_text">Tweet</span>
		</a>
	</li>
	<li class="hatena-btn-icon col-xs-2">
		<a class="hatena-btn-icon-link" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">
			<span class="icon-hatebu"></span>
			<span class="sns-share-small_text">hatebu</span>
		</a>
	</li>
	<li class="pocket-btn-icon col-xs-2">
		<a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"  class="pocket-btn-icon-link" target="_blank">
			<span class="icon-pocket"></span>
			<span class="sns-share-small_text">Read Later</span>
		</a>
	</li>

</ul>

ul.sns_button {
    white-space: nowrap;
}

ul.sns_button li a {
    color: #fff;
    font-size: 18px;
    position: relative;
    display: block;
    padding: 25px 0;
}

ul.sns_button .facebook-btn-icon {
    background: #2B418B;
}
ul.sns_button li {
    float: left;
    width: 41%;
    text-align: center;
    margin-right: 10px;
    border-radius: 3px;
	
}


ul.sns_button .twitter-btn-icon {
    background: #3D97F1;
}

ul.sns_button .hatena-btn-icon {
    background: #0075DD;
}


ul.sns_button .google-plus-btn-icon {
    background: #D73220;
}


ul.sns_button .pocket-btn-icon {
    background: #ED243E;
}


.single ul li, .single ol li {
    margin-bottom: 10px;
    text-align: left;
}

<p style="text-align: center; margin-bottom: 0px;color:#CBCFD7;font-size:140%;"><strong>＼今がチャンス！◯月◯日まで限定／</strong></p>
<a href="#" class="btn-gradient-3d-orange">◯◯◯キャンペーンに申込む　<li class="fa fa-chevron-circle-right"></li></a>
<p style="text-align:center;font-size:100%;margin-top:10px;"><i class="fas fa-check"></i> 今なら特典◯◯◯◯が付いてくる<br><i class="fas fa-check"></i> お支払いは◯◯◯でも可能！</p>

.btn-gradient-3d-orange {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #c58668;
	font-size:140%;

  width:90%;
	font-weight:bold;
　margin-left:10%;
}

.btn-gradient-3d-orange:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;

}

.wp-block-table.is-style-sango-table-responsive{
    display: block;
    overflow-x: auto;
    margin-left: 5%;
    margin-right: 5%;
    white-space: nowrap;

    border: #7B7B7B 1px solid;
}

.wp-block-table.is-style-sango-table-responsive td{
	 border: #7B7B7B 1px solid;
	padding:15px;
	
}

<p id="page-top"><a href="#"><i class="fas fa-caret-square-up"></i><br>TOP</a></p>

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 50px;
    padding: 	10px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
	font-size:15px;
}
#page-top a:hover {
    text-decoration: none;
    background: #212121;
}

	<div class="mb-hb">
		<div class="hb-menu-search ">
		<form method="get" action="<?php echo home_url('/'); ?>" class="search-form">
			<div class="form-group has-feedback">
				<input type="text" name="s" id="s" placeholder="Search for..." class="form-control">
				<span class="glyphicon glyphicon-search form-control-feedback"></span>
			</div>
		</form>
			</div>
	</div>

.hb-menu-search {
	margin-right:20px;
margin-top:-20px;
}

/*PCの場合*/
.pc-hb	{ display:inline!important; }
.mb-hb	{ display:none!important; }
@media screen and (max-width: 768px) {
/*タブレット、スマホの場合*/
.pc-hb	{ display:none!important; }
.mb-hb { display:inline!important; }
}