2006-05-16

週刊はてな塾第三十号（ダウンロード動画版）

060516hatenatips.mp4

週刊はてな塾第三十号（音声版）

【週刊はてな塾】第三十号　日記を自分好みのデザインに！詳細デザイン設定を使ってみよう！　の巻

?!-------?!------?!------?!------?!------?!------?!------?!-------?!
『週刊はてな塾』　第三十号　http://www.hatena.ne.jp/
発行日：2006年5月16日　発行者：株式会社はてな
バックナンバー　http://hatena.g.hatena.ne.jp/hatenatips/archive
?!-------?!------?!------?!------?!------?!------?!------?!-------?!

♪♪お知らせ♪♪
実際に画面を操作している様子を撮影した、動画版『週刊はてな塾』の配信を
開始しました。以下の週刊はてな塾のページよりご覧ください。
「週刊はてな塾」
http://hatena.g.hatena.ne.jp/hatenatips/

～ 今回のテーマ：「はてなダイアリー」 ～

こんにちは、はてな塾塾長の山田（d:id:kiyohero）です！
今週のはてな塾のテーマは「かんたんデザイン＋α」。「毎日つけている日記
だけど、たまには見た目を変えたいなあ…」「この部分が気になるんだけど、
スタイルシートは難しいしテーマを変えるしかないのかな…」今週のはてな塾
では、そんなあなたにお送りする、かんたんデザイン設定から一歩進んだ日記
のデザイン変更の方法をご紹介します。ちょっと長いですが、これを知ってお
くと他の人とひと味違った日記を作ることができるので、しっかりついてきて
くださいね！

■ まずはここから！ ～ かんたんデザイン設定

もっともかんたんに日記のデザインを変更する方法は、管理ツールの「かんた
んデザイン設定」を使用することです。「かんたんデザイン設定」では、日記
のデザインを服を着替えるように変更することができる「デザインテーマ」
や、日記のサイドバーにアンテナや写真などの情報を表示させる便利な「はて
なモジュール」をかんたんに設定することができます。

「かんたんデザイン設定」に行くには？
→日記上部の「管理」をクリックし、左側の「デザイン」をクリック
「かんたんデザイン設定」でできることは？
→はてなダイアリーのヘルプ http://url.hatena.ne.jp/cAYey

■ もっと自分好みに！ ～ 詳細デザイン設定

「かんたんデザイン設定」では、マウスでクリックしていくだけであなたの日
記をかんたんにデザインすることができますが、「もっとこうだったらいいの
に！」というときには「詳細デザイン設定」を使ってみましょう。「詳細デザ
イン設定」では、ホームページを作成するときなどに使う「HTML」や「スタイ
ルシート」という技術を使うことができるので、「かんたんデザイン設定」よ
りも強力なデザインの編集が可能です。

でも、「HTML」や「スタイルシート」って言われても…？なかなか自分で勉強
して覚えるのは難しいですよね。以下の項では、そんな「詳細デザイン設定」
でできることの中でも、よくお問い合わせをいただく「これだけ！」に絞った
カスタマイズ方法をご紹介します。

「詳細デザイン設定」に行くには？
→日記上部の「管理」をクリックし、左側の「デザイン」をクリック、「かん
たんデザイン設定」の上に表示されている「詳細デザイン設定」をクリック
「詳細デザイン設定」でできることは？
→はてなダイアリーのヘルプ http://url.hatena.ne.jp/MO0Ju

■ モジュールの順番を変える！ ～ ヘッダ・フッタを編集する

日記のサイドバーに表示されている、「プロフィール」や「カレンダー」「最
近のコメント」といった便利なはてなモジュールは「かんたんデザイン設定」
から表示させることができますが、並んでいる順番を変えることはできませ
ん。はてなモジュールなどサイドバーに表示されている情報は「フッタ」内に
保存されていますので、ここを編集することで、はてなモジュールの並び順を
変更することができます。

たとえば、あなたの日記に「プロフィール」と「カレンダー」「最近のコメン
ト」が表示されているとすると、「フッタ」には


 

class="sidebar"> <hatena name="profile"> <hatena name="calendar2photo" template="hatena-module"> <hatena name="comment" template="hatena-module">

のように表示されています。この中で

class="sidebar">

から、次の