2012.12.09 ブログテーマ一新!僕がテーマを自作する上でぶつかった3つの壁 ブログ 皆様こんばんは。とろあ( @tohroa )です。 前々から、本ブログのデザイン・構成を見直したいなと思っていたのですが…二週間程前から少しづつテーマ作りに着手してきて、やっと形になった(はず?!)ので、適用してみました!! ちゃんと表示されない、重なって見えないなどありましたら、つっこんで頂けましたら幸いです。一応、Chrome, FireFox, IEでは表示確認しています。 3つの壁 今回テーマを自作していく上で、僕は以下の3つの壁を感じました。 Movable Typeの理解不足 HTML, CSSの理解不足 ブログ・ファイルシステムの構造 個人的問題、且つ、基本的なことばかりですが、ブログを始めるに当たって、もっとしっかり勉強してから始めれば、こんなに苦労しなかったのに…とひたすら感じたので記録しておくことにします。 Movable Typeの理解不足 なんでもそうだと思うのですが、ブログを始めるに当たって、ブログとは何なのかを理解しておくことは最低限必要ですよね。 まず始めに感じた1つ目の壁は、ブログを作っていくのに必須なシステム、Movable typeの理解不足でした。 実は、僕は当ブログを始めるまで、他の方のブログを読んだりしたことは殆どありませんでした。 ふとした思いからブログを始めて、乏しいHTML, CSSの知識で「とりあえず記事を公開出来る場所」を作り上げたのですが…Movable Typeの機能については全くの無知であったため、「タグを使ってテンプレートをインクルードする」とか、そもそも「どんなタグがあって、どんな時に、どんな風に扱えるのか」ということもほとんど理解出来ていなかったのです。 今回、ブログテーマを自作するにあたって、他の方々のブログにアクセスし、ブログの構成や、時にはソースコードまで覗かせていただいたりして、テーマ作成の参考にさせて頂きました。 公開されているコードからは、Movable Type(もしくはWord Press)でどんなタグが使われているかまでは分かりませんでしたが、「ここは違う場所の内容を参照しているな」とか、「ここは繰り返しでやっているんじゃないかな?」という大体の想像をしながら、どうやって実装すればいいのかを、ググッてみたり、Movable Typeのリファレンスページを参照したりしながら、ひたすら学習。 それでもまだ、全体の半分も理解出来ていないのではないかと感じる位、Movable Typeというのは深いシステムだと改めて感じていますが、理解しきれていなかった部分に触れ、苦労しながらも一つ一つの機能を理解してなんとか実装することが出来ました(>_<) HTML, CSSについて再学習 続いて2つ目に感じた壁ですが、HTML, CSSの活用とルールです。 実は僕自身、かなり過去にHTML, CSSについて独学で勉強したことがあったのですが、当時はブログという言葉が無く(もしくは、僕自身が知らなかった)、ホームページを始めようと勉強してみたはいいものの、テーマが浮かばずホームページは作らず終いとなっていました。 多少のHTML, CSSに対する知識はあったものの、本ブログを開設する時にも何度もつまずき、そして、結局ハリボテのような形でスタートをしてしまっていたのです。 HTML, CSSの記述にルールがあるということは知ってはいたのですが、最初にブログを開設する時には、気にして作成していなかったため、おそらく…文法的にもムチャクチャな状態となってしまっていました。 これは、この記述を書いている時点で、100余りある記事全てにも言えることで…まだ修正出来ていないため、少しづつ修正していきたいと思っています。 最初にしっかり理解してから始めていれば、このような後戻り作業もなかったはずなので、辛い部分ではありますが…今回勉強したことで、しっかり理解出来たはずなので、今後はルールも気にしながらブログを作っていきたいと思います。 尚、今回テーマを自作するに当たって、HTML5+CSS3で作ることに挑戦しています。 折角見直すなら…ということで、全ページのコード、タグを見直して、metaタグから、bodyタグを閉じる直前のfooterタグまで、作り直しを行いました。 更に!jQueryという(僕にとっては)新しい技術を取り入れてみたりもしています! 今のところは、ページ上部のヘッダー部分を折り畳む処理だけですが、昔挫折したJavaScriptよりもはるかに扱い易く手軽に実装出来たため、今後もいろんなところに配置していきたいぐらい、jQuery楽しいです! フォルダ構成 最後の壁は、サーバ内のフォルダ構成です。 記事や画像が公開されるURLに直接影響するフォルダ構成ですが、ブログを始める際に独自ドメインを取って、「ドメインのルートでブログ公開する」ということだけは調べて実践したのですが、訳が分からないままやって問題が起きないはずがありませんでした(~_~;) ブログにネタを書いてエントリーしても、記事がサーバの何処にどんなルールで格納されているのかを理解しておらず、結果画像や記事が様々なフォルダに点在する状態となってしまったのです。 これも一つ一つ整理していきたいとは思っていますが、問題は記事が公開されるURLもルールが作れておらず、バラバラになっていたことです。 公開URL=フォルダ構成+ファイル名といった形になり、初期の状態ではルート/年/月/ファイル名となっていたのですが、よく考えずにエントリーしていたため、ファイル名も”_2.html”など、全く意味が分からないパスとなってしまっていました。 現在は、カテゴリ毎にフォルダが分かれるように設定して、ファイル名も見直し中です。1つ目の壁に関係しますが、この変更もMovable Typeの設定一つでズバッと適用出来ることに気付き、改めて最初にしっかり理解していなかったことを後悔しています(°_°) 壁を乗り越えて 数々の壁を乗り越えて、やっとテーマが自作出来た訳ですが、今回テーマを作成するに当たってここまで書いてきたことを意識しながら、他の人にとって、見やすい構成を意識するようにして作成することを頭の片隅で常に意識しながら作成しました。 実際に読みやすい構成になったかどうかは、覗きにきてくれる方々の感覚によるので、難しいところではありますが、今後も見やすいを意識して改造していきたいと思う次第です(。-_-。) もし、こうした方がいい!とか、ここは見づらくなっちゃってるよ!という意見がありましたら、twitterでも、メールでも随時受け付けておりますので、コメント頂ければと思いますm(_ _)m …ということで、見た目の改造に注力して、数日間記事を挙げていない状態となってしまったため、これからはコンテンツ充実にしっかりと取り組んでいきたいと思っている今日この頃でございます!