s13y

独身27歳の中卒ニートが人生に危機感を覚えながら書くブログ

はてなブログでテーマのカスタマイズを始める前に知っておきたい基本的なこと

はてなブログを自由にカスタマイズする

一ヶ月も使ってない現状ですが私個人としては既にWordPressに移行したいと考えています。しかし最長の二年コースを選択してしまったことから今後もはてなブログを利用しなければなりません。せっかくなのではてなブログを隅から隅までカスタマイズしていき、最終的にはオリジナルテーマを1つ作成しようと考えております。

簡単な装飾はコピー&ペーストだけで事足りる

はてなブログの仕様上、HTML構造が大きく変化するということはありません。大きなレイアウト変更でもない限り、大抵のものはコピー&ペーストで対応が可能です。その過程で得られる知識には限界があります。もっと自由にカスタマイズしたいと思いました。カスタマイズに最低限必要な知識を追っていきたいと思います。

「書いてあることをそのまま覚えろ」というのはあまりにも乱暴

まず「はてなブログ」とは何かを把握することからですが「何か」とはどのようなシステムで作られているのかということで、必要ない情報かも知れませんが大事なことです。一見関係ないように思えるこういった予備知識や前提となることを知らなければ「なぜ?」が増える原因となります。

大抵のブログはCMS上で表示されている

私たちがはてなブログで使っているのは一般的にCMS(コンテンツ・マネジメント・システム)と呼ばれるものです。はてなブログ側が独自に用意したシステムで、ブログを自由にカスタマイズしたいと考えるならば、まずはこれに依存することを知る必要があります。CMSとは私たちが記事を書けばブログの表示に必要な「HTML」や「CSS」などを自動的に出力してくれる優れものなのですが、ここの部分を直接弄ることは叶いません。冒頭でも出てきましたが「WordPress」というものはこのCMSに代表されるシステムの類で、システムそのものを個人が自由に改変して利用することが可能です。

WebページはHTMLとCSSで出来ている

ページ自体はひとつのHTMLで出来ています。「HTML」とは「土台である」と考えてください。それは文字と画像だけが並んだ白黒の単調なものです。デザインとレイアウトは「CSS」で行います。これがあって初めて枠を作ったり背景色を変え、カラフルな線を引いたりできるのです。本来であればこの二つから始まるはずのWebページ作成をCMSから出力されたHTMLを利用してWebデザインを行います。前提知識をすっ飛ばしてカスタマイズをやろうとすれば取っつきづらくて当然です。

HTMLは土台

Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)と呼ばれるもので、Webページを作るための最も基本的なマークアップ言語の1つです。私たちがブラウザで観るWebページの殆どがHTMLで作られています。

ハイパーテキスト

通常のテキストとは一味違います。文章中の指定箇所にリンクを貼ることが出来て、別のページに移動することができるのです。実に高機能ですね。この機能をHyper Text Link(ハイパーテキストリンク)と呼びます。

マークアップ

単純に「印をつける」という意味ですが、ソースがHTMLタグを使って表記されていることに基づきます。私たちがはてなブログの編集画面で「見出し」を書けば太くて大きな文字に置き換わりますね。そのような文書の中で特定の部分に意味を持たせることはマークアップのなせる技です。

HTMLはCSSがあって初めて輝ける

このように全体の構造を行なっているのがHTMLで「見出し」を大きく表示するのは元々定義されているHTMLによるものですが、あまりにも単純ですね。具体的にどのような飾り付けを行うか指定出来るのがCSSということになります。「もっと見出しを大きく派手に見易くしたい。あと色も変えたい。そもそもレイアウトが・・・」そういう場合に初めてCSSの恩恵を受けることになります。

CSSでデザインレイアウト

Cascading Style Sheets(カスケーディング・スタイル・シート)と呼ばれるものですが、何をするものかと言えばWebページのスタイルを指定するための言語になります。HTMLとCSSが1セットで初めてウェブページとして効力を発揮するものですので、避けて通ることは出来ません。ブログページ自体はHTMLで作成されるのですが、CSSがなければメモ帳以下に成り果てるでしょう。汚いメモ帳を他人に見せない為にもより良い方向へデザインしていく必要があります。

初心者のまま「模倣」で終わることが多い

大抵は切った貼ったで「よくわからないけど上手くいった」となんとかなってしまうものです。特にはてなブログではHTMLを弄ることが出来ませんので敷居は更に低く設定されることと思います。本来はHTMLで土台を作った上でCSSを加えていくのですが、決まっている土台を弄ることしか出来ません。「自由度が低い」と考えるか「わかりやすくていい」と思うかはあなた次第です。

CSSは個性を表現する言語

はてなブログという媒体の中でCMSから吐き出されるHTMLの構造は固定されています。ブログのテーマがワンクリックで様変わりするというのはCSSが別のものに置き換えられたということです。私たちが全く同じHTMLを土台にして記事を書いてもCSSが違えば目に見えるブログの印象は大きく違ってきます。それぞれの個性を詰め込むのがCSSですので、是非とも使いこなしたいですね。

はてなブログで使用されているHTMLやCSSの種類

HTMLといえど「HTML」「XHTML」「HTML5」など種類があります。これは使える「タグ」に違いが出てくるので、はてなブログはどのHTMLで書かれているのか知る必要があります。CSSにもバージョンがあり「CSS1」「CSS2」「CSS3」と変化しています。現在のはてなブログは「HTML5」で書かれ「CSS3」で装飾されているようです。これだけわかっていればカスタマイズする上で問題はありません。

まとめ

私は全体を隅から隅まで把握していなければ気が済まないタチなのです。最初は基本的なことを学ぶのみで本格的なカスタマイズは先のことだと考えています。また、手っ取り早い勉強法は実際にソースを見て一個ずつ理解していくことだと考えています。はてなブログで実際に使われているソースコードを表示しながらカスタマイズまでを追っていければいいなと思案しています。

挫折の原因は「逆にわからない」

ありがちなのは「誰にでもわかりやすいように」という配慮から「独自の解説」を交えながら長く、より詳しくという風に書くことで「結論」に達する前にうんざりしてしまうことがあります。「はてなブログのカスタマイズ」という項目に絞って解説しているサイトであれば分かりやすいのですが、「ブログ カスタマイズ」で調べると大抵は「WordPress」に関する項目が飛び込んできます。簡単に分かりやすいよう、初心者の私なりに「はてなブログのカスタマイズ」を今後のブログで取り上げます。「こういうもの」と言った形でひとつひとつを頭に入れてくだされば幸いです。最初から詳しく知る必要があるとは限りません。情報の断捨離がなければ挫折の原因になります。