遊び心でアフィリエイト

田舎暮らしで悠々自適に生活するアフィリライフの記録簿

シリウスのデザインに飽きた|素人でもできるオリジナルデザイン

シリウスはシンプルで分かりやすいけど、テンプレートのデザインに飽きませんか?色が数色あるだけで、あとは全部同じです。

でも、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 %>