HSKぐうたらジャーナル

カメラ、ガジェット、かっこいいもの、かわいいもの、おいしいものが大好きな個人トレーダーのぐうたらな日常をマイペースに綴ります。

【B】 スパイスのように効いてくる!はてなブログのプロフィール欄カスタマイズ、の巻

f:id:hisoka_maki:20130531120529j:plain

たとえば、他の方のブログを開いたとき
あなたは最初に何に目を向けるでしょうか。
記事の中身はもちろんですが、
そのブログは「誰が書いたのか」ということも
気になる点のひとつではないでしょうか。

はてなブログでは、この「誰が書いたのか」という情報は
「プロフィール」欄にまとめて表示されるようになっています。

しかし、この「プロフィール」欄、カスタマイズできる内容が
きわめて限られているため、どのはてなブログを見ても同じような
デザインになってしまっています。

そこで、今回はこのプロフィール欄を自分の好きなように
カスタマイズする方法をご紹介したいと思います。
プロフィール欄のカスタマイズはすごく地味ですが
料理におけるスパイスのように効いてくるのです。

f:id:hisoka_maki:20130428134614g:plain

劇的?ビフォーアフター

まず、ぐうたらジャーナルでの実例からごらんください。
こちらがカスタマイズ前のプロフィール欄です。

f:id:hisoka_maki:20130531012157j:plain

購読していただくためのRSSのアイコンと
プロフィールが別々の場所に設置されてますね。
ちょっと不自然なレイアウトですよね。

そして匠…もといデイトレーダーときどきブロガーの手によって
改修された結果がこちら:

f:id:hisoka_maki:20130531012205j:plain

RSSのアイコンも入れ込んだ上で、
プロフィール欄に表示される写真も少し変更してみました。
おかげでちょっとだけデザインがスッキリ!

ええ。言いたいことはわかります。
メチャメチャ地味!です。
でも、その地味なことをコツコツ積み上げていくことで
「自分のブログ」らしさが築かれていくのだと思います。

f:id:hisoka_maki:20130530173321g:plain

デフォルトの「プロフィール」欄はカスタマイズできない

ホントはデフォルトの「プロフィール」欄の編集で実現したかったのですが
いまのところ、カスタマイズできるのは以下の内容のみ。

f:id:hisoka_maki:20130531014841j:plain

そして、「ブログの説明」欄にHTMLは記入できません。
むー。困った。
しばらくは打開策も思いつかず、RSSは別モジュールとして表示していました。

うーん。何かいい策がないものか…。
乱高下する相場のチャートを半泣きでチラ見しつつ考えていたのですが、
ふと、ある方法を思いつきました。

「プロフィール」欄を自作すればいいんじゃない?

自作と言ってもゼロから作るわけではありません。
デフォルトの「プロフィール」欄をコピペ、修正するかたちで
カスタマイズしていきます。

所要時間は、HTMLの編集に慣れた人なら20分
そうでない方は1時間くらいをみておきましょう。
CSSの知識はあればベターですが、無くても大丈夫。
それでは、いきます!

f:id:hisoka_maki:20130530173323g:plain

手順1:モジュールを追加する

まずは、デザインのカスタマイズ画面から、
「サイドバー」→「モジュールを追加」を選びます。

f:id:hisoka_maki:20130531015549j:plain

そして、「HTML」を選択しましょう。

f:id:hisoka_maki:20130531031206g:plain

モジュールのタイトルは、とりあえず「プロフィール」とでも入力し
HTMLの入力欄は空欄にしておきましょう。
ここまでできたら、ブラウザをもう一つ起動します。

手順2:自分のブログのHTMLをコピペする

新しく開いたブラウザで自分のブログに行き、ブログのHTMLを表示させましょう。
※たとえば使っているブラウザがGoogle Chromeなら、
 ブログ上で右クリックした後、「ページのソースを表示」を選択します。

そして、”hatena-module-profile”という文字列を探しましょう。
(※下図左側に表示されている行数は、個人の環境によって異なるので
 ここでは無視してください。)

f:id:hisoka_maki:20130531020820j:plain

そう。ここに書かれているHTMLこそが、今のプロフィール欄の内容なのです。

"hatena-module-profile"という文字列が含まれている行から、
それと同じインデント(=字下げ)の行まで(下図参照)をごっそりコピーしましょう。

f:id:hisoka_maki:20130531021447j:plain

f:id:hisoka_maki:20130428134609g:plain

手順3:コピペしたHTMLをちょっと修正する

コピーした内容を、さきほど「モジュールを追加」で出てきた
HTML入力欄に貼り付けてやります。

f:id:hisoka_maki:20130531031804j:plain

その後、以下の赤字部分だけをごっそり削除します。

<div class="hatena-module hatena-module-profile">
 <div class="hatena-module-title">
 プロフィール
 </div>
 
<div class="hatena-module-body">
 <a href="/about">
 (中略)
 </div>
</div>

手順4:表示する内容を編集する

あとは、このHTMLの内容を自分の好きなように修正するだけです。
逐次、プレビューで結果を確認しながら修正していきましょう。

私の場合は、次のような修正を行っています。

  • プロフィール写真を円形で表示するようにカスタマイズ
  • 購読用のRSSへのリンクを追加

他にも、ブログランキングへのリンクや
自分のはてブのページへのリンクを追加するなど
カスタマイズの方法は自分次第。

ちなみに、プロフィール写真を円形に切り抜くには
以下のCutMyPicさんのサービスを使うとカンタンにできます。おためしあれ!

手順5:元々あったプロフィール欄を削除する

最後に、元々あった「プロフィール」欄を削除して完成です!

f:id:hisoka_maki:20130531013803j:plain

 おつかれさまでした!

f:id:hisoka_maki:20130428134606g:plain

というわけで、今回はちょっと手間をかけて
はてなブログにちょっとしたスパイスを加える方法を
ご紹介させていただきました。

ちょっと手間はかかりますが、できあがったときには
前よりちょっとだけ、「あなたらしい」はてなブログに
仕上がっていること間違いなしです。

ではでは、またー。

 

こちらの記事もどうぞ!

デザインの教室 手を動かして学ぶデザイントレーニング(CDROM付)

デザインの教室 手を動かして学ぶデザイントレーニング(CDROM付)