STINGER5の細かすぎて伝わらないカスタマイズ

「困ったブログ」をご覧いただきありがとうございます。
ライターのITOKENこと（@itoken456)です。ちょっと偉そうにコード書いてますが、本人はHTMLもCSSも理解していません。誤りがありましたらSNSでご指摘下さい。

WordPressの人気テーマSTINGERシリーズの最新版「STINGER5」が正式公開されました。

使ってみた感想は・・・

STINGER５イカスなー。

— イトケン (@itoken456) 2014, 10月 21

下記からDLできます。
STINGER５：http://wp-fun.com/dl/

あとこの記事以降に書いた最新のカスタマイズ記事はこちら

まずやること

子テーマを作る。

下記コードをテキストに貼り付けて、子テーマのディレクトリを同じ階層につくり、アップロードします。********は元バージョンの数字を入れてください。

@charset "UTF-8";
/*-------------------------------------------------------
Theme Name: <子テーマの名前>
Template: stinger5ver********
Description: <子テーマの説明>
Author: <あなたの名前（ハンドルネーム）>
Author URI: <あなたのブログのURL）>
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
Version: 20140823 (for stinger5ver********)
-------------------------------------------------------*/
@import url('../stinger5ver********/style.css');

ヘッダー

イメージツールバーを非表示にする

エクスプローラー(IE)でWeb ページからの画像を保存、電子メールで送信、印刷することを迅速にかつ容易にするための機能です。画像の隅にイメージツールバーが表示されないようにします。※Internet Explorer 7.0以降 ではイメージツールバーは表示されません。ヘッダーに書き加えます。

<meta http-equiv="imagetoolbar" content="no" />

記事部分

文頭にアイキャッチ画像を挿入する。

文頭にアイキャッチ画像を表示させます。(‘large’)で画面いっぱい(580px)広がります。( ‘180, 180’)で指定サイズに。full,medium,smalなどの表記でもOk。single.phpのアイキャッチ画像を表示させたい場所に記載します。

<?php the_post_thumbnail('large'); ?>

記事中の画像にCSSでフレームをつけます。

記事中の画像にフレームを付けます。写真の背景とブログの背景が同色だと境目が分かりにくくなります。写真にフレームがつくようでスタイリッシュさもアップします。

.post img {
border:solid 1px #ccc;
padding:3px;
}

はてなブックマークボタンのデザインを合わせる

デフォルトだとはてなブボタンだけデザインが異なるので、合わせます。

http://b.hatena.ne.jp/guide/bbutton

ブックマーク数表示を「表示(バーティカル)」でOkです。

SNS.phpとSNS-TOP.phpの記述を置き換えます。

メインコンテンツを囲います。

デフォルトではコンテンツとナビゲーションメニューがくっついているので、少し余白を入れ、中央コンテンツ部分を線で囲います

main {
border: 1px solid #ccc;
margin-top: 10x;
}

TOPページにsingle.phpのタグリンクをもってくる

TOPページにタグリンクをsingle.phpのタグリンクに入れ替えました。タグは色で囲います。TOPページの一覧表示は「itiran.php」をさわります。

<p class="tagst"><i class="fa fa-tags"></i>&nbsp;-
<?php the_tags('', ', '); ?>
</p>

子テーマのスタイルシートで調整します。

.tagst a {
color: #666;
text-decoration: none;
background-color: #e9ebfa;
border-radius: 6px;
margin: 3px;
padding: 3px 3px 3px 3px;
}

ソーシャルボタンを右揃えに

デフォルトでは左揃えになっています。日本人は右利きが多いので、特にスマホ操作時親指の近くにSNSボタンが来るように配置してみました。右利きの場合左揃えだと親指をぐっと伸ばさないとボタンが押せなかったので。

.sns .snsb li {
float: right;
}

フッター

背景色を変更する

border-radiusで角を落としてあります。囲いも入れてます。

#footer {
background-color: #eeeeee;
border-radius: 8px;
border: 1px solid #ccc;
}

コピーライツにブログ開始年を入れる

フッターの「Copyrightc 困ったぶろぐ,2014 All Rights Reserved.」を
「Copyrightc 困ったぶろぐ,20▲▲-2014 All Rights Reserved.」とブログの開始月を入れます。

<p class="copy">Copyright&copy;
 <?php bloginfo('name');?>
 ,20▲▲-<?php the_date('Y');?>
 All Rights Reserved.</p>

サイドバー

カテゴリーを段組して2列に

カテゴリーが長くなると嫌なので、見やすいように段組します。このブログでは親カテゴリー⇒子カテゴリーと階層で設定してます。子カテゴリーだけを段組し2列で表示させます。

ul.children {
margin-left: 15px;
display:block;
column-count:2;
-webkit-column-count:2;
-moz-column-count:2;
}

ついでにやっとくべきソーシャルボタンの設定

LINEへおくるボタンの設置

LINEへおくるボタンを設置します。スマホからの流入を増やす手立ての一つです。記事内容(アプリ記事やゲーム関係)によってはラインでも大きく広まることがあります。

縦長のボタンなら、width=”39″ height=”65″設定すると、他の縦長吹き出しSNSボタンと高さがぴったりになります。

ボタン画像のURLは
https://media.line.me/howto/ja/
でダウンロードして、メディアにアップロード後画像URLをコピーしてます。

<li>
<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="ボタン画像のURL" width="39" height="65" alt="LINEで送る" /></a>
</li>

PR困ったぶろぐも利用中 高性能レンタルサーバー『シックスコア』

Facebookの「Like Box」をレスポンシブ対応にする

「Like Box」は何も設定をしないとスマホサイトでレイアウトが崩れたりはみ出したりして見栄えが悪いです。STINGER５はレスポンシブWebデザイン対応です。サイドバーにLike Boxを張っているとはみ出して横に広がります。

Facebookプラグイン「Like Box」の横幅を可変にしてレスポンシブにする方法

上記サイトで紹介されているコードを記載でOKのはずが、何故か反映されず。

仕方ないのlike boxの幅を決めちゃいます。サイドバーならdata-width=”300″でOK。

<div class="fb-like" data-href="URL" <span style="color: #ff0000;">data-width="300"</span> data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>

以上です。