STINGER5ダウンロード
カスタマイズ時は、WordPress4.1、stinger5ver20141227です。
子テーマを作成してからカスタマイズしています。
もくじ
外観＞カスタマイズ
WordPressのバージョンも上がってカスタマイズしやすくなったのか、外観のカスタマイズから簡単に変更できる箇所が結構ありました。
ロゴ画像
タイトルをロゴ画像に変更するときはここから。ロゴ画像をクリックして、画像を選択するだけで完了します。スマホ表示のことを考え、サイズは300×60で作成しました。
ロゴの作成は、ブログを書くときに使ってる役立つ無料ソフト（ツール）で作成しています。
サイトタイトルとキャッチフレーズ
サイトタイトルとキャッチフレーズは、設定の一般からも変更可能です。基本色（キーカラー）
基本色では、H2の文字や背景、検索やRSS（購読するの部分）などの色を変更できる。トップページだけではなく、個別ページなど好きなページに移動でき、実際に色の変化を見ながら変更できます。RSSと検索バーは、変更後にデフォルトに戻すと、元の色と違う色になってしまいます。実際のデフォルトカラーは、RSSが#87BF31、検索バーが#CCCです。
ヘッダー画像
ヘッダー画像を非表示にしたり、変更したりできます。推奨サイズは980×250ウィジェット
ウィジェットは、外観のウィジェットからも変更可能です。必要のないものは削除したり、順番を移動したりできます。ひとまず、最近の投稿と検索バーは二つ必要ないので削除します。
追加で、プロフィールと人気の投稿を表示します。人気の投稿は、「WordPress Popular Posts」というプラグインを使って表示させます。
ワードプレスのサイドバーにプロフィールを表示する方法
外観＞テーマの編集
外観のテーマの編集からカスタマイズします。
検索フォームの変更
デフォルトでは、おしゃれな検索ボックスになっています。それをよく見る地味なデザインに変更します。
目指すのは上の画像です。基本色の検索バーで#FFFにしておきます。
用意するものは、50×32の検索ボタン（png画像）です。子テーマのimagesフォルダに入れておきます。
style.cssに
#s {
border:1px solid #ccc;
}を追加します。子テーマに、親テーマのsearchform.phpをまるまるコピーして貼り付けます。searchform.php内の
<input type="image" src="<?php echo get_template_directory_uri(); ?>の部分を
<input type="image" src="<?php echo get_stylesheet_directory_uri(); ?>に書き換えます。
RSSボタン・検索フォーム・最近の投稿の削除
親テーマを編集します。
<!-- RSSボタンです -->
<div class="rssbox"> <a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss-square"></i> 購読する</a> </div>
<!-- RSSボタンここまで -->
<?php get_search_form(); //検索フォーム表示 ?>
<!-- 最近のエントリ -->
<h4 class="menu_underh2"> NEW POST</h4>
<?php get_template_part('newpost');?>
<!-- /最近のエントリ -->の部分を削除します。これで、外観のウィジェットから追加して、好きな位置に並び替えることができます。
ただし、デザインは検索フォーム以外変わってしまいます。そのままのデザインがいい場合は、sidebar.phpで順番を入れ替えてください。
sidebar.phpで追加した方が、ウィジェットで追加した方より上にきます。
SNSボタンの削除からの忍者まとめボタンの追加
親テーマを編集します。単一記事
単一記事の投稿の</div>
<?php get_template_part('sns'); //ソーシャルボタン読み込み ?>
<?php endwhile; else: ?>部分の<?php get_template_part('sns'); //ソーシャルボタン読み込み ?>を削除するだけ。ここに忍者おまとめボタンを追加します。
<!-- SNSボタンです --> 忍者おまとめボタンのコード <!-- SNSボタンここまで -->を追加します。
記事タイトルの下に入れるなら、
</h1>の下にコードを追加します。
サイドバーアドセンスの下に入れるなら、
<!-- RSSボタンです -->の上にコードを追加します。
ホームページ
単一記事の投稿の<!-- /section -->
<?php get_template_part('sns-top'); //ソーシャルボタン読み込み ?>
<!-- ページナビ -->部分の<?php get_template_part('sns'); //ソーシャルボタン読み込み ?>を削除するだけ。ファビコンの変更
親テーマを編集します。用意するのはlogo.icoとapple-touch-icon-precomposed.png（75×75）にFTPソフトです。FTPソフトは、フリーで配布されています。また、サーバーを借りている人は、用意する必要はないかもしれません。
ファビコンの作成までは、ファビコン用素材の作り方を参考にしてください。完成したら、名前をlogoに変更します。
これを、親テーマのimagesフォルダのファイルと置き換えます。（この時点で元のファイルは消えるため、必要に応じてバックアップを取っておいてください。）
更新しても変わらないときは、ブラウザのキャッシュを削除してください。
見出しh2の装飾（吹き出しを解除）
親テーマを編集します。親テーマのstyle.cssのh2を、コメントアウトまたは削除します。
コメントアウトするのは、h2で検索した2,3個目と5,6個目です。
/* 中見出し */
h2 {
position: relative;
background: #f3f3f3;
color: #1a1a1a;
font-size: 20px;
line-height: 27px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
/*
h2:after {
content: '';
position: absolute;
border-top: 10px solid #f3f3f3;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
border-radius: 2px;
}
h2:before {
content: '';
position: absolute;
border-top: 10px solid #f3f3f3;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
}
*/
このように、afterとbeforeの部分をコメントアウトします。同様に、5,6個目もコメントアウトします。記事内のh2を装飾するときは、子テーマのstyle.cssに.post h2と追加する。
h4の背景が何をやっても背景色が変わらないときは、外観カスタマイズの基本色で変更すると変わるかもしれません。公開日時、コメント、関連記事などにも対応しているため注意が必要です。
「NEW POST」を「新着記事」に変更
親テーマを編集します。親テーマのsidebar.phpの
<h4 class="menu_underh2"> NEW POST</h4>の、NEW POSTを新着記事に変更します。
「Message」を「コメント」に変更
親テーマを編集します。親テーマのcomments.phpの
$args=array('title_reply' => 'Message',の、Messageをコメントに変更します。リンクテキストのカラーとアンダーライン
途中まで親テーマを編集します。
子テーマに追加したけど変わらなかったため、親テーマを編集しました。
リンクテキストにマウスを乗せたときの色は、デフォルトが#b22222になっているので、変えたい場所のコードを変更する。
マウスを乗せたときの基本になる色を変更するときは、
/* リンクにマウスオーバーした時の色 */
a:hover {
color: #b22222;
}のコードを変更する。
関連記事とNEW POSTの記事タイトルにマウスを乗せたときの色を変更するときは、
#kanren .clearfix dd h5 a:hover {
color: #b22222;
}のコードを変更する。
リンクにマウスを乗せる前のアンダーラインをすべて消します。
子テーマのstyle.cssに
/* リンクのアンダーライン */
a {
text-decoration: none;
}を追加する。
メニューバーのカスタマイズ（PC）
外観のメニューから、、表示させたいページやカテゴリを追加します。詳しくは、メニューバーにカテゴリーと固定ページを表示させる方法を参考にしてください。スマホとタブレットのメニューバーカスタマイズは、STINGER5のスマホとタブレットサイズ表示時のメニューバーをカスタマイズを参考にしてください。
※STINGER5でメニューに階層を付けると、そのまま表示されてしまいます。ドロップ（プル）ダウンメニューにしたい場合は、カスタマイズが必要です。このとき、広告の配置に関するポリシーの「許可されない配置方法の例」をみたらわかるとおり、メニューの下にアドセンスを設置する場合は、ポリシー違反にならないように注意しなくてはなりません。
子テーマのstyle.cssに追加します。
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
nav {
background-color: #fafafa;
padding: 2px 0;
border: 1px solid #ccc;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
nav li {
border-right: 1px solid #ccc;
border-left: none;
}
nav li a {
line-height: 30px;
display: block;
margin: -7px -8px;
padding: 0 8px;
}
nav li a:hover {
background-color: #fff;
}
}色やサイズ、線の太さなど自由に変更可能です。枠の角丸をなくしたいときは、rediusの3箇所を削除する。
文字にマウスを乗せたときだけ見た目を変えたいなら、display:blockを削除する。
「ページトップへ」ボタンのカスタマイズ
変更するのは以下- ボタンを大きく
- ボタンを丸く
- マウスオーバーで色を濃く
- 矢印を大きく
/* ページトップ */
#page-top {
font-size: 32px;
}
#page-top a {
border-radius: 50%;
}
#page-top a:hover {
background: #000;
}
.fa-angle-up:before {
content: "\f077" !important;
}または、footer.phpの
class="fa fa-angle-up"を
class="fa fa-arrow-up"などに書き換える
アイコンはFont Awesomeから選びます。
色の濃さも、style.cssのopacityの数字（デフォルトでは0.3）を大きくしていくと濃くなっていきます。
どちらの方法が正しいかわかりませんが、どちらの方法でも変更は可能です。
関連記事の画像を大きくして抜粋を非表示
NEW POSTのデザインも同時に変化します。
画像は、ブラウザの横幅が1067px以上で2列、780px～1066pxで1列、689px～779pxで2列、686px以下で1列になります。
抜粋を非表示
抜粋を表示させておきたい場合は、ここを飛ばしてください。ただし、次に指定する高さを変更する必要があります。子テーマのstyle.cssに追加します。
/* 抜粋非表示 */
#kanren .clearfix dd p {
display:none;
}画像サイズの変更
子テーマのstyle.cssに追加します。（無駄なコードが合ったら削除してください。）/*--------------------------------
関連記事表示部分
---------------------------------*/
#kanren dl{
float: left;
padding-left: 5px;
width: 280px;
height: 250px;
}
/* タイトル名 */
#kanren dd h5 {
font-size: 16px;
font-weight: bold;
padding: 0px;
margin-bottom: 5px;
}
#kanren dt {
width: 280px;
height:210px;
}
#kanren dt img {
width: 280px;
height:200px
}
#kanren dd {
clear: both;
padding-left:0px;
}抜粋を非表示にしていない場合は、250pxの部分を変更してください。もう少し画像を小さくして3つ並べたいときなどは、下の画像を参考に、サイズを変更してください。
次に、親テーマのfunctions.phpのアイキャッチサムネイルに、
add_image_size('thumb280',280,200,true);を追加します。今回は、280×200の画像にしたいので280，200としています。
続いて、親テーマのkanren.phpを編集します。（これは、子テーマを作成してもOKです。やることは一緒です。）
'posts_per_page'=> 10,の10を6に変更します。これは関連記事を表示する件数です。
<?php the_post_thumbnail( 'thumb150' ); ?>の150を280に変更します。これはfunctions.phpに追加した名前です。
例えば、functions.phpで('abc123',560,400,true)としたなら、
<?php the_post_thumbnail( 'abc123' ); ?>とします。
関連記事のカスタマイズはここまでです。この変更に伴い、PREV・NEXTの表示とサイドバーが崩れることがあります。
そうならないように、子テーマのstyle.cssに追加してください。
/* PREV NEXT */
.p-navi dl dt {
clear: both;
}
.p-navi dl dd {
clear: both;
padding-left:0px;
}
/* ウィジェットタイトル */
aside h4 {
clear: both;
}【追記】
記事タイトルが長くて2行以内におさまらないときに、3行目以降を省略する場合は、上の#kanren dd h5に下記を追加してください。
height: 44px; overflow: hidden;文字の大きさを変えた場合は、44pxも変更してください。
NEW POSTの画像を大きくして抜粋を非表示
親テーマのnewpost.phpを編集します。（これは、子テーマを作成してもOKです。やることは一緒です。）<?php the_post_thumbnail( 'thumb150' ); ?>の150を280に変更します。
詳しくは、上の関連記事の画像を大きくして抜粋を非表示を参考にしてください。
スポンサーリンク
