ホームページ＆ブログ作成tips

先週説明したメニュー　その２が大雑把にタグの紹介にしちゃったんですが、
わかりにくかった方がいるので、今回はSeeSaaブログの実際の画面を見ながら
解説したいと思います♪


・メニューの作り方　その２


5.のタグの編集部分を先にメモ帳などテキストエディタでやっておくと、作業
が楽になると思います。
管理画面上の作業は万が一ブラウザが落ちた時にデータが飛ぶので(^^;;;



1.管理画面からデザイン→コンテンツを開きます。


2.コンテンツから『自由形式』をドラッグ＆ドロップでメニューを入れたい
　場所に入れます。
　サンプルの場合、真ん中の記事上に入れています。



↓マウスで左クリックしたまま移動して、入れたい場所で離す。




※コンテンツの左が＋になってる場合は＋をクリックすると出てきます。




3.2で入れた自由形式をクリックし、開きます。


4.タイトルを分かりやすいものに変えます(ブログの表示には関係ありません)。




5.入れるタグを編集します。

その前にちょっと<table>タグについての解説です。
このメニューは２つ横に並んだ枠の中にそれぞれ別のメニューが入っています。



<table>タグはもっと細かく設定できて、こんなカンヂにもなります。



エクセルなど表計算ソフトの枠を思い出してもらうとわかりやすいと思います。
一番上はセルを２つ横にくっつけてます。


今回は最初の絵の雰囲気で仕上げるので、１つのセルの中に全部が収まってる
と考えてください。


それでは実際のタグの解説です。


<table style="font-size: Ａpx; color: Ｂ;" width="Ｃpx" border="Ｄ" cellpadding="Ｅ" cellspacing="Ｆ">
<tr>
<td align="Ｇ"><strong>Ｈ</strong><br />
├ <a href="Ｉ">Ｊ</a><br />
└ <a href="Ｋ">Ｌ</a><br />
</td>
</tr>
</table>


Ａ：テーブル内の文字サイズ。
Ｂ：テーブル内の文字の色。
Ｃ：テーブルの幅。px単位で表示。
Ｄ：テーブルの枠線の幅。なしの場合は0。
Ｅ：セル内の内側の余白。通常は0でよいです。
Ｆ：セルとセルの間の間隔。通常は0でよいです。
Ｇ：このテーブル内に並ぶ文字の配置。このメニューの場合leftがいいです。
Ｈ：メニューのタイトル。<strong>タグを使わなくてもいいです。
Ｉ・Ｋ：リンクしたい記事のアドレス。
Ｊ・Ｌ：リンクしたい記事のタイトル。


Ａは指定しなくてもよいですが、<table>タグの中は周りのスタイルシートの
影響を受けずにブラウザの文字サイズの影響を受けるので、ココだけ浮かない
ためにも設定した方がよいです。


メニューがたくさんある場合は



Ｍの部分をコピーして増やしてください。
最後の行はＮのよぉにした方が見栄えがよいと思います。


6.できあがったタグを4の自由入力欄にコピー＆ペーストし、保存します。





7.自由入力欄の編集を終了して、編集モードをエキスパートモードにします。




8.追加した自由入力欄（タイトルは4で変えたもの）を表示させる場所を指定
　して一番下の変更をクリックします。



↑はトップページのみにメニューを表示する場合です。


9.ブログを再構築して、完了です(*^▽^*)お疲れ様でした♪





SeeSaaブログの使い方がコレでよいのか、分かってないんですが、手探りで
やってみてこの流れがわかりやすそぉなのでコレで説明してみました。


5の<table>タグ解説がわからなかったらいくらでも補講しますので、遠慮なく
メールでもブログにコメントでもいいのでゆってくださいね♪
コレでアナタもメニューが作れるといいなぁ。