2018-03-20 22:09 [Tue]

色々と追加修正したぞ

    » 更新情報
    テンプレートをバージョンアップ!
    DQ_psx_ver3_3 → DQ_psx_ver4

    1年ぶりのバージョンアップにして、大幅アップデート。
    マイナーではなく、メジャーアップデートと言って良いレベルの更新です。

    2月26日から始めた改造は、19日後の3月17日に完成。
    ちょうどSteamでゲームするのを辞めたぐらいのタイミングでした。
    キッカケは、サイトを見ていて
    「トップへ戻る」ボタンがスクロールバーの横にある事に気が付いたからです。
    結構、色々なサイトで採用されています。しかも便利。無意識に使っていました。
    これは導入するしかない!となり、ほぼ3週間かかった長い改造が始まります。

    時間がかかった原因。それは不確定な仕様です。
    最初は「トップへ戻る」ボタンしか実装するつもりがありませんでした。
    実装しているうちに、次第に欲が出てきて、アレコレ実装し始めました。

    「トップへ戻る」以外の4つのボタンを追加。そしてボタンの表示、非表示の問題。
    素材作成部分、何処までを画像素材にするかを考えていませんでした。
    おかげで余計な素材まで作成してしまいました。
    GIMPを扱うレベルが、いつの間にか上がっていたのを知れて良かったです。

    ページネーションの追加は、まったくの想定外でした。
    「次へ」「前へ」ボタンを追加していたら、欲しくなってしまいました。

    あとは調べ過ぎでした。実際にHTMLやCSSを読んで、実装した方が早かったです。
    解説しているサイトを2つ、3つ読めば十分だったのです。
    前に書いたHTML、CSSが汚い、自業自得な状態からの改造なのです。
    元々、解説サイト通りになるはずがないのです。


    (1) jQueryの導入
    GoogleのCDNから持ってきているから、負荷はそうでもない?
    jQueryは横メニューを実装する時にも導入を悩んでいた記憶があります。
    負荷を気にして、結局は導入を断念したのですが、今回は思い切って入れました
    (大手のサイトもjQueryをバンバン使っているしね!良いじゃん!!)。
    サイト開設当時の9年前とは、時代が変わったのです。

    同様にjQueryのスムーズスクロールも導入。気持ちいいスクロール具合です。
    URLの最後に#が付かなくなったのも、地味に嬉しいポイントでした。

    CDNにホストされているjQueryファイルの読み込み
    https://webkaru.net/jquery/cdn-hosted-file-load/


    (2) スクロールバーの隣にナビを設置
    要所要所に自動的にスクロールするようにしました。
    その関係で、HTMLの各所にジャンプポイントとしてIDを新たに追加しています。

    いつの間にか追加されていたブログ上部のFC2検索窓を削除しました。
    特定の場所にスクロールする時に、意外と邪魔だったのが理由です。
    検索窓自体は、ブログのサイドカラム右上にプラグインとして存在しています。

    20180319_09.png
    コレです。ブログ開設当初から、ずっと存在しています。

    これからは、右上の検索窓を利用して下さい。

    20180319_02.png
    念願のスクロールバー隣ナビ!左が全体ページ、右が個別記事。

    「一番下へ」「一番上へ」で、ブログの最上部、最下部にスクロール。
    (個別記事限定)「コメント」で、コメントの始まり部分にスクロール。
    「次」「前」で、それぞれ次記事、次ページ、前記事、前ページに飛びます。
    個別記事、検索画面、全体記事一覧以外で表示される「記事一覧」は、
    今回の苦労ポイントの一つです。
    ブログトップの横メニュー「エントリー」は、各最新記事にリンクしています。
    「記事一覧」は、画面内の対象の記事へスクロールする仕掛けになっています。

    関連したCSS内にあった、謎のスペースを削除しました。
    スクロールバー隣のナビ関係で、新規に259ステップも書いていた事に驚きました。
    この際、横メニュー時には考慮していたIEの旧バージョンへの対応を削除しました。
    横メニューは旧バージョンに対応、スクロールバー隣のナビは非対応。
    なんともチグハグな状態になりました。正直に言って、訳が分からなかったのです。
    テスト環境も無いし、「きっと動くだろう」と楽観的に考えておきます。


    (3) 「次」「前」の意味合いの統一
    個別記事の下にある「次の記事」「前の記事」のリンクを逆転させました。

    20180319_03.png
    以前(DQ_psx_ver3_3)の状態。

    20180319_04.png
    現在(DQ_psx_ver4)の状態。

    これはFC2の論理エラーでしょうか?
    ブログ開設以来、ずっと間違ったままだったけど、修正しました。
    全てのページで、右向き矢印が「次」、
    左向き矢印が「前」の意味合いになりました。


    (4) ページネーションの追加
    毎日ブログを更新しているので、ページ数が大幅に増加しました。
    ユーザビリティ向上のためにも、ページ数を表示するようにしました。
    ただし、全記事一覧は対象外です。

    20180319_05.png
    全記事一覧のページナビ部分。

    20180319_06.png
    トップページのページナビ部分。

    FC2ブログ変数一覧に載っていない<%current_page_num>を、
    使用しているため対象外になりました。
    <%current_page_num>は、現在のページ数を取得する変数です。
    何故か、全記事一覧では<%current_page_num>が無効化されてしまいます。
    <%current_page_num>は、ページネーション作成の肝になっているため、
    断念しました。
    仕方がないので、全記事一覧だけは、前の仕様通りになっています。
    (<%current_page_num>ぐらい変数一覧に載せようや、
    そして全てのページで、無条件で使えるようにしようや)


    (5) 細長いウィンドウのCSSを変更
    一部、意味不明な記述を削除しました。
    位置を微妙に動かしたところ、表示バグも直りました。

    20180319_07.png
    以前(DQ_psx_ver3_3)の状態。

    20180319_08.png
    現在(DQ_psx_ver4)の状態。ギッチギチだぞ!おそらく最長タイトルのコンビ。

    記事タイトルのハミ出しを修正
    http://dqx11.blog81.fc2.com/blog-entry-479.html

    家アイコンにするだけでは駄目だったようです……。
    今回の修正で、さらに改善されたはずです。


    (6) プラグイン非表示化
    随分、昔にサービス終了したユニクロプラグインを撤去しました。
    結構お気に入りのプラグインでした。

    仕事中に調べ物をしていて、発見した記憶があります。
    2013年初めの頃だったか、2012年終わり頃だったか……、
    出会いとかを記事に書いていませんでした。

    たまに、全画面表示にして楽しむぐらい魅力的でした。
    今までありがとうございました。


    (7) SSL化の波
    FC2のサービスが続々とSSL化しています。
    その影響でURLが、httpsになっています。
    FC2ブログランキングのURLがhttpsになったため、貼り直しました。


    以上、7点のアップデートになります。

    新規html部分、138ステップ。
    新規css部分、259ステップ。
    全体で397ステップの追加になりました(修正や削除は含めない)。
    一部コピペはあるものの、これはなかなかの量です。
    ブログ全体が重くならないか心配です。
    そして、新たなバグを生んでいないかも心配です。

    今回の改造は、個別記事を表示しないで記事を読むのに特化した改造になりました。
    私は基本的にFC2ブログの「追記」をあまり利用しません。
    アクセス解析で確認できるのは、個別記事が読まれた時です。
    全体記事で読み続けられると、
    どの記事が人気なのか分からない状況になってしまいます。

    利便性の向上を思って改造しましたが、アクセス解析の面では致命的です。
    今後、人気記事とかが分からなくなったら、困ります。
    今までの傾向から、ゲーム記事を書くようにすれば良いと思いますが……。
    出来れば、お手軽に拍手ボタンのクリックなどをして欲しいものです。
    直接的な反応の方が、アクセス解析よりも分かりやすいためです。
    反応が有っても無くても、自分勝手に更新を続けていくつもりではあります。。。

    スマホのテンプレートも改造したいけど、現状はまだ放置になります。
    すみません。気になる事もあるので、FC2に問い合わせる予定です。

    私の方では、今回のアップデート関係のバグは確認できていません。
    バグを発見した場合は教えて頂けると嬉しいです。
     

    コメントの投稿

    非公開コメント

ブログ内検索
Flashカレンダー
月別アーカイブ
リンク
Glep Web Ring
    Glep Web Ring