野良メモ -noramemo-noramemo

京都府京都市山科区で活動するwebデザイナーのブログです。

[:N]ブログをリニューアルしてWordPressのテーマを作成したときの所感まとめ

この記事は2013年6月18日に書かれたもので、内容が古い可能性がありますのでご注意ください。

ブログをリニューアルしましたよ♪

このブログを始めた時からひとつの目標としていたもの、「WordPressのオリジナルテーマ作成」をなんとか2012年中に…なんて思っていたら気がつけば半年が経っておりました!徐々にプライベートの時間を取れるようになったのでなんとか2013年6月にリニューアルをすることができました。今回はその時に考えたことや困ったことなどをメモしておこうと思います。

こんにちは!@noramasaです。
初めてブログを立ち上げたのがちょうど1年前くらいになります。その頃は自分の経験を記録するための場所、簡単に言えば自分専用のメモ書きみたいなポジションでブログを使っていました。だからデザインもかっこ悪くてコーディングの調整もめちゃくちゃなまま公開してました。
※最初は公開もせず、自分しか知らない場所にすることも考えてましたが。

そして数ヶ月後にはブロガーさんたちの綺麗でカッコいいブログデザインを見ているうちに『自分もこんな風にできるようになりたい!』と思うようになりました。でも、私はデザインというものが得意ではなく、会社でもダントツにできません!そんな私なりにいろいろ試行錯誤してみたのでまとめておきます。

リニューアルにあたっての目標や変更点

今回のリニューアルを通して意識したことは以下の通りです。

  1. WordPressでオリジナルテーマ
  2. 飽きにくくちょっと繊細な感じのデザイン
  3. レスポンシブ対応(スマホ・タブレット対応)
  4. 2カラム構成
  5. PCブラウザの対応

WordPressでオリジナルテーマ

リニューアル前のブログはデフォルトテーマからCSSの差分を記述しただけのものでした。
仕事でも使う機会のあるWordPressなので簡単なテーマは自作しておきたいという思いがありました。今回は何回か参加させていただいたWordBenchでのサンプルファイルを見本に作成して見ました!

飽きにくくちょっと繊細な感じのデザイン

正直、これが1番手こずりました。

『たいしたデザイン経験もないやつがそう簡単に飽きにくいうえに繊細なデザインができるか!!!そもそも飽きにくいデザインって何ぞや!!!』

この具体性のないイメージを持った自分に心の中で何回もキレてました…X(
おそらくデザインについては考えて→作成→眺めて→やり直しというフローを5回くらいしてました。
とりあえず大きく色を入れすぎると後々飽きやすいのかなと思い、ベースをグレー色にして、マウスオーバーなどのポイント部分を薄いピンクという色使いで落ち着きました。
デザイン力が欲しいと心の底から願っておりますX(

  • リニューアル前のトップページ
    リニューアル前のトップページ
  • リニューアル後のトップページ
    リニューアル後のトップページ

ただ、リニューアル前のデザインで記事を3つ並びにしてファーストビューを意識した作りが結構気に入ってたので、機会があればどこかで復活させたいなと企んでいたりします:)

レスポンシブ対応(スマホ・タブレット対応)

レスポンシブデザインのフレームワークは充実していて、参考にさせていただいたサイトがたくさんありました。
特に、すでにレスポンシブ対応されているサイト・ブログを見るのがわかりやすかったです。対応の方法もいくつかあるとは思うのですが、私はCSSにMedia Queriesを指定することで画面幅によって変化するようにしています。
とはいえ、すべての端末の画面サイズを考慮するのはなかなか困難なため、数種類の端末しかチェックしていません。そのため、実際のスマートフォンやタブレット端末では意図していない表示になっている可能性もあります…その辺りは徐々に改善して行こうかなと思っています!

2カラム構成

リニューアル前のデザインではトップページも中ページも1カラムにしておりました。最初は1カラムの方が余計なものがなくて見やすいしスッキリしたように見える、何より大きく写真をドドーンと載せれる…そんな理由でした。
でも、他のカテゴリー記事なんかにもアクセスが繋がってほしいことや今回追加したadsense広告などを考えると2カラムにするのがいいかなと考え、1カラムを卒業してみました!
実際2カラムにして思うのはコンテンツを足しやすい点が大きいと感じてます。気に入っているサイトのバナーを設置するだとか、記事のランキングを表示するとか…まぁまだなにも追加してないんだけどね!w

  • リニューアル前の記事ページ
    リニューアル前の記事ページ
  • リニューアル後の記事ページ
    リニューアル後の記事ページ

PCブラウザの対応

もともとCSS3を使ってどういったことができるのかなども知りたかったので、今回はモダンブラウザの最新版、InternetExplorer9以降あたりだとしっかり見れると思います。
InternetExplorer8でもそれなりには見れるんじゃないかと…もし崩れなどありましたら「◯◯のブラウザで崩れてます」などご指摘いただけると嬉しいです!

まとめ

いろいろと書いたりしましたが、ブログって強制じゃないと思ってます。
ブログを書き出した以上は書き続けなければいけない…かもしれませんが、そのペースは人それぞれでいいと思います。趣味や勉強だってその人のペースでいいはずです。今勉強や仕事をしているのは誰のためですか?自分のためですよね。
だからドーナツ食べながらでもいいんですよ、まわりがアクションを起こしたからって自分もしないといけないなんて考えないで、自分がしたいと思ったらすればいいと思います。だから焦らず自分のペースでがんばってください!
※焦り気味の友人へのちょっとしたコメントです。

  • マイペースでもいいんじゃないかな!
    マイペースでもいいんじゃないかな!

さて、今回オリジナルテーマの作成からデザイン作成まで一連の作業をしてみて、すべてがひとりでできるというのはすごい武器になることを痛感しました。
私が今回のリニューアルを得て会社でもデザインをしていく…そんなことは起こり得ませんが、少なくても「したことがある」のと「できないからしない」というのは考え方や自分の視野に大きく影響を与えると思います。
私自身、デザイン系の勉強を始めましたし、Adobe Photoshopの使い方なんかのセミナーを受講したり…。将来的にはデザインもコーディングもこなせるように勉強を続けて行こうと思えた良いキッカケになってよかったです!
というわけで…新しく生まれ変わった野良メモ-noramemo-を今後ともよろしくお願いします:D

以上、@noramasaでした!