s13y

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

はてなブログのサンプルテーマ「boilerplate」をカスタマイズしてオリジナルテーマを作る準備

カスタマイズに適した土台選び

実際に「オリジナルテーマ作成」に向けた「カスタマイズ」を行う場合ははてなブログ側が用意している「boilerplate」を利用するのがいいでしょう。0から作り始めてもHTML構造は変わりませんので結局は「boilerplate」を通過していきます。最初から最低限のことしか設定されていないテーマですのでオリジナルテーマ作成には打って付けです。

はてなブログのオリジナルテーマ作成手順を再確認

前提としてCSSのみで作成を行います。WordPressのようにHTML構造からカスタマイズすることが出来ません。はてなブログのテーマストアで様々なデザインのテーマが公開されていますが、全てCSSのみで実現されています。オリジナルテーマを作成するということは「テーマ用のCSS」を作成するということになります。

開発環境の準備

必要なものは二つで十分です。「CSS」を編集するための「テキストエディター」と表示確認用の「ブラウザ」なります。

テキストエディター「Sublime Text」

WindowsやMacに付属しているテキストエディターでできないことはありませんが、オススメのエディターがありますのでご紹介します。

Sublime Text
無料でWindowsやMacで使うことが可能です。Sublime Textは沢山の入力補助機能が備わった優秀なエディターです。

ダウンロードページに飛びますので、現在使用している「OS」を選択しましょう。ダウンロードが開始されますので、ダウンロード後は画面の指示に従ってインストールを開始して下さい。

表示確認用の「ブラウザ」

Windowsであれば「Internet Explorer」Macであれば「Safari」で可能です。私はWindowsもMacも使いますので環境に合わせて使用しています。

サンプルテーマ「boilerplate」のダウンロード

boilerplate

このブログでは「v2.1.0」を使用して解説しています。希望のバージョンがある項目にある「boilerplate.css」をクリックするとダウンロードが開始されます。

HTMLコードの準備

以下の記事からコピーして頂いて構いません。

www.s13y.com

自分のブログからHTMLコードを用意する場合はブラウザを右クリックすることで「ソースを表示」などの項目が表示されます。<html>から</html>まで全てをコピーして下さい。

HTMLとCSSを同じフォルダにまとめる

コピーしたソースコードはSublimeTextにペーストして「index.html」という名前で保存して下さい。新しいフォルダを作成したのち「index.html」と「boilerplate.css」を同じフォルダに入れます。

HTMLにCSSを適応する

私の記事からHTMLのソースコードをコピーした方は以下の部分を<head></head>タグ内から見つけて下さい。

<link rel="stylesheet" type="text/css" href="style.css" /><!-- Local CSS -->

以下のように書き換えましょう。

<link rel="stylesheet" type="text/css" href="boilerplate.css" /><!-- Local CSS -->

自分のブログからソースコードをコピーした方は<head></head>タグ内の<link>タグ付近に上記のコードをコピーして貼り付けて下さい。