マツアズでは、一部デザインの変更が可能になりました。
今回は、ページ上部のヘッター画像を変更してみます。


このようにヘッター画像をメニーちゃんに変えてみましょう。
実際には、この部分は、皆さんのオリジナル画像にすることも可能です。

今回は、theme_green用に画像を作りましたので、まずブログのデザインをtheme_greenに変更してください。


それでは、やり方です。

1.まず、必要ファイルをダウンロードしてください。
ダウンロードしたら解凍しておいてください。
ファイルのダウンロードはこちら

2.ディレクトリを作成します。
コントロールパネルの「ファイル管理」をクリックして


「stylesheet」というディレクトリを作成します。


ディレクトリができるとこのようになります。


さらに、「stylesheet」というディレクトリの下に「images」というディレクトリを作ります。

「images」には画像ファイルが入ります。

今回作成したディレクトリを図にするとこのようになります。


3.ファイルを所定の場所にアップロードする。
2.で作成した「stylesheet」というディレクトリに先ほどダウンロードした「style.css」ファイルをアップロードします。
次に、「images」というディレクトリにダウンロードしたファイルの中の「images」ファイルの中にある「header.jpg」をアップロードします。

4.ブラウザを更新する。
最後にブラウザを更新するとヘッター画像がメニーちゃんに切り替わります。


今回アップロードした「style.css」や「header.jpg」は自由に編集する事ができます。
ここからは、その方法をやってみます。

まず、ヘッター画像を作成します。
画像編集ソフトを使って、ヘッター画像を作ってください。
その際に、画像の横幅に注意してください。
使用しているテーマ(テンプレート)よりも大きい画像を作ってしまいますと、レイアウトが崩れる原因になります。

==ヘッター画像の横幅の参考==
defalut:760px
theme_aqua,theme_brack,theme_brown,
theme_classic,theme_green,theme_orange:750px
ここに挙げたテンプレートはシンプルなものですので画像の変更がしやすいです。

次に、「style.css」を編集します。
ここで編集する部分は、オリジナルヘッター画像の横幅、縦幅の設定です。
先ほどダウンロードした「style.css」をテキストエディターで開いて、

/* ヘッター画像変更 ↓↓ */
#header {
background: url(images/header.jpg) no-repeat center top;
width: 750px;
height: 176px;
color: #ffffff;
}
/* ヘッター画像変更 ↑↑ */

赤字の部分を変更します。
width: 750px が横幅です。
height:176px が縦幅です。

背景画像に合わせて、文字の色を変更します。

/* ヘッター文字色変更 ↓↓ */
#header,#header a:link, #header a:visited, #header a:active {
color: #ffffff !important;
}
.blogDescription {
color: #ffffff !important;
}
/* ヘッター文字色変更 ↑↑ */
上記の赤字の部分をお好みの色に変更してください。
色は、カラーコードで指定する必要がありますので、ご注意ください。


変更が終わったら、保存します。

最後に、「3.ファイルを所定の場所にアップロードする。」
の手順で、それぞれのファイルをアップロードすれば完了です。

※オリジナルヘッターに関しましては、上記のマニュアルをもってサポートとさせて頂きます。画像の変更等の作業は、個人の責任にて行って頂くようお願い申し上げます。