[WordPress] ブログテーマを自作しました!

スポンサード リンク

好きな色は紺色です。@_harashinです。

WordPressのテーマの自作に取り組み始めてから約1週間…ようやく自分だけのブログテーマが完成しました!
ものすごい達成感!

ブログを開設してから「なんだかなあ」と思っていたのが、自分が気に入るブログのデザインがなかなか見つけられないことでした。

星の数ほど公開されているWordPressのブログテーマなんですが、「おっ、これはよさそう」と思ったものでも、デザインの細かいところが気になって直したくなるものです。

自分仕様にカスタマイズしようとstyle.cssを開くも、どこに何が書いてあるのかわからなくて枕を濡らした夜もありました。
php…?なにそれ食べれるの?状態。

だがしかし!きっかけは春友さん(@spring_friends)のこの記事でした。

ど素人でも自作できたWordPressテーマの作り方。教科書は『WordPress デザインブック』 | なまら春友流
先日WordPressテーマを自作した。 しかし自作したとは言っても実際はゼロからHTMLを書き出して作成したわけではない。 私はそんな知識は持ち合わせていないから。 タイトルで述べた「WordPre …

教科書を読んで自作!そういうのもあるのか!

他にもozpaさん(@ozpa)やラクイシくん(@rakuishi07)が次々とブログのデザインを自作しておられるのを見て、ひょっとしたらブログテーマを自分で作ることって、もしかしたら可能なんじゃね?と思い始めました。

「OZPAの表4」のブログのテーマを自作しました!! | OZPAの表4
どうも、@OZPA です。 先日よりWordPressのオリジナルテーマを作成していたわけなんですが、ついに完成いたしましたたぶん。 …

[WordPrsss] ブログテーマ自作しました & 自作して感じたこと * ラクイシロク
この度、WordPress のテーマを自作しました(このページです)。見た目はあまり変わらないですが、すべて僕がコーディングしました! @OZPA さん、@knk_n さんが自作ブログテーマを作成さ …

知らないうちに自分の辞書の中に綴られていた「不可能」という三文字…このページを破り捨てる時が来た!

とりあえず、教科書を購入!

実際の作業のやり方は、前述の春友さんのエントリを参考にさせてもらいました。

ここで僕が作業を進めていく中でつまづいたところ、気付いたことを列挙してみます。

  • デザインの案を考えておく
  • 自作する目的は、自分が気に入る素敵なテーマを作ること。

    にもかかわらず、完成イメージを決めていなかったことに気づき、慌てて手書きでラフ案を書きました。

    ▲恐ろしく恥ずかしいデザイン案。上のロゴはボツになりました。

    僕は手を動かさないと頭が働かないタイプなので、作業を進めていく中で上記のおぼろげなイメージを、徐々に形にしていきました。

    出来上がったものは案からはだいぶ変わりましたけど、まあよくあることです。

  • 文字コードに気をつける
  • プレビューの表示内容が文字化けしてしまって、はじめは”Why?”(発音:ホワ~イ?)と欧米人のように肩をすくめていましたが、なんのことはない。

    phpファイルの文字コードがShift-JISになっていました…。

    参考:WordPress › フォーラム » 文字化けについて

    早速UTF-8Nに保存し直して事なきを得ました。
    これでもう今後の人生、文字コードが原因で失敗することはないだろう。

  • phpファイルは自分の手で書く
  • WordPressがブログをどのように表示させているのかという構造をちゃんと把握するために、自分の手で入力。

    ヘッダーやフッターやコンテンツなどの様々なパーツが組み合わされて、Webページが表示されるということがよくわかりました。

    後で個別ページなり、記事の一覧なりを作る際にも、構造がわかっていれば取り掛かりやすいですしね。

  • スタイルシートはとりあえずサンプルをコピペする
  • スタイルシートだけでも結構な分量を書かなければいけないので、まずは本のサンプルコードをコピペして、後で自分の好きなように調整するようにしました。

    ある程度完成したデザインに手を加えていく感じです。

    しかし、ここがいちばん時間がかかった。

    このあたりの苦労は改めて別の記事で書こうと思います。

というわけで、ついに完成!
まだまだ直したいところはいくつかあるけれど、折を見てちょっとずつ手を加えていきたいと思います。

html/css/phpのコーディングなんて今までやったことがなかったけど、やればできるもんだなあと。
すごく勉強になりました。さらに言えばもっと勉強したくなりました。奥が深い。

世界に一つだけ、自分だけのテーマが完成したので、今後は可能な限り毎日更新していきたい所存です。

新生”harashin.net”をよろしくお願いします!

スポンサード リンク

最後まで読んで頂きありがとうございます。
気に入って頂けたら、RSSフィードの購読をお願いします。

RSS FEED

« »