わたしがSTINGER3でカスタマイズしたことをまとめてみた

      2014/08/06

STINGER3をテーマにした当ブログで、わたしがこれまでに実装したカスタマイズの内容を、まとめてご紹介します。簡単にカスタマイズすることができるものばかりですので、どれか1つでも気になるカスタマイズがあれば、ぜひ参考にしてみてください!

わたしがSTINGERでカスタマイズしたことをまとめてみた

当ブログのテーマをSTINGER3に変更してから、はや半年ほどが経過しようとしています。その間、大小さまざまなカスタマイズを実装して、そのうちの幾つかは、記事としてご紹介してきました。

その甲斐あってか、お褒めの言葉をいただいたり、記事を紹介していただいたり、ご質問をいただいたりと、多少なりの反響をいただくことができました。ほんとうにありがとうございます!

ということで今回は、STINGER3をテーマにした当ブログで、わたしがこれまでに実装したカスタマイズの内容や、それに関連する内容を、まとめてご紹介します。

STINGER3でブログを始めたばかりの人や、これからSTINGER3のカスタマイズをやってみようと考えている人に、少しでもお役に立つことができれば幸いです。

スポンサーリンク

わたしがSTINGER3でカスタマイズしたこと

ヘッダーにオリジナルのロゴを配置

先ずは、ブログの顔となる部分のヘッダーに、オリジナルのロゴを配置しました。ブログのタイトルをテキストで表示させるだけでは、どうしても印象が薄くなってしまいますからね。あと、背景色もあわせて変更しています。

オリジナルのロゴは、以下の記事で紹介した「Squarespace Logo」というサービスを利用しました。簡単にカッコイイロゴを作ることができるので、オススメですよ。

フラットデザインなロゴが3分で作れる!「Squarespace Logo」を試してみた

フッターを3カラムにカスタマイズ

つぎに、足元もオシャレにカスタマイズしたい!ということで、フッターをコピーライトだけのシンプルなものから、ボリューム感のある3カラムのフッターにカスタマイズしました。あと背景色もヘッダーと同様に、デフォルトから変更しています。

STINGER3のフッターを3カラムにカスタマイズしてみた

「関連記事」表示を横並びにカスタマイズ

記事が増えてくると、「関連記事」の表示部分がタテに長くなり過ぎちゃうので、横並びの表示にカスタマイズしました。これでムダに長い縦スクロールのストレスから開放されて、スッキリとした見た目にすることができます。

STINGER3の「関連記事」表示を横並びにカスタマイズしてみた

コメント欄をデフォルトからFacebookコメントにカスタマイズ

記事のコメント欄は、スパムコメントがほとんどで有効活用されていなかったので、Facebookのコメント欄にカスタマイズしました。単にスパムコメントが排除できるだけでなく、Facebookのタイムラインやニュースフィードにもコメントが載るので、一石二鳥なカスタマイズですよ。

WordPressのコメント欄をデフォルトからFacebookに変更してみた【STINGER3】

細かい装飾にWEBフォントのアイコンを入れる

パンくず表示や記事の公開日、カテゴリー表示などの細かい部分を、WEBフォントのアイコンで装飾しました。こういった細かいところにこそ、手を抜かずにこだわることで、ブログ全体の印象がグッと良くなります。

WEBフォントで簡単に!STINGER3の細かいところにアイコンを入れてみた

CSSとWEBフォントだけで作ったSNSシェアボタンを配置

記事の直下に、CSSとWEBフォントだけで作ったSNSシェアボタンをどデカく配置しました。これで少しはシェアしてもらえる件数が増えたかな?

CSSとWEBフォントだけで作ったSNSシェアボタンをSTINGER3に入れてみた

プロフィールやサムネイルの画像を丸く切り抜く

最近よく見かけるフラットデザインのエッセンスを取り入れるべく、プロフィールやサムネイルの画像を丸く切り抜きました。もちろん、こちらはCSSを使ったカスタマイズなので、すでにアップした画像を、全て丸く切り抜くなんて途方もない作業をする心配は、もちろんありません。

CSSを使ってプロフィールやサムネイルの画像を丸く切り抜く方法

titleタグ先頭に入る改行とスペースを除去

タイトルタグのちょっとした崩れを直しました。見た目には特に影響ないのと、SEO的に深刻な問題があるということでもないと思いますので、気になる方だけどうぞ。

STINGER3のtitleタグ先頭に入る改行とスペースを消してみた

さいごに

改めてカスタマイズ内容をまとめてみると、我ながら結構いろんなことをやってますね。ですが、どれも簡単にカスタマイズすることができるので、1つでも気になるカスタマイズがあれば、ぜひ参考にして、あなたのブログにも取り入れてみてください!

あと、今の形が当ブログの最終形だとは、まったくもって考えていません。まだまだ、試したり、改善しないといけない点はいっぱいあります。

今後、実装するカスタマイズについても、できるだけ記事にして、皆さんにもわかりやすい形で共有させていただきたいと思います!

 - ブログカスタマイズ

スポンサーリンク

  関連記事

CSSとWEBフォントだけで作ったSNSシェアボタンをSTINGER3に入れてみた

CSSとWEBフォントだけで作ったSNSシェアボタンを、STINGER3に導入する方法をご紹介します …

WordPressでメディアを挿入のリンク先を最初からなしに設定する方法

WordPressで投稿の本文に画像メディアを挿入する時、リンク先をメディアファイルではなく、最初か …

WordPressのテーマをSTINGER3に変更してみた

ブログを始めて少なくとも数ヶ月はほとんどアクセスなんてありませんよっ!なーんてことは重々承知のつもり …

STINGER3の「関連記事」表示を横並びにカスタマイズしてみた

STINGER3の「関連記事」表示を横並びにカスタマイズする方法をご紹介します。必要以上に縦長になっ …

WordPressのコメント欄をデフォルトからFacebookに変更してみた【STINGER3】

当ブログですが、まだそれほどアクセスは無いはずなのにしばしばスパムコメントが入ってきます。不思議です …

気持ちいいエフェクトのスライドメニュー「Off-Canvas Menu Effects」を入れてみた

スライドメニューを表示するときのエフェクトが気持ちいい「Off-Canvas Menu Effect …

STINGER3のtitleタグ先頭に入る改行とスペースを消してみた

photo credit: Huasonic via photopin cc 実はさっき気がついてし …

WEBフォントで簡単に!STINGER3の細かいところにアイコンを入れてみた

WEBフォントを使って、簡単にアイコン装飾を行う方法をご紹介します。細かいところまでに気をつかえば、 …

STINGER3のフッターを3カラムにカスタマイズしてみた

個人のブロガーは、記事の執筆はもちろんのことながらブログのデザインにも多少は気を配って、自分でカスタ …

CSSを使ってプロフィールやサムネイルの画像を丸く切り抜く方法

最近よく見かける、プロフィールの画像やサムネイルの画像なんかを丸く切り抜いたデザイン。これは丸く切り …