WordPressテーマを「STINGER5」に変更したので、設定したメモです。
背景を黒にしてみた→色々見えなく！
この項目については、別記事として書き直しました。
h3タグの先頭にアイコンを付ける
見出し行の先頭にチェックマークのアイコンが付いているサイトをあちらこちらで見かけて、「これってテーマだったりするのかな？」と調べてみて、STINGER3を見つけたのですが…STINGER5では、見出しのチェックマークが無くなっていました。
その代り（？）にh2見出しタグの行が「ふきだし」の形になっているので、「Search Regex」で「<h3>」→「<h2>」、「</h3>」→「</h2>」に置き換えるのが正解なのかも知れません。
（そもそも、h2タグを飛ばしてh3タグを使うのはお行儀が悪いそうです。）
さて、STINGER5ではヘッダー部（header.php）にWebフォントである「FontAwesome（フォント・オーサム）」の定義がしてあるため、フォントファミリー（font-family）に「FontAwesome」を指定するだけで、様々なアイコンが文字として表示できるそうです。
今までWebフォントって使ったことが無かったのでやり方が分からなかったのですが、楽しいですね、これ。
基本的にはUnicodeを直接指定するのですが、FontAwesomeのサイトの「Icons」から文字を探すことが出来ます。
先ほどのサイト様を参考にしながら、style.cssに下記の行を追加しました。
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;
}
見出しにUnicode「\f044」のアイコンが表示されるようになりました。
フッターのh3タグのところにアイコンが付かないように「.post」を書いたつもりでしたが、どうやらコメント欄の「Comment」と「Message」のところもh3タグが使われているようです。
コメント欄のh3にアイコンを付けないように、以下のコードを追加してみました。（ちょっと姑息的？）
.post h3:before {
content: '\f044';
font-family: FontAwesome;
font-size: 32px;
color: #002288;
margin-right:5px;
}
#comments h3:before {
content: '';
}
Popular PostsをSTINGER5っぽくする
今までも、人気記事を表示する「WordPress Popular Posts」を設置していましたが、STINGER3のNEW POSTとスタイルが違過ぎて悩ましい感じではありました。
STINGERのNEW POSTとかと同じクラスを指定することで、一体感のある表示に変更できるようです。
参考にしつつも、以下のように設定してみました。
最近の投稿のサムネイルに合わせて、100×100のサムネイルも付けておきます。
サイドバーの見出しの先頭にアイコンを付ける
記事内のh3タグにアイコンを付けた応用で、サイドバー見出しの先頭にもアイコンを付けてみます。
style.cssのサイドバーの見出しの辺りに追加してみます。
/* サイドバーの見出し */
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;
}
背景が黒だと、ウィジェットによっては文字が黒色で見えない場合があるので、「aside { color: #666; }」で少し明るい文字色を指定しておきます。
「content:」の後にある「\f1ae」の部分を変更すれば他のアイコンにすることができます。
iframeの表示がおかしい？
なんだかiframeを使うと、直後に凄い余白が出来ます。
具体的にはAmazon.co.jpの商品リンクを貼ったりすると横に並ばずに3～4行ずつ改行されてしまいました。
iframeを使っているカウンター表示やはてなブログカードなんかの表示も同じ現象が起きます。
メモを貼る「WP-Note」もiframeを使っているので、下に3～4行ほど改行が入ってしまいます。
（WP-Noteについては、左側が途切れているのも気になりますが、そっちはとりあえず放置。）
どうやら、YouTubeの埋め込みコードにクラスを付けるための処理が原因のようです。
参考にして、function.phpの「//iframeのレスポンシブ対応」のところを修正します。
//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');
「$the_content = preg_replace(…」で始まる二行を削除して、差し替えるだけのようです。
「『iframe』が来たら『YouTube』だと思え！Σ(ﾟロﾟ)oﾞ」という感じの処理だったようで、改行が3～4行ずつ入ったのでは無くて、動画を想定して横サイズに対して縦サイズを調整する動きだったようです。
ファビコンが必ずスティンガー？Σ(ﾟロﾟ)oﾞ
InternetExplorerやChromeのタブなどに表示される、サイトのフェイバリットアイコン（favorite icon；favicon）を設置しているはずなのですが、何故かSTINGER5の「５」のアイコンが表示されていました。
ヘッダー（header.php）で、テンプレート（親テーマ）のロゴアイコンを取得するようになっていたためのようです。
header.phpのlogo.icoを指定している場所を変更すれば良いようです。
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo.ico" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
面倒だったら、stinger5のインストールフォルダ配下の「/image/logo.ico」を入れ替えてしまってもよいですね。
まとめ
STINGER3→STINGER5という同じシリーズの入れ替えだったのでサクサク終わると思っていたものの、設定変更などに結構時間がかかりました。
STINGER3のときには非表示にしていた「ヘッダ画像」を設置してみました。
とりあえず近くにあったモノをかき集めてパチリ…。
床に転がってたHDDをかき集めたら7台あった…多いなっ！！Σ(ﾟロﾟ)oﾞ
コメント
突然すみません。
ワードプレス、css初心者です。
コメント欄についてなんですが、自分のサイトのコメント欄がズレてしまってなおし方がわからず 汗 何かおわかりになる様でしたら対策を教えて頂けないでしょうか？
********さん、コメントありがとうございます。
本人ご希望によりお名前等を伏せておきました。
コメント欄がズレてしまうとの事でしたが、実際にズレているページなどを見させていただくと助言できる場合もあります。
またお寄りの際にはもう少し状況など伺いたいと思います。