2018-04-16 23:13 [Mon]

SNSボタンの変更・表示高速化?

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

    更新したばかりなのに、またもや更新しちゃいました。
    原因はブログの表示速度が妙に遅い事です。
    最初は自分の環境が原因かと思いました。
    しかし、漫画喫茶でも同様に表示速度が遅かったのです。

    どうやら、FC2ブログの環境設定から出来る、
    お手軽なSNSボタン設置の設定が駄目なようです
    (ツイッターとフェイスブックの読み込みが妙に遅い)。
    今回は公式から持ってくるのではなく、テキストリンク形式に変更しました。

    テキストリンク形式のSNSボタンを、テスト出来ていません。
    上手く動いているのか、謎です。
    ツイッターも、フェイスブックもアカウントを持っていないのです。
    自作自演になるのも嫌です。
    誰かが使ってくれて、バグ報告をしてくれても、直せないかもしれません。
    ポップアップするために、簡単なJavaScriptを使っているので、
    そもそもブロックされている人もいるかもしれません。

    公式ボタンから、自作ボタンに変更するデメリットですね。
    色々なサイトで自作ボタンを採用しているので、
    何らかの仕様変更があっても対応できるとは思います。
    問題は、私のブログでは使われていないボタンなので、
    いつまでも旧仕様のまま動き続ける事でしょうか。

    2018041501.png
    上の拍手ボタン以外の、2つのボタンを廃止。本文から離した場所に移動。

    2018041502.png
    スマホ版も同様に入れ替え。

    2018041508.png
    そもそも私のスマホだと、ツイッターが上手く表示されていなかった。

    変更するにあたって、フェイスブックの「いいね!」を「シェア」に変更しました。
    カウントを取得するのが、面倒くさそうだったのです。
    JavaScriptを使えば表示できるようですが、表示速度改善に繋がりません。

    PC版の見た目は良いかなーと思います。
    スマホ版の見た目が気になります。

    拍手ボタンも環境設定で、お手軽に設定しているのです。
    そのせいで、自由に配置できません!
    今まで通り、ツイッター、フェイスブックと拍手ボタンを並べたかったです。
    PC版は妥協して、離れた場所に置きました。コレはコレで良いです。
    スマホ版は階段状態になるのが、気になるところです。
    解決法は不明!どうしたものでしょう。

    2018041505.png
    変更適用前。かなり遅い。

    2018041601.png
    変更適用後。多少マシになった?

    上画像は、GTmetrix で調べてみた結果です。

    GTmetrix | Website Speed and Performance Optimization
    https://gtmetrix.com/

    ブログ設定を更新
    http://dqx11.blog81.fc2.com/blog-entry-166.html

    2013年に、お手軽に時代の流れに乗ってしまったのが悪かったのです。
    このブログを開設してから、9年も経過しました。
    色々と事情が変わってきてしまったのです。
    Font Awesome と言うような便利なサイトは、当時は無かったと思います。
    今回のツイッターマークと、フェイスブックマークに利用させて貰っています。

    Font Awesome
    https://fontawesome.com/

    スマホ版のページの方で、オリジナルアイコン化を、
    かなり前に進めていました。中途半端に終わっています。
    今回の更新で、Font Awesome を知ったので、利用するかもしれません。
    自前で用意するよりは、CDNを使った方がかなり良いはずです。
    作成する手間や、表示速度が違います。

    小粒な変更としては、ブログ上の横メニュー「エントリー」内に年を追加しました。
    スクロールバー隣ナビの記事一覧にも、年を追加しました。
    毎日更新していて、気が付きませんでした。年があると、かなり便利です。

    2018041506.png
    寂しいけど、コイツともお別れだ。

    一から作り直そうかな
    http://dqx11.blog81.fc2.com/blog-entry-46.html

    サイドカラムに設置していた、Amazon関係のウィジェットを廃止しました。
    ブログ開設当初は、色味が少なくて寂しかったので追加していました
    (確か上リンク先の時に追加したと思う)。
    特に更新もしていないし、表示速度にも影響しているので、辞めます。
    代わりに右サイドカラムにあった、Flashリバーシを移動しました。

    2018041507.png
    謎の小窓も辞めだ。

    > いつか自分の商品を紹介できるようになりたいモノです。
    > えぇ、夢物語です(`Д´)
    この野望は未だに持っています。
    会社はあてにならなかったから、自力で何とかしたいです。
    もしかすると、フッとAmazonリンクが復活する日が来るかもしれません。
    えぇ、オッサンは元気です(`Д´)

    大した作業量ではないが、グダってしまい1週間ぐらいかかりました。ショボス
     
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に問い合わせる予定です。

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

引用の囲いを設定

    » 更新情報
    引用の囲い部分を設定しました。


    変更前。




    変更後。

    スタイルシートの blockquote 部分を少し弄るだけの簡単なお仕事です。
    点線を実線にして、幅を広げました。
    上下の線を文章から少しだけ離しました。
    作業時間にして20分もあったかどうか分かりません
    (見た目の問題で少し悩みました)。

    今更、引用ボタンの存在を知った
    http://dqx11.blog81.fc2.com/blog-entry-611.html

    10月27日。
    > 存在を知らなかったので、テンプレートもデフォルトのままだ。
    > 幅が少し狭いかなと思うので、そのうちテンプレートを弄る。

    怖いお化けの種類は何ですか?
    http://dqx11.blog81.fc2.com/blog-entry-635.html

    11月20日。
    > (そういえば引用の囲いも直さないとな……)。

    そんな簡単な問題を、このように先延ばしにしていたわけです。ははは
     
2016-06-19 23:59 [Sun]

記事タイトルのハミ出しを修正

    » 更新情報
    以前まではページナビ部分の
    記事タイトルがハミ出す事がありました。

    20160619_バグ、ホームの記述を無くして対応

    最近は特に、お姉チャンバラ関連の記事を
    連発して書いていて、気になっていました。
    実は2013年の9月からこのバグに気が付いていました。
    だけど、なんだかんだ修正せずに放置していました。

    とっても今更な修正です。
    ただ、気になっていた事が解決したので良しです。


    | ホーム |

    家アイコン

    単純にこの変更だけです。
    家に見えるでしょう?(ドヤァ
    家アイコンは小さいくせに手間取りました。

    マウスのチャタリングが酷いのです……!
    (たまにシングルクリックが、ダブルクリックと認識されます。
    ドラッグしていると、意志に反してドロップします。)

    SANWA SUPPLY ゲーミング用プリエンプティブマウス MA-LSWAR2

    このマウスを使っています。
    特に設定変更やら、重り調整をしなくても、初期の状態でとても使いやすいです。
    初めてのゲーミングマウスだったせいもあるのか、感動を覚えたレベルです。

    チャタリングが発生してから、1年以上使っています。
    そろそろ買い替えたいです。しかし電気屋に同じマウスが売っていません。
    使いやすそうな別のマウスでも検討中です。

    ちっこいアイコンを作るのに、本当にイライラしました。
    普段使いだと、特に気になりません。
    ちょっと何かを作ろうとしたり、マウスで本格的な作業を
    行おうとすると、イライラさせられます。

    本当に困った物です。
    ハゲそうです。
    たすけて^q^
     
2016-05-11 03:40 [Wed]

「関連記事」機能を追加!

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

    テンプレート更新
    http://dqx11.blog81.fc2.com/blog-entry-135.html

    テンプレートの更新は、なんと5年ぶりです。
    細かい機能追加はしていましたが、
    今回の「関連記事」機能はわりと手間のかかる手術でした。
    機能自体は簡単だったのですが、
    このブログのこだわりを実装するのが大変でした。

    (機能自体は、この記事の時点で完成していました)
    ちょっとだけ、テンプレートを改造したぞ
    http://dqx11.blog81.fc2.com/blog-entry-435.html

    ……はい、カーソル部分です。
    ずいぶんと前に実装した部分で、やり方をさっぱり忘れていました。
    該当部分のコードはすぐ見つかっても、調整に手間取る始末です。
    次回やる時は、さすがにもう大丈夫でしょう。

    あとは、画像が表示されるタイプの関連記事プラグインを追加しようと思っています。
    どのプラグインを追加するかは、まだ決めていません。

    地味にバグもあって、長い間、放置しています。直したいです。
    いいかげん、コードの整理もしたいです。
    超綺麗にする自信はありませんが、マシには出来るはずです。
    ほんと、なんだこれ。

    カテゴリーが少ない上に、タグの設定もしていないので
    関連記事の機能があまり動いていないように見えます。
    これは私が悪いです。
    過去記事を1つ1つ見直して、タグを設定する……、
    ちょっとその覚悟はまだありません。

    私の方では「関連記事」関係のバグは確認できていません。
    バグを発見した場合は教えて頂けると嬉しいです。
     

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