【Cocoon】記事一覧にマウスをのせたときに動きをつけてみた

カサ子のつぶやき
この記事は約5分で読めます。

何て表現したらいいのかわからなくて、わかりにくいタイトルになってしまいました(^_^;)

うまく説明できませんが、トップページに記事がズラズラっと並んでいますが、それらの記事のうちの1つにカーソルを合わせると、その記事がフワッと浮いたようになることです。

カピ子

わかったようなわからないような・・・

色んな方のブログを拝見していて、動きがあるブログって本格的で凄いなと思います。

私でも何とか出来ないものかと調べてみましたら、意外にも出来てしまいました(^^♪

知識のある方のブログってほんとに有難い。

そして、あちこちのブログを参考に、自分なりにカスタマイズしてみました~~

私もひとさまのお役に立ちたいというのと、備忘録も兼ねて記事にしてみました。

早速どぞ(^_-)-☆

スポンサーリンク

ホバーとは

記事をフワッと浮かせたいと思ったところで、この動きを何というのかわかりませんでした(;・∀・)

で、何とか調べて『ホバー(hover)』という名前にたどり着くことができました。

そういえば、Cocoonのカスタマイズをされてる方のブログにそういう言葉があった気がするな・・・

web知識がありませんので、ほんっと何をするのも遠回りになります(笑)

カピ子

仕方ない 一からの積み重ねだね(^^)

hoverの意味を調べてみましたら、

(羽ばたいて)空中に停止する、低空飛翔する、ホバリングする、漂う、うろつく、さまよう、とまどう

weblio英和辞典・和英辞典より

とありました。

マウスを合わせてフワッとなったのを停止する、というイメージなんだろうなと勝手に解釈してみました(^^)

スポンサーリンク

スタイルシート(style.css)を変更する

先日、下記のようなブログを書いてそれほど経ってませんので、スタイルシート(style.css)の変更はまだ気楽にできました(^^♪

【Cocoon】グローバルナビの上下に線を入れてみた
グローバルナビの上下に線を入れる方法のご紹介です。ブログのオリジナルロゴを作りたいけど、デザインセンスのかけらもないので、何となくぼやけた印象を回避したくてチャレンジしてみました。デザインセンスもweb知識もありませんが何とかできました。

では、早速進めていきましょう!

左のメニューから、『外観⇒テーマエディター』と進みます。

表示された画面が、『Cocoon Child』『スタイルシート(style.css)』になっていることを確認してください。

私の場合は、いきなり『Cocoon Child』『スタイルシート(style.css)』でしたが、バージョン等によって違うことがあると思います。
くれぐれもお間違えの無いようになさってください。

上記を図に表すと、下記のようになります。
赤枠の4カ所をチェックしてくださいね☆

次に、画面真ん中辺りの/*必要ならばここにコードを書く*/という文章があるのを確認してください。

ここの下にいよいよ、記事一覧にマウスをのせたら動いてね、という指示を書きます。

具体的な場所は、下記画像の大きな赤矢印のところです。

で、ここに下記の内容を追記しましょう。

/* 記事一覧に動き */
.a-wrap:hover{
transform: translateY(-2px);
box-shadow: 2px 2px 6px 0 #ccc;
}

ここまでできたら左下にあるファイルを更新ボタンをクリックし、ファイルの編集に成功しました。となればOKです。

スポンサーリンク

フワッとしているか確認

やってきましたドキドキの瞬間です。

フワッと動きはあるのでしょうか~

と、その前に変更する前はどんなだったか見ておきましょう。

カーソルを合わせても、タイトルが四角く表示されてるだけで、何の変化(動き)もありません。

では、変更後はどうでしょうか。

いかがですか?
少しわかりにくいのですが、カーソルを動かすとフワッと浮き出してるのがおわかりいただけるでしょうか。

カサ子

わーい 出来た出来た\(^o^)/

色をつけてみよう

カピ子

考えてるよりも、意外に簡単に出来てよかったね(^^)

カサ子

でも、なんかもう少し際立たせたいな・・・

キツ美

またはじまった贅沢病( 一一)

ということで、色をつけてみることにしました。

やり方はとっても簡単!

background-color:好きな色

を追記するだけです。

とりあえずわかりやすく赤で設定してみましょう。

カサ子

何て追記するかわかる~?

カピ子

background-color:red   かな(・・?

カサ子

その通り!

さきほどの

/* 記事一覧に動き */
.a-wrap:hover{
transform: translateY(-2px);
box-shadow: 2px 2px 6px 0 #ccc;
}

に追記するだけです。
完成形は、

/* 記事一覧に動き */
.a-wrap:hover{
transform: translateY(-2px);
box-shadow: 2px 2px 6px 0 #ccc;
background-color:red  ←これが追記したところ
}

すると、、、、

じゃじゃーん

出来ました~~(≧∇≦)

ということで、現在の状態はこちらになります。

キツ美

わざわざここに書き出さなくても、ブログを見たらわかるわよ( 一一)

カサ子

なんか嬉しくて~~(*⌒∇⌒*)

まとめ

ブログの記事一覧に、マウスをのせたときにフワッと動きをつけてみる方法をご紹介しました。

web知識のない私にとっては、動きをつけるなんてめちゃくちゃ難しいんだろうなと思ってましたが、皆さんの記事を参考にさせていただいて、無事に出来ました(^^)

しかも好きな色まで付けるという付加価値まで!

これは主にパソコン向けでになります。
スマホでも一応は反映されますが、一瞬のことなのでちょっと寂しい(^_^;)

でも、こうやって知識を増やしていくことは無駄ではありませんし、自分のブログをもっと好きになるためにも必要なことだと思ってます。

どなたかのお役に立てれば嬉しいです(^_-)-☆

応援よろしくお願いしますm(__)m

にほんブログ村

コメント