サイドバーに固定表示するタブボックスの表示内容を入れ替える設定

タブとボックスの順序を入れ替え、きちんと連動するようにする方法です。当サイト作者が作成した次のテンプレートについてです。

2012年10月15日(日)追記:ver1.2.0以降はHTML構造を改良したので、このページで述べる内容は過去のものとなっています。

概要

  1. タブボックスをカスタムして、タブ部分ボックス部分の並び順を入れ替える方法です。

  2. HTML編集だけで並び順の入れ替えが可能です。

メリット

  1. デフォルト(タブ切替なし)で表示されるボックスを自由に入れ替えられます。

  2. デフォルトで表示されるボックスにはそのページ内の目次が自動生成され表示されています。しかし、ブログ記事がHTMLで構造化されていないと機能しません。この場合、プラグインカテゴリ1などをデフォルトで再表示した方がスペースを有効活用できます。

テンプレートのHTMLを編集

具体例として、プラグインカテゴリ1が再表示されるボックスをデフォルトで表示されるように編集します。

タブ部分の並び順を入れ替える

  1. HTML編集で、下図で反転している部分を切り取ります。(Ctrl + X)

    customtemplate-111-tabbox-1.png
  2. <ul id="tbox-tabs">の下にペーストします。

    customtemplate-111-tabbox-2.png
  3. 下図で黄系でマーカーした部分を上から番号順になるように書き換えます。また、一番上の class には active も加えます。

    customtemplate-111-tabbox-3.png
  4. 書き換えました。タブの順番をもっと入れ替えたとしても、上から順番に番号を振り直すのは同じです。番号を順番に振らないと、ボックスとうまく連動しません。

    customtemplate-111-tabbox-4.png
  5. タブ部分の編集は以上です。

ボックス部分の並び順を入れ替える

  1. 下図で反転している部分を切り取ります。タブ部分の少し下の方にあります。

    customtemplate-111-tabbox-5.png
  2. <div id="tbox-boxes">の下にペーストします。

    customtemplate-111-tabbox-6.png
  3. 以上でタブ部分とボックス部分の並び順の変更とその連動の編集は完了です。

JavaScriptが無効な場合にメッセージ

  1. JavaScriptが無効な場合、プラグインカテゴリ1が再表示されません。その場合に、その旨を伝えるメッセージが表示されるようにしておきます。

  2. 下図で反転している部分を切り取り、3行上の.(ドット)と入れ替えます。

    customtemplate-111-tabbox-7.png
  3. 入れ替えました。

    customtemplate-111-tabbox-8.png

コピペ用サンプルコード

  1. 上記説明で述べたカスタム後のサンプルコードを置いておきます。<div id="tbox-wrapper">から</div><!-- /tbox-wrapper -->の部分を入れ替えます。作動確認しましたが、機能しない場合はご連絡いただければと思います。

    
    <div id="tbox-wrapper">
    <div id="tbox">
    <ul id="tbox-tabs">
    <li id="tbox-tab-cate"><a class="tab1 active" rel="1" href="#tbox" title="カテゴリー">&#10064;</a></li>
    <li id="tbox-tab-tcont"><a class="tab2" rel="2" href="#tbox" title="このページの目次">&#167;</a></li>
    <li id="tbox-tab-alink"><a class="tab3" rel="3" href="#tbox" title="このページからのリンク一覧">&#8663;</a></li>
    <li id="tbox-tab-aimg"><a class="tab4" rel="4" href="#tbox" title="このページの画像一覧">&#10048;</a></li>
    <li id="tbox-tab-meta"><a class="tab5" rel="5" href="#tbox" title="このページのメタ情報">&#9684;</a></li>
    <li id="tbox-tab-count"><a class="tab6" rel="6" href="#tbox" title="文字数カウント">&#9988;</a></li>
    <li id="tbox-tab-about"><a class="tab7" rel="7" href="#tbox" title="このサイトに関して">&#10003;</a></li>
    </ul>
    <div id="tbox-boxes">
    <div id="tbox-box-cate" class="tbox-box widget-area">
    <noscript>
    <p>JavaScriptを有効にすると、ここにこのページ内の目次が表示されます。</p>
    <p>上の「&#167;」や「&#9988;」などのリンクも機能するようになります。</p>
    </noscript></div>
    <div id="tbox-box-tcont" class="tbox-box">
    <noscript>.</noscript>
    </div>
    <div id="tbox-box-alink" class="tbox-box alink">
    <h3>このページからのリンク一覧</h3>
    </div>
    <div id="tbox-box-aimg" class="tbox-box aimg">
    <h3>このページの画像</h3>
    <p>各画像をクリックすると元の画像を確認できます。</p>
    </div>
    <div id="tbox-box-meta" class="tbox-box meta">
    <h3>このページのメタ情報</h3>
    <dl><!--index_area--><dt>URL:</dt><dd id="urlhere"><%url></dd><!--/index_area--><!--topentry--><!--permanent_area--><dt>URL:</dt><dd id="urlhere"><%topentry_link></dd><!--/permanent_area--><!--/topentry--><dt id="counting-seconds">表示時間:</dt><dd><span id="countup" title="このページを表示してから経過している時間です">.</span> <span id="aa">(</span><span id="chere" title="このページを表示した時刻です">.</span>)</dd></dl>
    </div>
    <div id="tbox-box-count" class="tbox-box">
    <h3><a href="http://unmei.in/counter.htm" target="_blank" title="本文の内容を引用される時に、簡単な編集用途でご利用いただけます">文字数カウント</a></h3>
    <a class="button round" onclick="reset()" onkeypress="r" title="ここをクリックでテキストエリア内をリセット" tabindex="32652">リセット</a><span id="primary-edit-length" title="現在の入力文字数です(スペースと改行は除きます)">0文字</span>
    <textarea id="primary-edit-text" cols="32" rows="14" tabindex="32651" accesskey="t" title="テキストエリア内ダブルクリックで全選択" onkeyup="ShowLength( 'primary-edit-length' , value );" onfocus="if (this.value == 'コピペで文字数を自動カウントできます。本文の引用時に便利です。') this.value = '';" onblur="if (this.value == '') this.value = 'コピペで文字数を自動カウントできます。本文の引用時に便利です。';" onmouseup="" ondblclick="this.select();">コピペで文字数を自動カウントできます。本文の引用時に便利です。</textarea><br />
    </div>
    <div id="tbox-box-about" class="tbox-box">
    <h3>必要な情報を効率的に</h3>
    <p>Windowsの場合、<span class="button">Ctrl</span> + <span class="button">F</span>でそのページ内検索ができます。</p>
    </div>
    <script type="text/javascript">var chere=new Date();var chour=chere.getHours();cmin=chere.getMinutes();csec=chere.getSeconds();var camehere="from "+chour+"時"+cmin+"分"+csec+"秒";document.getElementById("chere").innerHTML=camehere;</script>
    </div><!-- /tbox-boxes -->
    </div><!-- /tbox -->
    </div><!-- /tbox-wrapper -->
    

その他

今後のテンプレートの改訂(ver1.1.2以降)で構造などを改良するかもしれません。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)