STINGER5のカスタマイズ!検索フォームの色、パンくずリストの場所など

      2016/04/11

最近、STINGER3FAN→STINGER5に変更しました。

STINGER5の公式サイト

感想としては、非常に気に入っています。

今回、レスポンシブデザインになって、「ソースがわかりにくいかな」と思っていたのですが、そんなことありませんでした。

また、一行に表示される文字数が増えました。

一文字あたりの大きさが小さくなったことと、画面をより一杯使うようになったことが原因だと思います。

今回は、そのカスタマイズについて書きます。

私は、そんなにプログラミングやデザインに詳しくないので、ちょっとしたことについてです。

しかも、その対処法は素人のやり方なので、参考になる方は限られるかもしれません。

ご了承ください。

と、その前に公式の説明書があるので、こちらを参考にしてみてください。

STINGER5の使い方

これを見ても解決しなかった場合は、続きを参考にしてみてください。

スポンサーリンク

検索フォーム等の色

今回の大きな特徴として、検索フォームやh2タグなどの色を、簡単に変更できるようになりました。

これは、非常にありがたいです。

最初、STINGER5に変更した直後は、検索フォームの色と購読リンクの色が灰色で、背景と同化しています。

これを見て、多くの人が違和感を感じたでしょう。

もしかしたら、これはENJIさんからの「色を簡単に変更できるようになったよ!気づいて!」というメッセージかもしれません。

いや、そうであって欲しいです。

この変更については、こちらの公式サイトのトップに書いてあります。

STINGER5の公式サイト

外観→カスタマイズ→基本色(キーカラー)

で変更できます。

しかし、どれを変えればどこが変わるのかが、さっぱりです。

私も苦戦しました。

そこで、こちらのサイトを見つけました。

  新しくパワーアップされた「STINGER5」のテーマカスタマイザーを使ってみよう! 新しくパワーアップされた「STINGER5」のテーマカスタマイザーを使ってみよう!

グループ1では

ロゴ画像
ブログタイトル
メニュー
キャプション
タブレットやスマホ表示の時のメニュー
サイド見出し
フッター文字

グループ2では

中見出し(h2)
小見出し(h3)
記事タイトル下の線
コメントボタン色
RSSボタン

グループ3では

記事タイトル下
検索フォーム背景色
コメント背景色
カレンダー曜日背景

注意しなければならないのが、1つの変更で複数の場所が変わるということです。

おそらく、これを変更するだけでは、自分の中で納得が行かないと思います。

そこで、1つ1つの場所を、個別に変更する方法を書きます。

外観→テーマ編集→テーマのための関数

に行きます。

そこに、こんな感じのソースがあります。

<style type="text/css">
/*グループ1
------------------------------------------------------------*/
/*ブログタイトル*/
header .sitename a {
 color: <?php echo $menu_logocolor;
?>;
}
/* メニュー */
nav li a {
 color: <?php echo $menu_logocolor;
?>;
}
/*キャプション */

header h1 {
 color: <?php echo $menu_logocolor;
?>;
}
header .descr {
 color: <?php echo $menu_logocolor;
?>;
}
/* アコーディオン */
#s-navi dt.trigger .op {
	color: <?php echo $menu_logocolor;
?>;
}
.acordion_tree li a {
	color: <?php echo $menu_logocolor;
?>;
}
/* サイド見出し */
aside h4 {
 color: <?php echo $menu_logocolor;
?>;
}
/* フッター文字 */
#footer,#footer .copy {
color: <?php echo $menu_logocolor;
?>;
}
/*グループ2
------------------------------------------------------------*/
/* 中見出し */
h2 {
 background: <?php echo '#f3f3f3';
?>;
 color: <?php echo $menu_color;
?>;
}
h2:after {
 border-top: 10px solid <?php echo '#f3f3f3';
?>;
}
h2:before {
 border-top: 10px solid <?php echo '#f3f3f3';
?>;
}
/*小見出し*/
.post h3 {
 border-bottom: 1px <?php echo '#f3f3f3';
?> dotted;
}
/* 記事タイトル下の線 */
.blogbox {
 border-top-color: <?php echo '#f3f3f3';
?>;
 border-bottom-color: <?php echo '#f3f3f3';
?>;
}
/* コメントボタン色 */
#comments input[type="submit"] {
background-color: <?php echo $menu_bgcolor;
?>;
}
#comments input[type="submit"] {
color: <?php echo $menu_color;
?>;
}
/* RSSボタン */
.rssbox a {
	background-color: <?php echo $menu_bgcolor;
?>;
}
/*グループ3
------------------------------------------------------------*/
/* 記事タイトル下 */
.blogbox {
 background: <?php echo '#f3f3f3';
?>;
}
/*h4*/
.post h4{
background-color:<?php echo '#f3f3f3';
?>;
}
/* 検索フォーム */
#s {
 background: <?php echo $menu_comcolor;
?>;
}
#searchsubmit{
 background: <?php echo $menu_comcolor;
?>;
}
/* コメント */
#comments {
 background: <?php echo '#f3f3f3';
?>;
}
/* カレンダー曜日背景 */
#wp-calendar thead tr th {
 background: <?php echo '#f3f3f3';
?>;
}
</style>

これは、変更後のソースです。

各グループごとに、変更の反映場所が書いてあります。

この“$menu_comcolor”みたいに、最初に“$”が書いてる文字列を、変更したい色のカラーコードと置き換えれば良いです。

ちなみに、'#f3f3f3'は初期カラーの、あの灰色のやつです。

私は、この色が一番しっくりくるので、大抵これで置き換えています。

引用

前回のSTINGER3の時は、結構修正しました。

今回は、非常に私好みだったのですが、一点だけ修正させていただきました。

それは、左側にある縦のラインです。

stinger5inyou

これが嫌なので、消しました。

外観→テーマ編集→スタイルシート

に行ってください。

/* 引用 */
.post blockquote {
	background-color: #f3f3f3;
	background-image: url(images/quote.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 70px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCC;
}

ここから、下記の部分を取ってください。

	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCC;

そうすると、こうなります。

stinger5inyouaf

すっきり!

スポンサーリンク

アーカイブページのパンくずリストを白い枠に入れる

※ver20141011以降ではこの件は修正されています

今回なぜか、アーカイブページのパンくずリストが、白い枠の外に出ています。

stinger5pan

これが、どうしても許せなかったので、下の白い枠に入れました。

外観→テーマ編集→アーカイブ

に行ってください。

    <!--/kuzu-->
    <main>
      <article>
        <section> 
          <!--ループ開始-->

この部分のこの2行を切り取ってください。

    <main>
      <article>

そして最上部付近に、このように貼り付けてください。

<div id="content" class="clearfix">
  <div id="contentInner">

    <main>
      <article>

    <div id="breadcrumb">

そして、先ほど切り取った場所に、brタグを記述し、このようにしてください。

    <!--/kuzu-->
    <br />
        <section> 
          <!--ループ開始-->

これで、このようになります。

stinger5panaf

単一記事と同じ感じ!

PREV(前の記事)、NEXT(次の記事)を現在のカテゴリ内に限定する

これは、STINGER3と同じなので、こちらの記事を参考にしてください。

かゆい所に手が届く!?STINGERの細かすぎるカスタマイズ特集

結構下の方にあります。

Google Adsenseがパソコンで2つ表示されるので1つにする

パソコンの場合、記事下のアドセンスが2つ表示されるので、それを消します。

外観→テーマ編集→単一記事の投稿

に行ってください。

          <div style="padding:20px 0px;">
            <?php get_template_part('ad'); //アドセンス読み込み ?>
            <?php if(is_mobile()) { //スマホの場合 ?>
            <?php } else { //PCの場合 ?>
            <div class="smanone" style="padding-top:10px;">
              <?php get_template_part('ad'); //アドセンス読み込み ?>
            </div>
            <?php } ?>
          </div>

上を下のようになるように、中のソースを削除してください。

          <div style="padding:20px 0px;">
            <?php get_template_part('ad'); //アドセンス読み込み ?>
          </div>

これで、パソコンでも記事下のアドセンスは1つです。

まとめ

今回のSTINGER5は、ツイートの下が切れてしまうバグは無いみたいですが、その代わりYouTubeの埋め込み等の大きさが反映されません。

でも、パソコンでもスマホでも画面一杯に表示してくれるっぽいので、特に何もしません。

どうでしたでしょうか。

私が行った変更は、大体こんな感じです。

細かくて、個人的だったので、気に入らなかった人は、結構いたかもしれません。

解決策が素人レベルなのは、お許しください。

役に立った人がいることを、信じています。

ちょっとブロガーの助けになれば、幸いです。

いちばんやさしい WordPress の教本 人気講師が教える本格Webサイトの作り方
石川栄和 大串肇 星野邦敏
インプレスジャパン
売り上げランキング: 5,772

 

はじめての簡単 WordPress入門「決定版」 (BASIC MASTER SERIES)
原 久鷹
秀和システム
売り上げランキング: 12,474

おすすめ記事

1
WiMAXって何?速度制限時でも動画が見れるWi-Fiルーターです

WiMAXとは、au系のUQコミュニケーションズが提供する、無線のインターネット ...

2
ネスカフェ「ドルチェグスト ドロップ」をレビュー!使い方を徹底解説

ネスレが発売しているカプセル式コーヒーマシン、ネスカフェ「ドルチェグスト ドロッ ...

3
格安SIM(MVNO)で競争が激化!「嘘だろっ?」と思うサービスも

格安SIM(MVNO)は、一昔前では、月額料金の競争だけでした。 しかし、その後 ...

 - ブログ ,