customtemplate ver1.4.1からver1.5.1への改訂履歴

更新
2013年03月10日(日) 02:40

customtemplate と customtemplate-3c のver1.4.1からver1.5.0への改訂履歴です。主要部分は次の3点です。

  • 新着記事にnew!を自動表示
  • サイドバー背後のtboxを追尾式に変更
  • 読者が調整できる装飾を拡張

2013年3月10日追記:ver1.5.0からver1.5.1への改訂履歴を追加しました。

注目すべき改訂部分の概要

  1. グローバルナビゲーションなどの最新記事一覧などに、7日以内に公開された記事があればnew!と表示する機能を追加しました。

    参考画像

    130301v150modified-1.png
  2. ブログ管理人がカスタムできるだけでなく、読者がカスタムできる装飾を拡張しました。ページ遷移してもクッキーにより保持されます。

    参考画像

    130301v150modified-2.png
  3. サイドバー背後にあったtboxを追尾式に変更しました。

HTMLやfc2変数

  1. 以下のタグを削除しました。iPhoneでブログをPC表示すると全体が縮小表示される場合の対処方法として記述していましたが、JavaScriptでより良い対策を施しました。これにより、iPhoneなどスマートフォンでページ表示時に、ブログの左上が拡大表示されるのではなく、画面横幅ぴったりでブログが表示されるようになりました。

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  2. 記事の投稿時間を表示するようにしました。投稿時間の表示が不要の場合、bodyにクラスno-entry-timeを付与することで、かんたんに非表示にできます。

    参考画像

    130301v150modified-3.png
  3. コメントが皆無の場合、グローバルナビゲーション内でそれが分かるようになりました。

    参考画像

    130301v150modified-4.png
  4. 関連記事リストにサムネイル(アイキャッチ)画像を表示する場合を考慮し、必要なコードをあらかじめ記述しておきました。

  5. tboxにあった文字数カウント機能を廃止し、最新記事一覧を追加しました。

  6. tboxの必要な情報を効率的に部分に、ブラウザ標準機能に関する説明を少し増やしました。

CSS

  1. bodyに追加すると便利なクラスを新設しました。クラスの切替でかんたんに装飾できます。

    • entry-hover - 記事ページ以外で記事部分をカーソルでホバーすると枠線が太くなります。この機能は以前からありましたが、クラスの付け替えだけでカスタムできるようにしたので便利になりました。
    • no-some-time-ago - ○○時間前などを非表示にできます。
    • no-entry-time - 記事の投稿時間を非表示にできます。
    • no-tbox - スクロールに追尾するtboxを非表示にできます。
    • no-tbox2 - スクロールに追尾するtbox2を非表示にできます(2カラムでは無し)。
  2. タグページで、そのタグをハイライトするように改良しました。これにより、ユーザビリティの向上が若干期待できます。

    参考画像

    130301v150modified-5.png
  3. 公式プラグインのカテゴリタグにクラスを付与することで、現在表示しているカテゴリ名やタグ名をハイライトできるように改良しました。

  4. その他、改訂した主な定義は次のとおりです。

    • HOMEページの固定表示スペースも.floatlなどが機能するよう変更しました。
    • 記事追記部分でなく記事本文にh2タグを使っていると、tboxの目次番号が2から開始していたのを修正しました。作者の想定していた使い方ではなかったため、テンプレート公開から1年以上経過した今ごろ気づきました。申し訳ないです。
    • 段落ごとのナンバリングで、まず使われなかった.order .h3 dtに関する定義を削除しました。作者が使っていなかった上、それに関する説明も皆無なので誰も使わないのは当然でした。
    • tboxの定義部分を変更しました。サイドバー下で追尾式に変更したためです。
    • 関連記事リストにサムネイル(アイキャッチ)画像表示用の定義を追加しました。
    • ページ移動ボタンのクラス名y-migiなどをy-rightなどに変更しました。
    • 便利機能ボタン(ver1.4.1では上下移動ボタン)の表示位置調整クラスを3つから2つに減らしました。
    • パラパラ漫画風アニメーション用定義を追加しました。
    • その他、次の定義を追加し微調整を行いました。
      #page{z-index:10;}
      #nav-wrapper2{min-height:24px;}
      .entry-utility{line-height:1.8;}

JavaScript (jQuery)

  1. 現在最新のjQuery v1.9.1を使うようにしました。

  2. JavaScriptコードの定義追加用スペースを従来の2ヶ所から4ヶ所へ増やしました。ヘッダーで読み込むJavaScriptを追加したので、そのカスタムの際に分かりやすくするためです。

  3. ナビゲーション内で、現在ページへのリンク背景色を指定する方法の作業工程を短縮できるようにしました。同じコードを4ヶ所変更する必要がありましたが、1ヶ所の変更でよくなりました。

  4. グローバルナビゲーションなどの最新記事一覧に、7日以内に公開された記事があればnew!と表示する機能を追加しました。公開後の経過時間によって、どの程度前に公開されたかも表示されます。1時間以上は四捨五入による概算です。

    • ○○分前 - 0分以上60分未満
      (公開時間から59分59秒まで)
    • ○○時間前 - 1時間以上24時間未満
      (60分から23時間59分59秒まで)
    • ○○日前 - 1日以上7日未満
      (24時間から6日目23時間59分59秒まで)

    次の部分に表示されます。

    • グローバルナビゲーションの最新記事
    • グローバルナビゲーションの最新コメント
    • カテゴリページの記事タイトル
    • 記事ページの記事タイトル直下(下図参照)
    • サイトマップの記事タイトル
    • 検索結果ページの記事タイトル
    • コメント投稿日時
    • トラックバック投稿日時

    参考画像

    130301v150modified-1.png
  5. サイドバーにあったこのページの目次を常に表示ボタンを便利機能ボタンとして画面端に移動しました。また、記事内文字拡大ボタン(2つで4段階可能)、記事位置切替ボタンを追加しました。これにより、ブログ管理人がカスタムできるだけでなく、読者がカスタムできる装飾が増えました。ページ遷移してもクッキーにより保持されます。機能が有効の場合、背景色がハイライトされます(下図では ⇤)。

    • - 記事内文字:1.25倍、下と同時で2倍
    • - 記事内文字:1.5倍、上と同時で2倍
    • - 表示切替:ヘッダーとサイドバー非表示にし、目次を常に表示
    • - 記事位置切替:左/中央 (2カラムは左/右)
    • - 記事位置切替:中央/右 (2カラムは無し)

    参考画像

    130301v150modified-2.png
  6. スマートフォンのPCビューで表示する場合、meta viewportタグを動的に挿入するようにしました。#pageの横幅を自動取得するので、テンプレートをカスタムして横幅を増減させても問題なしです。

  7. 追尾式グローバルナビゲーションは通常時は少し透明状態に変更しました。カーソルでホバーすると不透明になります。

  8. サイドバー背後にあったtboxを追尾式に変更しました。画面サイズの小さなスマートフォンでPCビュー表示した場合でも、概ね意図通りの挙動になりました。

  9. tboxの画像再表示で元画像が縦長の場合でも、1列表示や2列表示をできるだけ維持できるように調整しました。次回改訂時には、jQueryからCSS3へと変更するかもしれません。

  10. tbox右から二番目のタブで表示されるボックスで、プラグインカテゴリ1と2の両方を再表示していない場合はその旨表示されるように改良しました。

  11. HTML内にコメントアウトで記述していたJavaScript機能説明を割愛し、JavaScriptによる便利機能をデフォルトからカスタムする方法で詳細に解説するようにしました。

  12. 表示切替のオプションで、ヘッダーを非表示にするかどうかを選択できる機能がありましたが、これを廃止しました。

  13. 動く顔文字や画像スライドで、パラパラ漫画風アニメーションを手軽に利用できる機能を追加しました。

ver1.5.0からver1.5.1への改訂履歴

  1. グローバルナビゲーション内カテゴリで現在ページへのリンク表示修正を行いました。

  2. クラスgray付加時の次の装飾を見やすく修正しました。

以上です。

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