ヘッダーを替えてみた！

たれねこです。アメブロをカスタマイズしていたら１時間以上もかかってしまっていました（汗）。
そこで、ヘッダーに関することと、facebookページのリンクを貼る方法を少しお話します。





まず、ヘッダーですね。私の画像は飼い猫「もの」です！Ｇｏｏｇｌｅアカウントにバックアップしてたものから選別してきました！かわいいなぁ・・・（←親ばか）
のろけは置いといて、ヘッダー画像を用意したそのあとは、特別なソフトは使わず、ペイントのみで加工してます。ほとんどのパソコンにペイントは入っていますよね。
私は画像に特にこだわりがなかったので、そのまま使いました。必要であれば、何かしらのソフトで加工してね。

ペイントでヘッダー画像の作り方

１．画像をペイントで開く。

２．サイズ変更で、横幅を９８０ｐｘに合わせる。
ブログの幅が９８０ｐｘのためです。ペイントの「サイズ変更」からピクセル指定で、横幅を９８０ｐｘにしてください。縦横比を維持していれば高さも自動的にその画像に合った比率に変更されます。

３．別名で保存します（JPEG形式）。
元の画像に上書きしてしまうと、変更も面倒になってしまうので、必ず元画像とは別に保存しておきましょう。

画像が出来たら、ブログタイトルや簡易説明なんかの文字もペイントで入れていきます。
文字入れをした画像も、別に保存しておいた方が良いでしょう。



次に、アメブロで作った画像をヘッダーに設定する方法です。ｃｓｓ編集用デザインでないと、ここは変えられないです。

ヘッダー画像を設定

１．デザインの変更から、ｃｓｓの編集画面を開きます。

２．「ブログデザインヘッダ・背景用画像の追加」から、先ほど作った画像をアップロードします。そうすると画像とともにパスが出てくるので、全部コピーしておきます。

３．ｃｓｓに「ヘッダーに背景を敷きたいとき」といったコメントが書かれている部分があると思います。そこに「background-image: url();」を入れて、（）内に先ほどコピーしたパスを貼りつけます。

４．作ったヘッダー画像のファイルを見て、高さを確認しておきます。３と同じエリア（改行はしてください）に「height:ヘッダー画像の高さ;」を打ち込みます。

高さを何も打ち込まない状態で保存してしまうと、自動的に３００ｐｘの高さになってしまうので注意！
これで特別なソフトがなくても、簡単にヘッダー画像が作れます！
画像にブログタイトルを書いてしまったので、もともと入っているブログタイトルが邪魔になると思います。その文字を消すコードも明日載せます。今日はごめんなさい。でも、私も検索して出てきたものなので、探すのに苦労はしないはず！




続いて、facebookページのリンクを再度コンテンツに貼りつける方法。
私もフリルに出品中の商品をfacebookページで紹介してます（まだ３商品くらいですが・・・）。
この方法は、自分がfacebookページを持っている前提で話します。

facebookページのリンク

１．自分のfacebookページを開いておき、別のタブかウィンドウでLike Button for the Web というページを開く。

２．全部英文です。「URL to Like」にfacebookページのアドレスをコピペします。「Width」に１７０と打ち込みます。これは、フリープラグインエリアが１８０ｐｘのためです。多分１８０と打ち込んでも平気かとは思いますが、私はなんとなくそれよりも少なめに書いてます。

３．「Get Code」ボタンを押します。「IERAME」タブのコードをコピーしておきます。

４．そのコードを、アメブロの「管理・設定」→「プラグインの追加」→フリープラグインのタブにコードをそのまま貼り付けて保存！

とまあ、こういった具合です。表示を確認してから保存もしましょう！