アースナビWebサービスへようこそ

アースナビではWebサービス第一弾として、世界中のイベントの中から編集部おすすめのイベントをランダムにピックアップし、ユーザーのウェブサイトに検索表示させることのできるブログパーツ「Pickup Event!」をリリースしました。
あなたのホームページやブログなどの表示したい場所に簡単なコードを挿入するだけですぐお使いいただけます。
利用料は無料。ユーザー登録の必要はありません。この機会にぜひお試しください。

 ココログユーザーの方はこちら

 TypePadユーザー、TypePadファミリーユーザーの方はこちら

ブログパーツ「Pickup Event!」

このページの下部にある「Pickup Event!　HTMLコード作成」からHTMLコードをコピー＆ペーストしてお使いください。

「Pickup Event!」HTMLコード作成

ココログユーザーの方

1. このページの上部にある「Pickup Event!　HTMLコード作成」から都市と色を選択してください（選択しない場合、3へ。都市は全都市、色はslateblue）
2. 「レビュー & コード作成」をクリックしてください（都市と色を選択しない場合、3へ）。
3. 下の「このブログパーツをココログに設置！」ボタンをクリックしてください。

TypePadユーザー、TypePadファミリーユーザーの方

1. このページの上部にある「Pickup Event!　HTMLコード作成」から都市と色を選択してください（選択しない場合、3へ。都市は全都市、色はslateblue）
2. 「レビュー & コード作成」をクリックしてください（都市と色を選択しない場合、3へ）。
3. 下の「このウィジェットを登録する」ボタンをクリックしてください。

そのほかのオプション

応用編

1. レイアウトは全てCSSで記述されていますので、ユーザー独自のスタイルを設定することもできます。
2. http://www.earthnavi.com/js/services/style.jsに弊社指定のスタイルが記述してありますので、このファイルをリンクからはずします。
3. ユーザー独自のCSSををご用意ください。
4. 作成したCSSに以下のclassを記述し、スタイルをそれぞれ決定します。
   .En-box
dl.En-Pickup  /* コンテナー　*/
dt.En-Title  /* Pickup Event! タイトル　*/
dd.En-Contents  /* イベント表示部分　*/
p.En-EventTitle  /* イベントタイトル部分　*/
p.En-Thumb  /* イベント画像部分　*/
p.En-Thumb img
p.En-Location  /* 開催都市部分　*/
p.En-Date  /* 開催日部分　*/
p.En-Content  /* イベント本文部分　*/
p.En-ads  /* 広告枠(現在未使用)*/
.En-copyright  /* コピーライト部分　*/
.En-copyright address　 /* コピーライト部分　*/
.En-Pickup a:link, .En-Pickup a:visited
.En-copyright a:link,.En-copyright a:visited
   ※上記はPickUp Eventで使用している全てのclassを記述した参考例。
5. 以下、Pickup Event HTML Code 構造
   全てのタグにclass名を指定してあります。
   ユーザー作成のCSSに以下のclass名を指定し、スタイルを設定することでユーザー独自のCSSを適用できます。
   <!--Pickup Event Code-->
<div class="En-box">
  <dl class="En-Pickup">
    <dt class="En-Title">PickUp Event!</dt>
      <dd class="En-Contents">
        <p class="En-EventTitle">イベント名</p>
        <p class="En-Location">開催都市</p>
        <p class="En-Date">開催日</p>
        <p class="En-Thumb">画像</p>
        <p class="En-Content">本文</p>
        <p class="En-ads">広告(現在未使用)</p>
      </dd>
  </dl>
  <div class="En-copyright">
    <address>Powered by <a href="http://www.earthnavi.com/" title="アースナビ">アースナビ</a></address>
  </div>
</div>
<!--End Earthnavi Code->
   ※copyrightは必ず表示させるように設定してください。