シリウスはシンプルで分かりやすいけど、テンプレートのデザインに飽きませんか?色が数色あるだけで、あとは全部同じです。
でも、WEBデザインのことはよくわからないし・・・という方のために、誰でも簡単にできるテンプレートのデザインの変更方法を紹介します
ホームページのテンプレートを改良して自分風にアレンジする
シリウスのデザインテンプレートは決まっています。
この既成のテンプレートをベースにして、なんとかオリジナル風なデザインにできないものか?
他の方が作ったテンプレートや素材を使うっていう手もありますが、なんていうのか…気に入ったのがなくて、ホームページ全体の統一感がなくなってしまいます。
そこで、もうこうなったら自分でテンプレーのパーツを作ってみましょう!
といっても、結構簡単ですよ(笑い
H2〜H6のデザインや、矢印、マークといったものをオリジナルに変更してみる
基本的なテンプレートのデザインを残したまま、一部の画像をオリジナルのものに自作してみましょう。
まずは、これらの画像が入っている場所を探します。
シリウスの場合は、
左上のファイル欄⇒インストール先のフォルダを開く
フォルダ⇒[data]フォルダを開く⇒[ブログ名]フォルダ⇒[img]フォルダ
このimgフォルダの中に、サイトで使われている画像がすべて入っているはずです。
変更したいパーツをクリックしてみてください。
すると、ボックスの下に、その画像の大きさが表示されます。表示されなければ、右クリックして、プロパティ(詳細)で確認してもいいでしょう。
例えばh4のimg画像をクリックすると、
大きさ:900×26
というふうに表示されます。
なので、サイズが分かりましたので、これと同じ大きさの、好きなイラストを作ればいいわけです。
本来のh4はこれです
最も簡単にできるのは、ウィンドウズについている「ペイント」機能です。
h4のimgデータを右クリック⇒プログラムから開く⇒ペイント を選択
これで、サイズの変更はなしに、イラスト画像を入れていけばいいのです。
ただし、もともとのデータが失われてしまいますので、あらかじめ、別にコピーしておいて作ったほうが無難です。
あるいは、ペイントを新規作成して、サイズをあわせて作ってもよいでしょう。
まずは消しゴムツールで全部白く塗りつぶしてしまいます。
そこに、好きなマークなり色なりを使ってデザインを決めて行きます。
出来たら、保存(上書き保存すると元のデータが失われます)します。このとき、元のデータがjpgなのかgifなのかも確認して、同じ種類にします。
とりあえずこんな感じです
はい、文字が自作したイラストとかさなってしまいました。
このように本来のイメージ画像には、文字の始まり部分が設定されているため、文字をずらさなくてはなりません。
タイトル文字のずらし方
文字をずらすには、CSSスタイルシートを使います。
スタイルシートのpaddingというのが、余白をつけることになります。
詳しくは、「margin、paddingとは?:CSS入門」をみてください。
ここでは、padding left(左側で内側の余白)のサイズを大きくします。
スタイルシートを開いて、
/* 各種見出し */
という部分の、
h4
の項目を見ます。
padding leftのサイズを10ピクセルから20ピクセルに変更してみました。
すると、、、
テンプレートh4イメージを変更してみた
となります。
同様に、他の画像も変更できますので、自分で好きなデザインを作ってみてください。
けっこうオリジナル感が出てくると思います。
くれぐれも自己責任でおこなってください。
<% categoryListTitle | tag_insert(h3) %>
<% AQEntries %>
<% pageTitle | shorten(40,true) %>
<% pageThumbnail | addAtribute(align="left") | tag_insert(span class="txt-img") %>
<% pageBody | tag_strip | str_replace( ,) | oneline | shorten(150,true) %>
<% /AQEntries %>