【備忘録メモ】 Simplicty WordPressカスタマイズ（Simplicty&Cocoon）

もう3年ほど活用させていただいている、わいひらさんが開発したWordpress用の純国産の無料テーマ、「Simplicty」。

私のようなWordpress初心者でもデフォルトのウィジェットを活用することで、サイトに必要な機能を簡単に実装できるところが最大の魅力のテーマです。

また国内では広く使われているテンプレートなので、簡単にカスタマイズできる術を公開している方も多く、ほとんどコピーペーストにてやりたいようにデザインできるのも良いところです。

今回、自分用の備忘録として現在カスタマイズしたポイントをリストとして列挙していきます。

※このページは随時カスタマイズするごとにアップデートしていく予定です。

<Simplicityカスタマイズリスト>

記事一覧サムネイル画像を大きく長方形にカスタマイズする
カテゴリ別新着記事をヘッダー下に表示する
スマホ表示にグローバルナビを設置するカスタマイズ
モバイル表示時に横スクロールできるグローバルメニューを設置
グローバルナビを常に上部にスクロール表示
本文記事の複数のh2見出し前にAdsenseを表示
記事を読む時間表示プラグイン修正（固定ページに表示しない）
TOPページを２カラム化して見やすくする
Simplicityのバイラルタイプのシェアボタンを均等に横一列にする方法
Simplicityの固定TOPページを３カラム化
Meta SliderのCSSカスタマイズ方法
TOC+ 目次をおしゃれにデザインカスタマイズする
サイドバーにプロフィールcssカスタマイズ
Amazonjsカスタマイズ（テキスト追加）
Amazonjsカスタマイズ（楽天リンクをつける）
PHP7.0に変更、古いプラグインを停止・削除
AmazonプラグインをCocoonのショートコードに一括変換
ブログカテゴリーを整理
ウィジェットをショートコードで利用
カテゴリー一覧ページに情報付加

記事一覧サムネイル画像を大きく長方形にカスタマイズする

こちら参考にしたもん吉さんの記事です。

https://momoura.com/post-624

このカスタマイズをするためには、完全レスポンシブデザインにするを「OFF」に、一覧（インデックス）ページの表示スタイル設定を「エントリーカード（デフォルト）」にしておく必要があります。

子テーマにあるfunctions.phpに以下コードを追加します。

add_image_size('thumb250',336,224,true);

1	add_image_size('thumb250',336,224,true);

デザインは子テーマにあるstyle.cssに追加します。

/* サムネイルサイズ指定 */
.entry-thumb img {
    width: 336px;
    height: 224px;
    margin-bottom: 40px;
}

/* 記事タイトルなどの位置 */
.entry-card-content {
    margin-left: 320px !important;
}

/* スマホの設定 */
@media screen and (max-width: 480px) {
 
/* サムネイル回り込み */
.entry-thumb {
  float: none !important;
  margin: 6px 4px 3px 0px !important;	
}
 
/* サムネイルサイズ変更 */
.entry-thumb img{
    width: 336px !important;
    height: 224px !important;
}
 
/* 記事タイトルなどの位置 */
.entry-card-content {
    margin-left: 0px !important;
}
 
.entry-snippet {
  font-size: 100% !important;
}
 
.entry-read a {
  font-size: 100% !important;
}
}

/* サムネイルサイズ指定 */

.entry-thumbimg{

width:336px;

height:224px;

margin-bottom:40px;

}

/* 記事タイトルなどの位置 */

.entry-card-content{

margin-left:320px!important;

}

/* スマホの設定 */

@mediascreenand(max-width:480px){

/* サムネイル回り込み */

.entry-thumb{

float:none!important;

margin:6px4px3px0px!important;

}

/* サムネイルサイズ変更 */

.entry-thumbimg{

width:336px!important;

height:224px!important;

}

/* 記事タイトルなどの位置 */

.entry-card-content{

margin-left:0px!important;

}

.entry-snippet{

font-size:100%!important;

}

.entry-reada{

font-size:100%!important;

}

最後にサムネイル画像を調整するために、プラグイン「Regenerate Thumbnails」を実行して、終了！

カテゴリ別新着記事をヘッダー下に表示する

TOPページの記事リスト上段にカテゴリ毎の最新記事をタイル状に5つ並べる方法。

PC向けページ限定です。

モバイルは表示させていませんが、スライダーなどのプラグインを使って実装する方法もあると思います。

参考にしたのはこちらの記事です。

コーピーペーストで簡単実装できます。

コード中のスラッグ名、カテゴリ名は各自のサイトのものに置き換えます。

【WordPress】ヘッダー下にカテゴリボックスを並べる方法（Simplicity,マテリアル）

こんにちは。ちゃぼP（@chabo0429）です。今日のちゃぼPでも触れましたが、トップページのカテゴリ新着…

【Simplicity2カスタマイズ⑨】主要カテゴリー6つの最新記事をトップページ上段に表示する方法

今回行うカスタマイズは、「主要カテゴリー6つの最新記事を、トップページ上段に表示させる」です。トップページにズラーっと並ぶ記事一覧のさらに上に、主要カテゴリー6つの最新記事を表示させることが出来ると言うなんとも素晴らしいカスタマイズ。部長ナビさんが紹介してくれているコードをお借りしてカスタマイズを行います。

Simplicity 2.4の場合は、子テーマの中にある「before-main.php」に以下コードをコピペするだけです。

<?php if ( is_home() || is_front_page() ) : ?>
	<?php if (is_mobile()) :?>
	<?php else: ?>
		<?php if ($paged <= 1): ?>
			<!-- 新着カテゴリ1 -->
			<div class="cat_article1">

			<?php
			    $cat = '（スラッグ名１）';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/（スラッグ名１）">カテゴリ１</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ2 -->
			<div class="cat_article2">

			<?php
			    $cat = '（スラッグ名２）';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/（スラッグ名２）">カテゴリ２</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ3 -->
			<div class="cat_article3">

			<?php
			    $cat = '（スラッグ名３）';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/（スラッグ名３）">カテゴリ３</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ4 -->
			<div class="cat_article4">

			<?php
			    $cat = '（スラッグ名４）';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/（スラッグ名４）">カテゴリ４</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>

			<!-- 新着カテゴリ5 -->
			<div class="cat_article5">

			<?php
			    $cat = '（スラッグ名５）';
			    $num = '1';
			    global $post;
			 
			    $term_id = get_category_by_slug($cat)->term_id;
			    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
				if ($myposts) {
					foreach($myposts as $post):
			        		setup_postdata($post);
			?>
						<a class="anchor" href="/category/（スラッグ名５）">カテゴリ５</a>
						<a class="thumbnail" href="<?php the_permalink() ?>">
						<div class="cat_article_thumb">
							<?php if(has_post_thumbnail()){ ?>
								<?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
							<?php }else{ ?>
						               <i class="ico-camera-alt"></i>
							<?php } ?>
								<p class="postcat1">カテゴリ新着記事</p>
								<span class="cat_text_area"><?php the_title(); ?></span>
								<span class="cat-update"><span class="lsf">time </span><?php the_time('Y/m/d') ?></span>
						</div>
						</a>
			<?php
					endforeach;
			?>
				<?php }else{ ?>
				    <p>記事がありません</p>
				<?php } ?>
			</div>
		<?php endif; ?>
	<?php endif; ?>
<?php endif; ?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

<?phpif(is_home()||is_front_page()):?>

<?phpif(is_mobile()):?>

<?phpelse:?>

<?phpif($paged<=1):?>

<divclass="cat_article1">

<?php

$cat='（スラッグ名１）';

$num='1';

global$post;

$term_id=get_category_by_slug($cat)->term_id;

$myposts=get_posts('numberposts='.$num.'&category_name='.$cat);

if($myposts){

foreach($mypostsas$post):

setup_postdata($post);

<aclass="anchor"href="/category/（スラッグ名１）">カテゴリ１</a>

<aclass="thumbnail"href="<?phpthe_permalink()?>">

<divclass="cat_article_thumb">

<?phpif(has_post_thumbnail()){?>

<?php$title=get_the_title();the_post_thumbnail(array(720,480),array('alt'=>$title,'title'=>$title));?>

<?php}else{?>

<iclass="ico-camera-alt"></i>

<?php}?>

<pclass="postcat1">カテゴリ新着記事</p>

<spanclass="cat_text_area"><?phpthe_title();?></span>

<spanclass="cat-update"><spanclass="lsf">time</span><?phpthe_time('Y/m/d')?></span>

</div>

</a>

<?php

endforeach;

<?php}else{?>

<p>記事がありません</p>

<?php}?>

</div>

<divclass="cat_article2">

<?php

$cat='（スラッグ名２）';

$num='1';

global$post;

$term_id=get_category_by_slug($cat)->term_id;

$myposts=get_posts('numberposts='.$num.'&category_name='.$cat);

if($myposts){

foreach($mypostsas$post):

setup_postdata($post);

<aclass="anchor"href="/category/（スラッグ名２）">カテゴリ２</a>

<aclass="thumbnail"href="<?phpthe_permalink()?>">

<divclass="cat_article_thumb">

<?phpif(has_post_thumbnail()){?>

<?php$title=get_the_title();the_post_thumbnail(array(720,480),array('alt'=>$title,'title'=>$title));?>

<?php}else{?>

<iclass="ico-camera-alt"></i>

<?php}?>

<pclass="postcat1">カテゴリ新着記事</p>

<spanclass="cat_text_area"><?phpthe_title();?></span>

<spanclass="cat-update"><spanclass="lsf">time</span><?phpthe_time('Y/m/d')?></span>

</div>

</a>

<?php

endforeach;

<?php}else{?>

<p>記事がありません</p>

<?php}?>

</div>

<divclass="cat_article3">

<?php

$cat='（スラッグ名３）';

$num='1';

global$post;

$term_id=get_category_by_slug($cat)->term_id;

$myposts=get_posts('numberposts='.$num.'&category_name='.$cat);

if($myposts){

foreach($mypostsas$post):

setup_postdata($post);

<aclass="anchor"href="/category/（スラッグ名３）">カテゴリ３</a>

<aclass="thumbnail"href="<?phpthe_permalink()?>">

<divclass="cat_article_thumb">

<?phpif(has_post_thumbnail()){?>

<?php$title=get_the_title();the_post_thumbnail(array(720,480),array('alt'=>$title,'title'=>$title));?>

<?php}else{?>

<iclass="ico-camera-alt"></i>

<?php}?>

<pclass="postcat1">カテゴリ新着記事</p>

<spanclass="cat_text_area"><?phpthe_title();?></span>

<spanclass="cat-update"><spanclass="lsf">time</span><?phpthe_time('Y/m/d')?></span>

</div>

</a>

<?php

endforeach;

<?php}else{?>

<p>記事がありません</p>

<?php}?>

</div>

<divclass="cat_article4">

<?php

$cat='（スラッグ名４）';

$num='1';

global$post;

$term_id=get_category_by_slug($cat)->term_id;

$myposts=get_posts('numberposts='.$num.'&category_name='.$cat);

if($myposts){

foreach($mypostsas$post):

setup_postdata($post);

<aclass="anchor"href="/category/（スラッグ名４）">カテゴリ４</a>

<aclass="thumbnail"href="<?phpthe_permalink()?>">

<divclass="cat_article_thumb">

<?phpif(has_post_thumbnail()){?>

<?php$title=get_the_title();the_post_thumbnail(array(720,480),array('alt'=>$title,'title'=>$title));?>

<?php}else{?>

<iclass="ico-camera-alt"></i>

<?php}?>

<pclass="postcat1">カテゴリ新着記事</p>

<spanclass="cat_text_area"><?phpthe_title();?></span>

<spanclass="cat-update"><spanclass="lsf">time</span><?phpthe_time('Y/m/d')?></span>

</div>

</a>

<?php

endforeach;

<?php}else{?>

<p>記事がありません</p>

<?php}?>

</div>

<divclass="cat_article5">

<?php

$cat='（スラッグ名５）';

$num='1';

global$post;

$term_id=get_category_by_slug($cat)->term_id;

$myposts=get_posts('numberposts='.$num.'&category_name='.$cat);

if($myposts){

foreach($mypostsas$post):

setup_postdata($post);

<aclass="anchor"href="/category/（スラッグ名５）">カテゴリ５</a>

<aclass="thumbnail"href="<?phpthe_permalink()?>">

<divclass="cat_article_thumb">

<?phpif(has_post_thumbnail()){?>

<?php$title=get_the_title();the_post_thumbnail(array(720,480),array('alt'=>$title,'title'=>$title));?>

<?php}else{?>

<iclass="ico-camera-alt"></i>

<?php}?>

<pclass="postcat1">カテゴリ新着記事</p>

<spanclass="cat_text_area"><?phpthe_title();?></span>

<spanclass="cat-update"><spanclass="lsf">time</span><?phpthe_time('Y/m/d')?></span>

</div>

</a>

<?php

endforeach;

<?php}else{?>

<p>記事がありません</p>

<?php}?>

</div>

<?phpendif;?>

あとはレイアウトをstyle.cssで調整します。

もちろん、こちらも子テーマ側のstyle.cssに追加します。

/* 最新のカテゴリ記事
--------------------------------------------------------- */
.cat_article1 {
	margin:0 0px 15px 0px;
	float: left;
	width: 19.6%;
}
.cat_article2 {
	margin:0 0px 15px 5px;
	float: left;
	width: 19.6%;
}
.cat_article3 {
	margin:0 0px 15px 5px;
	float: left;
	width: 19.6%;
}
.cat_article4 {
	margin:0 0px 15px 5px;
	float: left;
	width: 19.6%;
}
.cat_article5 {
	margin:0 0px 15px 5px;
	float: left;
	width: 19.6%;
}
.cat_article_thumb {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.cat_article1 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article1 .anchor:hover, .cat_article1 .anchor:active {
	text-decoration: underline;
}
.cat_article1 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article1 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article1 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article1 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article1 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat_article2 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article2 .anchor:hover, .cat_article2 .anchor:active {
	text-decoration: underline;
}
.cat_article2 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article2 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article2 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article2 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article2 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat_article3 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article3 .anchor:hover, .cat_article3 .anchor:active {
	text-decoration: underline;
}
.cat_article3 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article3 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article3 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article3 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article3 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat_article4 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article4 .anchor:hover, .cat_article4 .anchor:active {
	text-decoration: underline;
}
.cat_article4 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article4 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article4 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article4 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article4 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat_article5 .anchor {
	padding: 3px 5px;
	display: block;
	color: #fff;
	background: #333;
	font-size: 16px;
	text-decoration: none;
	overflow: hidden;
	*zoom: 1;
	text-align: center;
}
.cat_article5 .anchor:hover, .cat_article5 .anchor:active {
	text-decoration: underline;
}
.cat_article5 .anchor span {
	float: right;
	font-size: 9px;
	background: #fff;
	color: #333;
	padding: 5px 3px;
}
.cat_article5 .thumbnail {
	display: block;
	color: #333;
	background: #fff;
	text-decoration: none;
	line-height: 1.5;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
.cat_article5 .thumbnail img {
	width: 100%;
	height: 180px;
	display: block;
}
.cat_article5 .thumbnail:hover {
	color: #e22f26;
	background: #ffffea;
}
.cat_article5 .thumbnail .title {
	padding: 3px;
	height: 70px;
}
.cat-update{
	font-size: 0.7em;
	position:absolute;
	top:0px;
	left:0px;
	color: #fff;
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
}
.cat_text_area {
	padding: 0 4px 0;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	color: #fff;
	font-weight: bold;
	overflow: hidden;
	height: 80px;
	line-height: 20px;
	font-size: 15px;
	text-decoration: none;
	background: rgba(3,3,3,0.6);
	background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(2,2,2,1.0)));
	background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(2,2,2,1.0));
	text-shadow: 0 0 5px rgba(0,0,0,1.0);
}
.postcat1 {
	position:absolute;
	top:0px;
	right:0px;
	background-color: #EA3382;
	color: #ffffff;
	display: inline-block;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	padding: 0px 10px 0;
}
/* ここまで

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

/* 最新のカテゴリ記事

--------------------------------------------------------- */

.cat_article1{

margin:00px15px0px;

float:left;

width:19.6%;

}

.cat_article2{

margin:00px15px5px;

float:left;

width:19.6%;

}

.cat_article3{

margin:00px15px5px;

float:left;

width:19.6%;

}

.cat_article4{

margin:00px15px5px;

float:left;

width:19.6%;

}

.cat_article5{

margin:00px15px5px;

float:left;

width:19.6%;

}

.cat_article_thumb{

width:100%;

overflow:hidden;

position:relative;

}

.cat_article1.anchor{

padding:3px5px;

display:block;

color:#fff;

background:#333;

font-size:16px;

text-decoration:none;

overflow:hidden;

*zoom:1;

text-align:center;

}

.cat_article1.anchor:hover,.cat_article1.anchor:active{

text-decoration:underline;

}

.cat_article1.anchorspan{

float:right;

font-size:9px;

background:#fff;

color:#333;

padding:5px3px;

}

.cat_article1.thumbnail{

display:block;

color:#333;

background:#fff;

text-decoration:none;

line-height:1.5;

font-size:16px;

position:relative;

overflow:hidden;

*zoom:1;

}

.cat_article1.thumbnailimg{

width:100%;

height:180px;

display:block;

}

.cat_article1.thumbnail:hover{

color:#e22f26;

background:#ffffea;

}

.cat_article1.thumbnail.title{

padding:3px;

height:70px;

}

.cat_article2.anchor{

padding:3px5px;

display:block;

color:#fff;

background:#333;

font-size:16px;

text-decoration:none;

overflow:hidden;

*zoom:1;

text-align:center;

}

.cat_article2.anchor:hover,.cat_article2.anchor:active{

text-decoration:underline;

}

.cat_article2.anchorspan{

float:right;

font-size:9px;

background:#fff;

color:#333;

padding:5px3px;

}

.cat_article2.thumbnail{

display:block;

color:#333;

background:#fff;

text-decoration:none;

line-height:1.5;

font-size:16px;

position:relative;

overflow:hidden;

*zoom:1;

}

.cat_article2.thumbnailimg{

width:100%;

height:180px;

display:block;

}

.cat_article2.thumbnail:hover{

color:#e22f26;

background:#ffffea;

}

.cat_article2.thumbnail.title{

padding:3px;

height:70px;

}

.cat_article3.anchor{

padding:3px5px;

display:block;

color:#fff;

background:#333;

font-size:16px;

text-decoration:none;

overflow:hidden;

*zoom:1;

text-align:center;

}

.cat_article3.anchor:hover,.cat_article3.anchor:active{

text-decoration:underline;

}

.cat_article3.anchorspan{

float:right;

font-size:9px;

background:#fff;

color:#333;

padding:5px3px;

}

.cat_article3.thumbnail{

display:block;

color:#333;

background:#fff;

text-decoration:none;

line-height:1.5;

font-size:16px;

position:relative;

overflow:hidden;

*zoom:1;

}

.cat_article3.thumbnailimg{

width:100%;

height:180px;

display:block;

}

.cat_article3.thumbnail:hover{

color:#e22f26;

background:#ffffea;

}

.cat_article3.thumbnail.title{

padding:3px;

height:70px;

}

.cat_article4.anchor{

padding:3px5px;

display:block;

color:#fff;

background:#333;

font-size:16px;

text-decoration:none;

overflow:hidden;

*zoom:1;

text-align:center;

}

.cat_article4.anchor:hover,.cat_article4.anchor:active{

text-decoration:underline;

}

.cat_article4.anchorspan{

float:right;

font-size:9px;

background:#fff;

color:#333;

padding:5px3px;

}

.cat_article4.thumbnail{

display:block;

color:#333;

background:#fff;

text-decoration:none;

line-height:1.5;

font-size:16px;

position:relative;

overflow:hidden;

*zoom:1;

}

.cat_article4.thumbnailimg{

width:100%;

height:180px;

display:block;

}

.cat_article4.thumbnail:hover{

color:#e22f26;

background:#ffffea;

}

.cat_article4.thumbnail.title{

padding:3px;

height:70px;

}

.cat_article5.anchor{

padding:3px5px;

display:block;

color:#fff;

background:#333;

font-size:16px;

text-decoration:none;

overflow:hidden;

*zoom:1;

text-align:center;

}

.cat_article5.anchor:hover,.cat_article5.anchor:active{

text-decoration:underline;

}

.cat_article5.anchorspan{

float:right;

font-size:9px;

background:#fff;

color:#333;

padding:5px3px;

}

.cat_article5.thumbnail{

display:block;

color:#333;

background:#fff;

text-decoration:none;

line-height:1.5;

font-size:16px;

position:relative;

overflow:hidden;

*zoom:1;

}

.cat_article5.thumbnailimg{

width:100%;

height:180px;

display:block;

}

.cat_article5.thumbnail:hover{

color:#e22f26;

background:#ffffea;

}

.cat_article5.thumbnail.title{

padding:3px;

height:70px;

}

.cat-update{

font-size:0.7em;

position:absolute;

top:0px;

left:0px;

color:#fff;

background:nonerepeatscroll00rgba(0,0,0,0.5);

}

.cat_text_area{

padding:04px0;

position:absolute;

bottom:0;

right:0;

left:0;

color:#fff;

font-weight:bold;

overflow:hidden;

height:80px;

line-height:20px;

font-size:15px;

text-decoration:none;

background:rgba(3,3,3,0.6);

background:-webkit-gradient(linear,lefttop,leftbottom,from(rgba(0,0,0,0)),to(rgba(2,2,2,1.0)));

background:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(2,2,2,1.0));

text-shadow:005pxrgba(0,0,0,1.0);

}

.postcat1{

position:absolute;

top:0px;

right:0px;

background-color:#EA3382;

color:#ffffff;

display:inline-block;

font-size:12px;

line-height:1.5;

margin:0;

padding:0px10px0;

}

/*ここまで

このコードは本当に感謝してます。

スマホ表示にグローバルナビを設置するカスタマイズ

Simplicityにはスマホ用にデフォルトで３つのグローバルメニュー表示が用意されていますが、わざわざメニューをクリックする必要があるためPCと同じく見た目ですぐにわかるメニューをつけるカスタマイズです。

タイトル下に表示範囲内で自分の好みのカテゴリーなどをメニューとして表示します。

子テーマの「before-main.php」に以下コードを追加します。

<?php if ( wp_is_mobile() ) : ?>
 
<div id="sm_nav">
<span class="category"><a href='http://AAAAA/'>メニュー1</a></span>
<span class="category"><a href='http://BBBBB/'>メニュー2</a></span>
<span class="category"><a href='http://CCCCC/'>メニュー3</a></span>
<span class="category"><a href='http://DDDDD/'>メニュー4</a></span>
</div>
 
<?php else: ?>
<?php endif; ?>

<?phpif(wp_is_mobile()):?>

<divid="sm_nav">

<spanclass="category"><ahref='http://AAAAA/'>メニュー1</a></span>

<spanclass="category"><ahref='http://BBBBB/'>メニュー2</a></span>

<spanclass="category"><ahref='http://CCCCC/'>メニュー3</a></span>

<spanclass="category"><ahref='http://DDDDD/'>メニュー4</a></span>

</div>

<?phpelse:?>

<?phpendif;?>

次に子テーマのスタイルシート(css)に以下ソースをコピペで追記します。

#sm_nav{
 text-align: center;
}
#sm_nav .category{ 
 background-color: #35A6A0; 
 padding:8px; 
 line-height: 230%;
 font-size:90%;
border-radius: 4px;
}
#sm_nav a{
 color: #FFFFFF;
 text-decoration: none;
 word-wrap: break-word;
}

#sm_nav{

text-align:center;

}

#sm_nav .category{

background-color:#35A6A0;

padding:8px;

line-height:230%;

font-size:90%;

border-radius:4px;

}

#sm_nav a{

color:#FFFFFF;

text-decoration:none;

word-wrap:break-word;

}

以下、色などの変更について。

・5行目のbackground-colorでメニュー部分の背景の色を変更。

・6行目のpaddingはメニューの背景の範囲（文字からどのくらいの距離まで背景をつけるか）とメニューとメニューの間隔を調整。

・7行目のline-heightは、2行以上になるときの行間。

・9行目のborder-radiusは、メニュー背景の角の丸みを調整。

・12行目のColorでメニューの文字色の変更。

301 Moved Permanently

まだ試行錯誤の最中ですので変更する可能性はあります。

上記方法だと表示領域が限られるのでPCと同じメニューが表示されるわけではありません。

今後はスライダー方式でメニューをPCと同じ項目数を表示させることを検討中です。

モバイル表示時に横スクロールできるグローバルメニューを設置

スマホで表示されるメニューをPC同様に表示し、横スライドで選択できるようにするカスタマイズです。

子テーマの「before-main.php」に以下をコピペで追記します。

<?php if ( wp_is_mobile() ) : ?>
 
<div id="mb-nume">
<span  class="cate"><a href='カテゴリー1のURL'>カテゴリー1</a></span>
<span  class="cate"><a href='カテゴリー2のURL'>カテゴリー2</a></span>
</div>

<?php else: ?>
<?php endif; ?>

<?phpif(wp_is_mobile()):?>

<divid="mb-nume">

<span class="cate"><ahref='カテゴリー1のURL'>カテゴリー1</a></span>

<span class="cate"><ahref='カテゴリー2のURL'>カテゴリー2</a></span>

</div>

<?phpelse:?>

<?phpendif;?>

次に子テーマのスタイルシート(css)に以下をコピペで追記します。

#mb-nume{
　　　display: flex;　
　　　display: -moz-flex;
　　　display: -o-flex;
　　　display: -webkit-flex;
　　　display: -ms-flex;
　　　overflow-x: scroll;
　　　flex-direction: row;
　　　-moz-flex-direction: row;
　　　-o-flex-direction: row;
　　　-webkit-flex-direction: row;
　　　-ms-flex-direction: row;
　　　display: -webkit-flex;
　　　width: 100%;
     text-align: center;

}

#mb-nume a{
 color: #fff;
 text-decoration: none;
 word-wrap: break-word;
}

#mb-nume .cate{
    background-color: rgba(6, 6, 6, 0.9);
    padding:5px;
    border-radius: 10px;
    min-width: 150px;
    max-width: 150px;
}

#mb-nume{

　　　display:flex;　

　　　display:-moz-flex;

　　　display:-o-flex;

　　　display:-webkit-flex;

　　　display:-ms-flex;

　　　overflow-x:scroll;

　　　flex-direction:row;

　　　-moz-flex-direction:row;

　　　-o-flex-direction:row;

　　　-webkit-flex-direction:row;

　　　-ms-flex-direction:row;

　　　display:-webkit-flex;

　　　width:100%;

text-align:center;

}

#mb-nume a{

color:#fff;

text-decoration:none;

word-wrap:break-word;

}

#mb-nume .cate{

background-color:rgba(6,6,6,0.9);

padding:5px;

border-radius:10px;

min-width:150px;

max-width:150px;

}

・カテゴリー名が長くなって改行する場合は、width:の値を大きくすることで修正可能。

・文字の大きさはfont-size、背景色はbackground-colorで変更可能。

こちら参考になったひがしさん（@Plus_A_Blog）の記事です。

Simplicityカスタマイズ!モバイル表示時に横スクロールできるグローバルメニューを設置する方法

Simplicityのスマートフォン表示では、メニューを表示するのにワンアクション必要です。そこでPC表示と同じようにヘッダー下にメニューを設置し、さらに横スクロールできるようにしてみました。カスタマイズ方法このような横スクロールができ

グローバルナビを常に上部にスクロール表示

グローバルメニューを常に上部に固定して表示させるカスタマイズです。

参考になったのはこちらのブログ記事です。

301 Moved Permanently

子テーマのスタイルシート(css)にコピペするだけで実装できます。

#navi{
  background:#ddd;
  border-top:none;
  border-bottom:1px solid #000;
  padding:0 0 0 0;
  position:fixed;
  top:0;
  z-index:9999;
  width:2000px;
}

#navi ul {
  background:#ddd;
}

#navi ul li a {
  font-size: 16px;
  font-weight:bold;
  color:#095;    
  padding:3px 20px;   　
}

#navi ul li a:hover{
  color:#c03 !important;
}