1円・1%にこだわる節約系ライフハックブログです

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

stinger5aa



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

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

使ってみた感想は・・・

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

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

まずやること

PAK85_MBAdesagyou20140312500_mini

子テーマを作る。

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

@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;
}

 

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

OZPaA_maiine_mini

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」は何も設定をしないとスマホサイトでレイアウトが崩れたりはみ出したりして見栄えが悪いです。STINGER5はレスポンシブ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>

以上です。

              
スポンサーリンク

 この記事がお役に立ちましたらポチポチして頂けると嬉しいです
 フォローしていただけると新着記事が届きます。

follow us in feedly
    


ブログ運営」の関連記事はこちらです

コピーする

新着記事はこちらです

no image
TEST

   未分類

種類 色 値段 生産地 りんご あか 200円 青森県 みかん オレンジ 350 …

DSCF5aaaa292
岐阜県中津川へ行ったら押さえておきたいご当地グルメ・お土産

   グルメ

itoken家では、「栗きんとん」解禁に合わせて岐阜県中津川まで足を運ぶのが例年 …

DSCF547aaa5
岐阜県中津川の有名店栗きんとんを食べ比べしてみた

   グルメ

中津川で各社メーカーの栗きんとんを一個ずつ買ってきました。全部はレポできないです …

summer-darling-thatsdarling
転職面接成功の秘訣はイメージコンサルティング=自身の魅力を認識し発信すること

   仕事

「イメージコンサルティング」というのは「なりたい自分になれるようにする」ことです …

4bb247bc796f491465a182757b3220bb_s
転職に向けての面談練習でしっかり押さえておくべき4つの関門

   仕事

書類選考を通過するといよいよ面談を迎えます。 転職における中途採用の面談では、比 …

reading-834944_1280
リーダーズカードの還元率改悪決定!次の乗換先はリクルートカードプラスな理由

リーダーズカードのポイント付与基準の改悪が発表されました。 残念ながら大幅に還元 …

ship-helm-759954_1280
上司を上手にコントロールする「ボスマネジメント」という舵取り法

   仕事

「ボスマネジメント」という言葉をご存知でしょうか。 アメリカなどではよく知られて …