Home > IT Tips


IT Tips Archive

blog chart：無料でできるブログステータスチェック
AMNとマイネット・ジャパンが連携した面白い無料サービスを見つけましたので、紹介したいと思います。「ブログチャート」といって、ブログのURLを打ち込んでしばらくすると、ブログのステータスとして、アクセス数・影響力・評価などをトータルしたものをグラフ化してくれます。

URLは以下の通りです。
blog chart

これは、前述したアクセス数・影響力・被リンク数・注目度・RSS購買数などを計上した結果からステータスをグラフ化したり、RPGゲームのように、LV表示もしてくれます。また、メールアドレス登録でブログにデータを貼り付けることも可能です。

FYI：以下サイトが詳細な記事となります
AMNとマイネット・ジャパンが連携し「ブログチャート」公開

自分のサイトはまだまだ低LVでした。頑張ります。。

Content Glider：ボタンクリックで流れるようにコンテンツを切替
今回は、ブログなどの記事の中に、別枠で記事（テキストや画像を入れるコンテンツ）を付け、更にスライドボタンを付けることで動的（URLを変化させることなく）にページをめくることができるTips紹介をしたいと思います。

昨日の記事で紹介した「Content Slider」と仕組みは同じですが、ページをめくる時の挙動に差があります。こちらも格好良かったので紹介したいと思います。

Content Slider：ページをめくると、切り替わる
Content Glider：ページをめくると、流れるように切り替わる

Content Gliderのサンプルはこちら

１．CSS（contentglider.css）をダウンロード
contentglider.css

２．js（contentglider.js）をダウンロード
contentglider.js

３．jquery（jquerypack.js）をダウンロード
jquerypack.js

４．すべてブログにアップロード
５．<head> 〜 </head> に以下を記述
<link rel="stylesheet" type="text/css" href="/file/contentglider.css" />
<script type="text/javascript" src="/file/jquerypack.js"></script>
<script type="text/javascript" src="/file/contentglider.js"></script>
※CSSは、お好みでカスタマイズください

６．適用させたい記事で以下のような記述をする
<script type="text/javascript">
featuredcontentglider.init({
	gliderid: "canadaprovinces", //ID of main glider container
	contentclass: "glidecontent", //Shared CSS class name of each glider content
	togglerid: "p-select", //ID of toggler container
	remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
	selected: 0, //Default selected content index (0=1st)
	persiststate: false, //Remember last content shown within browser session (true/false)?
	speed: 500, //Glide animation duration (in milliseconds)
	direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
	autorotate: false, //Auto rotate contents (true/false)?
	autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>

<div id="canadaprovinces" class="glidecontentwrapper">
<div class="glidecontent">
Content 1
</div>
<div class="glidecontent">
Content 2
</div>
<div class="glidecontent">
Content 3
</div>
</div>

<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev">Prev</a> 
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
<a href="#" class="next">Next</a>
</div>
※青文字は、テキストや画像を入れるスペースです
script：ページの切り替え制御などを実装
div id="canadaprovinces"：埋め込み記事の枠組み部分
div class="glidecontent"：枠組みに入れる記事内容の部分
div id="p-select"：ページナビボタンの部分

このスライドコンテンツは、オートでページをめくることもできます。
以下コードの赤文字箇所を「true/false」どちらかに切り替えるだけです。
autorotate: false, //Auto rotate contents (true/false)?
このスライドコンテンツは、上下切り替え以外に左右切り替えもできます。
以下コードの赤文字箇所を「updown/downup/leftright/rightleft」いずれかに切り替えるだけです。
direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"

Content Slider：スライドボタンを使った動的なコンテンツを作成
今回は、ブログなどの記事の中に、別枠で記事（テキストや画像を入れるコンテンツ）を付け、更にスライドボタンを付けることで動的（URLを変化させることなく）にページをめくることができるTips紹介をしたいと思います。

Content Sliderのサンプルはこちら

１．CSS（contentslider.css）をダウンロード
contentslider.css

２．js（contentslider.js）をダウンロード
contentslider.js

３．gif（cs-loading.gif）をダウンロード
cs-loading.gif

４．すべてブログにアップロード
５．<head> 〜 </head> に以下を記述
<link rel="stylesheet" type="text/css" href="/file/contentslider.css" />
<script type="text/javascript" src="/file/contentslider.js"></script>
※CSSは、お好みでカスタマイズください

６．適用させたい記事で以下のような記述をする
<div id="slider1" class="sliderwrapper">
<div class="contentdiv">
Content 1
</div>
<div class="contentdiv">
Content 2
</div>
<div class="contentdiv">
Content 3
</div>
</div>

<div id="paginate-slider1" class="pagination"></div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.2], //[true/false, fadedegree]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
※青文字は、テキストや画像を入れるスペースです

このスライドコンテンツは、オートでページをめくることもできます。
以下のコードを６項のscript内に入れるだけです。
autorotate: [true, 3000], //[true/false, pausetime]

Home > IT Tips

Search
Adsense

Calendar
« 2008/07 »
S M T W T F S
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Categories
Tagcloud
Archives
Recent Comments
Recent Trackback
Feeds

↑Page Top