JavaScriptによる便利機能をデフォルトからカスタムする方法

更新
2013年06月22日(土)

JavaScriptによる機能について、デフォルトからカスタムする方法をまとめました。当サイト作者が作成した次のテンプレートで共通する部分についてです。

eyecatcherシリーズにだけある機能については、タグ:eyecatcherで記事一覧を確認できます。

概要

この記事の目的

  1. テンプレートにデフォルトで備わっているJavaScriptによる機能をカスタムしたい人向けです。

  2. コピペでカスタムできる方法を載せています。

  3. eyecatcherリシーズ ver1.0.0 と customtemplateシリーズ ver1.5.0~1.5.1 用の内容です。過去verと互換性がないとお考えください。今後の改訂されたverにも何らかの修正/改良が加えられている可能性があるので、改訂verも必ずしも互換性があるとは限りません。

テンプレート内の説明を省いたメリット

  1. customtemplateシリーズ ver1.4.1までは、テンプレートのHTML部分にコメントアウトでカスタム時に参考になる説明を載せていました。カスタムのニーズがそれほど高くないことから、ver1.5.0からはコードをデフォルトで載せないようにしました。コメントアウトの量を減らすことでブラウザが読み込むファイルサイズを縮小でき、ページの読み込み速度が若干早くなります。

  2. 説明用ページを設けることで、興味ある人にはより詳細な説明を読みやすい状態でご覧いただけるようになりました。項目が多い上にそれぞれに説明が書かれていると冗長過ぎ、不慣れな人には取っ付きにくかったかもしれません。

  3. サイト内の全ページやカテゴリページだけといった大括りだけでなく、記事ごとにカスタムできるようになりました。技術的なことを載せておくと、記事内で変数を定義してもそれがテンプレート下部で再度定義される、という状況を避けられるようになりました。

カスタム方法

全ページに適用

  1. テンプレートのHTML部分にコードを追加してから編集します。コピペで追加だけだと、デフォルト状態と変わりません。

  2. コードを追加する場所は、特記がない限り「定義追加用スペース3」です。HTML編集のかなり下部にあります。#footerの少し上です。

    //▼▼ 定義追加用スペース3 開始 ▼▼
    //JavaScriptでカスタムの際にご自由にお使いいただけます。
    
    //(この辺りに追加していく)
    
    
    //▲▲ 定義追加用スペース3 終了 ▲▲
  3. コードが1行の場合は右辺を編集します。y の有無を切り替えたり、文字列や数値を変更したりします。かんたんです。

  4. コードが複数行の場合は各行にあるコーテーションのペア内をカスタムします。

    • コーテーションのペア内にコーテーションを追加すると作動に支障がでます。
    • コーテーションのペア外をカスタムすると作動に支障がでるかもしれません。
    • コーテーションのペアの右にカンマがある場合、誤って消さないようにしましょう。

特定のページに適用

  1. y などをfc2変数で挟めば、記事ページだけというように柔軟に条件分岐できます。たとえば、追尾式グローバルナビゲーションを記事ページ以外で表示する場合は次のとおりです。

    var fix_gn='<!--not_permanent_area-->y<!--/not_permanent_area-->';
  2. 特定の記事ページ(たとえばこのページ:blog-entry-89.html)だけ他のページとは違うカスタムを施せます。追記の編集内の文末に下で例示しているようにscriptタグで挟んでコードを追加します。この記事に設定していますので、横の目次をクリックするとスムーススクロールでなく移動先が装飾されているのを確認できます(ie8以下除く)。この記事以外ではスムーススクロールが機能しています。

    <script type="text/javascript">
    var smooth_scroll='';//スムーススクロールでなく、移動先の装飾
    var fix_gn='';//移動先と追尾式グローバルナビゲーションが被らないために
    </script>
  3. 定義追加用スペース3 にコードを追加してデフォルト設定からカスタムしている場合、その部分を特定の記事ページで再度カスタムしてもそのカスタムは有効になりません。有効にする方法もありますが、ほとんどの人には必要のない項目です。

  4. 有効にする場合の具体例を記事内目次をカスタムする場合で例示します。

    • デフォルトでは、記事内目次にコメントタイトル一覧が表示される
    • カスタム後、原則的に記事内目次にはコメントタイトルを表示しない状態にしたい
    • ただし、例外的に特定の記事だけコメントタイトルが折りたたまれている状態にしたい
    テンプレートの 定義追加用スペース3 に追加するコード
    if(tcont_variety==null){var tcont_variety='';}
    
    補足:if(○○==null){} でコードを挟みます。○○の部分に、コード左辺の var 以外の部分を入れます。
    記事ページの追記の編集に追加するコード
    <script type="text/javascript">
    var tcont_variety='close';
    </script>

HTMLに追加するコード

追尾式グローバルナビゲーション

  1. グローバルナビゲーションを固定表示(スクロールに追尾)できる機能です。デフォルトで有効になっています。

  2. ページをスクロールし、ヘッダーがフレームアウトすると追尾式グローバルナビゲーションがふわっと表示されます。

  3. 有効無効を切り替える場合、次のコードを追加します。右辺の y を削除すれば無効になります。

    var fix_gn='y';
  4. 追尾式グローバルナビゲーションはデフォルトで少し透明になっています。カーソルでホバーすると不透明になります。有効無効を切り替える場合、次のコードを追加します。右辺の y を削除すれば無効になります。無効にすれば、ホバーしなくても不透明のままです。

    var transparent_gn='y';//fix_gnが'y'の場合のみ有効
  5. fc2blogのデフォルト設定で表示される最上部の検索バーを非表示にする必要があります。検索バーが表示されたままだと、追尾式グローバルナビゲーションが検索バーの背後になってしまい、表示されていないように見えます。

公開日の右に更新日を移動

  1. 記事の公開日とは別に、その記事を更新した日を記載した場合、その更新日を公開日の右側に移動できる機能です。デフォルトで有効になっています。

  2. ただし、更新日がdlタグなどで所定の場所に記載されている場合に限ります。参考:jQueryで記事公開日の横に更新日を移動させるHTML記述方法

  3. 有効無効を切り替える場合、次のコードを追加します。右辺の y を削除すれば更新日が移動されなくなります。

    var move_modified_date='y';

記事内目次

表示形式

  1. 記事内にそのページの目次を自動生成できる機能です。デフォルトですべて表示になっています。

  2. ただし、記事がHTMLで構造化されている場合に限ります。参考:長文を書く時に使える構造化文章用サンプル一覧

  3. 表示を切り替える場合、次のコードを追加します。

    var tcont_variety='open';
  4. 上記コード右辺をカスタムすることで、ニーズに合わせて4タイプから選べます。右端のセミコロンを消さないようにしましょう。

    'open'
    すべて表示:記事本文およびコメント欄のhタグ、並びにコメントタイトル
    'close'
    同上:ただしコメントタイトルが折りたたまれている状態
    ''
    記事本文およびコメント欄のhタグ
    'min'
    記事本文のhタグ
  5. 任意の記事だけ、目次自動生成しない/コメントタイトル目次化しない方法もあります。

説明用文字列

  1. 次のコードを追加します。各行コーテーションのペア内の文言を任意に変更できます。

    var tcont_str=[
    'このページの目次',//0
    '[非表示]',
    '[このページの目次を表示]',
    '[コメントだけ非表示]',//3
    '[コメントを表示]'
    ];

記事本文折りたたみボタン

  1. 記事がHTMLで構造化されていると、記事ページ内の見出し(h2やh3)をクリックすると、次の見出しまでの本文を折りたためます。デフォルトで有効になっています。

  2. 有効無効を切り替える場合、次のコードを追加します。右辺の y を削除すれば無効になります。

    var skip_ok='y';
  3. ボタンの文言を変更する場合、次のコードを追加します。コーテーションのペア内の文言を任意に変更できます。

    var skip_str=[
    '[非表示]',//skip-ok
    '[表示]'//skip-on
    ];

新規コメント停止中案内デフォルト文字

  1. 当テンプレートでは、fc2blogの標準機能では不可能である「既存コメントを表示したまま新規コメント受付を停止」できます。その旨を案内する時のデフォルト文字設定です。

  2. デフォルト文字を変更する場合、次のコードを追加します。2行目と5行目の右辺を編集すれば、それが停止中の案内として表示されます。

    if(stop_cm_title==''){
    stop_cm_title='新規コメント停止中';//2行目がタイトル
    };
    if(stop_cm_body==''){
    stop_cm_body='この記事への新規コメントは停止中です。他記事のコメント欄をご利用いただけます。';//5行目が説明
    };
  3. 上記コーテーションペア内にある文字列は、新規コメントを停止している旨を案内する時のデフォルト設定です。コメント投稿フォームを非表示にした時に現れます。参考:既存コメントを残したまま、新規コメント受付フォームを非表示にする

tbox(タブボックス)

tbox自体をスクロールに追尾

  1. サイドバー下部に表示されているtboxをスクロールに追尾する機能です。デフォルトで有効になっています。ちなみに、tbox は Tab BOX の省略形です。customtemplate ver1.5.0からは追尾式になったので、追尾BOXの省略形としてもよさそうです。

  2. 有効無効を切り替える場合、次のコードを追加します。右辺の y を削除すれば無効になります。

    var fix_tbox='y';
  3. 3カラムの場合、サイドバー2の固定表示スペース(スクロール追尾式)も制御できます。

tbox内目次で現在表示セクション追尾

  1. 記事本文の現在表示されているセクションをtbox内のもくじで追尾する機能です。追尾方法は、背景色などを変化させることです。デフォルトで有効になっています。

  2. 有効無効を切り替える場合、次のコードを追加します。右辺の y を削除すれば無効になります。

    var tcont_now='y';
  3. ページのスクロールで、ブラウザ表示領域の一番上から何ピクセル下に各hタグが来ると、そのセクションを現在読んでいると判定するかをカスタムできます。デフォルトでは 150px です。

  4. 値を変更する場合、次のコードを追加します。右辺の数値を任意に変更できます。pxなどの単位は不要です。3桁を超える値を設定すると、セクションがフレームインする前にtbox内もくじの追尾が先行する可能性があります。気をつけましょう。

    var tcont_sensor=150;

再表示するかどうかを元画像サイズで分岐

  1. 記事本文内の画像をtbox内で再表示する機能です。デフォルトで有効になっています。

  2. 小さい画像やソーシャルブックマーク登録ボタンなどについては、元画像のサイズを基準にして再表示しないように設定できます。

  3. 次のコードを追加します。右辺の数値を任意に変更できます。

    var no_aimg_w=130;//横幅
    var no_aimg_h=20;//高さ
  4. 元画像の横幅と高さのどちらかが、右辺値を超えると再表示されます。デフォルト値での分岐具体例は次のとおりです。

    • 20x20は再表示されず、20x21は再表示されます。
    • 125x17は再表示されず、135x17は再表示されます。
  5. 具体例を、画像再表示エリアにブログランキング用画像などを再表示しないカスタムで紹介しています。

  6. 特定の画像だけ枠線を表示させず、画像一覧で再表示させない方法もあります。

再表示画像の設定

  1. 再表示される際のサイズの横幅と高さをカスタムする場合、次のコードを追加します。右辺の数値を任意に変更できます。それぞれ3以上ならそのサイズで表示されます。

    var aimg_w=1;//横幅
    var aimg_h=1;//高さ
    
  2. aimg_w が1なら画像が1列で表示され、ホバーしても1列を保てるサイズに自動調整されます。 aimg_h が2なら画像が2列で表示され、ホバーしても2列を保てるサイズに自動調整されます。サイドバー横幅を変更していてもです。ただし、横幅よりも高さの方が長い画像があったり、後述のホバー時の倍率を1.5より大きくするとこの限りではありません。

  3. 再表示画像をホバーすると、デフォルトでは1.5倍に拡大されます。倍率を変更する場合、次のコードを追加します。右辺の数値を任意に変更できます。この機能を使わない場合は右辺を 1 にします。

    var aimg_hover=1.5;
  4. 再表示画像下部に元画像サイズの表示/非表示を切り替える場合、次のコードを追加します。右辺の y を削除すれば無効になります。

    var aimg_original_size='y';

tbox内にプラグインカテゴリ1と2を再表示

  1. tbox内にプラグインを再表示できます。デフォルトで無効になっています。

  2. 有効無効を切り替える場合、次のコードを追加します。右辺のコーテーションペア内に y を追加すれば有効になります。

    var tbox_plugin1='';
    var tbox_plugin2='';
  3. ただし、プラグインによっては再表示しようとするとエラーになる場合があります。参考:特定のプラグインが表示されない場合の対処方法

  4. この機能は、今後の改訂次第で廃止されているかもしれません。

便利機能ボタン

記事部分の装飾

  1. 記事部分の装飾(文字サイズ、位置)を読者が選択できるようにする機能です。デフォルトで有効になっています。ページを切り替えても、読者の選択が次のページでも維持されます(クッキーで)。

  2. 有効無効を切り替える場合、次のコードを追加します。右辺の y を削除すれば無効になります。無効にすると、画面端に表示されている該当する便利機能ボタンも非表示になります。

    var kijideka_use='y';//記事内文字1.25倍
    var kijideka2_use='y';//記事内文字1.5倍
    var move_content='y';//記事位置切替

目次を常に表示

  1. 読者がヘッダーやサイドバーなどの表示/非表示を切り替えられる機能です。同時に、そのページの目次が固定表示(スクロールに追尾)されます。読者が長文記事を続けて読む際の利便性を上げられます。デフォルトで有効になっています。

  2. 次のコードを編集します。右辺の y を削除すれば表示切替ボタンの利用を停止できます (ボタン表示やその機能がなくなります)。

    var yinyang_use='y';

スムーススクロールもしくは移動先の装飾

  1. ページ内移動用リンク(自動生成された目次など)をクリックすると、現在表示している位置からどの程度移動するのかを自動スクロールで確認できる機能です(ie7以下除く)。デフォルトで有効になっています。

  2. 有効無効を切り替える場合、次のコードを追加します。右辺の y を削除すれば無効になります。右辺を''にすると、スムーススクロールの代替機能として移動先に装飾や目印などを加えて分かりやすくできます(ie8以下除く)。自動生成された目次クリックによる移動でのみ移動先が装飾されます。

    var smooth_scroll='y';
  3. スクロールの速さをミリ秒単位で指定できます。デフォルトでは、1000ミリ秒=1秒です。速さを調整する場合、次のコードを追加します。右辺をミリ秒で指定します。

    var smooth_scroll_speed=1000;
  4. スムーススクロールから移動先の装飾へ切り替えるメリットはなさそうなので、非推奨です。それでも移動先の装飾に変更する場合、追尾式グローバルナビゲーションを無効にしておいたほうがいいです。

すべてをカスタム

  1. 上述したコードをすべて追加する場合、次の一覧をご利用いただけます。追加するだけだとデフォルトと変化ありません。ニーズに合わせて各値を調整します。

    var fix_gn='y';
    var transparent_gn='y';
    var move_modified_date='y';
    var tcont_variety='open';
    var tcont_str=['このページの目次','[非表示]','[このページの目次を表示]','[コメントだけ非表示]','[コメントを表示]'];
    var skip_ok='y';
    var skip_str=['[非表示]','[表示]'];
    if(stop_cm_title==''){stop_cm_title='新規コメント停止中';}
    if(stop_cm_body==''){stop_cm_body='この記事への新規コメントは停止中です。他記事のコメント欄をご利用いただけます。';}
    var fix_tbox='y';
    var tcont_now='y';
    var tcont_sensor=150;
    var no_aimg_w=130;
    var no_aimg_h=20;
    var aimg_w=1;
    var aimg_h=1;
    var aimg_hover=1.5;
    var aimg_original_size='y';
    var tbox_plugin1='';
    var tbox_plugin2='';
    var kijideka_use='y';
    var kijideka2_use='y';
    var yinyang_use='y';
    var move_content='y';
    var smooth_scroll='y';
    var smooth_scroll_speed=1000;

コード追加編集具体例

  1. スクロール追尾を無効にする。

    var fix_gn='';//追尾式グローバルナビゲーション
    var fix_tbox='';//サイドバー下部のtbox
  2. 記事内目次のコメントタイトルは折りたたまれた状態をデフォルトにする。

    var tcont_variety='close';
  3. 記事本文折りたたみボタンを表示しない。

    var skip_ok='';
  4. 便利機能ボタンの内、上下にスムーススクロールするボタン以外は非表示にする。

    var kijideka_use='';//記事内文字1.25倍
    var kijideka2_use='';//記事内文字1.5倍
    var yinyang_use='';//目次を常に表示
    var move_content='';//記事位置切替

このページに関して

  1. 予告なく変更する場合があります。

  2. このページに限りませんが、記載内容の正確性は保証いたしかねます。

  3. 今後のテンプレート改訂時には上記説明と相違があるかもしれません。ご了承願います。

以上です。

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