ブログのデザインをリニューアルしました。
当ブログもオールジャンルで記事をアップするようになってもうすぐ2年。
ようやく月間1万PVの中堅ブログ(笑)になったので、ブログのデザインを見直すことに。
無料レスポンシブテーマ「Mesocolumn」を採用してデザインをリニューアルしました。
2021.01.28追記
ブログデザインをMesocolumnからCocoonに変更しました。
当記事は記録として公開したままにします。
ブログデザインの見直し
今回ブログデザインを見直そうと思ったのは、見た目への不満(=飽きた?)もありますが、管理の煩雑さの解消とモバイル対応が主な目的でした。
管理の煩雑さの解消
これまでのデザインは、PHPもCSSもよく分からないままあっちこっちをいじって、自分でも収拾がつかないほどめちゃくちゃなコード&設定になっていました。
Twenty Twelveの子テーマであるDeux Mille Douzeを入れて、さらにそのコードを直接いじるというひどい使い方(汗)
小学生の頃はBASIC使いで、なまじコーディングに関する上っ面の知識だけはあるので、余計にたちが悪いのです(笑)
モバイル対応
Google Analyticsで解析してみると、このブログへのアクセスはPCからとモバイルからが半々くらいなので、モバイルからの見た目ももっと改善したいという思いがありました。
これまでモバイル向けにはプラグインのWptouchを使っていたので、Wptouchのコードを書き換えるという方法しかなく(知らないだけかもしれませんが)、これもコードを汚くする要因のひとつでした。
テーマ本体とWptouchの両方をその都度書き換えて、どこをどういじったのか自分でも分からなくなるくらいごちゃごちゃになっていました。
レスポンシブ対応WordPressテーマ「Mesocolumn」
「管理の煩雑さの解消」と「モバイル対応」、この両方を満たすためにはレスポンシブデザインしかないと思い、レスポンシブ対応のWordPressのテーマを探したところ、「Mesocolumn」という無料テーマを見つけました。
デモページをMacとiPhoneで見たところ、とてもきれいなデザインだったので、こちらのテーマを採用することにしました。
下記リンクからダウンロード、もしくはWordPressの外観>テーマから「Mesocolumn」検索してもインストールできます。
WordPress › MesoColumn « 無料 WordPress テーマ
いざテーマ変更
事前にブログのバックアップをとって、いざテーマ変更。
本当は事前にお試しでやってみようと思い、プラグイン「Theme Test Drive」を導入しようと思ったのですが、どうやら配布が停止(もしくは終了?)になっていたので、仕方なくWordPressのライブプレビューで不具合や不足がないのを確認して、「えいやっ」と適用。
テーマを変更したら、次は最低限のカスタマイズ。
テーマオプションはもちろんですが、まだまだアクセス数が気になるお年頃(笑)なので、真っ先にGoogle Analyticsのトラッキングコードを貼り付けて、TwitterとFacebookのボタンを設置。
最低でもここまではその日のうちにやっておきたいと思ったので。
あ、前回の教訓をもとに、今回はちゃんとあらかじめ子テーマを作って、そちらに変更を記述するようにしましたよ。
親テーマには一切手を加えていません。
追加したコードには、コメントで内容を書いておき、あとで見直しができるように。
うん、とりあえずは形になった。
iPhoneから見てもまずまずきれいに見えるし、これでWptouchはお役御免。
お世話になりました。
PCでご覧のかた、スマートフォンでご覧のかた、いかがでしょうか?
タブレットはまだいまいちかと思います…(汗)
もっとイラストのアピールを!
ブログ全体としては相変わらずイラスト関連の記事の割合が低いですが、この「Mesocolumn」は、デフォルトでトップページにスライドショーが設置できたり、カテゴリごとに記事の並んだレイアウトにできる(Featured Category)ので、ここでイラスト関連記事をフィーチャーしてやることにしました。
ちなみに、この「Featured Category」レイアウトを使わなければ、記事は最新のものから順に並びます。
欲を言えば、最初に最新記事を数記事並べて、その後にFeatured Categoryを並べるレイアウトにしたいのですが、どちらか一方しか選べないようです。
しかし、最新記事は検索やTwitterなどから記事に直接飛んできていただくことが多いので、逆にトップページではイラスト関連記事をフィーチャーしていこうと思い、とりあえずはこのレイアウトでいってみます。
いちばん上のスライドショーと、トップカテゴリの「イラストレーション」で、もっとイラストをアピールできればいいなと思います。
「Mesocolumn」の特徴や詳しい使い方はこちらのリンクを参考にしてください。
WordPress 無料テーマ > ポータル/ブログ/マガジン > Mesocolumn|レスポンシブ
あとは、こちらもごちゃごちゃになったカテゴリを整理して分かりやすくしようと思います。
そしてブログタイトルの変更も検討中。
まだリニューアルしたばかりで、今後いろいろ小さい変更が加わるかもしれませんが、しばらくはこちらのデザインで運営していく予定ですので、よろしくお願いします。