STINGER3の崩れたテーマを修正してみたら意外と簡単で面白かった

3月末に公開した【切実】ブログのテーマをいじるときは必ずバックアップをとるべき！から約1ヶ月。崩れたテーマを特に直すこともせず、気が向いた時にブログを更新するという生活をしてきましたが、少しずつ増えてくるアクセスと比例して再びやる気が出てきました。

というわけで5月こそは1日1記事アップの目標を達成すべく着々と準備を進めています。そして、その準備の一つとして放置していたブログのテーマを直すことにしました。どんなにたくさん記事をアップしても、サイトのこの見た目では来てくれた方に失礼ですからね。サイトテーマの崩れっぷりを晒しつつ、解決に至る道のりをしるしていきたいと思います。

バックアップをとろう

なにはなとくもまずこれがないとはじまりません。前回はバックアップをとらずにサイトをいじって取り返しがつかなくなりました。

まずは、WordPressのデフォルトのエクスポート機能を使ってバックアップをとります。しかし、諸説を調べるも果たしてこれがぼくの望むバックアップの条件を満たしているか不明。もしかして投稿した内容や写真、コメントのみのバックアップなんじゃないかと。

というわけで、更に色々と調べていくと、ITリテラシーの高くないぼくでも簡単にできそうな方法を発見。

ブログの変更履歴とかをEvernoteに入れておく -Evernoteの使い方その2- | ごりゅご.com

要は、テーマを弄る前のコードをEVERNOTEにきちんと保管しておこうというもの。原始的な方法ですが、一番わかりやすく安心な気がします。

修正したいポイントは2箇所

今回修正したいポイントは2箇所。
①サイドバーとメインカラムの間隔をあけたい
②一覧表示時に写真とタイトルを一行表示にしたい

スタイルシートのそれっぽい箇所をとにかくいじってみた

ぼく自身はコードはかけません。ただ、書いてあるコードをずっと見ていると、このコードはこの部分に該当するんだろうなというのがすこしだけわかります。
今回は事前にバックアップをとっているので、恐れることなくどんどんコードをいじっていきます。
そして、作業を始めてから1時間。思いの外簡単に決着がつきました。

サイドバーとメインカラムの間隔をあける方法

今回、メインカラムとサイドバーに間隔があいていなかった原因が、”サイドバーを左側（メインカラム側）に寄せる”をという設定になっていたのがその原因。スタイルシートのサイドバーの設定で、floatの設定をrightに変更します。

すると、サイドバーが右側によったのですが、逆に大きく間隔があいてしまいました。

ここで全体のカラムの幅を1000Pxから930pxに調整します。

全体の幅が狭まったことで、メインカラムとサイドバーの間隔が適切な間隔になりました。

一覧表示でタイトルと写真を一行で表示させる方法

記事の一覧表示画面で、アイキャッチ画像と記事タイトルが一行で表示されない現象。
タイトル表示させる部分のピクセル数が元の380pxから466pxと大幅に大きくなっていたことが原因でした。レクタングルの広告を2本表示させるためにメインカラムを広げた時に、誤って一覧表示の際のタイトル部分も広げてしまったようです。

ですから、”一覧表示時のタイトルのタイトルと抜粋の幅”を466pxから430pxに変更するだけで解決できました。

コードが読めるとサイトいじりがすごく楽しくなる

一見すると難しく見えるコードも決して意味もなく英語や数字が並べられているわけではありません。
その構造や動きを無駄なく表現しているのです。今回は崩れたテーマを直すだけでしたが、自分で仮説を立てて実行し、それがきちんと反映された時の喜びはかなりのものです。ブログの更新と併せて、プログラミングの勉強もしていきます。