お小遣い稼ぎNo.1!!
| 宇宙最強お小遣いサイト「げん玉」 | |||
 |
 |
 |
 |
| お小遣い稼ぎはやっぱりげん玉→【詳細】 | |||
タブでスペース有効活用
今日はお小遣い稼ぎとはまったく関係ない記事です。
まぁよくあることですが(笑
今回はタブの作り方を。
元ネタは
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINEから。
なんとなく簡単そうだったJavaScript Tabifier automatically create an html tab interfaceを選びました(手抜
このブログでも下にある、「ジャンル別お小遣い稼ぎサイトTOP5」で使ってます。
使ってみたいという人がいたりいなかったりするので簡単に作り方を説明します。
と言ってもココでは準備だけして内容は自分で書かなきゃいけないんでちょっと大変かもしれませんよ(^-^;
まずは必要なファイルをダウンロード
JavaScript Tabifier automatically create an html tab interfaceに行って、Downloadのタブをクリック。
その中のtabber.zipをダウンロード→解凍します。
最低限必要なファイルは
・tabber.js
・example.html
・example.css
なので、1つずつダウンロードしてもいいです。
ちなみにtabber-minimized.jsは余計なコメント等を省いてあるのでかなり軽量化されてます。こっちを使ってもいいですが、名前はtabber.jsに変えておきましょう。
サンプルを見てみる
example.htmlのソースを見てみましょう。
ブラウザで開いて→ソースの表示で見れます。
<div class="tabber">
<div class="tabbertab">
<h2>Tab 1</h2>
<p>Tab 1 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
</div>
まず、青色のタグで囲まれた中にタブが作られます。
このタグの外にはなにも影響は出ません。
次に緑のタグでタブが分かれます。
そして赤のタグ(h2,h3)がタブ名になります。これはh2かh3で。
この緑のタグと赤のタグ(h2,h3)がタブの１セットになります。
こんな感じ↓
わかりにくい(笑
で、<p>Tab 1 content.</p>
の部分はタブの内容です。ここは、好きなように書いてください。
ホームページビルダー
実際にやってみよう
まずはexample.htmlのタブ名と<p>Tab 1 content.</p>の部分を好きなように変えてみましょう。
タブを増やしたい場合は<div class="tabbertab">〜</div>をコピーして貼り付けます。
さっき開いたテキストで修正してそのまま保存、もしくは別名保存しましょう。
で、ブラウザで開いてみてうまく変わっていれば成功です。
ブログで使ってしまおう
いつも通り露骨にFC2よりに書きます。
まずは、tabber.jsとexample.cssをアップロード。
次にテンプレートの設定から、
<link rel="stylesheet" href="<%url>file/example.css" type="text/css" />
<script src="<%url>file/tabber.js" type="text/javascript"></script>
の2行を<head>内に追加。
あとはさっき作ったexample.htmlのタブ部分、
<div class="tabber">〜</div>
を好きなところにコピペすれば出来上がりです。
試してみましょう(^-^)
あぁ、長かった(苦笑
そしていつも通りやっつけな感じでスイマセン。。。
人気ブログを要チェック↓
仕事や株取引を効率的にするブラウザ「Lunascape」
の初期費用半額！
