-Sun&Moon Blog-
catsmoon.exblog.jp
エキサイトブログスキン配布 (Mac OS10.5 Leopard・Safari) ★基本的にコメントにレスしません
by catsmoon
プロフィールを見る
画像一覧
Top | Out
フリーエリア移動
2005年 02月 22日 |
私の配布しているスキンには、よくメインページ用HTML内に青字でフリーエリアを作っていますが、そのカスタマイズについてです。



フリーエリアでもっとも多い形が以下のようなものです。

<div class="mnttl">Links</div>
<div class="mnbody">
外部リンクなど
</div>


他に
<div class="mnttl">Links</div>
外部リンクなど


<div class="menu">
<div class="mnttl">Links</div>
<div class="mnbody">
外部リンクなど
</div></div>


このような形もありますが、いずれにせよ、青字になっている部分をごっそり一括りに扱うという点では同じです。
そして、これらの形は、基本的にメニュー用HTMLと対応しています。

では具体的カスタマイズ方法を説明します。

  1. 削除
    難しく考える必要はありません。青字の部分を全部消すだけです。

  2. 2列デザインの場合の移動
    青字の部分をごっそりカットします。
    そして入れたい場所にいれるのですが、左側のメニューの場合は<$menuleft$>(左メニュー)、右側のメニューの場合は、<$menuright$>(右メニュー)の上か下にペーストができます。
    他に移動可能な場所は、<$calendar type=$>(カレンダー)の上下、あるいは
    <div class="mnttl">About</div>
    <div class="mnbody">
    <div align="center"><$logoimage type=1$></div>
    <$description$>
    <$nick$>
    </div>
    などのプロフ欄の上下です。
    しかし、メニューの上下と異なって、カレンダーやプロフ欄の場合、スキンによってはタイトルがあったりなかったりしますし、またその上に入れると、上下の余白が微妙にずれたりすることもありますので、注意して下さい。

  3. 3列デザインの場合の移動
    3列デザインの場合、左右のメニューが共通になっているかなっていないかで変わります。
    共通の場合は、上記の2列と同じ方法で、右から左、左から右にもペーストできます。
    しかし、左右が別の場合は、右は右、左は左で上下の移動しかできません。
    その場合、左右ともフリーエリアが設定してあれば、それぞれの青字の部分を、右左間違えないように上下に移動して下さい。
    片側にしかないが、もう一つの方に欲しい場合は、そちら側のメニュー用HTMLを見て下さい。
    それを全部コピーします。そして、移動と同じ要領で入れたい場所にペーストし、<$mntitle$>をタイトルに、<$mnbody$>を中身に入れ替えればOKです。

  4. 増やす
    これは青字の部分を、カットではなく、コピーします。
    そして、移動と同じ要領で入れたい場所にペーストすれば、コピペした数だけ、いくらでも増やせます。
    ただし、長さのバランスなども考えてやりましょう。でないと読みにくいデザインになります。

  5. おまけの一工夫1
    上記のように、フリーエリアに書きたい事が多いのだが、長くなって困るという場合。
    私のブログでも使っているやり方を説明します。
    一つ目は、ページ内リンクの利用です。
    • まず、フリーエリアを増やして、一つをメニュータグの上に、一つをメニュータグの下に(左右変えても構いません)設置します。
    • 下になった方は、タイトルの前に<a name="info"> </a>などアンカーを入れます。名前はinfoでなくても、好きなもので構いませんが、topとbottomは、よくスキンの中で使いますので、避けて下さい。
      上手くいかない場合は、タイトルを上記タグで括ってもよいです。
    • そして、その中身に詳しい内容を書きます。
    • 次に、上になっているフリーエリアの中身から、今置いたアンカーへのリンクを貼ります。
      例)<a href="#info" target="_self">Informations</a>
      これで、このリンクをクリックすると、ページがスクロールされて、下のフリーエリアが表示されます。
    • この方法では、長々しい説明内容はページの下の方になりますから、ぱっと開いた時には見えません。ですが、リンクを使って、一瞬で直ぐに見る事ができるわけです。

  6. おまけの一工夫2
    今度は、記事を使うやり方です。
    • こちらでは、フリーエリアは一カ所でOKです。
    • まず、詳しい内容を記事に書いて投稿します。
    • 投稿した記事の下部を見て、小さな#や日付をクリックすると、その記事の個別ページになりますので、アドレスをコピーします。
    • 次に、用意したフリーエリア内に、その記事へのリンクを貼ります。
      方法は上記のアンカーへのリンクと同じです。
      ただ、同じページ内のアンカーの場合、アドレスは#infoでしたが、そこをそっくりアドレスに入れ替えるだけでOKです。#はいりません。
    • target=_selfは、同じウィンドウで移動しますので、別窓で開きたい場合、_selfを_blankに変えて下さい。
    • こちらの方法だと、メニューバーに書き込むより、ずっと長く詳しい内容が書けますし、画像も使いやすいです。

  7. 注意点
    このようにして作ったフリーエリアは、そのスキンにしか通じません。
    記事と異なって、スキンを変えたら、同じ作業を新しいスキンでもしない限り、新しいスキンに自動的に移行したりはしませんので、注意して下さい。

  8. 最後に
    この説明だけでは、ピンと来ないかもしれません。
    説明を見ながら、まずは試行錯誤して下さい。自分でやっていると、ああ、こういうことかとわかります。
    コピーかカットしてペースト、中身を書き換えだけですから、大して難しい作業ではありません。1、2回失敗しても、直ぐに出来ると思いますし、どうしても駄目なら、また元のソースをコピーして移すだけで、簡単に最初の状態に戻す事も出来ます。
    まずはやってみましょう。


[PR]
<< _| ̄|○ PageTop Tulipスキン配布 >>
XML | ATOM

個人情報保護
情報取得について
免責事項
Blue Paper Skin by Sun&Moon