ブログテーマをSTINGER5に変更した理由と初期カスタマイズまとめ

      2015/02/02

当ブログのテーマを、TCDの「Gorgeous」から「STINGER5」に変更しました。テーマを変更するにあたって、最初にカズタマイズを入れた内容や、変更するに至った理由についてご紹介します。

スポンサーリンク

昨年12月分の運営報告記事でちょっとした宣言っぽいことを書いていましたが、当ブログのテーマを、TCDの「Gorgeous」から「STINGER5」に変更しました!

運営報告記事で「テーマを変更しますよ!」と宣言したのが今年の1月6日。そして実際にテーマを変更したのた1月28日。所要期間は22日ですか…。実行力と推進力の弱さを露呈しちゃってるなぁ。

STINGER5に入れた初期カスタマイズまとめ

見ていただくとわかると思いますが、STINGER5のデフォルト(初期状態)から幾つかカスタマイズを入れてます。細かい点などを含めると網羅できていませんが、とりあえず覚えている内容をつらつらと。

テーマカラーを変更

STINGER5は黒やグレーを基調としたテーマカラーですが、ブラウンを基調とした暖色系のテーマカラーに変更しました。そして以前の当サイトはブルーを基調とした寒色系だったので、それと比較しても大幅なカラーチェンジですね。

せっかくテーマを変更するので、イメージカラーも一新させてみようかなと。

PC用デザインのコンテンツ幅を広げた

STINGER5はレスポンシブデザインが採用されており、PC用デザインのコンテンツ幅が最大980pxで設定されていますが、その最大幅を1080pxにまで広げました。その意図としては、

  • メインコンテンツ幅:750px
  • サイドメニュー幅:300px
  • カラム間の余白:30px

という配分にして、メインコンテンツの幅をデフォルトよりちょっとだけ広げたかったんです。

サイドメニューを左側に

STINGER5はサイドメニューが右側に配置されていますが、それを左側に入れ替えました。これまでずっとサイドメニューを右側に配置したデザインを使ってきたので、左側に持ってくることで何か変化があるのか?ということを、ちょっと検証してみたくなったという単純な理由です。

コンテンツ上部におすすめ記事を表示

これはSTINGER5には無いのですが、どうしても取り入れたかった要素なんです。コチラに関してはさすがにHTMLレベルでカスタマイズを入れています。

ちなみに表示されるコンテンツは、わたしがピックアップした記事に対して、管理画面からカスタムフィールドを追加して値を付与し、その値が付与されている記事だけをランダムで4つ表示させるという方法を採っています。

PC用デザインの記事一覧を2列表示に

これもPC用デザインだけなのですが、TOPページなどの記事一覧を2列表示にしています。ちなみに一番新しい記事だけは、幅を広く取って1列表示にしていて、最新記事とそれ以降の記事との見た目を差別化させています。

見出し、強調、引用、その他テキスト装飾の変更

h2タグやh3タグなどの見出しやstrongタグの強調、blockquoteタグの引用などなど、文字の装飾関係も自分好みに変更しています。これらの要素は「記事の読みやすさ」にダイレクトに関わってくるので、細かいですが気をつかっている点でもあります。

以下はテキスト装飾系タグの表示サンプル(画像)です。
stinger5-renewal-02
基本的には以前のデザインから引き継いだものが多いですが、カラーなどは一新しています。

タイトルの前にアイキャッチ画像を配置する

一般的なブログは記事のタイトルがまずあって、その後にアイキャッチ画像を配置するパターンが多いと思いますが、それを逆にして、先にアイキャッチ画像を持ってくるようにしました。

これはもう完全に趣味の世界ですね。よりアイキャッチ画像を印象づける効果があるかな?なんて考えています。

ブログテーマをSTINGER5に変更した理由

ではなぜ、テーマをGorgeousからSTINGER5に変更したのか?第一に、Gorgeousを導入した当初にもくろんでいた「ブログ内の回遊率をUPさせたかった」という狙いが完全に外れたということがあります。

ですが一番大きい理由は、Gorgeousのデザインのままでは「気持ちよく記事が書けなくなってきた」ということです。

Gorgeousというテーマは、それだけでもう完成されたテーマです。特にカスタマイズなんかしなくても、洗練されたデザインが最初から実装されています。

ただそれが結果的に、わたしにとっては逆効果になってしまったのかもしれません。最初は気に入って使っていたものに、だんだんと愛着が持てなくなってきたんです。

じゃあ、Gorgeousに自分好みのカスタマイズを入れたらいいじゃん、と考えると思いますが、Gorgeousはあまりカスタマイズ性を重視していないのか、いろいろ変えていこうと思うと、ちょっと作業しにくいテーマなんですよね。

その点STINGER5はシンプルな構造で、とにかくカスタマイズがやりやすいんです。WEBデザイナーでない私でも、自分好みのデザインを比較的容易に形にすることができます。

ということで、今回テーマを変更した理由は、「自分のブログに対するモチベーションを、いま一度引き上げるため」という要素が、一番大きかったように思います。

「勉強へのヤル気を引き起こすために、文房具やノートなどの勉強道具一式を新しく買い揃えてみた」というような感覚にも似ていますね。

さいごに

デザインには「正解」と言えるようなものは無いですし、「自分好みのカスタマズ」なんて、はっきり言ってもう自己満足の世界です。でもわたしにとってはその自己満足こそが、気持ちよくブログを続けていくうえでの大切な要素なんですよね。

ただそれでも、単なる自己満足だけで終わってしまわないように、STINGER5の良さである「シンプルさ」を損なうことなく、それでいて記事が読みやすいデザインになるように、自分なりに追求してみたつもりです。

このわたしの自己満足=センスを、わたし以外の人にも気に入ってもらえることができたら嬉しいんですけどね。そんなことを考えながら、「あーでもない、こーでもない」と、デザインをチマチマと弄る日々は、これからも続きそうです。

 - ブログ論/運営

スポンサーリンク

  関連記事

体裁を気にしていたらブログなんて続けられない

初投稿には似つかわしくないタイトルですが、何を隠そうブログを始めたのが今回で3回目(いや4回目かな? …

寝込んじゃったとしてもブロガーとしてやれる7つの行動

体調不良などの理由でもしブログが書けなくなったら、あなたはどうしますか?そんな死活問題な状況下で、ブ …

ブログに埋め込んだYoutubeやGoogleマップをスマホではみ出さないようにする方法

WordPressなどで構築したブログの記事内にYouTubeやGoogleマップなどの外部コンテン …

ブログ運営に「画像最適化ツール」を活用すべきか検証してみた

これまで当ブログでは、記事に利用する画像のファイルサイズなどは特に気にしていませんでした。でもやっぱ …

iPhoneとキーボード
ブログ記事の校正やチェックには絶対にスマートフォンを使ったほうがいい

ブログに記事を書いて公開したあとは、絶対にスマートフォンでも表示をチェックしましょう。PCで記事を書 …

写真が先か、テキストが先か、それが問題だ。

ブログ記事の2大要素であろう「写真とテキスト」。その位置関係が与える効果について、わたしなりに深く掘 …

そのブログ記事、あなたなら読みますか?

自分のブログ記事をより多くの人に読んでもらうために、大切にしたいことを整理してみました。それはズバリ …

下書き記事をチェックしている風の女性
WordPressで下書き記事を一部の人だけに限定公開できるプラグイン

WordPressで下書き記事を一部の人だけに限定公開できるプラグイン「Public Post Pr …

ブログって何を書けばいい?ブログを書く上で大事にしたい9つの視点

photo credit: pennstatenews via photopin cc ブログって何 …

ブログ更新が続けられない!初心者ブロガーに刺さるありがたいお言葉

昨年の11月末から始めたこのブログですが、正直悩んでます。それは初心者ブロガーが必ず陥るであろう悩み …