Hタグのお花が邪魔だよっ!とお困りの皆様へ、ひと技ふた技のご提案。

jama

弊サイトのskin『プチフルールシリーズ』をお使い頂いている皆様へ。

このシリーズでは、記事のタイトルHタグにお花のimageを使っている部分があるのですが、
「記事のタイトルが長いと、タイトルがお花で隠れてしまうのですが…。」というお声を頂きました。

私は、それは想定内で(細かい事は気にしない)skinの配布をしたのですが、やはり細やかに考える方は「邪魔だなぁ~」とお困りかと思い、回避法を考えました。

スポンサーリンク

長い記事タイトルでも花に隠れないようにする方法2わざ

花を移動させる

単純な話ですが、正直に『移動させる』が第一番目です(笑)

1112_1

↑のように、長いタイトルの場合は、花が被ってしまってとても邪魔ですね~(-_-;)
それを、このコードを追加CSSに入れ込んで頂くと、

.article h1:after{
top: -100px;
}

↓の様な位置に移動できます。これでスッキリ!ですね(#^.^#)

1112_2 (1)

少しナビに掛かりますが、まぁ許される範疇かなぁ?と(笑)
イレギュラーな感じが好きなので、私は気になりません(笑)

記事タイトルにマウスオーバーした時に、画像を透過させる

今回、「これってオシャレじゃない?( *´艸`)」って自画自賛した方法ですが、花の位置はそのままで、
記事タイトルのマウスオーバー時に花を透過させて、下の文字を読ませるようにする方法です。

.article h1:hover:after{
opacity: 0.5;
}

少し見難いですが…

1112_3

コードの 0.5 は、丁度50%の透過度になります。
0.0 が、透明。
1.0 が、不透明になります。
この数字は、ご自身の良い数字まで調整してみて下さい。

透過の技は、邪魔な時だけでなく、面白い動きをさせたいな~。って時にも使って頂ければと思います。
それでは、これで終わります。<m(_ _)m>

励みになります
ランキングに参加しました。
「ダウンロードしたよ。」の
応援クリック頂けると嬉しいです(#^^#)
にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村


スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする