テーマをSimplicityに変更-最初に見た目をカスタマイズしてみた

【この記事を読むのに必要な時間は約 7 分です。】

長らく使っていた海外製無料のワードプレスのテーマ「SuperNova」から今話題の国産で無料のSEO対策最適化済のWordpressテーマ「Simplicity2」(Ver2.3.0g安定版)に変更した。
4年以上使ってきた「SuperNova」も良いテーマなのだが、海外フリーテーマなのでサポートの問題もあり思い切って変更した。

「Simplicity2」は、多機能でカスタマイズも簡単。
デフォルトで用意されているカスタマイズ項目も豊富で、それだけでも十分に自分の好みに変更可能だ。
とはいえ、「シンプル」さを売りにしているだけに、なんでもかんでも自分の思い通りというわけにはいかない。

見た目のカスタマイズ-CSSの変更

「Simplicity2」は「子テーマ」に加え、豊富なスキンも用意されている。
最初は、スキンで見た目のカスタマイズを行ってみるのも良いかも知れない。

今回、私は、スキンは利用せずに、デフォルトをベースにCSSを変更することでカスタマイズを行った。
なお、「Simplicity2」は、子テーマ「Simplicity-child」が用意されているので、変更は全て子テーマで行っている。

ダウンロード

Simplicityのダウンロード

無料WordpressテーマSimplicity2のダウンロードはこちらです。テーマのアップデート方法は、以下を参照してください。Simplicity2のダウンロードWordPress4.1以上、PHP5.4以上での利用をおすすめします。S

Simplicity-childのダウンロード

テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。 というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。 それ

カスタマイズ内容

本文とサイドバーの枠線を消す

シンプル感を出すために、本文とサイドバーの枠線を消した。

/* mainとsidebarの枠線を消す */
#main,#sidebar{
 border:none !important;
}

見出しの変更

見出しをこのサイトで利用しているものに変更。

.article h2 {
	position: relative;
	padding: 1em 0;
	border-left: none;
}
.article h2::before,
.article h2::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 6px;
	box-sizing: border-box;
}
.article h2::before {
	top: 0;
	border-top: 2px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.article h2::after {
	bottom: 0;
	border-top: 1px solid #ccc;
	border-bottom: 2px solid #ccc;
}

.article h3 {
	position: relative;
	padding: 0 .5em .5em 2em;
	border-bottom: 1px solid #ccc;
}
.article h3::before,
.article h3::after {
	position: absolute;
	content: '';
	border-radius: 100%
}
.article h3::before {
	top: .2em;
	left: .2em;
	z-index: 2;
	width: 18px;
	height: 18px;
	background: rgba(150, 150, 150, .5);
}
.article h3::after {
	top: .7em;
	left: .7em;
	width: 13px;
	height: 13px;
	background: rgba(210, 210, 210, .5);
}

.article h4 {
	position: relative;
	padding: 0 .5em 0 1.7em;
        border-bottom: none;
}
.article h4::after {
	position: absolute;
	top: .4em;
	left: .4em;
	z-index: 2;
	content: '';
	width: 12px;
	height: 12px;
	background-color: #ccc;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

他にも参考になりそうな見出しは以下のとおり。

/* 見出しを変更 */
.article h2 {
 border-top: 2px solid #87BD33;
 border-bottom: 2px solid #87BD33;
 border-left: 0;
 padding:15px 15px 10px 15px;
 font-size:130%;
 font-weight:bold;
}

.article h3 {
 border-bottom: 2px solid #87BD33;
 font-size:120%;
 font-weight:bold;
}

.article h4 {
 border-left: 6px solid #87BD33;
 border-bottom: 0;
 padding-left: 15px;
 font-size:110%;
 font-weight:bold;
}

SNSフォローボタンに色をつける

これはSimplicityに予め用意されているカスタマイズ項目で設定できるのだが、flickrだけデフォルトで用意されている色と違う色へ変更したかった。

/* SimplicityのSNSフォローボタンに色をつける-flickrだけ指定の色を変更したかったため */
ul.snsp li.flickr-page a span {
color:#0063dc !important;
}

続きを読むのカスタマイズ

こちらのサイトを参考にした。

「Simplicity」を使っている理由の記事でも書きましたが、「Simplicity」は管理画面から変更できる項目が多くWordPress初心者でも簡単にブログを始めることができます。けど管理画面で出来ることだけだと、どうしてもデフォルト
/*続きを読むのカスタマイズ*/
.entry-read a{
 color:#fff;
 font-size:14px;
 background-color:#FF837B;
 border:1px solid #FF837B;
 border-radius:2px;
 padding:3px 10px 3px 5px;
 text-decoration:none;
 }
 
.entry-read a:hover{
 color:#fff;
 background-color:#FFC3BF;
 border:1px solid #FFC3BF;
}

/*続きを読むを右寄せ*/
.entry-read {
  text-align: right;
  margin-right: 10px; /* ここはお好みで */
}

リンクの装飾を変更

リンクに最初から下線が付いているスタイルは嫌いなので、変更。

/*リンクの下線を消す*/
a {
text-decoration: none;
}

/*リンクhover時に下線*/
a:hover {
text-decoration: underline;
}

記事の所要時間のスタイルを変更

「Insert Estimated Reading Time」というプラグインを導入し、各記事の最初の部分に所要時間を表示しているが、その装飾を変更。

/*記事の所要時間のスタイル変更*/
p.estimated-reading-time {
color: #2098a8;
padding: 0 5px;
text-align: right;
}

/*目次のスタイル変更-imgと重なるので*/
#toc_container {
margin-top: 1em;
}

拡張CSSスタイルを追加

simplicityには予めいくつか拡張CSSスタイルが用意されている。赤字がデフォルトなので、より購読者が見やすい色である「緑色」を追加した。

/************************************
** 拡張CSSのスタイルに追加
************************************/
/*緑色*/
.green{
  color:#008080;
}

/*太字で緑色*/
.bold-green{
  font-weight:bold;
  color:#008080;
}

/*マーカーの黄色のような色*/
.marker-green{
  background-color:#98fb98;
}

Simplicityに用意されている拡張CSSスタイル

こちらのサイトで拡張CSSスタイルは詳細に解説されているので参考にして欲しい。

こんにちは。ノッツです(^o^)/ ブログを書くとき文章に強弱を付けるために、文字の色や太さなどの装飾を意識す…

以上