スタイルシートが少し理解出来てきたのでブログを修正してみた結果

投稿日：2015年10月15日

皆さんこんにちは。
何時も何時も本当にどうでもいいことにこだわってしまう伊達あずさです。

以前、ビジネスカテゴリでWordPressで記事内の文字サイズを全体的に変更したいなんて言う記事を書いた私です。
これをきっかけとしてスタイルシートを少し理解し始めた私は、全ての記事を直したい衝動にかられてしまいました。
というわけで、過去の記事(固定ページも)を全部修正しちゃいました！！

・・・

え？何処が直ったのかわからないですか？

そーですよね・・・わからないですよね。
「ぽっぽブログ」の熱烈ファンで毎日欠かさず隅々まで見てるぜ！！っていう人であっても全ての修正箇所に気づくことはないでしょう。
っていうか、大部分の修正箇所に気づかないでしょうね。

というわけで、修正した箇所をご紹介します！

難度：低

ブログ内の文字サイズ
トップページの見出しタグ
リンクの色
ファミコンソフト一覧の検索ページのテーブルタイトルの背景に色が付いた
ファミコンソフト一覧「ジャンルで検索」ページの構成
フッターウィジェッド(TwitterやGoogle+のフォローボタン)
モバイル端末ではぽっぽブログのヘッダ画像が表示されなくなった
トップページと雑談記事一覧にサムネイル画像付き新着記事リストを追加
エンタメ紹介所記事一覧ページを追加

「ぽっぽブログ」を見てくださっている方ならこの辺りぐらいはお気づきになったかもしれませんね。
ブログ内の文字サイズに関しては、前回記事にしてますし、見出しなどはそれなりに目立つ変化ですし、リンクの色についても前より若干濃くなったので、「あれ？」と違和感を覚えた人が居たかもしれません。
ファミコンソフト一覧の「ジャンルで検索」ページ構成は以前と全然構成が変わっちゃったので、見たことがある人はお分かりになるレベルかもしれませんね。
今までPCで見ていてくれた方には高難度過ぎますが、モバイル端末で見てくださっていた方からすると、ヘッダ画像がなくなっちゃったのは大きい変化と呼べる部類だと思います。
雑談記事一覧やエンタメ紹介所記事一覧は何時も見に行くようなところではないので気付かない方もいるかもしれませんが、トップページはお気づきになられた方も多いんじゃないかな？
なんか、スタイルシートを修正とか言っておきながら、PHPのショートコードまで作っちゃってますが・・・

この辺りまでは良かったんですよね。うん。
きっと、気づく人は気づきますし、修正の手間もそこまではかかっていないのです。
問題は次辺りからですね・・・

難度：中

全記事&ページの戻る系ボタンの文字サイズ
漫画タイトルの文字サイズ
連続した記事の最後に付いている「Prev | Next」の「|」が太字ではなくなった
プレイ日記記事の上下に付いている戻る系ボタンの順番が変わった

どうでしょう・・・この辺りからもうほぼ気づかないレベルですよね。
気づいた人居ました？

ごちゃごちゃしていたタグを整理するため、繰り返し利用されているものはclass化してみました。
ちなみに戻る系ボタンというのは、このページでいうところの「雑談記事一覧へ」っていうボタンです。
記事の上下についてますよね。
これが昔と比べると若干、比率的に大きくなって”back”というクラスがつきました。
漫画のタイトル部分も”comic”というクラスになりました。
ほとんど差がわからないかもしれませんが確認してみてくださいね。
以前より若干文字が大きくなっています。・・・うん、本当に若干です。
「Prev | Next」の「|」が太字じゃなくなったとか・・・この辺から結構どうでもいいレベルですね。
プレイ日記の戻る系ボタンの順番は・・・全記事修正中に順序が変わってしまっているものを発見したせいで全部統一しました。
何故か、少数派の順序に・・・(そっちの方が何か見栄え的に気に入ってしまったんですもん)

難度：高

使用テーマを子テーマ化した(見た目は同じ)
class化することでタグを整理した(見た目は同じ)
idを全てclassに変更
意味のないタグを削除

・・・もう普通にブラウザで見ている限り絶対にわかりませんよね。
「うわ～ぽっぽブログのソース前より綺麗になってる～(僅かに)」なんて気づいた人が居たら是非お会いしてみたいですよ・・・

スタイルシートどころかhtmlタグすらほとんど知らなかった私は、かなり無駄なタグを使用していたのですよね。
それを全て見た目は同じになるよう整理しました。
ソースとしてみると物凄く変わっているんですが、普通に見ている限りは何の差もありません。
後、idは1ページ内でユニークでなければならないというルールがあるにも関わらず、当時それを知らなかった私はclassと同じような使い方でidを設定してしまっていました。
そのせいで、主にファミコンソフトの一覧内で、1ページ内に同一idが複数出現していました。
ブラウザの方が気を利かせてくれていたため、ルール違反をしていても特に見栄えに変化はなかったのですが、やっぱりルール違反は良くないので直しました。
ついでに、今まで、何の意味もなくブログ内の画像を全て「float: left」していたのを修正し、画像の後のfloatを解除するコードも全て消しました。
当時の私はなんでこんなことしていたのでしょうね・・・

なんといいますか・・・見た目には何ら影響がない修正の方が時間がかかっているのですよね。
結局1週間ぐらいブログの修正に費やしてしまいました。

どうせ、見た目に変わりはないわけですから今後の記事だけ直していけば良かったのかもしれませんが、私の性格上、どーしても嫌なのですよね。
結局、自分の気持ちを落ち着けるためだけに1週間も時間を費やしてしまうとか・・・
あぁ・・・こういう非効率的な性格直したいよ～～～～～

結局、どうでもいいことについついこだわって無駄に時間をかけてしまう自分の性格が恨めしいというお話でした！