【B】 スパイスのように効いてくる!はてなブログのプロフィール欄カスタマイズ、の巻
たとえば、他の方のブログを開いたとき
あなたは最初に何に目を向けるでしょうか。
記事の中身はもちろんですが、
そのブログは「誰が書いたのか」ということも
気になる点のひとつではないでしょうか。
はてなブログでは、この「誰が書いたのか」という情報は
「プロフィール」欄にまとめて表示されるようになっています。
しかし、この「プロフィール」欄、カスタマイズできる内容が
きわめて限られているため、どのはてなブログを見ても同じような
デザインになってしまっています。
そこで、今回はこのプロフィール欄を自分の好きなように
カスタマイズする方法をご紹介したいと思います。
プロフィール欄のカスタマイズはすごく地味ですが
料理におけるスパイスのように効いてくるのです。
劇的?ビフォーアフター
まず、ぐうたらジャーナルでの実例からごらんください。
こちらがカスタマイズ前のプロフィール欄です。
購読していただくためのRSSのアイコンと
プロフィールが別々の場所に設置されてますね。
ちょっと不自然なレイアウトですよね。
そして匠…もといデイトレーダーときどきブロガーの手によって
改修された結果がこちら:
RSSのアイコンも入れ込んだ上で、
プロフィール欄に表示される写真も少し変更してみました。
おかげでちょっとだけデザインがスッキリ!
ええ。言いたいことはわかります。
メチャメチャ地味!です。
でも、その地味なことをコツコツ積み上げていくことで
「自分のブログ」らしさが築かれていくのだと思います。
デフォルトの「プロフィール」欄はカスタマイズできない
ホントはデフォルトの「プロフィール」欄の編集で実現したかったのですが
いまのところ、カスタマイズできるのは以下の内容のみ。
そして、「ブログの説明」欄にHTMLは記入できません。
むー。困った。
しばらくは打開策も思いつかず、RSSは別モジュールとして表示していました。
うーん。何かいい策がないものか…。
乱高下する相場のチャートを半泣きでチラ見しつつ考えていたのですが、
ふと、ある方法を思いつきました。
「プロフィール」欄を自作すればいいんじゃない?
自作と言ってもゼロから作るわけではありません。
デフォルトの「プロフィール」欄をコピペ、修正するかたちで
カスタマイズしていきます。
所要時間は、HTMLの編集に慣れた人なら20分、
そうでない方は1時間くらいをみておきましょう。
CSSの知識はあればベターですが、無くても大丈夫。
それでは、いきます!
手順1:モジュールを追加する
まずは、デザインのカスタマイズ画面から、
「サイドバー」→「モジュールを追加」を選びます。
そして、「HTML」を選択しましょう。
モジュールのタイトルは、とりあえず「プロフィール」とでも入力し
HTMLの入力欄は空欄にしておきましょう。
ここまでできたら、ブラウザをもう一つ起動します。
手順2:自分のブログのHTMLをコピペする
新しく開いたブラウザで自分のブログに行き、ブログのHTMLを表示させましょう。
※たとえば使っているブラウザがGoogle Chromeなら、
ブログ上で右クリックした後、「ページのソースを表示」を選択します。
そして、”hatena-module-profile”という文字列を探しましょう。
(※下図左側に表示されている行数は、個人の環境によって異なるので
ここでは無視してください。)
そう。ここに書かれているHTMLこそが、今のプロフィール欄の内容なのです。
"hatena-module-profile"という文字列が含まれている行から、
それと同じインデント(=字下げ)の行まで(下図参照)をごっそりコピーしましょう。
手順3:コピペしたHTMLをちょっと修正する
コピーした内容を、さきほど「モジュールを追加」で出てきた
HTML入力欄に貼り付けてやります。
その後、以下の赤字部分だけをごっそり削除します。
<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:元々あったプロフィール欄を削除する
最後に、元々あった「プロフィール」欄を削除して完成です!
おつかれさまでした!
というわけで、今回はちょっと手間をかけて
はてなブログにちょっとしたスパイスを加える方法を
ご紹介させていただきました。
ちょっと手間はかかりますが、できあがったときには
前よりちょっとだけ、「あなたらしい」はてなブログに
仕上がっていること間違いなしです。
ではでは、またー。
こちらの記事もどうぞ!
腕のいいデザイン事務所で修業しないとふつうは身につかない知識と技と心得 (インプレスムック エムディエヌ・ムック)
デザインの教室 手を動かして学ぶデザイントレーニング(CDROM付)
- 作者: 佐藤好彦
- 出版社/メーカー: MdN
- 発売日: 2008/04/28
- メディア: 大型本
- 購入: 46人 クリック: 546回
- この商品を含むブログ (17件) を見る