【ＳＴＩＮＧＥＲ８】やってみたカスタマイズのメモまとめ

2016/12/06 2020/04/02

ＳＴＩＮＧＥＲ８

このブログで使ってるＷｏｒｄＰｒｅｓｓの無料テーマの「ＳＴＩＮＧＥＲＰｌｕｓ＋」が、次のバージョンの準備のためとのことで公開終了してからしばらく経ってましたが。

ようやく先月の中頃に新バージョンの公開がされたとの情報を受けまして、早速見に行ったのですが・・・なんと予想外の事態になってまして。

これまで初心者にも優しく、簡単にカスタマイズできることで人気のあった「ＳＴＩＮＧＥＲ」シリーズだったのに、今回の「ＳＴＩＮＧＥ８」ではその流れからまったく異なる方向へとスイッチ。

きわめてシンプルで、カスタマイズの設定項目や機能が、これまでと比較してずっと縮小されたテーマになってました。

ＨＴＭＬやＣＳＳそしてＰＨＰの知識のある人ならともかく、そうでない初心者の人にとってはとても残念な仕様で、今後は利用者も減ることでしょうが。

作成者にとっては、無料公開の上にサポートに手間がかかるので、やむなく敢えて利用者を絞る方向にしたのではないかと思われます。

というわけで現在利用中の「ＳＴＩＮＧＥＲＰｌｕｓ＋」は、そのまま使い続けることにして、このブログでの「ＳＴＩＮＧＥＲ８」の利用は見送ることにしたんですが。

ちょうど他のＷｏｒｄＰｒｅｓｓのブログのテーマを変えようと思ってたんで、そちらで試しに「ＳＴＩＮＧＥＲ８」を使ってみることにしまして。

いろいろとカスタマイズを始めたので、備忘録としてその手順のメモを記事にしておくことにしました。

まず最初にやったこと
・子テーマの追加
・ＣＳＳファイルの変更
記事とサイドバーの幅を調整(ＰＣ用)
ブログタイトル部分の変更
・ブログタイトルの背景を画像にする(ＰＣ用)
・ブログタイトルとブログ内容の位置調整(ＰＣ用)
・ブログタイトルの色の変更
・ブログ説明の色の色の変更
文字のサイズ等の変更
・記事タイトルの文字サイズなどの変更(ＰＣ用)
・記事の文字サイズなどの変更(ＰＣ用)
記事内画像の周りの余白を調整
記事上部の表示調整
・記事の上に表示されるカテゴリの消去
・記事の上に表示される投稿日の表示変更と更新日の消去
記事下部の表示調整
・記事の下に表示される執筆者の消去
・記事の下に表示される関連記事の消去
サイドバーの表示調整
・新着記事のトップ・月別・カテゴリページでの非表示
・サイドバーのタイトル(見出し)デザインの変更
フッターの表示調整
・フッターのブログ名・ブログ説明の非表示
ウィジェットエリアの追加

まず最初にやったこと

子テーマの追加

ＷｏｒｄＰｒｅｓｓのテーマのカスタマイズをやろうって人なら、言うまでもないことなのかも知れませんが、念のため。

ＳＴＩＮＧＥＲ８のダウンロードページの本体のすぐ下に「ＳＴＩＮＧＥＲ８子テーマ」っていうのがありますが、これをダウンロードしてＷｏｒｄＰｒｅｓｓのテーマに追加して有効にしてやります。

これは親テーマである「ＳＴＩＮＧＥＲ８」のほうを直接カスタマイズすると、そのバージョンアップがあったときに、すべてのカスタマイズを新しいバージョンのファイルに改めて施してやる面倒を避けるためでして。

ＰＨＰファイルやＣＳＳファイルに手を加える場合は、すべて「子テーマ」のほうのファイルを対象にすることで、バージョンアップで「親テーマ」が新しくなっても、そのカスタマイズした「子テーマ」のほうをそのままに使えば、「親テーマ」には何もしなくても問題無いというわけですね。

ＣＳＳファイルの変更

次に、その「子テーマ」なんですが、ＣＳＳを定義するファイルの「ｓｔｙｌｅ．ｃｓｓ」を見てみると、以下のように空っぽでメディアクエリだけが記述されてます。

/*
Theme Name: STINGER8 Child
Template: stinger8
Version: 20161115
*/
@import url('../stinger8/style.css');

/*media Queries タブレットサイズ（960px以下）
----------------------------------------------------*/
@media only screen and (max-width: 960x) {


/*-- ここまで --*/
}

/*media Queries タブレットサイズ（600px以上）
----------------------------------------------------*/
@media only screen and (min-width: 600px) {


/*-- ここまで --*/
}

/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {


/*-- ここまで --*/
}

ただこれを「親テーマ」の同ファイルと比較するとサイズの指定が違ってまして、気にしなければ気にしないでいいとは思うんですが、後々不都合が生じて修正する必要が出てきたりすると嫌なので、以下のように「親テーマ」と同じになるように書き換えましたよ。

/*
Theme Name: STINGER8 Child
Template: stinger8
Version: 20161115
*/
@import url('../stinger8/style.css');

/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
----------------------------------------------------*/
@media only screen and (max-width: 959px) {


/*-- ここまで --*/
}

/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
----------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {


/*-- ここまで --*/
}

/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
----------------------------------------------------*/
@media only screen and (min-width: 600px) {


/*-- ここまで --*/
}

/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {


/*-- ここまで --*/
}

ＣＳＳによるデザインの調整は、これらの中から該当するサイズの部分に記入することで対応できるわけです。

すべてのサイズに共通して適用されるようにする場合は、メディアクエリ指定の枠の外、つまり上記の青字の「＠ｉｍｐｏｒｔ」のすぐ下のところに記入すれば良いですね。

記事とサイドバーの幅を調整(ＰＣ用)

記事とサイドバー部分の幅を狭くしたかったので、子テーマのＣＳＳの「ＰＣサイズ」のところに以下の記述を追加しました。

#content {
   width: 800px;   /* 全体の幅 */
}
.st-main {
   width: 440px;   /* 記事エリアの幅 */
}
#side .st-aside {
   width: 240px;   /* サイドバー部分の幅 */
}

全体の幅を８００ｐｘにして、それに合うように記事部分とサイドバー部分の幅を調整しました。

それぞれの幅の値の合計が全体の幅よりも小さいのは、デフォルトで“ｐａｄｄｉｎｇ”などの余白の指定がされているためです。

ブログタイトル部分の変更

ブログタイトルの背景を画像にする(ＰＣ用)

ブログタイトルの背景を画像にするために、まずは用意した背景画像(ｈｅａｄｅｒ．ｐｎｇ)をサーバにアップロードします。

まずは、子テーマのディレクトリの中(ワードプレスのルートディレクトリ/ｗｐ－ｃｏｎｔｅｎｔ/ｔｈｅｍｅｓ/ｓｔｉｎｇｅｒ８－ｃｈｉｌｄ)の中にある「ｉｍａｇｅｓ」ディレクトリへ、FTPで背景画像をアップロード。

次に、子テーマのＣＳＳの「ＰＣサイズ」のところに以下の記述を追加しました。

#headbox {
   height: 180px;   /* 画像の高さと同じ */
   width: 800px;   /* 画像の幅と同じ */
   background-image: url(images/header.png);
   background-repeat: no-repeat;
   padding: 0px;
}
header, #headbox-bg {
   height: 180px;   /* 画像の高さと同じ */
}

高さと幅は、画像のサイズ(１８０ｐｘ×８００ｐｘ)に合わせたものです。

ブログタイトルとブログ内容の位置調整(ＰＣ用)

ブログタイトルとブログ内容の文字位置を少し右に寄せたかったので、子テーマのＣＳＳの「ＰＣサイズ」のところに以下の記述を追加しました。

#header-l {
margin-left: 60px;
}

左に作った余白によって、その分だけ文字が右に寄るようにしたわけです。

ブログタイトルの色の変更

ブログタイトルの色を変更するために、子テーマのＣＳＳに以下の記述を追加しました。

header .sitename a {
color: #009933;
}

ブログ説明の色の色の変更

ブログ説明の色を変更するために、子テーマのＣＳＳに以下の記述を追加しました。

header .descr {
color: #999933;
}

文字のサイズ等の変更

記事タイトルの文字サイズなどの変更(ＰＣ用)

ＰＣ表示の記事タイトルが大きすぎるので、小さくするように子テーマのＣＳＳの「ＰＣサイズ」のところに、以下の記述を追加しました。

#content h1.entry-title {
font-size: 18px; /* 文字サイズ */
line-height: 1.4em; /* 行間 */
}

文字サイズに合わせて、折り返したときの行間のサイズも調整してあります。

記事の文字サイズなどの変更(ＰＣ用)

ＰＣ表示の文字サイズをデフォルトよりも小さくしたかったので、子テーマのＣＳＳの「ＰＣサイズ」のところに以下の記述を追加しました。

.entry-content p {
   font-size: 14px;       /* 文字サイズ */
   line-height: 1.4em;     /* 行間 */
   margin-bottom: 1.2em;   /* 段落間 */
}

文字サイズに合わせて、行間や段落間のサイズも調整してあります。

記事内画像の周りの余白を調整

記事内画像の周りの余白を調整するために、子テーマのＣＳＳに以下の記述を追加しました。

.entry-content p img {
margin: 1em;
}

上下左右の余白を１文字分にしたものです。

記事上部の表示調整

記事の上に表示されるカテゴリの消去

記事の上に表示されるカテゴリを消すために、ＰＨＰのファイルを修正しました。

修正するファイルは「ｓｉｎｇｌｅ．ｐｈｐ」で、まず親テーマのディレクトリにある同ファイルを子テーマのディレクトリにコピーします。

次にファイルの中の「カテゴリ表示」の部分に、以下の黄字の１行を追加しました。

<?php //カテゴリ表示
$GLOBALS['stdata60'] = 'yes';
if ( isset($GLOBALS['stdata60']) && $GLOBALS['stdata60'] === 'yes' ) {

記事の上に表示される投稿日の表示変更と更新日の消去

まず、記事の上に表示される投稿日と更新日を消すために、親テーマのディレクトリから子テーマのディレクトリにコピーした「ｓｉｎｇｌｅ．ｐｈｐ」ファイルに、以下の黄字の２行を追加しました。

次に、投稿日を「Ｆｏｎｔａｗｓｏｍｅ」のアイコンで表示するために、以下の青字の１行を追加しました。

「Ｆｏｎｔａｗｓｏｍｅ」のアイコンは無料で使える便利なフリーアイコンセットなんですが、この「ＳＴＩＮＧＥＲ８」ではそれがすぐに使えるように既に設定がされてるんで、何も準備無しに上記の記述だけで使用できるところが良いですね。

ここでは鉛筆のアイコンをセットしましたが、他のアイコンの種類は「Ｆｏｎｔａｗｓｏｍｅ」のサイトで確認できます。

いろいろあって、おもしろいですよ。

記事下部の表示調整

記事の下に表示される執筆者の消去

記事の下に表示される執筆者を消すために、親テーマのディレクトリから子テーマのディレクトリにコピーした「ｓｉｎｇｌｅ．ｐｈｐ」ファイルに、以下の黄字の２行を追加しました。

<?php /* ?>
<p>執筆者：<?php the_author_posts_link(); ?></p>
<?php */ ?>

記事の下に表示される関連記事の消去

記事の下に表示される関連記事を消すために、親テーマのディレクトリから子テーマのディレクトリにコピーした「ｓｉｎｇｌｅ．ｐｈｐ」ファイルに、以下の黄字の部分を追加しました。

<?php //get_template_part( 'kanren' ); ?>

表示するための関数をコメントアウトしただけですね。

サイドバーの表示調整

サイドバーのタイトル(見出し)デザインの変更

サイドバーのタイトル(見出し)のデザインを変更するために、子テーマのＣＳＳに以下の記述を追加しました。

p.menu_underh2 {
   font-size: 16px !important;
   color: #fff;
   background: #330000;
   display: inline-block;
   border: 1px solid #ccc;
   border-radius: 5px;
   padding: 5px 10px 5px 10px;
   margin-bottom: 10px;
}

まず黄字部分の指定によって、文字サイズを調整するんですが、親テーマのメディアクエリによる指定のほうが強いので、普通に指定すると有効になりませんでした。

それで、こちらでもメディアごとの指定をしてやればいいんですが、面倒だしＰＣやタブレットで共通に指定してやりたかったので、「！ｉｍｐｏｒｔａｎｔ」指定をつけてやりましたよ。

こうすることによって、強制的にここで追加したフォントサイズが優先されるんですね。

次に赤字部分の指定で、文字色と文字の背景色を指定。

さらに青字部分の指定で、文字を角丸の長方形で囲ってやりました。

「１ｐｘ」は囲みの枠の境界線の太さで、その後の「＃ｃｃｃ」はその色の指定です。

それから、「ｂｏｒｄｅｒ－ｒａｄｉｕｓ」の値によって角丸の丸め具合が調整できて、ここの数値が大きいほど丸くなるので、必要なら好みに応じて変えると良いでしょう。

そして白字部分の指定で、周りの囲み線と文字との間の余白のサイズを調整しています。

数値の並びは、左から順に「上・右・下・左」の余白のサイズを指定していますが、この記述方法は「ｍａｒｇｉｎ」の指定をする場合も同様ですよ。

最後に、緑字部分の指定でタイトルの下の余白のサイズを調整しています。

デフォルトだと少し開き過ぎなような気がしたので、チョットだけ詰めてやりました。

これは、前述のように「ｐａｄｄｉｎｇ」の指定と同様にして、

margin: 0px 0px 10px 0px;

と指定してやっても同じ意味になるので、同じ結果が得られますね。

フッターの表示調整

フッターのブログ名・ブログ説明の非表示

フッターに表示される「ブログ名・ブログ説明」は、特に必要無いかなと思いました。

それで、親テーマのディレクトリから子テーマのディレクトリにコピーした「ｆｏｏｔｅｒ．ｐｈｐ」ファイルに、以下の黄字の２行を追加しました。

<?php //フッターメニュー
$defaults = array(
   'theme_location'  => 'secondary-menu',
   'container'       => 'div',
   'container_class' => 'footermenubox clearfix ',
   'menu_class'      => 'footermenust',
   'depth'           => 1,
);
wp_nav_menu( $defaults );
/*
?>
   <div class="footer-wbox clearfix">

       <div class="footer-c">
           
           <p class="footerlogo">
           
               <?php if ( !is_home() || !is_front_page() ) { ?>
                   <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
               <?php } ?>
                   <?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
               <?php if ( !is_home() || !is_front_page() ) { ?>
                   </a>
               <?php } ?>
           </p>

           <p>
               <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'description' ); ?></a>
           </p>
       </div>
   </div>
<?php */ ?>

該当範囲をすべて、コメントアウトしたわけです。

「ＳＴＩＮＧＥＲ８」にも十分なウィジェットエリアが付いてますが、それ以外にも希望の場所にウィジェットが追加できるようにしたい場合がありますね。

そんなときは以下のようにしますが、例としてヘッダー部分にウィジェットを表示するためのエリアを作る場合を考えて見ましょう。

まず子テーマの「ｆｕｎｃｔｉｏｎ．ｐｈｐ」に、以下のコードを追加します。

if(function_exists('register_sidebar')) {
   register_sidebar(
       array(
           'id' => 'header-widget',
           'name' => 'ヘッダーウイジェット',
           'description' => 'ヘッダーに表示されるコンテンツエリアです。',
           'before_widget' => '<div id="%1$s" class="widget %2$s">',
           'after_widget' => '</div>',
           'before_title' => '<p class="widget-title">',
           'after_title' => '</p>',
       )
   );
}

これによって、「ヘッダーウィジェット」という名前のウィジェットエリアが、管理画面に追加されます。

ここで赤字の「ｉｄ」は、ウィジェットエリアをユニークに識別するための名前で、好きな名前をつけて構いませんが、アルファベット小文字を使いましょう。

大文字を使うと、なぜかウィジェットが表示されないという不具合が発生するので要注意です。

次に黄字の「ｎａｍｅ」と「ｄｅｓｃｒｉｐｔｉｏｎ」は、管理画面に表示されるウィジェットエリアの名前と説明です。

そして青地の「ｂｅｆｏｒｅ＿ｗｉｄｇｅｔ」と「ａｆｔｅｒ＿ｗｉｄｇｅｔ」は、ウィジェットが表示される際の前後に付加されるＨＴＭＬタグの指定です。

後でＣＳＳによって表示形式を指定しやすくするために、「ｉｄ」と「ｃｌａｓｓ」を定義してますが、無くても構いませんよ。

ちなみにここでは、ウィジェット名にハイフンと数字が付けられる「％１＄ｓ」を定義して、「ｉｄ」が自動でユニークになるようにしています。

同様に「ｃｌａｓｓ」のほうは「ｗｉｄｇｅｔ％２＄ｓ」として、自動でウィジェット名などが定義されるようにしています。

この記述方法はリファレンスで推奨されているやり方ですが、自由に好きな名称をつけるなどの変更しても問題ありませんね。

そして緑字の「ｂｅｆｏｒｅ＿ｔｉｔｌｅ」と「ａｆｔｅｒ＿ｔｉｔｌｅ」は、ウィジェットが表示される際の「タイトル」の前後に付加されるＨＴＭＬタグの指定になります。

やはり同様にして「ｃｌａｓｓ」の指定をしてますが、ここも自由に改変してオッケーですよ。

さて続いて、このウィジェットエリアにセットしたウィジェットが、実際にヘッダー部分に表示されるようにするための手順です。

まずは、親テーマの中にある「ｈｅａｄｅｒ．ｐｈｐ」を子テーマのほうにコピーします。

そして表示させたい部分にコードを挿入しますが、今回は以下のように＜／ｈｅａｄｅｒ＞タグの直前にしました。

<?php if(is_active_sidebar('header-widget')) dynamic_sidebar('header-widget'); ?>
</header>

赤字の部分は、上のウィジェットエリアの作成の際に定義した「ｉｄ」になります。

今回はヘッダ部分にウィジェットを追加できるようにしましたが、同様にすればフッタや記事の上下部分などに追加できるウィジェットエリアも作成できますね。

おわりに

まだまだカスタマイズが必要なところがあるんですが、なかなか簡単にとはいかなくて、アレコレ試しながら調整していくことが必要なテーマですね。

これからも変更を加えた内容を随時追加していこうと思いますよ。

せっかくブログをやるならついでに【チョット小遣い稼ぎ】アフィリエイトをやるのがおすすめ(お得な自己アフィリエイトも)

-ブログの話
-STINGER, WordPress

コメント (4)

comment

しんえいより:

2017年4月21日 12:47 PM

こういうシンプルな細かいカスタマイズ方法を探してもなかなか見つからず、、、。助かりました。

返信
- 岩瀬より:
  
  2017年4月22日 2:13 AM
  
  しんえいさん、コメントありがとうございます。
  お役に立てて、良かったです！
  
  返信
ゼロワンより:

2019年8月1日 1:56 PM

Google検索より飛んできました。
Stinger8をカスタムしているのですが、どうしてもサイドバーの背景が反映されません。
子テーマでも設定しているのですが、!importantをしても反映されないのです。
子テーマはstyle.cssとheader.php、sidebar.phpおよびFunction.phpを編集しています。

なにか変更し忘れなどしているのでしょうか？
教えて頂ければ幸いです。

返信
- 岩瀬より:
  
  2019年8月13日 1:21 AM
  
  ゼロワンさん、
  
  頂いたコメントの内容だけだと状況が分からないので何とも言えないのですが、CSSの他の部分で「!important」による意図しない設定がされてる可能性は無いでしょうか？
  
  あるいは実際に設定は反映されているのに、ブラウザで見てみるとキャッシュのせいで反映されてないように見えるということがよくあります(私もコレで何時間も悩んだことがあります・・・)。
  
  ブラウザのキャッシュをクリアするとか、「Ctrl+F5」などの(ブラウザによってショートカットキーは違いますが)スーパーリロードをして再確認してみてはいかがでしょうか。
  
  力になれなくて申し訳ありませんが、無事解決されることを祈っています！
  
  返信

Message コメントをキャンセル

: ＷｏｒｄＰｒｅｓｓのテーマＳＴＩＮＧＥＲ７で記事の文字の大きさを変更する簡単な方法

ＷｏｒｄＰｒｅｓｓのテーマＳＴＩＮＧＥＲ７の記事の文字サイズを変更する方法を調べてやってみたので、記事にしてみました。プラグインを使って、簡単な２つの手順でできましたので、ご参考になればと。

: ＩＦＴＴＴだけを使ってブログ情報を定期的に画像付きでツイートする方法

相変わらず、Ｔｗｉｔｔｅｒの使い方がいまいち分からないんですが。どうやら最近のブログ界では、過去記事を定期的にツイートするのが常識のようですね。というわけで、今回はそれをＩＦＴＴＴで自動的にやってみた方法を記事にしてみます。

: ＷｏｒｄＰｒｅｓｓを始めて、まず最初に入れるべきプラグインは２つだけ

新しくテーマをインストールして見た目の体裁を変更したら、次はプラグインで使い勝手等を改善しようかなと。ちょっと調べてみたんですが、とりあえず入れるべきプラグインは、以下の２つだけという結論になりました。他にも便利なプラグインはたくさん．．．

: ＷｏｒｄＰｒｅｓｓのテーマＳＴＩＮＧＥＲ７で更新日を非表示にする方法

ＷｏｒｄＰｒｅｓｓのテーマＳＴＩＮＧＥＲ７で「更新日」を非表示にする方法を調べてみました。ＳＴＩＮＧＥＲ７の設定だけでは対応できなくて困りましたが、テーマのファイルを編集することで解決できました。

: ＷｏｒｄＰｒｅｓｓ(ＳＴＩＮＧＥＲ７)のコメント欄の表示・非表示をクリックで切替えるＪａｖａＳｃｒｉｐｔを使った簡単な方法

もちろん訪問者の数が少ないせいもあるんですが、当ブログにコメントを残してくれる人っていないんですよね。それなのに、ＷｏｒｄＰｒｅｓｓのコメント欄って、けっこうスペースを取ってて無駄だなとか思いまして。そのコメント欄をクリックで、表示・．．．

PREV: 辛いっ！【カップ麺レビュー】明星「一平ちゃん夜店の焼そばカラムーチョホットチリ味」を食べた
NEXT: コメディー？【映画レビュー】『教授のおかしな妄想殺人』あらすじ＆感想(ネタバレ無し)