
こんにちは!みう(@miu0512)です。スマホのローディングに時間がかかると、それだけでストレスを感じてしまうものですが、今回、一気に読み込んでタブ表示にさせて「重たさを感じさせないサイト」を意識して制作してみました。
実際にスマホテーマで使ったのはこの「新着記事」「人気記事」部分!
タブを使うことによって、長くなってしまいがちな記事一覧をスッキリ表示する事ができ、見ている人によりわかりやすく「おすすめな記事」を伝える手段になります。特にスマホのような小さな画面では、「見やすさ」が一番のカギとなります。
使用したjQueryプラグインはこちら
http://code.jquery.com/ui/1.10.3/jquery-ui.js
導入の仕方はカンタン3STEP
STEP1:<head>の中に以下を追加する
[HTML]
<!--jQuery読み込み-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--「jquery-ui.js」読み込み-->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
STEP2:設置したい場所に以下を書き込む
[HTML]
<div id="tab">
<ul class="tabnavi">
<li><a href="#fragment-1">新着記事</a></li>
<li><a href="#fragment-2">人気記事</a></li>
</ul>
<div id="fragment-1" class="tab_content">
<h2>新着記事一覧</h2>
☆ここに記事一覧用の記述☆
</div>
<div id="fragment-2" class="tab_content">
<h2>人気記事一覧</h2>
☆ここに人気記事一覧用の記述☆
</div>
</div>
[JS]
<script type="text/javascript">
$( "#tab" ).tabs();
</script>
STEP3:CSSを調整する
タブの部分は「display:table;」を使用しました。
[CSS]
div#tab ul.tabnavi{
display:table;
table-layout: fixed;
width:100%;
}
div#tab ul.tabnavi li{
display:table-cell;
text-align:center;
}
div#tab ul.tabnavi li a {
color:#fff;
display:block;
background:#333333;
margin:0% 2% 5% 2%;
padding:3%;
}
タブの中身の部分は各自調整が必要です。
[CSS]
.tab_content{
background:#333;
padding:10px 0;
}
もし、動かなかったら・・・?
人によって設定や構築方法が違うため、正常通り動かない場合があります。そんな時、私はWP標準のjQueryを止めたり、クラスを変えたり、以下の参考サイトを拝見させていただいたりしています。
さいごに・・・
タブの実装方法はかなりのバリエーションが有りますが、今回私はテストも含めて「.tabs()」を使ったタブ表示にしてみました。意外とサクサク読み込んで動いてくれるので、結構気に入っています♪
最後までお付き合いいだだきありがとうございます!これからも、みう(@miu0512)を応援していただけたら嬉しいです!
最新情報をお届けします
Twitter でみうをフォローしよう!
Follow @miu0512