kijiaru.net WidgetJS版の手引き

動作サンプル

使い方

JSファイルの読み込み

まずjsファイルをhtmlのヘッダ部分で読み込んで下さい。

jQueryに関してはすでに読み込んでいる場合、記述不要です。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kijiaru.net/static/js/title.js"></script>

HMLTタグ埋め込み

記事を表示したい箇所に以下のHTMLを埋め込みます

<div id="kijiaru"></div>

以上の設定で記事が表示されますがこれだけではデザインを考慮しないまま表示されますので以下の手順でcssを定義してください。

CSSによる整形

記事はJavasciptを通して以下のようなHTMLタグで出力されます。

<div id="kijiaru">
 <dl>
  <dt></dt>
  <dd>
   <ul>
    <li><a href="http://kijiaru.net/archive/0010863/" target="_blank" rel="external">【韓国/家電】「夫は嫁の命令で動く機械か」「失望した、もう買わない」サムスンTVCM、海外で性差別問題に発展!(動画あり)</a></li>
    <li><a href="http://kijiaru.net/archive/0010853/" target="_blank" rel="external">Microsoft Surface Proがようやく日本で発売</a></li>
    <li><a href="http://kijiaru.net/archive/0010860/" target="_blank" rel="external">【速報】ペリーが浦賀に来航</a></li>
    <li><a href="http://kijiaru.net/archive/0010858/" target="_blank" rel="external">ユーザーの願望をクレクレ扱いして切り捨てるのは正しいんだろうか?</a></li>
    <li><a href="http://kijiaru.net/archive/0010855/" target="_blank" rel="external">Tシャツ1枚5000円・・・ぼったくりすぎるだろ</a></li>
   </ul>
  </dd>
 </dl>
 <p><a href="http://kijiaru.net/" target="_blank" rel="external">kijiaru.net</a></p>
</div>

このHTML部分にCSSを定義すれば整形することができます。

サンプルでは以下のcssを定義してあります。

<style type="text/css">
<!--
#kijiaru{font-family:"HelveticaNeue";color:#666666;font-size:11px;background:#f0f0f0;width:320px;padding:0px 5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
#kijiaru dt:after{content: '人気記事一覧'}
#kijiaru dt{padding: 5px 0px;font-weight:bold;}
#kijiaru a:visited{color:#999999;}
#kijiaru a:link,#kijiaru a:hover,#kijiaru a:active{color:#ff66ff;}
#kijiaru dd,#kijiaru ul{margin:0;padding-left:0px;}
#kijiaru li{list-style:none;padding-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#kijiaru p{text-align:right;text-shadow:0 1px 1px gray;}
#kijiaru p:before{content: '提供:'}
-->
</style>

見出しテキスト、提供元prefix部分テキストは自由に定義することができます。