どうも！LSSです！！
今日はまた、ブログのデザインCSSを触ってました。
記事の一番下にある、前の記事、次の記事へのリンクを、
「背景を透明にした上で、袋文字に」してみました！
↑こういう感じですね。
デザインCSSに追記したコード
.pager a{
background:transparent;
font-weight:900;
color:#AA0000;
text-shadow:1px 1px 0px white,-1px 1px 0px white,1px -1px 0px white,-1px -1px 0px white;
font-size:1.5em;
}
.pager a:hover{
background:transparent;
font-weight:900;
color:#FF0000;
text-shadow:1px 1px 0px yellow,-1px 1px 0px yellow,1px -1px 0px yellow,-1px -1px 0px yellow;
font-size:1.5em;
}
参考：はてなブログでデザインCSSを編集する方法について以前書いた記事
変更前は白い四角で枠が作られていました
はてなブログ公式の説明↓によると、
https://help.hatenablog.com/entry/theme/custom-theme#pager
.pager .pager-prev
と、
.pager .pager-next
が、それに該当する部分のclass指定のようで、
.pager .pager-next {
background:transparent;
}
のように指定してみても、!importantをつけてみても、白い四角のままだったのですが…
.pager a
に対する指定として書くと、ようやく枠が透明になりました！
…このへんが、テーマがどういう指定をかけてるか分からなくて詰まる部分ですね^^;
CSSの解説
.pager a{
background:transparent; ←これが「背景を透明に」という指定
font-weight:900; ←これが「文字を最大にぶっとく」という指定
color:#AA0000; ←これが「文字色を暗めの赤に」という指定
text-shadow:1px 1px 0px white,-1px 1px 0px white,1px -1px 0px white,-1px -1px 0px white; ←これが「袋の外側を白に」という指定
font-size:1.5em; ←これが「文字サイズを1.5倍に」という指定
}
袋文字部分について、もう少し突っ込みます
text-shadow:
1px 1px 0px white,
-1px 1px 0px white,
1px -1px 0px white,
-1px -1px 0px white
;
↑分かりやすく改行してみました。
「pxを３回指定してから色を指定」を４回、繰り返しています。
まず「pxを３回指定」の部分ですが、
- 「横にどれだけずらすか」
- 「縦にどれだけずらすか」
- 「ぼかしの大きさ」
を指定しています。
「ぼかしの大きさ」については、今回はぼかさないので全て0pxですが、横と縦については、
「４回の指定で-1と1の全ての組み合わせを網羅している」事になります。
右下、左下、右上、左上、の全てをカバーするための４回ですね。
今度はマウスカーソルを乗せた時の反応
.pager a
への指定が完成したところで、それを全行コピーして、その下に貼り付け。
そして部分的に修正します。
.pager a:hover{
background:transparent;
font-weight:900;
color:#FF0000;
text-shadow:1px 1px 0px yellow,-1px 1px 0px yellow,1px -1px 0px yellow,-1px -1px 0px yellow;
font-size:1.5em;
}
↑書き換えた部分を赤文字にしてみました。
a:hover
という指定で「リンクにマウスカーソルを乗せた時」だけ有効になる指定になります。
color:#FF0000;
で文字色を赤に、そして
text-shadow
の中のwhiteだった部分をyellowに変更しました。
すると
マウスカーソルを乗せた時に↑みたいに光っているような演出になり、何をクリックしようとしているか分かりやすくなりました^^
text-shadow便利！
だいぶ前に書いた記事で、
「まさか、TextViewにこんな機能が…！（shadowについて）」
と、AndroidStudioでも文字に影をつけられる機能について書いていましたが、
「とりあえず影を、文字色とはハッキリ見分けられる色」でつけておくと、背景色が文字色と近い色になった場合でも、文字が判別しやすくて超便利ですね^^
「ふと気分を変えたくなり、背景画像を変更したら読めない部分が出てきた！」なんて事故を防ぐ事にもなりますｗ
てなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
