【STINGER5】ブログカード表示やSNSボタン変更などのカスタマイズをしてみました

ダウンロード___STINGER5
昨日は寒い1日であまり外に出たくなかったので、最近は趣味みたいになってきているブログデザインのカスタマイズに取り組んでみました。

取り組んだといっても、独力ではなくすべてネット上に公開されている手法から学んでやってみただけなんですけど、自分でも忘れないように記事にしておくことにします。

スポンサーリンク

テーマカスタマイザー機能を削除する

カスタマイズ前に確認したら、STINGER5の新しいバージョンが公開されていたのでインストールしてみました。最初はどこが新しくなったかもわからなかったのですが、サイドバーの購読や検索窓の配色を変更した子テーマが反映されていないことに気づきました。STINGERでもバージョンアップで、配色のカスタマイズが簡単にできるような機能が追加されたようです。

ブログテーマSimplicityを試用した時は、このカスタマイズの高機能ぶりが魅力に感じたのですが、それに比べるとSTINGER5のカスタマイズ機能は残念ながら開発途中という段階のように思えました。

そこで、このテーマカスタマイザー機能を削除することにしました。function.phpを見たら、なんと親切に削除箇所が明示されていました。この辺がきちんと配慮されているのはSTINGER5の魅力です。

スポンサーリンク

SNSシャア用ボタンのデザインを変更する

次に取り組んだのがSNSシャア用ボタンのデザインを変更することです。次のお二人のサイトで公開されているデータと方法を活用しただけなので、具体的な方法はそちらを参照してください。

SNSボタンのデザインがばらばらだったので自作してみた。(Stinger5カスタマイズ)

困ったときは猫に喋らせろというのが僕の家の家訓なんですよ。たぶん。 さて。SNSシェア用のボタンはほとんどのブログが設置しているのではないでしょうか。 ただ、シェアボタンは各SNSが作っているので、デ

sakueji.com

これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法

イビサの夏が恋しいキャリコ( @calicocatxyz )です。 EDM を聴 …

calico.xyz

スポンサーリンク

記事リンクをブログカード風な表示にする

お気づきでしょうが、SNSシェアボタンの設置のところで参考にさせていただいたお二人のサイトはブログカード風形式で表示してあります。ブログカード表示が利用できるのは「はてなブログ」だけでしたが、今ではこのように「はてなブログ」以外のサイトでもこれに似た表示をする方法がネット上で公開されています。

デザインテンプレートSimplicityでは、デザインカスタマイザー機能でブログカードが表示できるようになっています。また、次のように、function.phpとstyle.cssを変更してSimplicity同様の表示ができるようにする方法も公開されいます。

URLを記入するだけ!はてなブログカード風にWordPress記事も表示させるカスタマイズ方法

9月にはてなブログがリリースしたブログカード、かっこいいですよね。 こんなやつ。 『健康レシピ』スマートフォンサイトのデザインプロセスについて – クックパッド開発者ブログ WordPre

nelog.jp

最初はこの方法でやってみました。この方法は、記事を書いている中でURLを書くだけで簡単にブログ表示ができることが魅力です。

しかし、その後、次のような方法の存在を知ったので、今はこちらの方法を使っています。

【ブログカード風】シンプルに記事をシェアするブックマークレットを作りました

ブログを書くとき、記事へのリンクをどのように貼っていますか? べた書きですか? ShareHTMLですか? GetTabInfoなんて拡張機能を使っている人もいらっしゃるかもしれません。 最近よく見る

sakueji.com

サイドバーにフォローボタンを設置する

これは、次のサイトを参考に、ほとんどコピペだけで設置しました。

【STINGER5】コピペOK!サイドバーにアイコンフォントでSNS各種のフォローボタンを作る

アイコンフォントを使ったフォローボタンのサイト、よく見かけるようになりましたね。 …

shufulife.com

Font Awesomeのアイコンフォントを使う

他の方のブログを見ていると、アイコンフォントがいろいろな場所で使用されているのに気がつきます。そこで、調べてみました。

すると、次のようなサイトを見つけました。これらのサイトを参考にすることで、サイドバーの見出しやメニューにもアイコンフォントを使用することができました。

【STINGER5カスタマイズ】サイドバーの見出しタイトルの前にアイコンフォントを設置

なんとなく、STINGER5のデフォルトのサイドバーの見出しの部分が目立たない気がしたのでちょっとだけアイコン…

smart-phone.783783783.com

WordPressのナビゲーションメニューにFont Awesomeのアイコンフォントを表示させる方法

最近、WordpressのテーマでFont Awesomeを使用しているものも多いです。 このサイトでもFont Awesomeのアイコンフォントを利用しています。 ただ、個々のナビゲーションメニュー

nelog.jp

まとめ

ネット上に公開されている情報をもとに、STINGER5のカスタマイズをさらに行うことができました。ここで紹介した以外に、抜粋表示を削除したり、購読ボタンの位置を変更したりしていますが、そうした情報もたぶんネット上で公開されているのではないかと思います。情報を公開してくださった皆さんに感謝します。