ネタワンで利用しているWordPressテーマ「BlogPress(TCD010)」をカスタマイズする際のヒントを紹介します。合わせて、プラグインとブログパーツも紹介します。

もし、BlogPress(TCD010)をカスタマイズしたい場合に参考にして下さい。

追記

この記事はネタワンで「BlogPress(TCD010)」を利用していた時に書いた古い記事です。
記事に書いた情報が古くなっている可能性があります。

はじめに

前書き

念の為に説明しておきますが、BlogPress(TCD010)は、カスタマイズしなくても利用できます。カスタマイズを推奨している訳ではありません。このテーマの初期状態では黒を基調としたデザインなのでやや地味です。配色などを少しだけカスタマイズすると、個性が出るので良いかもしれません。

ここで紹介しているCSSの変更は、ブログを運営している過程で、サイトの内容に合わせてCSSを微調整した内容です。最初から一気に変更した訳ではありません。また、必ずしもあなたのブログにピッタリ合うとは限りません。参考情報程度にお考え下さい。

WordPressテーマの作り方の知識が必要

この記事はHTML・CSS・WordPressテーマの作り方の基礎を理解していることを前提にしています。WordPressテーマの作り方を理解していないと、テーマを破壊してしまう恐れがあります。テーマの編集は自己責任で行い下さい。

もし、WordPressテーマの作り方をまだ理解していない場合は、WordPressの入門書を購入して勉強することをお勧めします。

バックアップを必ずお取り下さい!

WPテーマを変更する場合や、新しいWPプラグインをインストールする場合は、必ず事前にデータベースやサイト全体のバックアップをとって下さい。WPテーマを変更し、PHPのエラーが発生し、元に戻せなくなる可能性があります。また、利用しているサーバー環境によっては、新しいWPプラグインがエラーになる場合がありますのでご注意下さい。

デザインのカスタマイズのヒント

はじめに説明しておきますが、BlogPress(TCD010)は、シンプルで洗練されたデザインなので、デザインの大幅な変更はするべきではありません。カスタマイズすると言っても、BlogPress(TCD010)の良い点にあなたのオリジナル性を少し加える感覚です。

デザインを調整するとすれば、「記事の大見出し・小見出し」「サイドバーの配色」などです。個人的には、それ以外の部分は変更しない方が良い気がします。

注意事項

  1. 現在のBlogPress(TCD010)には、スマートフォンに表示内容を最適化できるレスポンシブWebデザイン機能が搭載されています。この記事ではPC向けカスタマイズの内容を説明しています。PC向けは「style.css、style_pc.css」の2つのファイルを修正する必要があります。
  2. デザインや配色をカスタマイズすることを推奨している訳ではありません。カスタマイズしたい方のみ変更して下さい。
  3. 固定ページも利用する場合は、固定ページのCSSやテーマも変更して下さい。
  4. 下記のCSSでは、配色を水色(#42BFED)にしています。使用する際は、色を変更して利用して下さい。
  5. 文字サイズ、行間、マージン、パディングなどは、別途調整して下さい。

デザイン変更前と変更後の比較

デザイン変更前

BlogPress(TCD010)は、初期状態では、黒を基調としたシンプルなデザインです。もちろん、このまま利用しても問題ありません。

BlogPress(TCD010)


デザイン変更後(※ネタワンの色違い)

メインカラーを水色(#42BFED)に変更し、大見出し・小見出し・サイドバーの配色を変更した例です。

メインカラー:#42BFED
サブカラー:#E41858

TCD010 カスタマイズ例

記事の大見出し

記事の大見出しは、標準では非常にシンプルになっています。必要に応じて少し装飾すると良いかもしれません。

「#single_post .title」と「.post_list .title」は、CSSの中身が同じですので、同様に変更して下さい。

修正が必要なファイル

style_pc.css

変更が必要なCSSクラス

#single_post .title
.post_list .title

#single_post .title {
 line-height:150%;
 margin:0;
 padding:15px 0;
 font-size:24px;
}
#single_post .title {
 line-height: 150%;
 margin: 10px 0px 0px 0px;
 padding: 15px;
 font-size: 24px;
 color: #42BFED;
 border-bottom: 1px solid #ccc;
 border-top: 4px solid #42BFED;
}

備考

「.post_list .title」もCSSの中身が同じですので、同様に変更して下さい。

メタデータ

あくまでも個人の感想ですが、記事の大見出しの下にあるメタデータの表示エリアは、それ程重要ではないのに目立ち過ぎる気がしたので、ネタワンでは、色を反転し、表示位置を記事の下に移動させました。タグやカテゴリを沢山設定しない場合は、そのままの表示位置でも良いと思います。

標準のデザインでは、記事の大見出しよりメタデータが目立ってしまうので、デザイン的にバランスが悪い気がします。(個人の感想)

ちなみに、記事の画面のデザインを調整すると、トップページ・アーカイブ・固定ページのテンプレートも合わせて調整する必要があります。

「#single_post .meta」と「.post_list .meta」は、CSSの中身が同じですので、同様に変更して下さい。

修正が必要なファイル

style_pc.css

変更が必要なCSSクラス

#single_post .meta
.post_list .meta

#single_post .meta {
 font-size:11px;
 background:#333;
 color:#eee;
 padding:10px 15px;
 margin:0 0 25px 0;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 box-shadow:0px 0px 3px 0px #aaa;
}
#single_post .meta a { color:#eee; }
#single_post .meta {
 font-size:11px;
 color:#000;
 padding:10px 0px;
 margin:0px;
}
#single_post .meta a {}

備考

「.post_list .meta」もCSSの中身が同じですので、同様に変更して下さい。

関連記事とコメントの見出し

関連記事とコメントの小見出しは、標準では黒の配色になっていますが、必要に応じて色を変更すると良いかも。

修正が必要なファイル

style_pc.css

変更が必要なCSSクラス

.headline_base2

.headline_base2 {
 font-size:16px;
 background:#333;
 color:#eee;
 padding:0 15px;
 height:40px;
 line-height:40px;
 margin:0 0 25px 0;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 box-shadow:0px 0px 3px 0px #aaa;
}
.headline_base2 {
 font-size:16px;
 background:#42BFED;
 color:#eee;
 padding:0 15px;
 height:40px;
 line-height:40px;
 margin:0 0 25px 0;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 box-shadow:0px 0px 3px 0px #aaa;
}

記事内の小見出し

BlogPress(TCD010)には、標準で2種類の小見出しが用意されています。そのまま利用しても良いですが、少し調整すると見た目が更に良くなります。必要に応じてカスタマイズすると良いかも。

修正が必要なファイル

style_pc.css

変更が必要なCSSクラス

.headline1
.headline2

.headline1 {
 font-size:16px;
 border-left:7px solid #E41858;
 border-bottom:1px dotted #444;
 line-height:32px;
 padding-left:12px;
 margin:60px 0 10px;
}
.headline2 {
 font-size:15px;
 border-left:5px solid #F2195D;
 line-height:28px;
 padding-left:10px;
 margin:40px 0 20px;
}
.headline1 {
 font-size:16px;
 border-left:1px solid #ccc;
 border-top:1px solid #ccc;
 border-right:1px solid #ccc;
 border-bottom:4px solid #42BFED;
 line-height:2.5em;
 font-weight:bold;
 padding-left:12px;
 margin:60px 0 10px;
 background: -webkit-gradient(linear, left top, left bottom,color-stop(0, #ffffff), color-stop(1, #faf8ee));
}
.headline2 {
 font-size:16px;
 border-left:7px solid #42BFED;
 line-height:28px;
 padding-left:10px;
 margin:40px 0 20px;
}

サイドバー

サイドバーの色を変更すると、サイトの印象が大きく変わります。必要に応じてカスタマイズすると良いかも。

修正が必要なファイル

style_pc.css

変更が必要なCSSクラス

.side_headline
.side_headline span

CSSの役割

「.side_headline」黒の背景色を表示する。
「.side_headline span」テーマオプションで指定した「サイトのメインカラー」を表示する。

.side_headline {
 font-size:12px;
 background:#333;
 color:#eee;
 padding:0 15px 0 0;
 margin:0 0 15px 0;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 box-shadow:0px 0px 3px 0px #aaa;
 line-height:38px;
 height:38px;
}
.side_headline span { padding:2px 2px 3px 17px; }
.side_headline { 
 font-size:14px;
 background:#42BFED;
 color:#fff;
 padding:0 15px 0 0;
 margin:0 0 15px 0;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 box-shadow:0px 0px 3px 0px #aaa;
 line-height:38px;
 height:38px;
}
.side_headline span { 
 padding:2px 2px 3px 17px;
 border-bottom:2px solid #fff;
}

上記CSSの変更に加え、もう一箇所変更を加える部分があります。サイドバーの文字の下の色が付く部分は、ヘッダー(header.php)で動的にCSSを上書きしています。下記の部分を削除すれば、管理画面で指定した色の連動を外すことができます。そして、CSSで任意の色を指定します。

.side_headline span { border-bottom:2px solid #<?php echo $options['pickedcolor']; ?>; }

サイトのメインカラーの決め方

サイトのメインカラーは、Webサイトの訪問者にサイトを印象づける際に非常に重要です。デザインをカスタマイズする際は、まずはサイトのメインカラーを決めましょう。

BlogPress(TCD010)の場合は、既に黒色が使用されていますので、黒色と合うもう一色を選びましょう。

サイトのメインカラーを決める際は、下記のサイトを参考にして決めると良いです。色が人間に与える効果について詳しくまとめられています。

参考

色カラー

ソーシャルメディアの共有ボタン

BlogPress(TCD010)のソーシャルメディアの共有ボタンは、標準では「Facebook、Twitter、はてなブックマーク」の3つしかありません。もっと沢山のソーシャルメディアの共有ボタンを利用したい場合は、プラグインの「WP Social Bookmarking Light」を利用すると便利です。プラグインの使い方は、下記の解説ページをご覧下さい。

変更するテンプレートのファイル名

single.php
page.php

<?php include('bookmark.php'); ?>

※ 上記のPHPをコメントアウト又は削除して非表示にします。

プラグインの解説

WP Social Bookmarking Light – ソーシャルメディアの共有ボタンを一元管理できるWordPressプラグイン

ブログのコメント欄の変更

「Eメール、URL」の非表示

WordPressの初期設定では、記事のコメント欄に「名前、Eメール、URL、コメント」の入力欄がありますが、「名前、コメント」以外はあまり入力されないので、非表示にしておくと良いかも。変更する際は、管理画面でメールアドレスの入力チェックをOFFにしておきます。

WordPress管理画面 > 設定 > ディスカッション
「名前とメールアドレスの入力を必須にする」のチェックを外す。

上記の設定をした上で、CSSに下記内容を追加すると「Eメール、URL」の入力欄がCSSで非表示になります。

#guest_info #guest_email{ display:none; }
#guest_info #guest_url{ display:none; }

「名前」の初期入力値

さらに、コメント欄の「名前」を初期状態から表示させ、クリックしたら自由に名前が書けるようにしたい場合は、名前の入力フォームを下記のように変えましょう。

変更するテンプレートのファイル名
comments.php

value="<?php echo $comment_author; ?>"
value="<?php if (esc_attr($comment_author) == ''){echo '名無しさん';}else{echo esc_attr($comment_author);} ?>" onfocus="if (this.value == '名無しさん') this.value = '';" onblur="if (this.value == '') this.value = '名無しさん';"

記事内の見え方の調整

記事の画像のマウスオーバー効果

リンクがある画像の上をマウスオーバーすると、少し色が薄くなる処理は、下記のCSSでやっています。ちなみにこれは利用しなくても全然問題ありません。

a img{background:none!important}
a:hover img{
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	background:none!important;
}

行間の調整

TCDシリーズのテーマは、CSSの行間(line-height)の初期設定が240%に設定されています。行間が少し縦に長いので、必要に応じて微調整しましょう。

ちなみに、ネタワンでの行間は「180%」に設定しています。

p { margin:0 0 1em 0; padding:0; line-height:240%; }
p { margin:0 0 1em 0; padding:0; line-height:180%; }

グローバールメニューの調整

BlogPressのグローバルメニューは、ページを読み込み終えた後に、メニューの横幅をJavaScriptで自動的に調整する仕様になっています。

問題点としては、グローバルメニューにメニュー項目を沢山登録すると、ページを読み込んだ瞬間、2階層メニューも表示されるので、一瞬だけ表示が崩れたように見えます。一瞬だけ表示されるので、気にする程でもないのですが、メニューを沢山登録すると、どうしても目立ってしまいます。

ページを読み込んだ初期状態は、グローバルメニューの2階層メニューは、表示される必要性はありません。非表示の方が好ましいと思われます。その問題の詳細と修正方法を下記の記事にまとめました。

参考記事

BlogPress(TCD010)のグローバルメニューの2階層が一瞬表示が崩れる問題の解決方法

CSSの使い方

記事内に見出しを追加する方法

TCDのテーマに標準搭載されている小見出し用のCSSを使用するには、記事をテキストモード(HTMLモード)で記述し、CSSをclassで指定します。下記はCSSの使用例です。

.headline1
.headline2
<h3 class="headline1">見出し1</h3>
<p>記事の本文</p>

<h3 class="headline2">見出し2</h3>
<p>記事の本文</p>

ちなみに、ネタワンでは小見出しは色を変更したり、破線を消したりしてカスタマイズして使用しています。

リンクボタン表示

記事内のリンクをボタン形状で表示する方法を紹介します。TCDのテーマに標準搭載されているCSSを利用します。classで用意されているCSSを指定します。

.button
.button2
<a href="https://netaone.com" target="_blank" class="button">青ボタン</a>
<a href="https://netaone.com" target="_blank" class="button2">緑ボタン</a>

ネタワンで利用しているプラグインの紹介

設定

ネタワンで利用しているプラグインの中で、特に役に立つプラグインを紹介します。

プラグインは、他にも色々インストールして利用していますが、特に下記のプラグインが便利なのでお勧めです。

All in One SEO Pack

※ 追記:以前利用していましたが、現在は別のプラグインを利用しています。

All in One SEO Packは、SEO対策の設定を総合的に管理できるプラグインです。

プラグインの解説

All in One SEO Pack – SEO対策の設定を総合的に管理できるWordPressプラグイン

Head Cleaner

※ 追記:以前利用していましたが、現在は別のプラグインを利用しています。

Head Cleanerは、HTMLのHEAD要素のタグを自動的に整理・除去し、ソースを整えてくれるプラグインです。

プラグインの解説

Head Cleaner – HTMLのHEAD要素のタグを自動的に整えてくれるWordPressプラグイン

Google Sitemap Generator

※ 追記:以前利用していましたが、現在は別のプラグインを利用しています。

Google Sitemap Generatorは、GoogleとBingの検索エンジンに対し、XMLサイトマップを自動送信するプラグインです。

プラグインの解説

Google Sitemap Generator – 検索エンジンにXMLサイトマップを自動送信するWordPressプラグイン

PS Auto Sitemap

※ 追記:以前利用していましたが、現在は別のプラグインを利用しています。

PS Auto Sitemapは、Webサイトのサイトマップ(記事の一覧)を自動生成するプラグインです。

プラグインの解説

PS Auto Sitemap – サイトマップを自動生成するWordPressプラグイン

Breadcrumb NavXT

※ 追記:以前利用していましたが、現在は別のプラグインを利用しています。

Breadcrumb NavXTは、WordPressの投稿と固定ページに「パンくずリスト」を表示できるプラグインです。BlogPress(TCD010)は、パンくずリストの機能が搭載されていますが、投稿でしか利用できません。固定ページをよく利用する場合は、このプラグインを利用すると非常に役立ちます。

プラグインの解説

Breadcrumb NavXT – WordPressにパンくずリストを表示するプラグイン

SyntaxHighlighter Evolved

SyntaxHighlighter Evolvedは、記事にソースコードを表示したい場合に役立つプラグインです。この記事のCSSやPHPのソースコードの説明でも使用しています。

プラグインの解説

SyntaxHighlighter Evolved – 記事にソースコードを表示するWordPressプラグイン

AddQuicktag

AddQuicktagは、エディタに頻繁に使用するHTMLタグの雛形を登録しておき、必要に応じて呼び出して使うプラグインです。このプラグインを利用すると、何度も同じHTMLタグを入力するのが簡略化でき、記事を書くのが捗ります。

プラグインの解説

AddQuicktag – エディタにHTML雛形を登録し、記事を書く作業を効率化するWordPressプラグイン

WP Social Bookmarking Light

WP Social Bookmarking Lightは、ソーシャルメディアの共有ボタンを一元管理できるプラグインです。投稿や固定ページに共有ボタンを追加できます。

プラグインの解説

WP Social Bookmarking Light – ソーシャルメディアの共有ボタンを一元管理できるWordPressプラグイン

BackWPup

BackWPupは、Webサイトを丸ごとバックアップできるプラグインです。データベースの最適化機能もあります。バックアップ先は、FTPサーバーやDropBoxなどの様々なオンラインストレージサービスに対応しています。Webサイトを運営していると、予期しない問題が発生し、Webサイトを復元しなければならない事態が発生することがあります。このプラグインを利用し、もしもの事態に備えて、Webサイトをバックアップしておきましょう。

プラグインの解説

BackWPup – WordPressのブログをまるごとバックアップ出来るプラグインの設定方法

Newpost Catch

※ 追記:以前利用していましたが、現在は別のプラグインを利用しています。

Newpost Catchは、サムネイル画像付きの最近の投稿(新着記事)を表示するプラグインです。BlogPress(TCD010)には、サムネイル画像付きの最近の投稿(新着記事)を表示する機能が無いので、このプラグインでその機能を補完すると便利です。

尚、BlogPress(TCD010)は、最近の投稿に矢印と余白が入るので、下記のCSSコードを利用してCSSを調整しましょう。

ul#npcatch li { 
	padding: 0px;
	backgroud: none;
}
プラグインの解説

Newpost Catch – サムネイル画像付きの「最近の投稿」を表示するWordPressプラグイン

ネタワンで使用しているブログパーツ

ネタワンで使用しているブログパーツを紹介します。ソーシャルメディアのブログパーツは、ソーシャルメディアからのアクセスを集めるのに役立ちます。

Twitter

ツイッター

サイドバーに表示しているツイッターのタイムラインを表示するブログパーツは、ただ単にタイムラインを表示してもイマイチなので、ネタワンでは、検索クエリを「netaone.com」で指定しています。自分のサイトのドメインを指定することで、自分のサイトの記事をツイートした人のツイートを表示することができます。そうすることで、賑わっている感をサイト訪問者に印象付けることができます。

ブログパーツの設定

Twitterの設定画面

はてなブックマーク

サイドバーに表示している「はてなブックマーク」のブログパーツは、人気エントリーを10件表示しています。

hatena

ブログパーツの設定

はてなブックマークの設定画面

zenback

zenback

記事の下に設置して利用しているzenbackは、TwitterやFacebook等のソーシャルメディアでの投稿を表示でき、ソーシャルメディアでの記事の拡散状況を把握できます。非常に便利なブログパーツなので活用しましょう。

ブログパーツの紹介記事

zenback – あなたが書いた記事のソーシャルメディアでの反応が見れるブログパーツ

まとめ

BlogPress(TCD010)は、カスタマイズをしなくても利用できます。カスタマイズを推奨している訳ではありませが、初期状態では、黒を基調としたデザインなので、やや地味です。ほんの少しだけカスタマイズすると、個性が出るので良いと思われます。必要に応じてデザインや配色などを変更し、少しだけあなたの個性を出してみましょう。

念の為説明しておきますが、大幅なデザイン変更は行わない方が良いです。BlogPress(TCD010)は、シンプルで洗練されたデザインになっていますが、そのデザインのバランスが崩れる可能性があります。

この記事は、とある方からリクエストを頂いたので、ネタワンで実践しているカスタマイズ方法をまとめてみました。BlogPress(TCD010)を利用している方は、参考にして下さい。

スポンサーリンク