ブログのデザインをフルリニューアルしました!WordPressって子テーマを使えばカスタマイズも割りと簡単!

Sponsored Link

SeeSaaで2005年1月から書き始めたこのブログをWordPressに引っ越したのが2011年9月。そろそろ2周年というこの時期に、ようやく重い腰を上げて遂にフルリニューアルを敢行しました。

WordPressに引越しの当初は、WordPressの知識が殆ど無い状態でのカスタマイズを強引にやっていました(コアをいじってしまうとか)。意外と何とかなりましたが・・・。
また、その時に使ったテーマ自体もいわゆる野良テーマで、カッコいいデザインは好きだったのですが、コーディング的にもいろいろ不可思議な箇所があるものでした(一度もバージョンアップされることもなく、今はもう公開も停止しています)。

そんな溜まった不満を一気に解消するためのリニューアルでした。

今回のWordPressブログのフルリニューアルのTipsや覚書など備忘録エントリです。
Sponsored Link

テーマ

今回のリニューアルでは公式テーマを使おうと決めていました。世間的には当たり前かもしれませんね。やはり信用できる感じ。一定レベル以上のコーディングが保証されていて、その時に応じたバージョンアップもあったり。
で、今回は白ベースで3カラムなところでWordPress › BirdTIPS « Free WordPress Themesを使いました。

birdtipsこれが今回選んだBirdTipsのスクリーンショット。

mixedmediaredそしてこれがこれまで使っていたテーマMixedMediaRedのスクリーンショット。

子テーマを使ったカスタマイズ

単にテーマを入れ替えるだけではリニューアルになりません。どうしても、どこかにカスタマイズをする必要が出てきます。
例えば、広告やソーシャル系のパーツを表示させるとか、テーマ自体を自分好みに作り替えたいとか。

なるべくカスタマイズ箇所やその手間を減らすようにすることも今回の作業目標でした。

今回のリニューアル(開発といっていいのかな?)がすんなり終わったのは、ローカル環境で子テーマを使って開発したお陰です。オリジナルに手を付けることなく、修正を反映させることができるのってすごいね。

それと、子テーマといえばCSSだけが対象になるのかと思ったら、調べてみるうちにその他のphpや画像等も使えるとのことが分かりました。
これで一気に作業が楽になりました。特にsingle.phpやそれに関係する自作のicludeのphpなど。

こんなにスムースに出来るとはねぇ・・・。知らないって怖い w

タイトルロゴ

タイトルロゴは大事と言われたから・・・ロゴ画像を作ってみたよ! | kira-ismで作ったタイトルロゴを新テーマでも生かそうとしましたが、なかなか苦戦しました。

具体的にはタイトルロゴがなぜか横幅いっぱいに広がって表示されてしまうという症状です。
悩んだ末に、子テーマでCSSに

#header img {
    width: auto;
}

を追記して解消しました。理由は未だに理解できていません w
多分、正しい直し方は別にあると思われます。

とにかくコードのカスタムはしない

というつもりで、テーマのオプションでどこまでカスタマイズできるか、プラグインでなんとかなるものはないか、などひと通り検討したのですが、結局はその辺はほぼ最適化されていたようです。

でも上述のsingle.php周りのincludeファイル(広告関連やソーシャルサービス系)や、AdSense以外のアクセス解析をbodyタグを閉じる直前に入れるのは、どうしてもコードを触らなければならなかったですね。

リニューアル結果

まずは技術的に、というと大袈裟だけどWordPressの理解が深まったし、コードを触る作業がスムースになった。一言で言えば勉強になったということ。次のリニューアルはもっとスムースに行きそうな気がする・・・。

アクセス数などはまだ初日なのでどうという傾向もないです。
ただ、ぐっと見やすくなったなぁとは思います。ただ、デザインが割と普通なので、個性を出す何かが必要だなと思いました。とりあえず、タイトルロゴを大きくしてみるとか?


リニューアル直後なのでなにか不具合あるかもしれません。
そんな時は、教えて下さいね!

Sponsored Link

コメントを残す