あっちの多趣味なそらら

触るとピカーン!ってなるバナーを作りました。

オリキャラ_パンドラの覚醒

 

こんにちはです。

前回の記事に引き続き、当ブログのカスタマイズのお話です。 

 

 

 

 

  

今回は、新しくブログに追加したオリジナルバナーの作成と配置についてご紹介していきます。 

 

 

 

1.画像を作る

 

私はPixiv(イラスト投稿サイト)をやっていて、色んな人に自分の絵を見てもらいたいと思い、Pixivのマイページに飛ぶバナー画像を作ることに。

もちろん、オリキャラを出演させます。

 

 

 

より見る人にインパクトを与えるため、

 

 

画像に触れるとキャラの目が光る!

 

という、ちょっと手の込んだ仕様にします。

 

 

 

つまり、

平常時のものと、触れている間の光っているもの、2パターンの画像を用意する必要があります。

 

 

 

というわけで作っていきましょう!

 

 

 

 

 

今回も画像サイズが小さいので、

前回同様、CLIPSTUDIOで素材を用意し、インクスケープにて配置・レイアウトしていく手法で…

 

 

 

イラストは前に描いたものを少し色調整して再利用。

 

pixivバナーに使用するイラスト_オリキャラのパンドラ

 

 

 


バナーは文字の見せ方も結構大事!

ロゴ(?)作りも気合いが入ります。

 

文字にグラデーションかけるのは、毎回のように色とか濃さとか位置とか悩んでます…

 

pixivバナーに使用する文字素材



 

 

キャラ、文字、背景などの素材が出来たら、インクスケープを開いて順番に配置していきます。

 

 

納得のいくデザインになったら完成!

 

 

 

 

続いてロールオーバー時の画像ですが、

先ほど完成した画像のイラスト部分を差し替えて、部分部分の明度や透明度を変えるだけなので楽です。

 

 

 

 

完成したバナーがコレ!

 

 

pixivバナー_ロールオーバー画像

 

このようなロールオーバー画像を作る時、イラストの位置(座標)は統一した方が良いです。

 

少し位置がズレると、実際マウスで触った時に僅かに動いて見えてしまうので…。

 

 

 

 

 

2.HTMLでバナーを配置する

 

さて、作った画像を実際にブログに貼り付けていきます。

 

 

 

まずはHTMLの土台を準備。

 

はてなブログのデザイン設定画面に行き、カスタマイズ(スパナのマーク)をクリック。

 

 

サイドバーにバナーを配置したいので、サイドバーを選択します。

 

 

次に、下の方に出ている「+モジュールを追加」を選び、バナーを貼りたいエリアを新しく作ります。

 

 

サイドバーにエリアが追加されたら、編集をクリック。

 

 

すると、HTMLを記述するスペースが表示されるので、下記のHTMLをコピペしてください。

 

<a href="リンク先ページのURLを入力">
<img src="通常画像のURLを入力"
 border="0"
 onMouseOver="this.src='マウスを重ねた時の画像URLを入力'"
 onMouseOut="this.src='マウスが離れた時の画像URLを入力(通常画像と同じでよい)'" />
 </a>

 

 

 

これで土台は完成。

 

次に、日本語で書かれている箇所をそれぞれURLに置き換える必要があります。

 

 

 

例えば自分の場合だと、

 

 

・リンク先ページのURLは、PixivマイページのURL

 

 

 

・通常画像のURLは、

 

pixivバナー_ロールオーバー前

↑この画像のURL

 

 

 

・マウスを重ねた時の画像URLは、

 

pixivバナー_ロールオーバー時

↑この画像のURL

 

 

となります。

 

 

 

 

画像のURLゲットの流れですが、

  

始めに画像2つを「はてなフォトライフ」 にアップロードします。

 

はてなブログ画面右上のメニューバーからはてなフォトライフを開きます。

はてなフォトライフへの行き方



無事はてなフォトライフにアップロードできたら、 画像をクリックして大きく表示させましょう。

 

そして画像を右クリックし、「画像アドレスをコピー」を選択します。

 

 

これで画像URLをコピーできます。

 

はてなフォトライフ_画像URL取得の説明画面

 

 

 

後はHTMLに戻り、 前述の日本語の部分に貼り付ければ完成です!

 

プレビュー画面でちゃんと動くか確認しましょう。

 

 

 

 

完成までの道のりが大変ですが、出来上がった後にマウスを動かして、イメージ通りに目がピカーン!と光ってくれたのは感激です。

 

スマホでもちゃんと表示されてて安心です。

 

 

 

こういった遊び心のあるバナーは、ブログを華やかにしてくれます。

 

ただ、メインは記事の方なのでそっちも怠らないように…

 

 

 

CSSとかHTMLは地道に一個ずつ調べながら実行しているので、かなりのスローペースですが、コツコツとデザインを磨いていくつもりです。

 

 

もし同じようなバナーを貼りたい方がいたら、参考になれば幸いです。

 

 

ただ、デザインテーマによっては今回紹介したコードでは上手くいかないかも…(分からないですが…)

 

 

他にも同じような記事があると思うので、色々調べて比べながら試すのが良いかなと思います。 

 

 

 

 

ではまたm(__)m

 

 

 

 

▼バナーに使用したイラストの制作記事▼

acchinosorara.hatenablog.jp

 

▼前回のカスタマイズ記事はコチラ▼

acchinosorara.hatenablog.jp

 

フッター
ページトップへ戻るボタン