背景に透過させて画像をブログ上で重ねる方法
前回の記事でかっこいいブログデザインにカスタマイズしたら、なんだか楽しくなってきて今日はあまり寝てませんｗ
子供の時おもちゃとか買ってもらうと嬉しくてずっといじってたくなりますよね？あれと一緒です。
ただ前回も書きましたが、私はコードやらＣＳＳなどはサッパリなので今日は少しだけ得意な画像について書いていきたいと思います。
せっかくかっこいいテーマデザインなんだからそのまま使いなさいよ。という声は十分理解した上でどうしてもやってみたかったことがあったのです。
それはＧＩＦ画像を使って背景に画像を溶け込ませること。
私が使っているＪＯＥさんのテーマ「ＣＯＮＴＥＮＴＳ」と個性を融合させたいと勝手ながらに思ったのです。
せっかくテーマデザインが和を基調とした素敵な色なのでこれを邪魔せずなんとか独自の画像を配置できないか考えました。
結論から先に言うとこのはてなブログがＧＩＦ画像に対応していたのでアップロードするだけで簡単に出来ましたｗ
ただ私もそうだったので、これからブログカスタマイズをする初心者の方の中に「へー！」と言ってくれるかたがいると信じて書いていきます。
今回はブログにのせる方法を書きたいので、その前であるソフトで画像を透明化する保存方法は割愛させてください。
私はphotoshopでＧＩＦ画像をつくりました。
こんな感じです。
ちなみに「ＣＯＮＴＥＮＴＳ」のテーマに合わせて画像は和の反物をイメージしています。
分かりやすいように背景を塗りつぶして保存していますが、上の白い部分の花柄だけの画像をつくっています。
普通の画像でしょ？と思ったアナタ！
その通りですｗ
ただこの画像を透過させると何が出来るかというと、ヘッダー画像にこれをアップロードしてしまえば背景色を何にしても崩れることなく表示させることができます。
ヘッダーに透過画像を重ねる
どういうことかといいますと、ヘッダー画像にこの反物ＧＩＦ画像をアップロードしてしまえば「ＣＯＮＴＥＮＴＳ」の背景色を気分でかえても、
こんな風に背景色を壊すことなく表示することが出来るのです。
それにしても色合いがキレイですね♪
さすがＪＯＥさん！ナイスリスペクト！
え？
まだ普通ですか？
私はこれが出来たときかなり喜んだのですが…笑
わかりました！
次は記事の中で透過させた画像を重ねる方法をいきましょう！
記事中の画像に透過画像を重ねる
と、張りきって記事を書きたいところですが最初に申した通り私はコードとかサッパリでしてそのまま画像をはっても２枚縦に連なるだけでした。
でもね、若い時に必死でモザイクを取ろうとしたように分かってはいても諦めきれないのですよ。
なのでネットで調べて知恵をお借り…コピペさせていただきましたｗ
コードを使わせていただいたのはコチラのサイトです。
超がつくくらい凡人な私はコピペしたもののどこにＣＳＳを貼ってよいのかさえわからず、結局記事中にＨＴＭＬとＣＳＳを並べてコピペしました。
これ凄いですよ。
文字はよくやっているプロのかたをお見かけしますが、画像はあまり見たことがなかったのですけどこれで表現の幅が一気に広がります。
例えばこんな風に
後から画像にロゴ表記を加えたり、透かし画像を使って画像を使われたときにわかるようにしておくこともできるのです。
そして凄いのは！
このブログ上で重ねた画像を使えば、右クリックして保存できるのは上に重ねた画像だけなんです！
なのでこの画像でいえばBonzinしかダウンロードできません。
ソースを出してアドレスをコピー…なんて行き過ぎたことまでは私には手に負えませんｗ
この画像はサンプル用に合体したのを使ったので、次の画像で実際にコードをいれて表示させてみますね♪
こんな感じになりました☆
試しにこの画像を右クリックで保存してみてください。
手前の反物画像だけが保存されるはずです。
なので土台となっている大事な画像は右クリックでは抜けません。
たぶんねｗ
そしてこのコードこそが私を寝不足にした原因です。
ただ単にコピペしただけでは表示せず、素人ながらにあれやこれやとやっていたらあっという間に朝ｗ
まぁお陰でなんとなくコードの意味が少しは分かるようになりましたけどね。
これを覚えてしまって動的なＧＩＦ画像を２枚楽に動かせるようになると、スーパーマリオのジャンプしてキノコをとる場面だってブログ上で表現できるようになります！
めっちゃ重くなりますけどね！笑
最後に
ＩＴに関わっているかたなどにとっては既に承知なことかとは思いますが、ブログをカスタマイズやるぞ！って素人がこれを知るとかなり嬉しいと思って記事にさせていただきました。
たぶんアンダーバーを画像にして全てに透過画像表記を加えることもコードで可能なのかもしれませんね♪
私はこれ以上寝不足が続くと食欲が止まらなくなってしまうので、この辺でお遊びはやめておきたいと思います。
あともしもＧＩＦ画像の保存方法がわからないなどの声が多かった場合はまた新たに記事を書きますね♪
