[WordPress]STINGER5の設定をしてみた

WordPressテーマを「STINGER5」に変更したので、設定したメモです。

背景を黒にしてみた→色々見えなく！
h3タグの先頭にアイコンを付ける
Popular PostsをSTINGER5っぽくする
サイドバーの見出しの先頭にアイコンを付ける
iframeの表示がおかしい？
ファビコンが必ずスティンガー？Σ(ﾟロﾟ)oﾞ
まとめ
1. 関連

背景を黒にしてみた→色々見えなく！

この項目については、別記事として書き直しました。

[link url=”https://popozure.info/20150203/6200″]

h3タグの先頭にアイコンを付ける

見出し行の先頭にチェックマークのアイコンが付いているサイトをあちらこちらで見かけて、「これってテーマだったりするのかな？」と調べてみて、STINGER3を見つけたのですが…STINGER5では、見出しのチェックマークが無くなっていました。

その代り（？）にh2見出しタグの行が「ふきだし」の形になっているので、「Search Regex」で「<h3>」→「<h2>」、「</h3>」→「</h2>」に置き換えるのが正解なのかも知れません。

（そもそも、h2タグを飛ばしてh3タグを使うのはお行儀が悪いそうです。）

さて、STINGER5ではヘッダー部（header.php）にWebフォントである「FontAwesome（フォント・オーサム）」の定義がしてあるため、フォントファミリー（font-family）に「FontAwesome」を指定するだけで、様々なアイコンが文字として表示できるそうです。

[link url=”http://calico.xyz/2014/09/14/stinger5-6/”]

今までWebフォントって使ったことが無かったのでやり方が分からなかったのですが、楽しいですね、これ。

基本的にはUnicodeを直接指定するのですが、FontAwesomeのサイトの「Icons」から文字を探すことが出来ます。

[link url=”http://fortawesome.github.io/Font-Awesome/”]

先ほどのサイト様を参考にしながら、style.cssに下記の行を追加しました。

[css title=”style.css” mark=”5-11″ start-line=”215″]h3 a {
color: #333;
text-decoration: none;
}
.post h3:before {
content: ‘\f044’;
font-family: FontAwesome;
font-size: 32px;
color: #002288;
margin-right:5px;
}
.post h4{
padding:10px;
margin-bottom:10px;
background-color:#f3f3f3;
}[/css]

見出しにUnicode「\f044」のアイコンが表示されるようになりました。

フッターのh3タグのところにアイコンが付かないように「.post」を書いたつもりでしたが、どうやらコメント欄の「Comment」と「Message」のところもh3タグが使われているようです。

コメント欄のh3にアイコンを付けないように、以下のコードを追加してみました。（ちょっと姑息的？）

[css title=”style.css” mark=”8-10″ start-line=”219″].post h3:before {
content: ‘\f044’;
font-family: FontAwesome;
font-size: 32px;
color: #002288;
margin-right:5px;
}
#comments h3:before {
content: ”;
}[/css]

サイドバーの見出しの先頭にアイコンを付ける

記事内のh3タグにアイコンを付けた応用で、サイドバー見出しの先頭にもアイコンを付けてみます。

style.cssのサイドバーの見出しの辺りに追加してみます。

[css title=”style.css” start-line=”260″ mark=”2-12″]/* サイドバーの見出し */
aside {
color: #666;
}
aside h4:before {
content: ‘\f1ae’;
font-family: FontAwesome;
font-size: 16px;
position:relative;
top:2px;
margin-right:5px;
}
aside h4 {
font-size: 16px;
font-weight: bold;
padding: 10px;
margin-bottom: 20px;
line-height: 28px;
}[/css]

背景が黒だと、ウィジェットによっては文字が黒色で見えない場合があるので、「aside { color: #666; }」で少し明るい文字色を指定しておきます。

「content:」の後にある「\f1ae」の部分を変更すれば他のアイコンにすることができます。

iframeの表示がおかしい？

なんだかiframeを使うと、直後に凄い余白が出来ます。

具体的にはAmazon.co.jpの商品リンクを貼ったりすると横に並ばずに3～4行ずつ改行されてしまいました。

iframeを使っているカウンター表示やはてなブログカードなんかの表示も同じ現象が起きます。

メモを貼る「WP-Note」もiframeを使っているので、下に3～4行ほど改行が入ってしまいます。

（WP-Noteについては、左側が途切れているのも気になりますが、そっちはとりあえず放置。）

←枠の左側が途切れてる？

どうやら、YouTubeの埋め込みコードにクラスを付けるための処理が原因のようです。

[link url=”http://takaslife.com/2014/11/17/stinger5-iframe-youtube/”]

参考にして、function.phpの「//iframeのレスポンシブ対応」のところを修正します。

[php title=”function.php” start-line=”177″ mark=”4″ decode=”true” wrap=”true”]//iframeのレスポンシブ対応
function wrap_iframe_in_div($the_content) {
if ( is_singular() ) {
$the_content = preg_replace(‘/<iframe[^>]+?youtube.com[^<]+?<\/iframe>/is’, ‘<div class=”youtube-container”>${0}</div>’, $the_content);
}
return $the_content;
}
add_filter(‘the_content’,’wrap_iframe_in_div’);[/php]

「$the_content = preg_replace(…」で始まる二行を削除して、差し替えるだけのようです。

「『iframe』が来たら『YouTube』だと思え！Σ(ﾟロﾟ)oﾞ」という感じの処理だったようで、改行が3～4行ずつ入ったのでは無くて、動画を想定して横サイズに対して縦サイズを調整する動きだったようです。

ファビコンが必ずスティンガー？Σ(ﾟロﾟ)oﾞ

InternetExplorerやChromeのタブなどに表示される、サイトのフェイバリットアイコン（favorite icon；favicon）を設置しているはずなのですが、何故かSTINGER5の「５」のアイコンが表示されていました。

ヘッダー（header.php）で、テンプレート（親テーマ）のロゴアイコンを取得するようになっていたためのようです。

[link url=”http://calico.xyz/2014/08/30/favicon-2/”]

header.phpのlogo.icoを指定している場所を変更すれば良いようです。

面倒だったら、stinger5のインストールフォルダ配下の「/image/logo.ico」を入れ替えてしまってもよいですね。

まとめ

STINGER3→STINGER5という同じシリーズの入れ替えだったのでサクサク終わると思っていたものの、設定変更などに結構時間がかかりました。

STINGER3のときには非表示にしていた「ヘッダ画像」を設置してみました。

とりあえず近くにあったモノをかき集めてパチリ…。

床に転がってたHDDをかき集めたら7台あった…多いなっ！！Σ(ﾟロﾟ)oﾞ