はてなブログにヘッダー画像を付ける。
はてなブログにヘッダー画像を付けてみよう。
このブログにもヘッダー画像がついていますね。というかつけたのですが。
画像は自分で用意してみてください。
それからやるべきことはひとつ。
CSSの編集です。
CSSで下記のように追加してみる。
画像はDropBoxにおいた。
#blog-title-inner h1 a{
padding:20px;
background:url(http://XXXXXXXX.png) no-repeat;
width:960px;
height:286px;
display:block;
text-indent:-9999px;
}
今回のポイントはこのヘッダー画像をクリックできるようにし、クリックするとトップページに戻る仕様。
画像の高さや幅は自分の画像に合わせてCSSを調整する必要がある。
赤文字の箇所は自分の画像URLに置き換える。
上記はあくまでこのブログで適応したパターンなのでそのまま貼り付けても駄目なケースもある。
是非試してみてほしい。
はてなブログ、デザイン画像はとりあえずDropBoxにおこう。
はてなブログのカスタマイズにあたって、デザイン画像を何処にアップロードするかという問題だが、デザイン素材画像をアップするようなフォルダーがないため（記事に投稿する用の箇所はある）DropBoxにおいておけば更新も楽だ。
Google-Picckerという機能もあるので、Google上においてある素材をデザイン画像として使うこともできそうだが、多少めんどくさそうだ。
DropBoxはパブリックリンクのURLを取得することができるので、デザイン画像をアップしてその画像URLを入手する。
そのURLをCSSで使い回せばオリジナルデザインは容易になる。
未登録の人は登録をして外部から画像を読み込んでみよう。
はてなブログにjQueryを導入してみる。
カスタマイズが色々できることがわかってきたので、早速jQueryを導入してみよう。
準備
まずはGoogleにホストしてあるjQueryをサイドバーのHTMLウィジェットに追加。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
上記のようなソースを貼り付ける。
そして保存。
javascriptを追加
次によくいろいろなサイトで見るトップへ戻るを押すとするするーっと
上にスクロールしながら戻るjQueryの動きを入れてみよう。
下記のようなコードを先ほどのHTMLウィジェットに追加。
<script type="text/javascript">
jQuery.noConflict();
(function($) {
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度
var speed = 2000;// ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
})(jQuery);
</script>
そして保存。
HTMLの記述
次にHTMLを記述してみよう。
先ほどのHTMLウィジェットに下記のように追加。
<div class="totop"><a href="#globalheader-container">トップへ</a></div>
これでOK。保存して動作確認。
位置の調整（CSS調整）
次にトップへ戻るというリンクの位置を右下の強制的に移動させてしまおう。
管理画面のCSS編集で下記のように追加。
.totop{position:fixed;bottom:20px;right:20px;}
保存してOK。
位置が右下に固定されたのが確認できる。
作業時間
ここまでの一連の作業で15分ほどだろうか。
ブログを書きながらなので30分はかかったが簡単にjQueryを導入しい簡単な動きを取り入れることができた。
これはカスタマイズがこれから楽しくなりそうだ。
はてなブログカスタマイズ
はてなブログはどこまでカスタマイズできるか。
まずは管理画面を見てちゃちゃっと分析してみる。
管理画面を見るからにCSSの制御のみである。
HTMLやJavascriptを］記述する箇所は・・・あった。
デザイン＞カスタマイズ＞サイドバーにHTMLと言うウィジェットを追加すれば記述ができる。
試しにGoogleにホストしてあるjQueryを読み込んでみた。
いける。
これが出来れば後は自由自在だ。
さて、どこから手を付けようか。
いやまてよ、画像のアップロードはどうしようか。
フリー版は３０M・・月間での転送量が少なすぎる・・。
試しにアイコンをアップしてみる。
記事を公開して画像のURLをチェック。
ほほう下記のようなURLになった。
http://cdn-ak.f.st-hatena.com/images/fotolife/m/mamus/20120421/20120421015955.png
記事に写真をアップして画像URLを持ってくることもできそうだが、いまいちスマートじゃない。
自鯖に画像をおいて引っ張ってくれば良いのだが、自鯖を持っていない人はこの問題が残る。
誰でもカスタムが出来るようにしなければカスタマイズの研究にならないので別の方法を模索する。
と言うことで、はてなブログを企業風のブログに変更していこうと思う。
暇があれば・・・だが。
アメブロではよくメニューバーを設置したりとカスタマイズが盛んだが、はてなブログはどうなのだろう。
はてブ初心者の私はこれから研究をしてみようと思う。
