お小遣い稼ぎNo.1!!

スポンサーサイト

--.--.--(--:--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

人気ブログを要チェック↓
人気ブログランキング FC2 Blog Ranking
仕事や株取引を効率的にするブラウザ「Lunascape」

このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをBuzzurlに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加 このエントリーをnewsing! このエントリーをYahoo!ブックマークに追加 このエントリーをイザ!ブックマーク
スポンサー広告 | トラックバック(-) | コメント(-) | [EDIT]

タブでスペース有効活用

2007.09.01(00:03)

今日はお小遣い稼ぎとはまったく関係ない記事です。
まぁよくあることですが(笑

今回はタブの作り方を。

元ネタは
知っておいて損はない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)がタブの1セットになります。
こんな感じ↓
タブ図
わかりにくい(笑

で、<p>Tab 1 content.</p>
の部分はタブの内容です。ここは、好きなように書いてください。
ホームページビルダーDreamweaverがあれば楽ですね。。。

実際にやってみよう

まずはexample.htmlのタブ名と<p>Tab 1 content.</p>の部分を好きなように変えてみましょう。
タブを増やしたい場合は<div class="tabbertab">~</div>をコピーして貼り付けます。
さっき開いたテキストで修正してそのまま保存、もしくは別名保存しましょう。
で、ブラウザで開いてみてうまく変わっていれば成功です。

ブログで使ってしまおう

いつも通り露骨にFC2よりに書きます。

まずは、tabber.jsexample.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>
を好きなところにコピペすれば出来上がりです。
試してみましょう(^-^)

あぁ、長かった(苦笑
そしていつも通りやっつけな感じでスイマセン。。。

スポンサーサイト

人気ブログを要チェック↓
人気ブログランキング FC2 Blog Ranking
仕事や株取引を効率的にするブラウザ「Lunascape」

このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをBuzzurlに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加 このエントリーをnewsing! このエントリーをYahoo!ブックマークに追加 このエントリーをイザ!ブックマーク

<<FC2ブログリニューアル | ホームへ | アクセストレードレビューでお小遣い稼ぎ>>

コメント
(♥ó∀ò)ノユイデス♪

これスゴイ便利ですよね~♪

前に教えてもらって是非使いたいんだけども、中に何を入れるか決まりません(´▽`*)アハハ

でもすごい使いたい~((o(>▽<)o))

川^∀^)σ凸*
【2007/09/06 13:35】 | 小遣い稼ぎbyゆい #yY1kaskg | [edit]
こんにちは!
うーん、うーん、タグって難しい…。
まだまだ勉強中で、なんともかんともな状態なshinoです(-_-)

( ´∀`)σ凸
【2007/09/07 16:03】 | +shino+ #- | [edit]
(σ´ω`)σ゙~~コンバンゎ~♪

コレって下のヤツですよね~♪
使えるようになりたいな(´艸`)クスクス
今度、時間が出来たら
またお勉強に来ます(´C_,`o)ノ

応援 (U σ´(Å)`)σ ワン
【2007/09/09 19:44】 | のむ #- | [edit]












管理者にだけ表示を許可する
トラックバック
トラックバックURL:
http://everymoney.blog95.fc2.com/tb.php/55-ef0dac37
| ホームへ |
ジャンル別お小遣い稼ぎサイトTOP5

ジャンル別お小遣い稼ぎサイトTOP5

お小遣いサイトで稼ぐ

ピックアップ

アフィリエイトで稼ぐ

【A8.net(エーハチネット)】

アフィリエイトといえばココ!
広告も豊富で単価も高い。
まずはA8.net(エーハチネットでお小遣い稼ぎ!
A8.net(エーハチネット)詳細

【トラフィックゲート(TG)】

報酬が高い!
紹介報酬も高い!!
初めてのASPにもオススメ!
トラフィックゲート(TG)詳細

【アクセストレード】

報酬受取1,000円から!
振り込み手数料無料!
初心者に優しいASPです。
アクセストレード詳細

【LinkShare(リンクシェア)】
アフィリエイトならリンクシェア
物販アフィリエイトならココ!
世界最古・最大級のASP!
報酬支払いはなんと1円から!
LinkShare(リンクシェア)詳細

【AFFILIATE MASHUP】
アフィリエイトするなら、アフィリエイトマッシュアップで
最低支払い金額300円!
広告毎の審査なし!
げん玉と同じ3ティア!
AFFILIATE MASHUP詳細

【バリューコマース】

日本初の老舗ASP!
広告数も最大級!
バリューコマース詳細

【JANet(ジャネット)】
アフィリエイト の ジャネット
アフィリエイト の ジャネット

お小遣いサイトを運営するなら絶対かかせないASP!
報酬単価も他よりちょっぴり高め!!
JANet(ジャネット)詳細

【アフィリエイト2.0】
ビッダーズ商品を掲載できる。
ビッダーズ商品以外にもポイントサイトや音楽ダウンロードなどの広告も多数。
アフィリエイト2.0詳細

【電脳卸】
商品無料仕入れ戦隊『電脳卸』
物販専門の大手ASP。
2ティア紹介制度や顧客獲得制度など稼げる要素がたっぷり!
電脳卸詳細

カテゴリー

最近の記事

最近のコメント

最近のトラックバック

アクセスカウンター

アクセスランキング

ブロとも申請フォーム

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。