WordPress 完全無料で初心者でもかっこいいブログができるフリーテーマ「SuperNova」のカスタマイズ（２/２）

2013/11/13 WORD PRESS, テーマ

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

WordPress 完全無料で初心者でもかっこいいブログができるフリーテーマ「SuperNova」のカスタマイズ（１/２）で、主にデフォルトで用意されているオプション設定を利用したカスタマイズを紹介した。
今回は、その続編で、それ以外に当ブログでカスタマイズした内容を説明したい。
なお、子テーマを作成してカスタマイズしているが、子テーマ作成については、WORDPRESS完全無料で初心者でもかっこいいブログができるフリーテーマ「SUPERNOVA」を参考にして欲しい。

スタイルシートのカスタマイズ

日本語フォントの設定

海外版の無料テーマを利用した場合、日本語フォントを入れると微妙にレイアウトが崩れて使い物にならないケースがままある。
できるだけ、日本語フォントはカスタマイズの初期段階で設定して、確認したいものである。
日本語フォントについては、CSSのfont-family指定はこれで決まり！（2013春）を参考にして以下のフォントを設定している。

font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;

子テーマのstyle.cssファイルに書き足す形で日本語フォントを設定する。
また英字の場合、全て大文字で表記するように設定されていたので、表記したとおりに表示するように変更した。ただし、一部箇所では全て大文字で表記する設定を残している。


/*
Theme Name: Supernova Child
Template: supernova
*/

@import url("../supernova/style.css");

/* =Basic structure
-------------------------------------------------------------- */
/* font-familyの変更 */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header,
hgroup, menu, nav, section, summary, time, mark, audio, video {
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',
 Meiryo, sans-serif;　　　　　　/*全般の日本語フォントの変更*/
	text-transform: none; /*全て大文字表記を表記したままに変更*/
}
#nav li a{
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',
 Meiryo, sans-serif;　　　　　　/*ナビゲーションの日本語フォントの変更*/
}
h1,h2,h3,h4,h5,h6{
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;　　　　　　　/*見出しの日本語フォントの変更*/
}

見出しの設定

デフォルトでは見出しタグは、基本フォントサイズの違いだけだった。個人的に、あまりごてごてした見出しにはしたくないので、太字設定とフォントカラーだけで見出しの装飾は設定した。なお、<h1>、<h2>、<h6>タグについてはデフォルトのままで変更していない。


/* 見出しの装飾 */
h1{
	font-size:3em; 
	margin-bottom:0.6500em; 
}
h2{
	font-size:2.5em; 
	margin-bottom: .7em; 
}
h3{
	font-size:2em; 
	margin-bottom: 0.6em;
	font-weight: bold;	/* 太字追加 */
}
h4{
	font-size:1.8em; 
	margin-bottom:0.5em;
	color: #2f4f4f;		/* 色追加 */
	font-weight: bold;	/* 太字追加 */
}
h5{
	font-size:1.6em; 
	margin-bottom:0.5em;
	color: #696969;		/* 色追加 */
	font-weight: bold;	/* 太字追加 */
}
h6{
	font-size:1.5em; 
	margin-bottom:0.5em;
}

最近の記事と人気の記事のデザイン設定

Supernovaにはデフォルトで、サムネイル画像付きの最新記事を表示する「Recent Posts」ウィジェットが用意されている。
今回、人気の記事を表示するウィジェットとして「WordPress Popular Posts」プラグインを使用したので、デザインをあわせるために以下を書き加えた。
なお、「WordPress Popular Posts」プラグインの使い方などは数多く紹介されているので検索して参考にして欲しいが、WPナビのブログの人気記事を表示「WordPress Popular Posts」の設定方法を紹介しておく。

/* サイドバーのフォントサイズの変更 */
.recent_posts a {
	font-size :13px;
	font-weight :normal;
}
/* サイドバーのpaddingをゼロに(人気の記事はイメージにもaタグがついているのでゼロにする) */
#sidebar a{
	padding: 0px;
}

「WordPress Popular Posts」プラグインの設定

なお、「WordPress Popular Posts」プラグインは次のよう設定している。

image

管理画面のプラグインの設定画面はデフォルトのままでよい。
そして、管理画面の外観→ウィジェットで「WordPress Popular Posts」を追加するにあたり、
1.サムネイル画像のサイズをあわせる（60×50）
2.HTMLマークアップの設定でカスタムHTMLマークアップを使用するにチェックを入れ


タイトルの前／後: 
 左の枠　<h2>
 右の枠　</h2>
投稿の前／後: 
 左の枠　<div id="supernova_recentposts-2" class="widget supernova">  <div class="recent_posts">
 右の枠　<div></div>
投稿用HTMLマークアップ: 枠内に
　　　　 <div class="sidebar-posts"><h4>{thumb}
　　　　 {title}</h4></div>
と記入している。

引用枠のカスタマイズ設定

個人的に引用枠を使うのが好きなので、自分の好みに変更した。
基本、角丸の枠を使用し、引用符「”」をつけない使用法が好み。
また、以下のように設定にしておけば、引用レベルに合わせて、色を変えるclass指定をすれば、何種類かの引用枠を作ることもたやすい。

/*blockquoteの装飾*/
blockquote{
   -moz-border-radius: 20px;    /* Firefox */
   -webkit-border-radius: 20px; /* Safari,Chrome */
   border-radius: 20px;         /* CSS3 */

   border: 1px green solid;     /* 枠線の装飾 */
   background-color: #faf0e6;   /* 背景色 */
   padding: 10px;　　　　　　　　 /* 枠と文字の距離 */
}
/* 引用符「”」を非表示 */
blockquote:before {
    content: none;　　　　　　　　/* 引用符「”」を非表示に */
}

パンくずリストを表示する「Breadcrumb NavXT」プラグインの設定

デフォルトで利用できるパンくずリストがバージョンアップ時のバグなのか、表示が崩れるので、オフにして、新たに「Breadcrumb NavXT」プラグインを入れたので、そのデザイン設定。


/* =Breadcrumb NavXT
-------------------------------------------------------------- */
.breadcrumbs{
    font-size: 1.1em;
    color: #4169e1;
    margin: 0px 0px 10px 10px;
}

これで、現時点のスタイルシートのカスタマイズ設定は全て説明した。

header.phpのカスタマイズ

現時点では、パンくずリストを加えただけである。


<?php do_action('supernova_below_nav'); ?>　　←この下に追加
<!-- パンくずリストの追加 -->
<div class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>
<!-- /パンくずリストの追加 -->

なお、「Breadcrumb NavXT」プラグインの設定については、NetaOneさんのBreadcrumb NavXT – パンくずリストを表示するWordPressプラグインという記事がわかりやすいので参考にするとよい。
私は、Generalタブの「Title Length」、「Home Template」、「Home Template(Unlinked)」をそれぞれ以下のとおりに変更している。


Limit the length of the breadcrumb title. /*←チェックを入れる*/	
  Max Title Length: 40 　　　　　　　　　    /*40字に設定*/ 

Home Template /*以下に変更*/
 <a title="Go to %ftitle%." href="%link%" class="%type%">ＴＯＰ</a>

Home Template(Unlinked)　/*以下に変更*/
 　ようこそ%htitle%へ

single.phpのカスタマイズ

ブログパーツの「zenback」のソースコードを挿入。
「zenback」は、当ブログの記事下や横に、SNSボタンを設置、その記事に関係する自分のブログ記事、他のzenbackユーザーのブログ記事（関連リンク）、その記事についての最新のTwitterのつぶやき、その記事についてのはてなブックマークを表示してくれる。


<?php get_template_part('loop', 'single'); ?>←この下に追加
 　　　　　　　　　　(zenbackソースコード略)
</article><!--main_content ENDS -->←この上に追加

これで都合３回にわたったWordPressのテーマ「Supernova」の導入についての説明は全て終わり。是非、素晴らしいこのテーマを利用して欲しい。

もし良ければお願いします。

良かったらフォローお願いします。

jump-up

コメント

  1. 20代を懐かしさでしめやかに爆発四散させる等 | アヤデルの漫画感想と日記 より:
    2014年2月1日 04:08

    […] 放置と言いつつ、実は先月ちゃっかり「傑作漫画データベース」も含めてフォントを変更してました。ヒラギノ角ゴシック体というやつです。変更にあたり以下のサイトを参考にさせていただきました。 「WordPress 完全無料で初心者でもかっこいいブログができるフリーテーマ「Sup…」 […]

    返信