Stinger8 カスタマイズ事例

この記事のURLとタイトルをコピーする

リリースされてからかなり経つStinger8ですが、これまでにやってきたカスタマイズをまとめてみようと思います。
Stingerシリーズは、Stinger3からいろいろ使用させていただいてます。
当時は、子テーマを使うことなどなく直接、テーマを直接カスタマイズしていましたね。
今から考えると随分と大胆なことをやっていたなと思いますが・・・
Stinger8子テーマを使ってカスタマイズした事例をいろいろと紹介させていただきます。

 

目 次

ヘッダーにお問い合わせを表示する

Stinger8ノーマルヘッダー
上記は、Stinger8のノーマルヘッダーです。
タイトルだけが左側にあるのですが、右側にお問い合わせを表示させたいと思います。
 
 
Stinger8ヘッダーにお問い合わせ
上記とは違うサイトですが、ヘッダーにお問い合わせを表示してみました。
子テーマをカスタマイズしてみました。
参考にしたのは、Stinger PLus 2のソースを流用しましたが、スタイルシートの加減でちょっとStinger PLus 2より中央に寄ってる感じですが・・・
 
 
Stinger Plus2
上記は、Stinger PLus 2のキャプチャです。
ちょっとStinger8の方がちょっと中央に寄ってる感じがしますね。
このカスタマイズは、header.phpをカスタマイズします。
Stinger PLus 2のようにウィジェットに入れずにheader.phpに直接書き込んでいます。
ちょっと工夫したらウィジェットにできるかもしれませんね
下記にソースの違いを表示します。

上記がノーマルのソースですが、Stinger PLus 2を参考に下記のようにカスタマイズしてみました。

28行目と29行目が追加されただけのことですが・・・
header.phpを編集する場合に文字コードがちゃんとUTF-8であることを確認しておいてください。
Windowsの場合によくShift-JISになってしまってる場合があるので・・・

 

ヘッダー画像をスライダーに変更

Stinger8ノーマルヘッダー
次はヘッダーカスタマイズつながりでヘッダー画像をスライダーに変更してみました。
 
 
Stinger8ヘッダーカスタマイズ
スライダーが表示されるのはトップページだけですが、詳しい内容は下記の記事を参考にしてください。


 
MetaSliderというプラグインを使って実現しています。

 

ソーシャルブックマークをLIONBLOG風に変更

Stinger8ノーマルソーシャルブックマーク
ノーマルのStinger8のソーシャルブックマークですが、今はもうないGoogle+のブックマークがあったり2段になっているとかあまり筆者の好みではありません。これを好みのLIONBLOGのようなソーシャルブックマークに改造してカウントを表示できるようにしたいと思います。
 
 
Stinger8記事ヘッダー部分
上記は、Stinger8のカスタマイズした記事のヘッダー部分です。
表示されているソーシャルブックマークがLIONBLOG風というかパクったというかそのソーシャルブックマークです。
また、トップページにもソーシャルブックマークが表示されるのでそれはhome.phpをカスタマイズして非表示にしました。
主にカスタマイズするのは、sns.phpになります。
また、Twitterのカウント数を表示させるのは下記の記事を参考にしてください。


 
 
sns.phpのソースを比較してください。

上記がノーマルなsns.phpで下記がカスタマイズ後のソースになります。

下記にスタイルシートの変更部分を表示します。
カスタマイザーにある「CSSを編集」というところにコピペしてください。

このコンテンツを閲覧するにはログインが必要です。お願い . あなたは会員ですか ? 会員について

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!