2011年04月30日

まずはページの基本レイアウトを決める





「さくらのブログ」には、350種類以上のデザインのテンプレートが用意されています。これだけあると迷ってしまいますが、要はページトップの画像(background-image)や背景色等が異なるだけで、レイアウトの基本は以下の3パターンのみです。これからサイズや背景色、トップ画像、フッター等を自分流にカスタマイズする方法を解説していきます。


3カラム(両サイドバー)

fig_doublesidebar.gif

いかにもブログという感じの、左右にサイドバーが付いた3カラムのレイアウト。バナー広告やtwitter等のブログパーツ的なものを多数表示するのに適したレイアウト。肝心のコンテンツを表示するスペースが小さくなってしまうという欠点がある。
この3カラムのレイアウトでカスタマイズを行う場合、テンプレートからは、シンプルホワイト等を選ぶといいだろう。


2カラム(左サイドバー)

fig_leftsidebar.gif

画面左側にナビゲーションを配置するレイアウト。人間がウェブページを見る際の目の動きを考慮した場合最適なレイアウトと言える。このレイアウトをベースにカスタマイズを行う場合、テンプレートからは、超シンプル(左サイドバー)等を選ぶといいだろう。


2カラム(右サイドバー)

fig_rightsidebar.gif

画面右側にナビゲーションを配置するレイアウト。まずコンテンツが目に入るレイアウト。このレイアウトをベースにカスタマイズを行う場合、テンプレートからは、超シンプル(右サイドバー)等を選ぶといいだろう。
ここでは、銀鼠をベースにカスタマイズを行っているので、他のテンプレートを選んだ場合にはカスタマイズ方法が若干異なる場合もあるが、基本は同じなので各自でいろいろやってみて欲しい。



例えば、Espressoのような装飾の多いデザインの場合、サイドバーのメニュー表示部や、記事タイトル部分などに画像が使われています。こういったテンプレートをベースにカスタマイズを行おうとすると、自分で代替用の画像を用意するなどの手間がかかります。ベースに使うテンプレートは、できるだけシンプルなデザインのものを選んだ方がいいでしょう。

こういう装飾用の画像が使われているテンプレートを選ぶのは避けましょう。






2011年04月29日

Favicon(ファビコン)を設置してみよう

カスタマイズの手始めとして、Favicon(ファビコン)を設置してみよう。
「なんで最初にそんな事を?」と疑問に思う人もいるだろうが、ファビコン設置の作業を通じて「さくらのブログ」における画像ファイルの場所やアドレス指定の方法を学ぶことができる。

favicon.ico
ファビコンというのは、こういう感じの、通常ブラウザのアドレスバーの左側に表示される小さなアイコンのこと。ウェブサイトの場合、ルートディレクトリにfavicon.icoというファイルを置くとファビコンとして認識されるが、「さくらのブログ」などのようなブログをカスタマイズして、ホームページ風に利用しようという場合には、HTMLで別途指定する必要がある。

まず、ファビコン用の画像を用意しよう。画像サイズは16×16ピクセル。画像形式は、GIF、またはPNG。
ファビコン用画像が出来たら、管理画面からアップロード。これは通常の画像のアップロードと同じ要領。

アップロードされた画像ファイルは、以下のディレクトリに置かれる。
sakurablogfiles.gif

通常のHTMLは、wwwというディレクトリ。「さくらのブログ」管理画面からアップロードした画像ファイルは、sblo_filesというディレクトリ内に置かれます。

このsblo_filesというディレクトリの中に、ブログ別にディレクトリが自動的に作られます。例えばあなたが「blog1」というブログを作った場合、sblo_filesディレクトリ内に「blog1」というディレクトリが作られます。以下、「blog2」というブログを新たに作れば、sblo_filesディレクトリ内に「blog2」というディレクトリが作られます。

そして、このブログ毎のディレクトリの中に、更に画像ファイルを納める「image」というディレクトリがあって、ブログ管理画面からアップロードした画像ファイルは、このimageディレクトリの中に格納されます。

普通に「さくらのブログ」を使っている分には、こういうことは知らなくていいのですが、ブログを自分流にカスタマイズするためには、アップロードした画像ファイルがどこに格納されるのか、すなわち画像ファイルのアドレスを知ることは重要です。

「さくらのレンタルサーバー」のドメイン名が「example.sakura.ne.jp」、ブログ名が「blog1」、ファビコン用画像ファイル名が「favicon.gif」の場合、画像ファイルのアドレスは、

http://example.sakura.ne.jp/sblo_files/blog1/image/favicon.gif

となる。(続く

2011年04月28日

HTMLをカスタマイズ

ファビコンを設置してみよう(その2)

「さくらのブログ」における画像ファイルの格納場所とアドレスが理解できたら、実際にファビコンを設置してみましょう。

まずメニューの、
デザインHTMLHTMLの追加
と進みます。

初期設定では、「デフォルトHTML」となっているはずです。右上の「HTMLの追加」をクリックして、新たにHTMLを追加します。名称は適当に。

新しく追加したHTMLを開いて、<head> 〜 </head>の間に以下のタグを記述します。

<link rel="shortcut icon" href="http://example.sakura.ne.jp/sblo_files/blog1/image/favicon.gif" />

判り易いように、</head> の直前に記述するといいでしょう。
(「さくらのレンタルサーバー」のドメイン名がexample.sakura.ne.jp、ブログ名がblog1、ファビコン用画像ファイル名がfavicon.gifの場合 )

最後に新たに追加設定したHTMLをブログに反映させるため「適用」ボタンをクリックすることを忘れずに。

これで、あなたのブログにファビコンが設定されているはずです。

アンコールツアー