初めてのWordPressオリジナルテーマ作成!僕はココにこだわった!

たらハコオリジナルテーマのこだわりポイント大公開!

夏に向けて(?)テーマのレベルアップに着手し始めました。

こんばんは
よっひー(@yosiakatsuki)です。

WordPressでブログを書き始めて2ヶ月が経ち、ブログ開始時に作成したテーマもそろそろレベルアップ!

レベルアップ前に、今のテーマのこだわりポイントを少しまとめておこうと思います!

現在稼働中の最新のテーマについてはこちらに書きました↓

オリジナルテーマ「tarahako2014」

2014/7/7現在、たらハコで使用しているテーマは「tarahako2014」というオリジナルテーマになります。

オリジナルテーマなら名前なんてどうでもよかったですね。スミマセン。

半年前はまだ「CSSってなんぞや?」状態、さらには「デザインなんて僕の人生で触れることは無いだろう」と思っていた僕が頑張ってコツコツと作り上げたこのテーマ!

そろそろレベルアップさせようと思うので、レベルアップ前に僕がこのテーマ作成の時にこだわったポイントをまとめておこうと思います!

① スマホ表示メイン!

smartphone

僕のブログへのアクセスは約8割がスマホから!
(現在は約7割まで落ち着いています)

よく見られている「スマホ表示」をメインにブログのデザインを考えるようにしています!

たらハコではiPhoneで表示されることを考えて、ブログのアイコン画像等様々なパーツが横幅300pxでうまいこと収まるように考えて作っています。
(左右に10pxのマージンを設けて、メインコンテンツが300pxで表示されることを前提に作ってます。)

最近ではデザインだけでなく、1段落の分量もスマホで読みやすくなるよう心がけ始めましたが、なかなか文の区切りを調整するのは難しいです…

② 画面常駐するメニューなどはおかない

画面常駐する要素はおかない

いきなり愚痴になってしまうんですけど、僕はどこまでもついてきて画面に居座る「TOPへ戻る」とかがたまらなく嫌いなんですよ!

PCなら気にならないですけど、スマホで見てる時に、ちょうど右手の親指あたりにいつもTOPへ戻るがあると嫌になりません?

「TOPへ戻らないように…」と気にしながらスクロールしてもらうのは、ブログを見てもらっている方に申し訳ないので、画面に常駐するメニューは置かないようにしています!

③ レスポンシブWEBデザイン

レスポンシブデザインにした

たらハコはBloggerの時からレスポンシブWEBデザインを採用しています。

「なぜ?」って訊かれると答えに詰まってしまうのですが…「なんとなく響きがかっこいい」からレスポンシブWEBデザインにしています… 流行りものに弱いんですボク…

ただ、レスポンシブWEBデザインでテーマを作ってみた感想としては「大変だった」の一言しか無いです…

「大変だった」の一言しか無いですが、SNSのボタンを追加するときなどは1箇所直せばPC表示もスマホ表示も両方に反映されるのでphpファイルの修正量は減ったから良かったのかなぁと思ってます。(その分CSSの修正量は増えるんですけどね…)

今では逆にスマホとPCのテーマの振り分け方法がわからないので、このままレスポンシブWEBデザインで作り続ける予定です!

④ アイコンフォントの利用

アイコンフォントの利用

アイコンフォントも完全に「流行」にのりたくて使い始めましたが、画像よりもメンテナンスがラクでいいです。

画像だと実際に表示させたいサイズの2倍のサイズで画像を作ったり、表示速度のことを考えてスプライト画像を作ったり…

いろいろ考えることが多くてやりきれませんでした…

アイコンフォントなら、フォントとしての扱いになるのでfont-sizeでサイズを調整できたりと結構ラクできた気がします。

アイコンフォントについては、今後のレベルアップで利用をやめてSVGスプライトにチャレンジしてみようかなと思ってます。さよなら旧ブラウザ。

さいごに

ブログを始めた理由の1つに「HTMLやCSSなど、WEB関連技術を勉強する!」というのがあったんですけど、ココ半年で結構勉強出来てきたと思います!

sassを覚えたのも1つの大きな成長かな?

今後も、ブログのテーマ改良と共にコツコツと勉強していきたいと思います!

よっしーのひとこと

よっひー

テーマの自作はできるようになったものの、まだ詰めの甘さが抜けないようで…

未だにバックアップテーマの運用がキモになっています…

ではまた。