既に気が付いている方もいると思いますが、当ブログのヘッダータイトルをテキスト形式から画像形式に変更しました。

少々間が空いてしまいましたが、ブログのタイトルを画像化するブログのカスタマイズ方法を紹介します。

その方法については以下を参照ください。

当ブログに今までＴｗｉｔｔｅｒのＡＰＩを利用して投稿内容を記事の下に表示していました。

しかし、時々Ｔｗｉｔｔｅｒのサーバ負荷のためかＴｗｉｔｔｅｒのデータを取得するのに時間がかかってしまい、このブログを表示する時間が異常にかかってしまう現象が発生していました。

これではせっかく閲覧に来ていただいた方に失礼ということで、ＴｗｉｔｔｅｒのＡＰＩを外しました。(あまり使用していないし･･･)

今まで当ブログの表示に時間がかかってしまい失礼しました。m(__)m

このＴｗｉｔｔｅｒ　ＡＰＩを外した代わりではないのですが、先日からはてなで｢はてなスター｣というサービスが開始されました。

この｢はてなスター｣とはブログにはてなスターの機能をつけることにより、閲覧者が
　　｢この記事いいな～｣
と感じたらをクリックして星を付けていく機能。
それ以外に星をつけてくれた相手へメッセージをつける機能もあります。

はてなスターの設置ははてなブログを使用していれば標準で付いているが、それ以外の場合、テンプレートなどのHTMLを変更する必要がある。

ちなみにHamazoのブログの場合は下記の要領で設置することができます。

1. はてな(はてなスター)へログインする。
2. はてなスター(http://s.hatena.ne.jp/)のページへ移動する。
3. ページ内の｢ようこそ、？？？さん｣のリンクをクリックする。
4. ページ右上の｢Blogs｣のリンクをクリックする。
5. ｢外部のブログサイトを登録する｣のテキストボックスにHamazoのブログURLを入力し、｢追加｣ボタンをクリックする。
   (このブログの場合は｢http://hibi.hamazo.tv/｣となります)
6. ｢以下のコードをブログテンプレートのhead内に～｣というメッセージの下にHTMLが表示されるのでテンプレートの｢個別記事｣のheadタグの間に貼り付けます。headタグの下の方に貼り付けたほうがいいようです。
7. テンプレートの個別記事の記事のタイトル部分がh3タグ＋aタグとなっている必要があるようです。｢HAMAZO｣テンプレートだと

   <h3 class="title"><%EntryTitle%></h3>

   となっていると思いますので

   <h3 class="title"><a href="<%EntryPermalink%>">
   <%EntryTitle%></a></h3>

   と変更する必要があります。(本来は改行なし)
8. テンプレートを変更したら｢登録｣ボタンで保存して完了です。

記事のタイトル横に下記のようなはてなスターの画像が表示されるかと思います。
なぜかはてなスターはh3タグにしか反応しないようです。もし、テンプレートの記事タイトルのタグがh3タグ以外の場合は変更が必要になりそうです。


はてなスター

前回、｢ブログの背景色を変更する方法｣を紹介しましたが、今回は背景に画像を設定する方法を紹介します。

はじめる前に

まず、前回同様に｢ブログのカスタマイズの前に･･･｣を読んでおいてください。また、今回から変更するCSS(HTML)をメモ帳に一度コピーする方法は省かさせていただきます。(書くボリュームが大きいので)。もし、わからない人は前回の｢ブログの背景色を変更する方法｣を参考にしてください。

画像の準備

変更するテンプレート｢HAMAZO｣は背景がクリーム色のシンプルな背景色です。その背景色を右記の画像に変更してみましょう。画像は右記の画像を利用してもかまいませんが、自分のオリジナルの画像を用意してもらってもかまいません。

その時、画像のファイル形式は｢jpeg｣、｢gif｣、｢png｣などのHamazoへアップロードできる画像形式としてください。また、ファイル名もできれば英数字を使用することをお勧めします。また、画像サイズもあまり大きなサイズはお勧めしません。

準備できた画像は｢記事の投稿｣の｢画像・動画の登録、一覧、削除｣でアップロードして下さい。アップロードした画像をクリックするとその画像がブラウザ上に表示されます。その時のアドレスをメモしておいて下さい。後で使用します。

CSSを編集

次に｢デザイン｣の｢オリジナルデザインの登録｣から｢スタイルシート｣のCSSをメモ帳にコピーしてください。

コピーしたCSSから下記を探してください。

body{
color:#000;
margin:0px;
background:#ffc;
text-align:center;
}

この中の

background:#ffc;

を

background-image:url("/usr/xyz/face_sample.gif");

に変更します。

この時、上記の例ではurlの部分が｢/usr/xyz/face_sample.gif｣となっていますが、この部分に関してはあなたの環境に合わせて変更する必要があります。

この中の｢xyz｣の箇所はあなたのブログのドメイン部分を入力します。例えば当ブログは｢http://hibi.hamazo.tv/｣なので｢xyz｣の部分は｢hibi｣となります。

また、｢face_sample.gif｣の部分は先ほどアップロードした画像のアドレスを使用します。アドレスは全て使用するのではなく最後の｢/｣以降の文字を使用します。例えば先ほどの画像をアップロードしたURLは｢http://img02.hamazo.tv/usr/xyz/face_sample.gif｣なので最後の｢/｣以降である｢face_sample.gif｣を入力します。

先の｢画像の準備｣で｢ファイル名もできれば英数字を使用することをお勧めします。｣と書いたのは日本語を使用するとこの部分がヘンテコな文字列となってわかりにくくなるからです。

上記の内容をまとめて｢body｣の部分を表すと

body{
color:#000;
margin:0px;
background-image:url("/usr/xyz/face_sample.gif");
text-align:center;
}

になります。
これを｢オリジナルデザインの登録｣の｢スタイルシート｣のCSSを書き換えて｢登録｣を行ってみましょう。すると下記のような画像が並んだ背景になると思います。



この背景画像は並べて表示しない方法などいろいろありますが、それは次回紹介します。

前置きが長くなりましたが、ブログのカスタマイズを行ってみたいと思います。ブログのカスタマイズをする前に必ず下記を読んでおいてください。

ブログのカスタマイズの前に・・・

まず、今回はブログの背景を変更してみましょう。

CSSをメモ帳へ

HAMAZOのテンプレートを見てみると背景色はクリーム色に設定してあります。この色を赤や緑などの別の色に変更するには｢オリジナルデザインの登録｣を開き｢スタイルシート｣のCSSを変更します。

テキストエリアの中を直接変更してもいいのですが、スペースが狭いので一度｢メモ帳｣へコピーします。

やり方は｢スタイルシート｣のテキストエリアをクリックし、[Ctrl]+[A]ですべてを選択します。次にそのまま[Ctrl]+[C]で｢スタイルシート｣のCSSをコピーし、Windowsの[スタート]-[すべてのプログラム]-[アクセサリ]-[メモ帳]で｢メモ帳｣を開き、[Ctrl]+[V]で貼り付けます。
この方法は今後も行いますのでしっかり覚えておいて下さい。

変更する場所を探す

さて、肝心の背景色を変更する方法ですが、メモ帳に貼り付けたCSSの中から下記の内容を探してください。

body{
color:#000;
margin:0px;
background:#ffc;
text-align:center;
}

探し方は上からずっと探す方法もありますが、メモ帳の検索機能を使用すると簡単に見つけられます。

この方法はメモ帳の先頭にカーソルを移動して、メニューバーから[編集]-[検索]を選択します。検索ボックスが表示されたら｢検索する文字列｣の中に

body

と入力し、[次を検索]をクリックすると上記のCSSが見つかります。

背景色の変更

上記のCSSが見つかったら

background:#ffc;

の部分を

background:#0000ff;

に変更してみましょう。

変更したらメモ帳のCSSを先ほどの｢オリジナルデザインの登録｣で行った方法と同じ要領で元に戻します。

方法はメモ帳の適当な場所で[Ctrl]+[A]ですべてを選択します。次にそのまま[Ctrl]+[C]でコピーを行います。次に｢オリジナルデザインの登録｣の｢スタイルシート｣のテキストエリアの適当な場所で[Ctrl]+[A]ですべてを選択します。次にそのまま[Ctrl]+[V]でコピーした内容を貼り付けます。
貼り付けが完了したら一番下の｢登録｣ボタンを押して完了です。

変更したブログを見てください。背景色が｢青｣色に変わったと思います。



先ほど変更した｢background:#0000ff;｣は背景色を設定するところです。その前にある｢body｣はHTMLのbodyタグの事を指していて、まとめると

HTMLのbodyタグの背景を青にしなさい。

という意味になります。(その付近の｢color｣や｢text-aligin｣等はとりあえず無視します)

他の色は？

背景色が青だけではもちろんつまらないので他の色にも変更したいと思います。色の指定は先ほど変更した｢background:#0000ff;｣の｢0000ff｣部分が色の指定になります。｢0000ff｣は青色を意味するのですが、それ以外の色については以下を参考にしてください。それぞれの記号については後日説明します。
　　000000：黒
　　808080：グレー
　　ffffff：白
　　ff0000：赤
　　800080：紫
　　008000：緑
　　ffff00：黄
　　0000ff：青
　　00ffff：水色
　　ff00ff：ピンク

また、変更前は｢ffc｣の3文字でしたが変更後や上記の場合は6文字になっています。CSSは3文字でも6文字でも表現することができるのですが、今後もブログのカスタマイズを行うなら6文字で覚えましょう。その方がいろいろ細かい色が設定できます。

とりあえず今回はここまでとします。

ブログのカスタマイズ方法を説明する上である程度の条件を指定させていただきます。

基本的にはどのような環境でも同じだと思うのですが、説明する側としてはある程度の決まった環境で説明しないと、同じようなことを何度も説明しなければならなかったり、カスタマイズが異なってしまう場合があります。

慣れてしまえば、どの環境でも応用が利くかと思います。

• パソコンの基本的な操作はできるものとします。
• 本カスタマイズはHamazoで使用しているブログを前提に説明します。
• カスタマイズするテンプレートは基本的に｢HAMAZO｣のテンプレートを使用します。状況により別のテンプレートを使用する場合はその都度説明します。
• カスタマイズを行うパソコンはWindowsXPとします。(私のPCがWindowsXPなので)
• カスタマイズを行うブラウザはInternetExplorer(IE)とします。
  ・カスタマイズの前に下記の記事を理解してくれているものとします。
  • HTMLとCSSとは
  • 4つのデザイン変更箇所
  • ブログのカスタマイズの前にバックアップを
• 当ブログによる不具合当が発生しても、自己責任で行ってもらうものとします。

以上ですが、必要に応じて追記する可能性がありますので御了承ください。

ブログのカスタマイズは｢4つのデザイン変更箇所｣で説明したHTMLとCSSを変更して行います。

カスタマイズやHTML、CSSに慣れている人ならいいのですが、初めての人や恐る恐るやる人などは変更する前のHTMLやCSSをバックアップしておく必要があります。

バックアップの方法はそれほど難しいものではなく、変更する前のHTML又はCSSをどこかに保存しておけばいいだけです。

やり方としては｢4つのデザイン変更箇所｣で書いた｢オリジナルデザインの登録｣を開き、変更する項目のテキストエリアをすべて選択し、右クリックで｢コピー｣を選択します。

次にWindowsの｢スタート｣-｢すべてのプログラム｣-｢アクセサリ｣-｢メモ帳｣でメモ帳を開きます。開いたメモ帳にメニューバーの｢編集｣-｢貼り付け｣か右クリックで｢貼り付け｣を選択して先ほどコピーした内容を貼り付けます。

後は適当な場所に保存してバックアップは完了です。

万が一、ブログのデザインを変更して元に戻せないような事態が発生した時は、上記の方法で保存した内容を元に戻して修復することができます。

それでも元に戻らなかったり、バックアップを忘れた時はHamazo管理画面の｢デザイン｣から任意のテンプレートを選択、保存すればそのテンプレートのデザインで表示することができます。

　｢バックアップなんてまあいいや｣

と思って何もしないと、意外と失敗してしまい、今までのカスタマイズ内容がパアになってしまうことがあります。小まめにバックアップは取っておきましょう。


【関連記事】
HTMLとCSSとは
4つのデザイン変更箇所

Hamazoブログをカスタマイズするのにどの場所を変更すればよいかを説明します。

Hamazoのデザインは4つのHTML、CSSでできている

デザインを変更するのにHTMLとCSSを変更するのですが、Hamazoの場合は一箇所にすべてまとめられています。

Hamazoの管理画面で｢デザイン｣をクリックすると用意されているテンプレートを変更する画面が表示されますが、サイドバーにある｢オリジナルデザインの登録｣をクリックすると

• スタイルシート
• トップページ
• 個別記事
• アーカイブ

の4つのテキストエリアが表示されます。

Hamazoのデザインは基本的にこの中のプログラムを変更することによってデザインを変更することができます。



それぞれの意味は以下の通りです。

スタイルシートとは

スタイルシートは先日説明した｢HTMLとCSSとは｣でのCSSの部分がここにあたります。

CSSはブログのデザインを構成する部分でこの部分を変更すると色やフォントのサイズなど各所が変更されます。

ブログのカスタマイズではここの部分の変更が主になるかと思います。

トップページ

トップページはその他の通り、ブログを表示した時のトップのページのHTMLが書かれています。

HTMLはブログの骨格のようなものでブログの記事や日付などを構成しているもので、このHTMLがなければブログやWebサイトは成り立ちません。

但し、下記の個別記事やアーカイブもそうですが、このテキストエリアのHTMLには記事や日付その物は記載されていません。後々説明しますが、それに変わるタグが明記されています。

個別記事

個別記事はそれぞの記事だけを表示した時のページのHTMLが記載されています。

例えば、トップページには20や30個の記事が表示されていると思いますが、その中のある記事をクリックした時にその記事とコメント、トラックバックが表示されるかと思います。そのページを個別記事と読んでいます。

アーカイブ

アーカイブはトップページのカテゴリをクリックするとそのカテゴリーの内容だけが表示されます。

また、サイドバーのカレンダーで△月△日をクリックすると△月△日に書いた記事がすべて表示されます。

アーカイブはその分類をまとめて表示したページのことを言います。

テンプレートを選択すると

デザインページでテンプレートを選択すると当たり前ですが、ブログのデザインが変わります。

それ以外に上記の｢オリジナルデザインの登録｣のテキストエリアの内容も実は変わっています。

つまり、テンプレートを変更することによってそのテンプレートのトップページのHTMLやアーカイブのHTML、スタイルシート(CSS)が書き換えられているのです。

Hamazoで｢新しいテンプレートを追加しました｣というのは｢新しいテンプレートのHTMLとCSSを準備しました｣ということになります。

ブログをカスタマイズする上で知っておかなければならないことがいくつかあります。それは｢HTML｣と｢CSS｣です。

HTMLとは

HTMLとはHyperText Markup Languageの頭文字をとった言葉で、Webサイトを構築する上でなくてはならないプログラミング言語(正確にはマークアップ言語)です。

プログラミング言語と聞いただけで｢もうわからない｣と思う方もいるかもしれませんが、それほど難しいことはありません。どのWebサイトでもいいのですが、サイトをブラウザ(ここではInternetExplorer：IE)で開いてメニューバーの[表示]-[ソース]を選択するとメモ帳が開いて何やら英数字が並んでいるかと思います。

その中をよく見てもらうと｢<～～～>｣の文字があると思います。これは｢タグ｣というものです。HTMLはこのタグによって構成されています。

また、タグは基本的に｢<～>｣で始まり</~>｣で終わります。この2つがセットで構成されていて意味的にはその間が｢～｣ですよ。という意味になります。

例えば、当ブログのソースを見てもらうと2行目に｢<html xmlns=・・・>｣で始まり、最後に｢</html>｣で終わっています。このhtmlは｢この間はHTMLですよ｣という意味になります。

詳細なことを書いていくときりが無いのですが、Webサイトという物はHTMLというタグでできているということを知っておいてください。

CSSとは

次にCSSとはCascading Style Sheetsの頭文字をとったもので、Webサイトのデザインを構成しています。HTMLでもデザインはできるのですが、さらに細かな設定などができます。そして便利なことにWebサイトのページが異なっても共通で使用することができます。つまりどのページを開いてもデザインが共通にすることができるということです。

ブログサイトはほとんどの場合がこのCSSでデザインを担当していて、CSSがなくなるともの凄くシンプルなサイトになります。試しにやってみましょう。

CSSを外す

Hamazoの管理画面で｢デザイン｣をクリックし、｢オリジナルデザインの登録｣をクリックします。


すると下記画面が表示されますので｢トップページ｣の中から｢<link rel="stylesheet"～｣で始まる行を探してください。ほとんどの場合が初めの方にあるかと思います。その一行を見つけたら下記の様に行の先頭と終わりに｢<!--｣と｢-->｣を追加してください。

<!-- <link rel="stylesheet" href="body.css" type="text/css" /> -->
<!-- <link rel="stylesheet" href="<%CSSUrl%>" type="text/css" /> -->

変更したら画面下部にある｢登録｣ボタンをクリックします。


詳細な説明は省きますが、こうすることでトップページのCSSが無効になります。変更したサイトのトップページを見てみてください。縦長のサッパリしたサイトに変わったかと思います。

つまり、CSSがそのサイトのデザインをどれだけ担当していたかがわかるかと思います。

確認したら上記の手順を参考にして元に戻しましょう。もし、元に戻せない場合はデザインのテンプレートを改めて選択すると元に戻ります。

HTMLとCSSについてはこれからところどころで説明することがありますが、今後、デザインをいろいろ変えていくつもりであればHTMLとCSSの書籍が多数出ていますので、そちらを購入することをお勧めします。

---

ブログには大抵いくつかのデザインが用意されています。当ブログ元のHamazoでも数多くのデザインテンプレートを用意してくれているのですが、ひねくれ者の私はそのデザインをベースに各所変更して使用しています。

Hamazoでは(他のブログサービスも含めて)用意されたテンプレート以外に自分オリジナルのテンプレートも使用することができます。

デザインセンスもないのにあちらこちら変更してたらこのようなデザインになってしまいました。(^_^;)

そこで、このHamazoのブログを使用してデザインのカスタマイズの方法についても書いていこうかと思いました。

デザインセンスのない私はデザインの方法よりも
　　｢これを変えるとここがこのように変わる｣
という感じで、あくまでも｢方法｣について触れていきます。最終的なデザインに関しては各自で作ってください。

その為、本ブログのカテゴリーに｢ブログカスタマイズ｣というカテゴリを追加しました。

気のみ気のままで書いていきますのでその辺は御了承ください。

また、｢ここをこう変える方法は？｣などの質問がありましたら下記のコメント欄に記入していただくか、｢オーナーへメール｣でお問合せください。質問のあった内容は｢記事｣としてアップさせていただくと思います。この辺も御了承ください。φ(..)ネタネタ

自分のブログをカスタマイズしたい人は多少なりとも参考になると嬉しいです。(^^)