読者です 読者をやめる 読者になる 読者になる

凡人CLUB

凡人であっても楽しく充実した毎日は過ごしていける。あがきながらも少しだけHAPPYになれるブログを目指して

背景に透過させて画像をブログ上で重ねる方法

f:id:sumahobonzin:20170303130956j:plain

f:id:sumahobonzin:20160617115704j:plain

前回の記事でかっこいいブログデザインにカスタマイズしたら、なんだか楽しくなってきて今日はあまり寝てませんw

子供の時おもちゃとか買ってもらうと嬉しくてずっといじってたくなりますよね?あれと一緒です。

ただ前回も書きましたが、私はコードやらCSSなどはサッパリなので今日は少しだけ得意な画像について書いていきたいと思います。

 

せっかくかっこいいテーマデザインなんだからそのまま使いなさいよ。という声は十分理解した上でどうしてもやってみたかったことがあったのです。

それはGIF画像を使って背景に画像を溶け込ませること。

私が使っているJOEさんのテーマ「CONTENTS」と個性を融合させたいと勝手ながらに思ったのです。

せっかくテーマデザインが和を基調とした素敵な色なのでこれを邪魔せずなんとか独自の画像を配置できないか考えました。

結論から先に言うとこのはてなブログがGIF画像に対応していたのでアップロードするだけで簡単に出来ましたw

ただ私もそうだったので、これからブログカスタマイズをする初心者の方の中に「へー!」と言ってくれるかたがいると信じて書いていきます。

 

今回はブログにのせる方法を書きたいので、その前であるソフトで画像を透明化する保存方法は割愛させてください。

私はphotoshopでGIF画像をつくりました。

こんな感じです。

 

f:id:sumahobonzin:20160617122231j:plain

ちなみに「CONTENTS」のテーマに合わせて画像は和の反物をイメージしています。

分かりやすいように背景を塗りつぶして保存していますが、上の白い部分の花柄だけの画像をつくっています。

普通の画像でしょ?と思ったアナタ!

その通りですw

ただこの画像を透過させると何が出来るかというと、ヘッダー画像にこれをアップロードしてしまえば背景色を何にしても崩れることなく表示させることができます。

 

ヘッダーに透過画像を重ねる

f:id:sumahobonzin:20160617132505j:plain

どういうことかといいますと、ヘッダー画像にこの反物GIF画像をアップロードしてしまえば「CONTENTS」の背景色を気分でかえても、

 

f:id:sumahobonzin:20160617123047j:plain

f:id:sumahobonzin:20160617122520j:plain

f:id:sumahobonzin:20160617123127j:plain

f:id:sumahobonzin:20160617123140j:plain

こんな風に背景色を壊すことなく表示することが出来るのです。

それにしても色合いがキレイですね♪

さすがJOEさん!ナイスリスペクト!

 

え?

まだ普通ですか?

私はこれが出来たときかなり喜んだのですが…笑

わかりました!

次は記事の中で透過させた画像を重ねる方法をいきましょう!

 

記事中の画像に透過画像を重ねる

f:id:sumahobonzin:20160617132505j:plain

と、張りきって記事を書きたいところですが最初に申した通り私はコードとかサッパリでしてそのまま画像をはっても2枚縦に連なるだけでした。

でもね、若い時に必死でモザイクを取ろうとしたように分かってはいても諦めきれないのですよ。

なのでネットで調べて知恵をお借り…コピペさせていただきましたw

 

コードを使わせていただいたのはコチラのサイトです。

naifix.com

超がつくくらい凡人な私はコピペしたもののどこにCSSを貼ってよいのかさえわからず、結局記事中にHTMLとCSSを並べてコピペしました。

これ凄いですよ。

文字はよくやっているプロのかたをお見かけしますが、画像はあまり見たことがなかったのですけどこれで表現の幅が一気に広がります。

例えばこんな風に

 

f:id:sumahobonzin:20160617124728j:plain

後から画像にロゴ表記を加えたり、透かし画像を使って画像を使われたときにわかるようにしておくこともできるのです。

そして凄いのは!

このブログ上で重ねた画像を使えば、右クリックして保存できるのは上に重ねた画像だけなんです!

なのでこの画像でいえばBonzinしかダウンロードできません。

ソースを出してアドレスをコピー…なんて行き過ぎたことまでは私には手に負えませんw

この画像はサンプル用に合体したのを使ったので、次の画像で実際にコードをいれて表示させてみますね♪

 

こんな感じになりました☆

試しにこの画像を右クリックで保存してみてください。

手前の反物画像だけが保存されるはずです。

なので土台となっている大事な画像は右クリックでは抜けません。

たぶんねw

そしてこのコードこそが私を寝不足にした原因です。

ただ単にコピペしただけでは表示せず、素人ながらにあれやこれやとやっていたらあっという間に朝w

まぁお陰でなんとなくコードの意味が少しは分かるようになりましたけどね。

これを覚えてしまって動的なGIF画像を2枚楽に動かせるようになると、スーパーマリオのジャンプしてキノコをとる場面だってブログ上で表現できるようになります!

めっちゃ重くなりますけどね!笑

 

最後に

f:id:sumahobonzin:20160617132505j:plain

ITに関わっているかたなどにとっては既に承知なことかとは思いますが、ブログをカスタマイズやるぞ!って素人がこれを知るとかなり嬉しいと思って記事にさせていただきました。

たぶんアンダーバーを画像にして全てに透過画像表記を加えることもコードで可能なのかもしれませんね♪

私はこれ以上寝不足が続くと食欲が止まらなくなってしまうので、この辺でお遊びはやめておきたいと思います。

あともしもGIF画像の保存方法がわからないなどの声が多かった場合はまた新たに記事を書きますね♪