ぐるりみち。

平成生まれのフリーライターのブログ。本・映画・マンガ・アニメの各種レビューに、旅行・グルメ・街歩き日記など。

ぐるりみち。

【50%OFF多数】Kindleセールまとめ|人気コミック・ビジネス書ほか

【月初雑話】ブログのデザインまわりをヌルっと調整した

やほー。11月だよー。

いよいよもって、お布団にくるまれて寝るのが心地良い季節になりました。ホカホカ温かなオフトゥンに包まれてまどろみつつも、そこから這い出て、キリッと澄んだ冬の冷気に身を浸すのも結構好き。今日も一日がんばるぞい。まだ秋だけど。

はてさて、9月はじめは「文章構成」についてババっと書きなぐり、10月はじめは「ブロガーズフェスティバル」の感想をさらっとまとめ、今日は何を書こっかなとパソコンに向かい……思い出されたのは、ブログまわりの話。数日前にデザインをいじったばかりなのです。

──まあ、何かが劇的に変わったわけでもなく、相変わらずデザインの知識は皆無なので、気分転換的にちょろっと細部を調整・変更しただけなのですが。でもせっかくなので、変更箇所についてざっくりと記録しておこうと思いまする。……将来の模様替えのために!

 

デザインテーマ

「はてなブログ」では、公式もしくはユーザーから提供されているデザインテーマをインストールすることによって、ブログの見た目を大きく変えることができる──というのが、ブログを始めたころに学ぶ基本のひとつなんじゃないかと思われます。

かく言う僕も最初のころは、やれカラム数はいくつだの、サイドバーは右と左どっちがいいだのと、あれこれ試しておりました。サイト作成に関しては中学で習ったHTMLの知識しかないので、ほとんどサービス頼り&他のブログを参考にして試行錯誤していた格好です。

……え? frameタグを使って同盟バナーをペタペタ貼りまくらないの? 謎のMIDIを用意してページを開いた瞬間に大音量で鳴らしたり、ダミーエンターを用意しちゃいけないの!?(個人サイト脳)

ブログとMacとダンボー

で、結果的に落ち着いたのがMistilteinn

ブログを始めてしばらくは、ずーっとこのテーマのお世話になっていたと思う。テーマ説明文からして、 “綺麗なジャイアン的な感じのテーマ” だし、そりゃあ使わずにはいられないでしょう。ブロガーの多くは、空き地でリサイタルしているようなもんですし(?)

なにより、シンプルで見やすい。それに、当時はこちらのテーマを採用しつつカスタマイズ方法を掲載しているブログも多かったので、「CSS? なにそれおいしいのん?」レベルの初心者にもやさしかったのです。それらを参考に、タグを見比べながら学んでいくこともでき、マジでお世話になりました。

次にインストールしたのが、クリスタブルー~CrystalBlue~

同じく2カラム・右サイドバーで、レスポンシブ対応のデザインを探していて目に入ったテーマ。カラーリングがデフォルトの『Mistilteinn』と似ており、僕自身が「青」好きだから目に留まった、という面もあるかも。

つい先日まではずっとそちらで固定していたのだけれど、最近になってまた「気分を変えたい!」という欲求がムクムクひょっこりひょうたん島しまして。ついでに、本文の横幅をもうちょい広めに取りたいけれど現在のテーマではデザインが崩れて難しく、良い機会なので変更しようと。

ブログトップページ

その結果、こんなんなりました。

今回使わせていただいているのは、人気のテーマBrooklyn。シンプルというよりは “洗練された” という表現がしっくりくる、カスタマイズなしで完成されている素敵デザインです。

ただ、多くのブログがこちらのデザインを採用していることもあり、変な反骨精神がムックリひょうたん島してきた一面もあったのですが……そこはアレです、色合いを変えて誤魔化そう、と。買うだけ買ってほぼ積ん読状態だったを参考に、エコ系の2色を中心とした配色に変えました。

加えて、「ブログ全体の印象を決めるのって、結局のところはヘッダー画像なんじゃね?」と思い至り、ヘッダーも新たに差し替えた格好です。──ダンボーから、ダンボーへ。変わってねえ!

 

ヘッダー画像

ブログヘッダー画像

長らく緑々しいヘッダー画像だった弊ブログ(ちなみに写真は鎌倉で撮ったやつ)

「目には優しいかもしれんが、字が小せえ!」「ダンボーにしか目が行かねえ!」という脳内評判もあったため、今回は思い切ってイメージチェンジしてみようかと。

ブログヘッダー画像

──その結果がこれだよ!

緑が灰色になったのはともかくとして、我ながら文字の配置センスが圧倒的に皆無である。これでも試行錯誤を経ての画像なんですけどねえ……。

作り方は、至って簡単。

 

荒川サイクリングロード ダンボー
① 元となる画像を用意して、

 

ブログヘッダー画像
② 適当なサイズにトリミングして、

 

ブログヘッダー画像
③ 白円と文字を打ち込んで完成。

 

──ね? 簡単でしょ?

ちなみに、画像サイズは「1,500×300」。デフォルトで推奨されているのは「1,000×200」とのことですが*1、横幅いっぱいに表示させるべく、ちょっと大きめのものを用意してみた形です。

白円はペイントソフトでちょちょいと描き込み、その上に文字を載っけている感じ。フォントはロゴたいぷゴシック。たびたびお世話になっている、商用利用可のフリーフォントです。いいぞ。

ブログヘッダー画像

ブログヘッダー画像
※ボツ案。

 

その他もろもろ

それ以外の箇所はデザインテーマに合わせるように調整したくらいで、あまり大きくは変わってないのではないかと。強いて言えば、サイドバーのプロフィール欄に貼っていた某リンクを最下部に移動したくらい。しっかり素材をそろえているいらすとやさん、好き。

サイドバーと言えば、PC表示のサイドバー部分って、ブログの個性が見て取れて個人的にはおもしろいと思ったり。デザインセンスは関係なく、「何をサイドバーに表示している(いない)か」を見ると、そのブログのスタンスやらおすすめやらが、なんとなーく読み取れる気がするので。

広告ひとつ取っても、機械的にアドセンスを挿入しているか、その人おすすめの縦帯バナーを貼っているかでは、微妙に印象が違ってくるように感じる。PCゲームのバナーとか良いよね……。

自分の場合、一応は「書評ブログ」として読んでくださっている(アクセスしてくださる)読者さんが多いっぽいこともあり、おすすめ本と感想記事へのリンクを中心に掲載している格好です。

しばしば更新を忘れがちだけど、「今月のピックアップ本」には、「貼っておけば売れるベストセラー本」ではなく「自分が本気でおすすめしたい本」を載せるようにしているのは、ちょっとしたこだわり。クリックされること、買ってもらうこと、そうして稼ぐことが主目的ではないので、細かな部分では自分のカラーを出したいな、と思いまする。

 

──そんなこんなで、以上、「ブログをちょっといじったよ!」という話でした。

本来ならば自分で勉強してあれこれいじるとか、あるいは詳しい人にお願いしてカッコよくしてもらうとかしたほうが良いとは思うものの、なかなか機会がなく……。

でもまあ、そもそもブログ自体を自己満足的に運営している面もあるので、デザインまわりも自分なりに“満足”できていればそれでいいのかな、とも。あまり見づらいのはアレですが、その点は「はてな」の洗練されたデザインと、テーマのテンプレート様様でござる。これからもお世話になります。

 

 

関連記事