ヘッダー画像作成

2025 .05.06

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2012 .07.05

テンプレート

さて本題に

アメブロのデザインを昨日変更してみました(^^)v

まだ満足いく感じではないんですけど徐々に

カスタマイズしていきます。

アメブロのテンプレートは無料でこちらからもらいました。

この無料テンプレートの中には

スタイルシートを設定する「css.txt」

ヘッダー・フッター部分を設定する「フリースペース.txt」

バナー部分を設定する「フリープラグイン.txt」

の構成になっています。

ヘッダーの画像とかってそのままの画像だと都合が悪いので

変更します。

比較的簡単にヘッダー画像をつくる方法を紹介します。

まず準備するのが画像（横：900px/縦：110px以上あればOK）

これだけです。

とりあえず画像をダウンロードしておきたいと思います。

looseyが画像などを探すときにはいつも利用してます。

こちら

で探しました。

一応、商用可能な素材をさがしてくださいね！！
用意した画像はこちら

このファイルがヘッダーの背景なると考えてください。
右クリックをして対象ファイルの保存でダウンロードできます。

あとは画像編集のWebサービスで行いたいと思います。

まぁ、自分は簡単な処理ならPhotoShopであれば操作できるんですけど

GIMPが全く使えないので。。。（GIMP勉強しないと！！）

pixlrというサイトを使いたいと思います。

こちら

左から２番目に「Pixlr Editor」ってところをクリック

「新しい画像を作成」をクリック

ここで画像の名前と画像のサイズを指定します。
名前の欄に「header」
幅を900
高さを110
とします。

これで「OK」を押します。

これから背景を追加していきます。

上部のメニューから「レイヤー」をクリック

「画像をレイヤーとして開く」をクリック。
背景の画像を選択します。

レイヤーの追加が終わるとこんな感じです。

これで背景の追加は終了です。

これから文字を入れていきます。

左側の「A」と書いてある場所をクリックすると文字入力ができます。

早速文字をいれていきます。

文字をいれたい場所にクリックして文字を入力していきます。

ここでは文字の指定とフォント、サイズ、色などを指定します。
だいたいのサイトのフォントは、「Arial」の指定が多いので
Arialを指定しておきます。
そのサイトのメインフォントと合わせて指定すると
サイト内のバランスがいいです。

文字列の移動は左側の

マークをクリックしてから
ドラッグすると移動します。

あとは同じ手順でサブタイトル部分を作ります。
できたのがこちら。

あとは、これをダウンロードします。

画面上部の「ファイル」をクリックして「保存」をクリック

「OK」をクリックするとダウンロードされます。

ダウンロードされたファイルがこちらです。

この方法を使ってアメブロのヘッダーは作りました。

参考になれば嬉しいです♬

あと何か分からないことなどあったら何なりとメッセージしてください(^^)

【looseyへ連絡】