おしブロ from STONEWEB

おしい県でWebに携わって働く人のブログ from ストーンウェブ。IT&Web界隈に関する役に立ちそうなことをまとめていきます。2013年1月運営開始。

移転しました。

約3秒後に自動的にリダイレクトします。

はてなブログをカスタマイズする時の参考記事まとめ

このブログのデザインをカスタマイズしたいなーと思いつつも重い腰が上がらない今日この頃、とりあえず「はてなブログをカスタマイズする時に参考になる記事」を探してみたのでまとめておきます。

 

はてなブログテーマ制作の手引き

f:id:lord_cashew:20131224221132p:plain

はてなブログテーマ制作の手引き - ヘルプ - はてなブログ

このブログ用のオリジナルテーマを作成したいなーとか思いつつ、何やら「Boilerplate」というフリー(MITライセンス)のテーマのソースコード(CSSおよびLESSファイル)が「GitHub」で公開されているらしく、ゼロからテーマを制作するのが難しい時は、このテーマを元にしてオリジナルテーマを制作してみても良いみたいです。なるほど。

 

はてなブログのidとかclassとか

f:id:lord_cashew:20131224221139p:plain

はてなブログのidとかclassとか - kyabana's blog

はてなブログのテーマで使われている「id」や「class」がまとめられています。しかも色んなカラムタイプ(記事の幅が可変でサイドバーの幅を固定にした2カラム、ヘッダとフッタ以外を固定幅にした2カラム、とか)での「css」と「構成」が紹介されていて、とてもわかりやすいです。 

 

はてなブログの「最新記事」を画像付きにする方法、あと「人気記事」も 

f:id:lord_cashew:20131224221145p:plain

【修正済】はてなブログの「最新記事」を画像付きにする方法。 - #ChiroruLab

f:id:lord_cashew:20131224221155p:plain

【修正済】コピペで簡単! はてなブログの人気記事を画像付きで表示させる方法。 - #ChiroruLab

両記事共にHTMLとJavaScriptそしてCSSのコードが掲載されていて、しかもコピペ使用してもOKとのことで(自分のブログ用に調整の必要有り)とてもありがたい限りです。さらに「はてなブログ」管理画面での設置方法も書かれているので、まさに至れり尽くせりな記事です。

 

はてなブログ サイドバーのカテゴリ表示をタグクラウドにする 

f:id:lord_cashew:20131224221204p:plain

【改訂版】はてなブログ サイドバーのカテゴリ表示をタグクラウドにする! - TMD45INC!!!

自分的に「カテゴリをタグクラウドにする」という発想がなかったので、この記事を見つけた時には「なるほどなー」と素朴に感心してしまいました。実際に使うかどうかはブログのコンセプト次第だとは思いますが(このブログでは使わないかも)一つのカスタマイズ方法として参考になります。

 

はてなブログの新着記事をちょこっとだけ派手に見せる方法 

f:id:lord_cashew:20131224221211p:plain

【B】 はてなブログをとことんカスタマイズ!新着記事をちょこっとだけ派手に見せる方法、の巻 - HSKぐうたらジャーナル

ブログ上部に最新記事が画像で表示されるというとても素敵なカスタマイズ方法が紹介されています。 カスタマイズ作業としては一番手間がかかりそうな気はしますが(デザインの微調整とか)、あまり見かけないデザインなので、これは目立つかもしれませんね。

 

来年に向けて

初めてのことに取り組む時はどうしても腰が重くなってしまうのですが、もう少しで新しい年を迎えることですし「ダイエットは明日から」のノリで、はてなブログのカスタマイズに取り組んでいきたいと思います。 

はてなダイアリー 実践デザインカスタマイズガイド

はてなダイアリー 実践デザインカスタマイズガイド

 

 

© STONEWEB