飯橋凛（いいはし りん）

読みやすさ倍増！WordPress テーマ「ストーク」のおすすめのカスタマイズ方法




WordPress テーマ「ストーク（STORK）」をカスタマイズしてえな！

ブロガーに人気のWordPressテーマ「ストーク」。

OPENCAGE（オープンケージ）さんが作っている WordPressテーマ の1つですね。

 

僕も気に入っていて、いくつかのサイトで採用させてもらっています。

機能だけでなく見栄えもおしゃれなので大変満足していますね。

しかしながら、このストークを

デフォルトの状態で使うのはちょっと気がひける。。

利用者が多いので被ってしまいますし、自分の好みには合っていないデザインや機能もあるので、

ある程度カスタマイズして使うようにしています。

 

 

ストーク（STORK）のおすすめのカスタマイズ方法

僕は次のようにカスタマイズしています。

カスタマイズする際は元ファイルの内容をバックアップ取っておきましょう。特にphpファイルの編集は一歩間違うとサイトが死ぬ可能性があるので注意です

 

アイキャッチ画像を非表示にする

記事の冒頭のアイキャッチ画像を非表示にするようにしています。

アイキャッチ画像があると、記事を読む前に内容をイメージしやすく、読者にとって嬉しいかもしれません。

しかしながら、アイキャッチ画像を記事中に表示していると、次のようなデメリットがあります。

  • アイキャッチ画像を記事ごとに毎回作らなければならない
  • 記事を読み込むスピードが遅くなる

 

僕は記事ごとにアイキャッチ画像を設定するものの、記事中にはアイキャッチ画像を表示しないようにしています。

このように設定したいときは、個別記事のPHP ファイルに当たる single.phpのこの部分を削除してやるといいですね。

<?php if ( has_post_thumbnail() && !get_option( 'post_options_eyecatch' ) ) :?>
<figure class="eyecatch">
<?php the_post_thumbnail(); ?>
</figure>
<?php endif; ?>

 

リストを太字にする

僕は箇条書きの文字は太字でコントラストをつけたい派です。

箇条書きを記事中のアクセントとして使っているので、普通の文字とは区別するようなデザインを好んでいます。

そのため、リストの 箇条書きの2種類（ul とolのli要素）の文字のフォントスタイルをボールドに設定しています。

CSS で書くと次のような感じですね↓

.entry-content ol li{
  font-weight: bold;
}


.entry-content ul li{
  font-weight: bold;
}

こいつをstyle.cssの一番下に追加しておきます。

 

冒頭の SNS シェアを削除

また、記事の冒頭に SNS のシェアボタンがデフォルトで用意されています。

デフォルトでSNS のシェアボタンは、

  1. 記事の冒頭
  2. 記事の終わり

の2箇所にあり、1記事あたりに2箇所シェアボタンが設置されています。

 

僕の記事はあまりシェアされないので、冒頭のシェアボタンは意味がないと考えております笑

まあ、記事下にシェアボタンあればいいっしょ、っていう。

ということで、おすすめは冒頭の SNS ボタンは削除するスタイル。

single.phpの冒頭の

<?php if ( !get_option( 'sns_options_hide' ) ) : ?>
<?php get_template_part( 'parts_sns_short' ); ?>
<?php endif; ?>

を削除してやれば SNS ボタンは消えると思います。

 

カエレバ・ヨメレバのデザイン

アフィリエイト Amazon や楽天のアフィリエイトリンクを貼る時はカエレバ・ヨメレバというツールを使っています。

FREE SWORDER
物販アフィリエイトに便利！カエレバの使い方
https://freesworder.net/kaereba
物販アフィリエイトに便利なカエレバを使ってみようどうも、Linです。西日を、受けてきました。 WordPressなどでブログを運営していると、ECサイトで購入した商品をアフィリエイトで紹介したい・・・・！という瞬間があるでしょう。Amazonの商品だけならば「Amazon JS」というWordPressのプラグインが便利で、ぼくもこのプラグインを使い続けてきました。が、これだと、Amazonでしか紹介できないという問題が発生します。 ユーザーごとにお気に入りのECサイトがありますので、できれば同じ商品のリンクを他のECサイトでも同...

 

そのツールを使ってリンクを貼る時にお洒落に見えるようにカスタマイズするようにしていますよ。

僕は次のCSS コードを追加でstyle.cssに書いてますね、下の方に。

/*=================================================================================
	カエレバ・ヨメレバ・トマレバ
=================================================================================*/
 
.cstmreba {
	width:98%;
	height:auto;
	margin:36px auto;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
	line-height: 1.5;
	word-wrap: break-word;
	box-sizing: border-box;
	display: block;
}
.cstmreba a {
	transition: 0.8s ;
	color:#285EFF; /* テキストリンクカラー */
}
.cstmreba a:hover {
	color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
}
.cstmreba .booklink-box,
.cstmreba .kaerebalink-box,
.cstmreba .tomarebalink-box {
	width: 100%;
	background-color: #fafafa; /* 全体の背景カラー */
	overflow: hidden;
	border-radius: 0px;
	box-sizing: border-box;
	padding: 12px 8px;
	box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
/* サムネイル画像ボックス */
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
	width:150px;
	float:left;
	margin:0 14px 0 0;
	text-align: center;
	background: #fff;
}
.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a,
.cstmreba .tomarebalink-image a {
	width:100%;
	display:block;
}
.cstmreba .booklink-image a img,
.cstmreba .kaerebalink-image a img,
.cstmreba .tomarebalink-image a img {
	margin:0 ;
	padding: 0;
	text-align:center;
	background: #fff;
}
.cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info {
	overflow:hidden;
	line-height:170%;
	color: #333;
}
/* infoボックス内リンク下線非表示 */
.cstmreba .booklink-info a,
.cstmreba .kaerebalink-info a,
.cstmreba .tomarebalink-info a {
	text-decoration: none;
}
/* 作品・商品・ホテル名 リンク */
.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a,
.cstmreba .tomarebalink-name>a {
	border-bottom: 1px solid ;
	font-size:16px;
}
/* タイトル下にPタグ自動挿入された際の余白を小さく */
.cstmreba .kaerebalink-name p,
.cstmreba .booklink-name p,
.cstmreba .tomarebalink-name p {
    margin: 0;
}
/* powered by */
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date,
.cstmreba .tomarebalink-powered-date {
	font-size:10px;
	line-height:150%;
}
.cstmreba .booklink-powered-date a,
.cstmreba .kaerebalink-powered-date a,
.cstmreba .tomarebalink-powered-date a {
	color:#333;
	border-bottom: none ;
}
.cstmreba .booklink-powered-date a:hover,
.cstmreba .kaerebalink-powered-date a:hover,
.cstmreba .tomarebalink-powered-date a:hover {
	color:#333;
	border-bottom: 1px solid #333 ;
}
/* 著者・住所 */
.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address {
	font-size:12px;
}
.cstmreba .kaerebalink-link1 div img,.cstmreba .booklink-link2 div img,.cstmreba .tomarebalink-link1 div img {
	display:none !important;
}
.cstmreba .kaerebalink-link1, .cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 {
	display: inline-block;
	width: 100%;
	margin-top: 5px;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
	float:left;
	width:24%;
	min-width:128px;
	margin:0.5%;
}
/***** ボタンデザインここから ******/
.cstmreba .booklink-link2 a,
.cstmreba .kaerebalink-link1 a,
.cstmreba .tomarebalink-link1 a {
	width: 100%;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
	margin: 1px 0;
	padding:3% 0.5%;
	border-radius: 8px;
	font-size: 13px;
	font-weight: bold;
	line-height: 180%;
	color: #fff;
	box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26);
}
/* トマレバ */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a {background: #76ae25; border: 2px solid #76ae25; }/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkjalan a { background: #ff7a15; border: 2px solid #ff7a15;}/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjtb a { background: #c81528; border: 2px solid #c81528;}/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkknt a { background: #0b499d; border: 2px solid #0b499d;}/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkikyu a { background: #bf9500; border: 2px solid #bf9500;}/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a { background: #000066; border: 2px solid #000066;}/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a { background: #ff0033; border: 2px solid #ff0033;}/* Yahoo!トラベル */
.cstmreba .tomarebalink-link1 .shoplinkhis a { background: #004bb0; border: 2px solid #004bb0;}/*** HIS ***/
/* カエレバ */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a {background:#ff0033; border:2px solid #ff0033; letter-spacing:normal;} /* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { background:#84be24 ; border: 2px solid #84be24;}	/* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkcecile a { background:#8d124b; border: 2px solid #8d124b;} /* セシール */
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a {background:#314995; border: 2px solid #314995;} /* 価格コム */
/* ヨメレバ */
.cstmreba .booklink-link2 .shoplinkkindle a { background:#007dcd; border: 2px solid #007dcd;} /* Kindle */
.cstmreba .booklink-link2 .shoplinkrakukobo a { background:#bf0000; border: 2px solid #bf0000;} /* 楽天kobo */
.cstmreba .booklink-link2  .shoplinkbk1 a { background:#0085cd; border: 2px solid #0085cd;} /* honto */
.cstmreba .booklink-link2 .shoplinkehon a { background:#2a2c6d; border: 2px solid #2a2c6d;} /* ehon */
.cstmreba .booklink-link2 .shoplinkkino a { background:#003e92; border: 2px solid #003e92;} /* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinktoshokan a { background:#333333; border: 2px solid #333333;} /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.cstmreba .kaerebalink-link1 .shoplinkamazon a,
.cstmreba .booklink-link2 .shoplinkamazon a {
	background:#FF9901;
	border: 2px solid #ff9901;
} /* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a,
.cstmreba .booklink-link2 .shoplinkrakuten a {
	background: #bf0000;
	border: 2px solid #bf0000;
} /* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkseven a,
.cstmreba .booklink-link2 .shoplinkseven a {
	background:#225496;
	border: 2px solid #225496;
} /* 7net */
/****** ボタンカラー ここまで *****/
 
/***** ボタンデザイン　マウスオーバー時ここから *****/
.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover {
	background: #fff;
}
/* トマレバ */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a:hover { color: #76ae25; }/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkjalan a:hover { color: #ff7a15; }/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjtb a:hover { color: #c81528; }/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkknt a:hover { color: #0b499d; }/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkikyu a:hover { color: #bf9500; }/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a:hover { color: #000066; }/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a:hover { color: #ff0033; }/* Yahoo!トラベル */
.cstmreba .tomarebalink-link1 .shoplinkhis a:hover { color: #004bb0; }/*** HIS ***/
/* カエレバ */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a:hover {color:#ff0033;} /* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a:hover { color:#84be24 ; }	/* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkcecile a:hover { color:#8d124b; } /* セシール */
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a:hover {color:#314995;} /* 価格コム */
/* ヨメレバ */
.cstmreba .booklink-link2 .shoplinkkindle a:hover { color:#007dcd;} /* Kindle */
.cstmreba .booklink-link2 .shoplinkrakukobo a:hover { color:#bf0000; } /* 楽天kobo */
.cstmreba .booklink-link2 .shoplinkbk1 a:hover { color:#0085cd; } /* honto */
.cstmreba .booklink-link2 .shoplinkehon a:hover { color:#2a2c6d; } /* ehon */
.cstmreba .booklink-link2 .shoplinkkino a:hover { color:#003e92; } /* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinktoshokan a:hover { color:#333333; } /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.cstmreba .kaerebalink-link1 .shoplinkamazon a:hover,
.cstmreba .booklink-link2 .shoplinkamazon a:hover {
	color:#FF9901; } /* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a:hover,
.cstmreba .booklink-link2 .shoplinkrakuten a:hover {
	color: #bf0000; } /* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkseven a:hover,
.cstmreba .booklink-link2 .shoplinkseven a:hover {
	color:#225496;} /* 7net */
/***** ボタンデザイン　マウスオーバー時ここまで *****/
.cstmreba .booklink-footer {
	clear:both;
}
 
/*****  解像度768px以下のスタイル *****/
@media screen and (max-width:768px){
	.cstmreba .booklink-image,
	.cstmreba .kaerebalink-image,
	.cstmreba .tomarebalink-image {
		width:100%;
		float:none;
	}
	.cstmreba .booklink-link2>div,
	.cstmreba .kaerebalink-link1>div,
	.cstmreba .tomarebalink-link1>div {
		width: 32.33%;
		margin: 0.5%;
	}
	.cstmreba .booklink-info,
	.cstmreba .kaerebalink-info,
	.cstmreba .tomarebalink-info {
	  text-align:center;
	  padding-bottom: 1px;
	}
}
 
/*****  解像度480px以下のスタイル *****/
@media screen and (max-width:480px){
	.cstmreba .booklink-link2>div,
	.cstmreba .kaerebalink-link1>div,
	.cstmreba .tomarebalink-link1>div {
		width: 49%;
		margin: 0.5%;
	}
}

 

コメントフォームをカスタマイズ

また、僕はコメントフォームをカスタマイズしています。

デフォルトのコメントフォームでは記入項目が

  • 名前
  • メールアドレス
  • URL
  • コメント内容

となっていて記入項目が多く、コメントするハードルがちょっと高い。

そのため、僕は記入項目を減らして

  1. 名前
  2. コメント内容

に絞って、コメントしやすい雰囲気を作り出すようにしています。

ということで、ぼくはfunctions.phpに次のような記述を追加しています。

// 子テーマのstyle.cssを後から読み込む
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('style')
    );
}
 
 
//コメントからEmailとウェブサイトを削除
function my_comment_form_remove($arg) {
$arg['email'] = '';
$arg['url'] = '';
return $arg;
 }
 add_filter('comment_form_default_fields', 'my_comment_form_remove');

詳しくはこちらの「WordPressのコメントフォームのカスタマイズ方法」を読んでみてくださいね。

FREE SWORDER
 
【WordPress使い方】コメント欄のフォームを思うがままにカスタマイズする方法
https://freesworder.net/wordpress-comment-form
WordPressサイトのコメント欄のフォームをカスタマイズしたい！どうも、Linです。雲を睨んでみました。 WordPressサイトを運営していると、時々、コメント欄をカスタマイズしたくなる瞬間があるかと思います。ぼく自身、いくつかのWordPressのサイトを運営しているのですが、最近開設したサイトのコメント欄が妙にダサい。  見る限り、次の4つの問題点が浮かび上がってきたのです。 英語になっているところがある フォームが多すぎ 文言がうざい ラベルがシンプルすぎる  今日はせっかくなので、これらす...

 

著者情報を記事真下に移動する

あとストークで残念なのが、

著者情報が記事コンテンツから離れて掲載されている点です。

著者情報を確認する前に離脱してしまう恐れもあります。

 

そこで、ぼくは記事コンテンツの直後に著者情報を表示させるようにしていますね。

single.phpの、

<?php get_template_part( 'parts_singlefoot' ); ?>

を

<?php if ( !get_option( 'sns_options_hide' ) ) : ?>
<div class="sharewrap wow animated fadeIn" data-wow-delay="0.5s">
<?php if ( get_option( 'sns_options_text' ) ) : ?>
<h3><?php echo get_option( 'sns_options_text' ); ?></h3>
<?php endif; ?>
<?php get_template_part( 'parts_sns' ); ?>
</div>
<?php endif; ?>

の直後に記載してやるといいですよ。

そして、あとはparts-singlefoot.phpの編集。authorboxというクラスのdiv要素を冒頭に持っていきます。

 

前後の記事のリンク廃止

ぼくは個人的に、ブログ記事の更新の順番なんてどうでもいいと思っているので、

前後に投稿された記事へのリンクを廃止しています。

さっきでてきたparts-singlefoot.phpを編集していきます。

<div class="np-post">
<div class="navigation">
<div class="prev np-post-list">
<?php $nextpost = get_adjacent_post(false, '', false); if ($nextpost) : ?>
<a href="<?php echo get_permalink($nextpost->ID); ?>" class="cf">
<figure class="eyecatch"><?php echo get_the_post_thumbnail($nextpost->ID,'thumbnail'); ?></figure>
<span class="ttl"><?php echo esc_attr($nextpost->post_title); ?></span>
</a>
<?php else:?>
<div class="home_link">
<a href="<?php echo esc_url(home_url()); ?>"><figure class="eyecatch"><i class="fa fa-home"></i></figure><span class="ttl">トップページへ</span></a>
</div>
<?php endif; ?>
</div>

<div class="next np-post-list">
<?php $prevpost = get_adjacent_post(false, '', true); if ($prevpost) : ?>
<a href="<?php echo get_permalink($prevpost->ID); ?>" class="cf">
<span class="ttl"><?php echo esc_attr($prevpost->post_title); ?></span>
<figure class="eyecatch"><?php echo get_the_post_thumbnail($prevpost->ID,'thumbnail'); ?></figure>
</a>
<?php else:?>
<div class="home_link">
<a href="<?php echo esc_url(home_url()); ?>"><span class="ttl">トップページへ</span><figure class="eyecatch"><i class="fa fa-home"></i></figure></a>
</div>
<?php endif; ?>
</div>
</div>
</div>

という記述をごっそり削除というかコメントアウトして完了です。

 

補足情報のデザイン

後は補足情報のデザインですね。

詳しくは「CSSで補足情報を入れる方法」を参考にしていただきたいのですが、このデザインを加えておくと、

記事中に普通の段落とは異なるデザインを持つ要素

を加えられます。

FREE SWORDER
 
【WordPress/CSS】FontAwesomeを使って補足情報を挿入する方法
https://freesworder.net/wordpress-additional-info
WordPressのブログで補足情報を挿入したい！どうも、Linです。サクサク、カリカリです。 WordPressのいけているブログをみていると、次のような表現を目にすることが増えてきました。インフォメーション こ、これはなんだろう・・・・むちゃくちゃいいじゃないか・・・・俺も導入したいよ・・・・ っていうことで、インターネットで調べてみたところ、こちらの神記事に遭遇。この記事に載っている方法を利用すれば、CSSを編集してdiv要素を記事内にぶち込むだけで補足情報を挿入できるみたいだったのです。早速、その方...

これにより、視覚的にわかりやすい記事を作れます。

具体的に言うと僕は

  1. 補足情報（infoマーク）
  2. 背景がグレー

という2つの CSS 情報を加えますね。

.information{
  background-color: #F4F3EB;
  padding: 20px 20px 20px 72px;
  border-radius: 4px;
  position: relative;
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
}
 
.information::before

{
  font-family: "FontAwesome";
  font-size: 50px;
  position: absolute;
  top: 30px;
  left: 13px;
  color: #EAE3B4;
}
 
.information::before{
  content: '\f05a';
}

.gray{
padding: 16px;  background-color: #f7f7f7; margin-top: 30px; margin-bottom: 30px;
 
}

 

 

ストークをカスタマイズするときは子テーマを使おう

以上がWordPressテーマ「ストーク」のカスタマイズ方法でした。

WordPress のテーマをカスタマイズする時は、

子テーマを編集するといいですよ。

 

さもなくばテーマをアップデートした時に、カスタマイズ情報が消えてしまう悲劇が起こってしまいますからね。

WordPressの子テーマの作り方はこの記事を読んでみてくださいね。

FREE SWORDER
 
初心者でも3分でわかる！WordPressの子テーマの作り方
https://freesworder.net/wordpress-child-theme
WordPress 子テーマの作り方をいい加減に学ぼうと思ったどうも、Linです。熱帯魚、泳がせてます。 WordPress のテーマを更新したら編集箇所が消えてしまった！！FuuuuuuuK!!!という経験はありませんか？？ ぼくにはあります笑先日、 WordPress の某サイトで503エラーが発生してしまい、やけくそでテーマを更新したら編集箇所が一気に消えてしまったのです。これまでめんどくさくて子テーマを作るのを拒否していたので、100%自己責任。。 そういった事件もありまして、「今後は WordPress のテーマを更新しても編集箇所...

 

「えっ、子テーマとか作るのめんどくさい・・・！」

という方もご安心ください。

この記事で紹介したストークのカスタマイズを反映させた子テーマをこちらのリンクからダウンロードできるようにしておきました。

「ストークのカスタマイズ方法がわからない」

という方は使ってみてくださいね。

 

それでは！

Lin

おすすめ記事よかったらもう1記事どうぞ




音生入力で楽にブログを書く技が満載！
ブログ音声入力術

音声入力の使い方から文章を書くコツまで完全網羅。ブログを書きたいすべての人向けの電子書籍

チェックする