キャラクターをブログに活用

せっかく作ったキャラクターイラスト。さぁ、どうやって活用する！？
キャラクターの活用方法について、少しずつお話します。

【もくじ】
・キャラクターが活きるブログの箇所
　→・やり方について
　　→・アメブロで記事エリア下方に、画像を配置する方法

キャラクターが活きるブログの箇所

キャラクターをブログに活用する場合、こんな所に使えます。

ブログのヘッダー画像

ブログのプロフィール画像

ブログの記事タイトルや記事内に使う

使用イメージは、このブログを見て頂ければと思います。

トップ画像、記事タイトル、記事の末尾、あらゆるところに、
キャラクターを活かしてみました

CSSに触り慣れていないと、やり方に苦労するかもしれません。
最初は、疑問が吹き出す→Google検索→試す→プレビュー→失敗→またGoogle・・
という際限ないループにはまっていました

ブログ初心者の方でも、簡単にキャライラストを活かせるように、
次はやり方について、ご説明します。

やり方について

私が一番最初にブログ編集をしたのは、
6年くらい前ですが、その時と比較すると今は情報量が膨大に増えました！
「ブログカスタマイズ」でたくさん分かりやすい情報が出てきます。

使っているブログによって、やり方は様々ですが、
アメブロさんを使っていますので、
アメブロのやり方を解説して下さっている方を下記ご紹介します。
私が参考にさせて頂いた方々です。
（分かりやすい記事ありがとうございます）

アメブロのプロフィール画像を変更する方法
CSS編集用スキンにする方法
オリジナルのヘッダー画像を設定する方法
記事タイトルの背景を画像にする方法

さて、このブログのように、フッターエリアにキャラクターを入れる方法ですが、



なかなかピッタリの記事が見つけられなかったので、
下記でご説明しますね。

アメブロで記事エリア下方に、画像を配置する方法

挿入したい画像を準備します。

サイズは、横幅316ピクセル、縦幅96ピクセルです。
あまり大きいのも不自然なので、縦幅は100ピクセルくらいが
良いのではないかと思います。（個人的に）

画像をアップロードし、「画像のパス」を取得します。

『オリジナルのヘッダー画像を設定する方法』のリンクを参考に、
挿入したい画像をアップロードし、「この画像のパス」を確認します。
（「画像のパス」は後で使います）

下記の枠の内容をコピーします。

/* フッターに画像を追加する */
.skinArticleFooter{
height:180px;/*画像の高さ*/
background-image: url(URL);
background-repeat: no-repeat;
background-position: left 280px bottom 10px;;/*画像の位置　左から、下から*/
}

ブログデザイン編集用CSSの一番下に、貼り付けます

URLの所に、で取得した「画像のパス」を貼り付けます

　で赤字で書いたleft 280pxの部分の数字を変えて位置を調整します。

left 280pxは、左端から280pxという意味になります。
2カラムのブログデザインで、挿入する画像が横幅316ピクセル（このブログと同じ）なら、
280pxままで良いかと思います。

また、もしフッターエリアに挿入しようとしている画像の高さが、
100ピクセルよりも大きい場合は、
height:180px;/*画像の高さ*/
の数値も増やしてください。

Facebookなどのボタンにイラストがかぶってしまう怖れがあります。




・・以上で、完了です！
うまく出来ましたでしょうか？

キャラクターイラスト、ブログにバンバン活用してみてくださいね。





*********************************
イラストのご注文は、
イラストレーター300名が登録する「マイピク」へどうぞ♪

「誰に頼んだらいいか分からない！」
「どうやって注文するの？」などのご相談は、こちらから。
050-3772-0916 でお電話でもご相談可能です。
お気軽にどうぞ。
*********************************