IMG 4985

Webデザイナーでもなんでもありません、@jinnaitakumiです!

今回のポイントをまとめると

  • 今回の目的はSEO対策と、中身の完全掌握
  • レスポンシブにはまた挑戦します
  • 「WordPress デザインブック」がすげえいいです

の3つです!

テーマを自作した理由/コンセプト

SEO対策

今回のテーマ自作の目的はまず、SEO対策があります。

いままでは見出しにh4とかh5を使っていて、SEO的によろしいとはいいがたい状態でした。記事のタイトルもh2で、サイドバーがh3とかも、気に食わなかったし。

(そもそもいままでのテーマを使いはじめたころはまだ、HTMLとかCSSについてそんな詳しくなくて、変なふうにしちゃった、というのはあるんですが)

そのへんを良い感じにしました。

トップページでは記事タイトルはh2で、個別ページはh1を、見出しはh2から使っています。

サイドバーを広く

いままではサイドバーがめちゃめちゃ狭かったんです。

そんなに知識もないのにレスポンシブテーマを使っていて、サイドバーの幅をどう制御したものかと、頭を抱えておりました。

最新記事とか人気記事をサムネイル付きで表示させたくて、でもそれだとサイドバーが狭すぎたので、340pxとそこそこワイドにしました。contentの660pxと合わせると、トータルで1000pxの幅を使っています。

大きい声では言えませんが、広告のサイズとかもめっちゃ意識してますねw

中身を完全掌握

自作ですから、テーマの中身を完全に把握しています。これは気分がいいです。

分からない状態って気持ち悪いですからね。
いままで使っていたテーマ「iTheme2」はそのへんがよく分からなかったんです。

ソースだけじゃなく、テーマの設定画面でいろいろいじれるようになっていて、けっこう面倒くさいことになっていたんじゃないのかな、と。

自作テーマは、そんな
「なにこのソース?」
みたいなことがないので気持ちいいです。

デザインって大切だと思う

ブログ大好きな界隈の人たちはともかく、普通のライトなiPhoneユーザーの人たちにとっては、それが誰のブログか、なんて関係ないですよね。

そういう人たちに
「あ、これ前にも来たことあるな!」
と思っていもらうには、デザインを作るしかないな、と。

いわば顔です。
「あ、以前にもお会いしましたね」

とは、いうものの現状ではシンプルにまとめていて、あんまり個性出してないですけどね。これからです。そこは。

製作期間は3週間ほど

だいたい製作期間は3週間くらいでしたけど、まったく手をつけない日もけっこうあったので、たぶん1週間あれば、空き時間で作れちゃうと思います。

休日が3日あれば、がっつり作り込めるはず。ライトなテーマだったら半日で作れると思いますよ。

今回のテーマ作りの実作業時間は、24時間くらいじゃないかな、と思います。

ライトなものを一回作ってみる

最初から完成度高いデザインを作ろうとすると面倒くさいです。かなり。

そうではなくて、最初はカンタンなものから作るのがいい。超シンプルで、手の込んでないやつ。(今回、私が作ったやつ)

そうすれば、まずだいたいのテーマ作りの流れが分かるし、どういう構成でもってテーマができているのかが分かります。

そうすれば次回作のそこそこ凝らせたやつの構成も考えやすくなります。

さようならレスポンシブ、また逢う日まで

いままではレスポンシブ(ウィンドウサイズに合わせてテーマの幅が動いてくれる超格好いいやつ)なデザインのテーマを使っていましたが、やめました。

でも今年中にレスポンシブに戻る予定です。

いまの時点だと、私があんまり詳しくなくって(分岐とかまだ使えない)、レスポンシブテーマを各デバイスで最適化できるように制御しきれないので、ひとまずやめました。

でも、私はレスポンシブ派。だって恰好良いじゃん!
(frasmとかバンクーバーのうぇぶ屋とか大好き)
なので、勉強してレスポンシブに返り咲く気まんまんです。

できれば夏までに、遅くとも今年中に。

▼この記事にもほぼ同意なわけです。

スクリーンショット 2013 04 09 5 23 30
#ブロネク の9回目がブログデザインの話しなので、僕も何か書こうと思ったのだけれども*frasm

「レスポンシブって何? どういうやつ?」
という人はfrasmとかバンクーバーのうぇぶ屋とかをパソコンのブラウザで開いて、ウィンドウを少しずつ狭くしてみてください。
そうです。それがレスポンシブです。

参考:必読!5分でわかる流行のレスポンシブWebデザインまとめ | 株式会社LIG

PCテーマをベースにモバイルテーマを作成

レスポンシブとお別れしたので、モバイル用のテーマも作りました。

テーマはひとつ作って、それでいったん終わりにする予定でした。
モバイルはそのうち作ればいいや、と。

ですが、ちょっと勢いで作ってみたら、意外とカンタンに作れちゃいました。PC向けをベースにちょっといじって、およそ3時間ほどで完成です。

なのでソースはPC向けとほとんど同じです。サイドバーも下にあるので、「レスポンシブ?」と勘違いする人もいるんでないかと思ったり。

困ったのは画像のサイズの最適化ですが、それも解決(後日記事にします)。

暫定的なデザインですが、悪くないかな〜、と我ながら思っています。

IMG 4982

IMG 4984

参考にした書籍

今回のテーマ自作にさいして参考にした、というか全面的に依存したのは、「WordPress デザインブック」という本です。

書店でWordPressの本を探したら、とりあえず見かけるくらいメジャーな本ですね。

CDが付属していて、phpとかはコードをコピペして作れますし、必要なファイルとかも入ってるので、便利です。

自分でごにょごにょしたのは、ほぼCSSのみでした。

けっこうヘビーなカスタマイズも解説しているので、参考になる部分が多いです。

まとめ

ということで、今回のポイントをまとめると

  • 今回の目的はSEO対策と、中身の完全掌握
  • レスポンシブにはまた挑戦します
  • 「WordPress デザインブック」がすげえいいです

の3つです!

こういう組み立てて自分の好きなものを作り上げていくのって、めちゃめちゃ楽しいです。

まあ、あくまで今回のテーマ作りは「テーマの作り方ってどんな感じなのかな?」という要素が大きくて、ガチのは次か、次の次に取り組もうと最初から決めていました。

最初っからすげえのなんて作れないです。

これでだいたい構造が分かったので、分岐でいろいろ制御したり、幅をぐりぐり動かしつつ制御するやり方を覚えれば、レスポンシブもいけそうです。