ブログテーマを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の良さである「シンプルさ」を損なうことなく、それでいて記事が読みやすいデザインになるように、自分なりに追求してみたつもりです。

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

 - ブログ論/運営

スポンサーリンク

  関連記事

有馬富士公園のコスモス
わたしがブログ用の写真を上手に撮影するために気をつけている7つのこと

ブログ用の写真を上手に撮影するために、わたしが気をつけている7つのことをご紹介します。ブログ記事にと …

有名ブロガーたちが実践している名物コーナーをまとめてみた

最近になって当ブログは平均1日1記事のペースで投稿していますが、できればもう少し投稿のペースを上げた …

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

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

直帰率を下げたい!サイトの周遊性をアップするために行なうべき改善策

ブログやWEBサイトの「直帰率」を下げて、周遊性をアップさせるために行なうべき改善策をご紹介します。 …

WordPressのインストールにも最適!ブログの乗り換え候補にしたいレンタルサーバーまとめ

photo credit: seeweb via photopin cc 今使っているブログから、乗 …

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

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

Google Analyticsのトラッキングコードが急に表示されなくなった件

ついさきほど、なんとなく当ブログのソースをボケ〜っと確認していたのですが、自分の目を疑うような出来事 …

ブログ歴4ヶ月のわたしが考える、ブログを書く上で本当に大切なこと

ブログ歴4ヶ月の駆け出しブロガーなわたしですが、ブログを書くということはどういうことなのか、少しずつ …

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

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

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

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