ブログのヘッダー画像をアニメーションにしたいのだが・・・

プログラミング

前回少し書いたけど、プログラミング(と言ってもHTML, CSSとかWordPress、PHP初歩ぐらいの)の知識を使えば、ブログのテンプレート、ヘッダーとかを自分好みにカスタマイズしたりも出来る。

デザインを変えたい場合は、デザインのセンスやスキルも必要になるけど、その辺はまあプロを目指すんでなければ別に自分なりで構わないだろう。

昨日パチスロを打ってて、 舟が波の上にプカプカ浮かんでる液晶画面だったことからヒントを得て、

いちのZen
いちのZen

「これ、ブログのヘッダー画像で再現できないか?」

と思って、早速色々いじってみたんだけど、なかなか納得のいく出来にならない・・・!

ヒントになったパチスロの液晶画面はコチラ↓

これの舟だけがユラユラ動いていたので、その感じを再現したいと。

イメージとしては、波の画像に船の画像を重ねて、舟をゆらゆら動かしたりしたい↓

このブログはWordPressなので、ヘッダー画像に複数の画像を使い、それを重ねて、船だけをユラユラ動かすようにすれば良いと思うんだけど、WordPressのコクーンという無料テーマを使っている関係で自分でイチから組んでいるテーマではないからか、設定の仕方がややこしいというか要素の関係性も分かりづらい。

無理やり重ねてみようにも、今度はレスポンシブ対応にするのも大変だし。

今は船の画像が変な位置&大きさになっちゃってますが、一旦休憩(というか放置)しますw

あーもっと簡単ならいいのに。

でも、こういうのがちゃんと出来れば、もしかしたらこういうデザインを売りにして個人で金取れるかもしれないよね。というかその可能性は十分にある・・・

WEB系の言語は、デザインとかお絵描きとも親和性が高いと思う。

 

CSSの@keyframe というやつでアニメーションを細かく設定したつもりなんだけど、何故かきちんと動いてくれないのです。

(ちなみに、このブログのランキングバナーにカーソルを合わせると、アニメーションで動くようにしてあります。そっちはちゃんと動作してるんだけど。)

※下のような感じです↓↓ 良かったらカーソルを載せてみてください(そしてついでに応援クリックもして頂けると・・・^^)

 

 

もっと簡単にアニメーションをやるなら、“Animate.css”のようなライブラリを使うと良いかも。

・・・というわけで早速設定してみたつもりなんだけど、また動いてくれない。(T^T)

こうした事は全て、WordPressじゃなくて自分でタグ打ちして書いたホームページの方が、ずっと簡単にできると思います。(少なくとも自分は)

独学でやってると、こういったトラブルの時に、いちいち自分でググって解決するしかないのが辛い所。

プログラミングスクールや会社で習いながらやらせてもらってるとか、友人や兄弟などにプログラマがいるとか、そういう人はその場で詳しい人に聞いて解決できるかもしれないけどさ。

この「いちいち調べる、そして自分で解決する」というのはプログラマーを目指すなら大事なスキル(自己解決能力)らしいが、これこそが独学で挫折する人を多く生み出している原因でもあるだろう。

ネットで調べたり質問してもどうにもならず、それでもどうしても何とか解決したい問題だけ、お金を払って、メンターを雇って教えてもらうってのがいいかもしれないね。今はそういうサービスがありますからね。

 

コメント

タイトルとURLをコピーしました