jjsの日記

jjsの日記がはてなブログに引っ越ししました

はてなダイアリーのタイトル画像の変更とCSSの小変更を行いました Google Chrome Developer Toolsを使ってみる

かなり久しぶりに、この「JJsの日記」のタイトル画像を変更しました。
Sony α900 & Tamron A09で撮影した画像をPhotoshopで加工して製作しています。


以前のデザイン


はてなダイアリーのデザインは、デザイン一覧から「city[remodel]」という
公開デザインを拝借していますが、はてな独自の表記法などがあって、
どうやってカスタマイズしていいのか、さっぱり分かりませんでした。


ふとしたとき、chromeで表示させているときに、右クリック⇒「要素を検証」で
Google Chrome Developer Toolsが起動することに気づき、ちょっとCSS
いじってみました。

画面左下にある虫眼鏡マークをクリックした後、上に表示されているwebページの
画像や文章をクリックすると、それに適用されているCSSおよびその要素が表示され、
すぐに編集できる。


編集したCSSはすぐに反映されるので、結果を見ながら編集することが可能。
Developer Toolsを使うことによって、やっとこさ現実的にはてなダイアリーをカスタマイズすることが
できるようになりました。
※ HTML & CSSの基礎的な知識が必要です。



とりあえずいじった本人しか分からない程度にカスタマイズしてみました。


ex.
.section pに「line-height: 1.0;」を追加など。