すけこむブログ

カメラが好きな都内在住31歳男性の写真ブログ。ニコンD810を愛用。娘二人の子育てにも奮闘中。

はてなブログのタイトルをテキストから画像に置き換える方法

DSC_6128

ブログのタイトルをテキスト表示から画像に置き換えてみました。

前々からずっとやろうと思っていたんですが、めんどくさいなかなかまとまった時間が取れなかったこともあって、ずっと先延ばしにしていたんです。

今日は仕事が昼からということもあり、1時間ほど自由な時間ができたので、しこしこと作業を進めてみました。

まず用意すべきはタイトル用の画像

Illustratorで適当に「すけこむブログ」と打ち込んだものを、あーじゃないこーじゃないとぶつぶつ言いながら、フォントを変えてみたり、1文字1文字の大きさを変えてみたり。

Photoshopでもできる作業ですが、文字そのものをいじる場合はIllustratorの方が楽ですね。

f:id:sukecom:20140413084525g:plain

できあがったのがこちらなのですが、文字の色をピンクにするか黒にするか、はたまた別の色にするかで結構悩みました。結局黒にしたんですが、なんだかちょっとつまらない気もするので、近い内に色を変えるかもしれません。

文字を画像にするだけならIllustratorやPhotoshopなどのツールを使わなくても、パワポやワードでも作れます。オープンオフィスは使ったことが無いので知りませんが。

タイトル部分のHTMLの構造を理解

タイトル用の画像を作成したら、それをはてなフォトライフにアップロードして、デザインに組み込んでいきます。はてなブログはタイトルを画像で表示する機能がデフォルトでは備わっていないので、CSSを編集して画像を表示させることになります。

CSSを編集するには、まずはHTMLの構造を理解しないといけません。コードを見てみると、こんな感じになっています

<header id="blog-title" data-brand="hatenablog">
  <div id="blog-title-inner" >
    <h1 id="title"><a href="http://blog.sukecom.net/">すけこむブログ</a></h1>
    <h2 id="blog-description">写真を通じて精一杯生きることを楽しむ。すけこむのライフログ。</h2>
  </div>
</header>

h1がブログタイトル、タイトルの下に表示されている簡単な説明がh2で構成されているようです。今回はh2のブログの概要部分は残したまま、h1のテキストを非表示にして、先ほど作成した画像に置き換えてみます。

HTMLの構造についてはデザインテーマによって違う可能性もありそうです。

元々はこちらのデザインテーマを使用させていただいてます。シンプルで見やすいデザインですが、ところどころ気になるところがあったので、ちょこちょこデザインをいじっております。

Nishikino - テーマ ストア - はてなブログ

ブログのデザインをカスタマイズしていく上でも、使いやすいテーマだと感じています。

CSSを編集して画像を表示させる

HTMLの構造を理解したら、CSSを編集していきます。私は以下のようなCSSを組み込んでみました。

/* ブログタイトル */
#blog-title {
    margin: 60px 0 70px 0;
    }
	
/* テキストのタイトルを消す */
#blog-title #title a {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
  opacity: 0;
    position: absolute;
    width: 500px;
    height: 95px;
    }

/* テキストのタイトルを画像に置き換える */
#title {
    height: 95px;
    margin: 0 0 20px 0;
    background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/s/****.gif');
    background-position: left;
    background-repeat: no-repeat;
    }

/* いつものキャラを表示させる */
#blog-title-inner {
    background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/s/****.gif');
    background-position: right top;
    background-repeat: no-repeat;
    }

/* いつものキャラを動かす */
#blog-title-inner:hover {
    background-position:right bottom;
    }

こちらをデザインCSSに組み込めば完成です。background-imageのURLははてなフォトライフにアップロードした際のURLを組み込みます。

クロームとIEのver11では表示を確認しましたが、その他のブラウザでは表示を確認できていないので、もしかしたら表示が崩れてしまうブラウザもあるかも・・・

いつものキャラというのは、以前D600をモデルに作成したカメラ野郎のイラストです。スマホだと表示されないので、なんのこっちゃと思われる方も多そう。

f:id:sukecom:20140211092845j:plain

CSSでコリコリ動く!ブログのイメージキャラクターを作ってみる - すけこむブログCSSでコリコリ動く!ブログのイメージキャラクターを作ってみる - すけこむブログ

これまで使用していたカメラ野郎から少しサイズを変える必要が出てきたので、マウスオーバー時のセリフを少し変えて、再度組み込んでみました。

f:id:sukecom:20140413095656g:plain

「本田翼が可愛すぎてヤバいです」などのセリフを表示させることも考えたのですが、無難なセリフにしておきました。PCでご覧いただいている方は、ヘッダー部分にマウスを近づけてみてください。カメラ野郎が動きます。

以前のヘッダーデザインと見比べてみる

ちなみに以前のヘッダーデザインはこちらです。PCで見ている場合しか表示されないデザインですが。

f:id:sukecom:20140413174755j:plain

ブログタイトルである「すけこむブログ」がテキスト表示であっさりしていましたが、画像に切り替えたことによって少しは見た目のインパクトが増したかな・・・と思っております。

スマホで当ブログを見ていただく限り、今回のカスタマイズはすべて意味の無いことなのですが・・・早いとこスマホのデザインも編集できるようにしてくれないかなぁ

本文中にHTMLやCSSのコードを表示させる「はてな記法モード」

今までもはてなブログをカスタマイズした際に記事を書いていたのですが、HTMLやCSSを表示させるのに苦労していました。はてな記法という表記を使えば、うまい具合に表示できるという記事を見つけたのですが、何度やってもうまく表示できないんです。

はてなブログの見出しをオリジナル画像でカスタマイズしてみる - すけこむブログはてなブログの見出しをオリジナル画像でカスタマイズしてみる - すけこむブログ

いろんな記事を探りまくっていると、ようやく解決法を見つけました。はてなブログ管理画面の「設定」タブより、「編集モード」を「見たままモード」から「はてな記法モード」に切り替えないとダメだったようです。

f:id:sukecom:20140413171849p:plain

今回の記事は「はてな記法モード」で記事を作成したのですが、いかんせん「見たままモード」での編集になれてしまっているので使い辛いですね。しかも、「見たままモード」で作成した過去の記事は、「はてな記法モード」での再編集ができない模様。。

過去の記事はほっておくしかなさそうです。。

ブログを続ける楽しさの一つはデザインのカスタマイズ

久しぶりにブログデザインをいじってみたのですが、ちょこちょこいじっていくと、どんどんブログへの愛着が沸いてきますね。ブログを続ける楽しさの一つは自分の好きなようにデザインを作っていくことだと思っています。

すべてを0から作っているわけではありませんが、だいぶ自分好みのデザインに近づいてきました。

もうちょっと写真を大きく見せたい気持ちもあるのですが、メインカラムの大きさを変えると、過去全ての画像URLを変更しないとダメなので、一歩踏み出せないでいます。。

これからもちょこちょこデザインをカスタマイズして、見てくださる方にとって読みやすく、自分にとっても納得のいくブログデザインを目指していきます。