道化師ラッパンのボヤキ

ほんまは、他にもやりたいこといっぱいなんやけど、とりあえずこれ。

リンク先のページはいつか作るとして、ナビゲーションバーを付けることにしました。前のブログでも付けてたし・・・。

で、実はそれを考えて、タイトルの画像の下辺に、headnaviという名でdivのボックスを作ってあるのであった。（赤枠の部分。870px×30px）

まずは、メインページのheadnavi部分に、下記を記述（青字部分）。

<div id="headnavi">
  <UL>
  <LI><A href="リンク先" title="#">ブログ</A>
  <LI><A href="リンク先" title="#">このサイトについて</A>
  <LI><A href="リンク先" title="#">リンク集</A>
  <LI><A href="リンク先" title="#">ホーム</A>
  </UL>
</div>

ほんまはね、リンク先のURLのとこMTのタグとか使ったりするのが正当なんやろけど、特にページ増やして、このMTで管理する予定でもないので、普通にURLを書きました。

次に、CSSに下記を記述。

/*ナビゲーションメニュー*/
div#headnavi{
  height: 30px;
  width : 850px;
  margin-left: 20px; /*メニューの位置*/
  margin-top: 2px; /*上側余白*/
}

div#headnavi UL {
  list-style: none; /*マーカーなし*/
  margin: 0px; /*外側余白*/
  padding: 0px; /*内側余白*/
}

div#headnavi LI {
  white-space: nowrap; /*自動改行の禁止*/
  float: left; /*横並び*/
  text-align: center; /*中央揃え*/
  font-size:12px; /*文字大きさ*/
  font-weight: bold; /*文字の太さ*/
  margin-left: 6px; /*メニューの間隔*/
}

div#headnavi A {
  display: block; /*表示形式*/
  width: 80px; /*メニューの幅*/
  text-decoration: none; /*リンクの下線*/
  background-color: #ffcc66; /*背景色*/
  border: 1px solid #cc00cc; /*枠色*/
  padding : 3px 10px; /*内側余白*/
}

div#headnavi A:HOVER{
  text-decoration: none; /*リンクの下線*/
  background-color : #ffffee; /*背景色*/
}

  で、再構築・・・。うまいこといったので、めでたしめでたし。  

[追記]：2010/3/5

・・・と思ってた実際。全然めでたくなかった。なんでかというと・・・

1. ナビリンクの位置は全体に下にさがって（背景のタイトル画像もずれて）る。
2. リンクの文字は囲んでる赤線より出てる。

1については、「タイトル」のh1と「サブタイトル」のpがmarginで位置を表示してたので、paddingに変更したら直りました。

2については、

div#headnavi A {
   width: 80px; /*メニューの幅*/
}

がアカンかったようで、幅80pxよりはみ出ない文字列の長さの場合は問題ないんやけど、80pxより長い文字列になった場合、IEは勝手に文字に合わせて枠が広がるのに対して、FFではそれが効きませんでした。

それで上記の幅指定を削除。すると直りました。

IEとFFって、marginとpaddingの理解の仕方に若干違いがあるみたいやね。

前回（MT3.2）のブログで使ったプラグインで、同じようにランダムで画像を表示させてみた。

前記事を参照しながら、MTPhotoGalleryを使ってみることに。

この空いているスペースにランダムに変わる画像を入れる

1）あらかじめこのスペースは、divで縦横66pxの正方形に作ってclassで名前を付けておく。

2）そして、MTPhotoGalleryのサイトへいき、PhotoGallery.zip （1.1.1.0 2005-09-04） をダウンロード。

3）解凍して、PhotoGallery.plを、 mt.cgiと同じディレクトリにあるpluginsフォルダに入れる。

4）ブログは、blogフォルダに展開しているので、そのフォルダの中にtitleimgフォルダを作って画像をUPしておく。（今回は新規も含めて64px×64pxの画像を12枚UPしました。）

5）テンプレートのメインページを開き、画像を表示させたいところに、下記のタグを追加。（太字部分）この場合、ランダムに表示して、その内の１枚を表示する設定です。

<div class="titleimg">
<MTPhotoGallery sort_order="random" count="1" 
path="/titleimg/"><img src="<MTPhotoGalleryImageLink>">
</MTPhotoGallery></div>

6）再構築して確認。（後は、他のアーカイブも同じ設定で。）

MT5になって、使えるかどうか不安やったけど、今回もうまくいったようです。

それと、上記タグについては、4行に分けて書いてありますが、1行で記述するようにしてください。改行すると、なぜか画像がずれて表示されてしまいますので。

ウィジェットを新しく作って、サイドバーに読みこますだけやった。

やり方おおてるんかな？とにかくうまくいったのでメモ。

フォームメールで、高機能・無料・著作権フリーと３拍子揃っていて、サポート掲示板でもお世話になったサイトに、ブログパーツがあるのでそれを貼り付けてみることに。

[参考サイト]

SYNCK GRAPHICA>>うんこブログパーツ

1）まずは、ブログパーツがおいてあるページに移動。ソースをコピー。

2）そして、ダッシュボードの、デザイン＞ウィジェットで、新規にテンプレートを作成。

3）ソースを貼り付けて、タイトルのとこに適当な名前を付ける。（この場合はそのまま・・・）

4）保存して、サイドバーの表示したいとこに、次のタグを書きこむ。（もしくは、ウィジェットの管理で移動させる。）

5）保存して、再構築かけて、確認。ほら、表示された。（枠は別に作ってあります。）

以前紹介した「レッスンブック」の通りにして、だいぶ完成に近づきました。

7章ある内の6章まで終了。7章は何かと言うと、ウェブページの作り方なんですわ。

ＭＴ5は、ウェブページも一緒に管理できるっちゅーのがたぶん醍醐味で、それもしたいとこやけど、１つ問題がある。それは何かというと・・・

元々、ワシがホームページなるものを作ろうと思ったキッカケは、多趣味なので、そうゆう趣味的（コレクション関連が多い）なものを紹介しようという意図だった。全然紹介できてないんやけど。

で、一番トップにある「ホーム」の配下に、このブログのトップページや、各趣味の紹介するトップページを並べようという構想で、しかもその各々の趣味紹介のトップページは独立した１つのサイトのように扱いたかったので、デザインに一貫性がないようにしたかったのである。

なので、今回のように、デザインに一貫性を持たせて管理させるってのは、そこが管理できていいとこなんやけど、ワシの意思に反しているのであった。

ところで、このレッスンの7章はとゆうと、ブログのトップページの上に、ホームページのトップページを持ってきて、リンクさせる。そして、ブログのトップページと同じ並びに、「このサイトについて」や「リンク」といったような独立したウェブページを作るというものだった。

このサイトの一番トップにあるページは、今回のMT5では作られていない。当然インストールした際、ダッシュボード上には、トップページが表示されている仕様となっている。バグなのかどうなのかわからんが、ダッシュボード上のトップページのURLは、実際の一番トップにあるページのURLとは違っているのであった。

なので、レッスン本のように作っていくと、トップページのURLをきっちり直さないと、その配下のページは架空のURLで作られていくのである。

今は、ウェブページは横に置いておこかな・・・と思ったりしてる。作るとしたら、ブログのトップページの配下に作ってしまえばいいことやし。