HOME > ブログ開発・収入 > 年末年始サイトメンテナンスの報告まとめ

年末年始サイトメンテナンスの報告まとめ


年末年始に行ったサイトメンテナンスの全てをここに記します。
ソースをコピペする場合は、F12などを押して該当箇所のソースをご覧ください。




PCサイトのメンテンナンス


PCサイトのメンテナンスをまとめます。
スマホサイトに比べると、修正内容は少なめです。

ページナビの修正

PCサイトのページナビ

これまでは豆腐に醤油をかける画像を使ってきました。
しかし、画像を使用するとページの処理が遅くなるので、テキスト形式にしました。
これによりサイトの軽量化ができました。見栄えも前より良くなりました。
これまでのボタンと同様に、マウスオーバーで色を付け、当たり判定をわかりやすくしました。


FC2アクセス解析の除去


FC2アクセス解析を導入すると、サイトにアクセスした時、サイトの右上に数秒間ピロピロと小さいFC2のマークがでます。
このピロピロが美しくないので、コードを除去しました。
また、PageSpeed InsightsによるとFC2アクセス解析に含まれるjavascriptコードはサイトの読み込みを遅くしているらしく、除去によりサイトの高速化も進みました。


続きを読むボタンの拡大

続きを読むボタンの拡大

記事一覧表示時に続きを読むボタンが小さくて押しにくい可能性があるので、少し大きくしました。
ただ、縦に大きくすると、サイトの見栄えが悪くなるので、横に大きくしました。


スマホサイトのメンテナンス


続いて、スマホサイトのメンテナンス内容をまとめます。
年末年始の作業で大幅に進化できました。

スマホサイトの装飾を一新


これまでのテキトウに決めた黄色や緑色の装飾をやめて、PCサイトのカラーにならって調整しました。
見出しもh3とh4で違いを付けて、より本文を読みやすくしました。

関連記事の当たり判定も枠全体に設定させ、リンクを押しやすくしました。
カラーリングについての話は、こちらの記事にまとめてあります。

関連記事

スマホサイト下部のプラグインリスト拡張

サイト下部ボタンの充実

スマホサイトの下部プラグインリストを拡張しました。
新たにトップページへ行くボタン、PCビュー、ページの上へジャンプするボタンを追加しました。


トップページの表示を修正

スマホサイトのトップページ

スマホサイトのトップページの表示、リンクの範囲を修正しました。
記事のカテゴリとタグを表示することで、ある程度記事の内容を推測できるようになりました。


ページナビの実装

ページナビの実装

スマホサイトにページナビを実装しました。
それに伴い、これまでの「続きを読む」ボタンを除去しました。

一部の端末では、「続きを読む」ボタンを押した後、記事を閲覧して戻ると、続きの記事が表示されておらず、元に戻ってしまいます。
その対策として、ページナビを設置することにしました。

また、PageSpeed Insightsによると、「続きを読む」ボタンのjavascriptコードがページの読み込みを遅くしているそうです。
ボタンの除去により、高速化も実現できました。


ヘッドボタン、ボトムボタンの修正


これまでのヘッドボタン、ボトムボタンはリンクの範囲が狭く、押しにくいものでした。
そこでCSSを修正して、当たり判定を広げ、押しやすくしました。
ついでにPCサイトの装飾にならって、角を丸くした青い四角に変更しました。
押すと、背景色が緑色になります。


まとめ


いろいろ修正を施してきましたが、重複するタイトルタグの防止のために、ページ番号をタイトルに表示するjavascriptが作れませんでした。
それと検索結果を表示するレイアウト。

検索結果の表示

検索をした時の検索結果の表示を、トップページの記事一覧表示と同じにしたいです。
今の状態だと、サムネイル画像と本文の一部が見えないので、わかりづらいです。

この2つの修正が終わらないまま年末年始が終わってしまったのは、やや残念です。
やはり一朝一夕ではサイトの修正なんてできませんね。地道にやっていきます。

まあ少なくとも、スマホサイトの修正が、ある程度終わったので良しとしましょう。

関連記事

スポンサーリンク
シェアする
関連コンテンツ
関連記事

プロフィール

HN:おとうふ

おとうふ


豆腐メンタルですが、ネットの片隅に生きる半端者です。
このブログでは、主に艦これやアズレンなどゲームに関する記事を中心に運営しております。

初めての方、特定の分野に関する記事のリクエスト、詳細なプロフィールなどはこちらから

記事検索

スマホ・携帯で見る

スマホ、携帯で見たい方は、こちらのQRコードを読み取ってください。
QR