今回は、はてなブログにおいて「サイト上で対象物を半透明に表示する方法」を試してみました。
はてなブログを使用しての説明となりますので、何卒ご了承ください。
はてなブログを使用していない方でも、CSSコードを記述する場所に注意するだけで良いので、是非ご参考にしていただければと思います。
言葉では表しにくいので、まずサイト上でどのような動きをするのか分からない方は、実装結果より動きを見ていただけましたら幸いです。
サイトのデザインについて、全く分からない方も、是非参考にしていただければと思います。
参考サイト
今回は、Webデザインの方面で著名なサイト様の記事を参考にさせていただきました。
このサイト様では、基本的なことから応用的なデザインまで詳解されています。
今回はこのサイト様から一部の基本的なところのみを参考にさせていただきました。
実装結果
以下に実際にCSS で実装してみました。
水色の枠内にマウスカーソルを合わせてみてください。
マウスカーソルを合わせると薄く、話すと元通りの濃さになったと思います。
これを取り入れることでサイトに動きが加わり、より面白さがますと思いました。
使い所を考えれば、この機能だけでもかなりのデザイン性の向上になるのではないでしょうか。
手順
今回はCSSコードとHTMLコードによって実装しています。
以下に実際に私が使用したソースコードを紹介させていただきます。
なお、それぞれ貼り付ける場所が異なりますので、ご注意ください。
また、CSSコードは貼り付けられる場所がいくつかあります。
- HTML内に直接記述する方法
- CSSを別の場所に記述する方法
前者の場合は、その記事一つにのみデザインを適用したい場合は有効ですが、他の記事にCSSを反映させることはできません。
今回は複数の記事に反映させるために、後者の方法をとります。
CSSソースコード
.light-color{
transition: 0.5s;
}
.light-color:hover {
opacity: 0.5 ;
}light-color
というのは、任意に決定することのできるクラス名です。
自分で分かりやすいクラス名に変更して構いません。
このクラス名はHTMLコード側に記述することでCSSのデザインを表示しますので、長すぎるクラス名は、あまり適していません。
短く、かつ分かりやすいクラス名を考えると良いでしょう。
貼り付けた場所
CSSコードを貼り付ける場所を示します。
はてなブログでない方は、CSSファイルや、所定のCSSコードを記述するフォームに記述すれば動作するはずです。
まず、はてなブログの記事の編集画面より左のメニューから「デザイン」をクリックします。
メニューから「デザイン」をクリックすると、以下のような画面が出てきます。
左上の３つのアイコンのうち、レンチが表示されている「カスタマイズ」をクリックします。
「カスタマイズ」をクリックすると、その下にさらにメニューが表示されますので、そのメニューの一番下にある「{}CSSデザイン」をクリックします。
「{}CSSデザイン」をクリックするとコードの入力フォームが現れますので、ここに上で紹介したCSSコードを貼り付けます。
これでCSSコードに関する作業は終了です。
あとはHTMLコード側でCSSでコーディングしたデザインを呼び出します。
HTMLソースコード
以下に私が実際に記述したHTMLソースコードを示します。
<center class="light-color" style="background: #00ffff; padding: 10px;">
<strong>カーソルを合わせてみてね</strong></center>ここで一番重要なのは
class = “light-color”
という部分です。
class = “light-color”というのはCSSコードに記述したオリジナルのクラス名を指定している部分になります。
ダブルクォーテーション（””）の内部は人によってそれぞれCSSコードに記述したものを記述してください。
貼り付ける場所
HTMLコードは記事の「HTML編集」の部分に貼り付けるだけで良いです。
以上で作業は終了です。
実際にサイト上で動作を確認して遊んでみてください。
おまけ
少し前回の記事の内容と合わせた内容になりますので、お時間がありましたらどうぞ。
前回の記事で、マウスオーバーした際の対象物の拡大縮小の動きをつけるという記事を書きました。
この拡大縮小と半透明の動きを組み合わせることで、より凝った動きを実現することができます。
実は、クラスは複数指定することができるのです。
実装結果
拡大＋半透明
←カーソルを合わせてみてね→
↓
縮小＋半透明
→カーソルを合わせてみてね←
↑
拡大や縮小の動きと同時に半透明になるようなデザインを作ることができました。
HTMLソースコード
以下に実際に記述したHTMLコードを示します。
<!--拡大＋半透明-->
<center class="zoom-in light-color"
style="background: #adff3f; padding: 10px;">↑<br />←
<strong>カーソルを合わせてみてね</strong>→<br />↓</center>
<!--縮小＋半透明-->
<center class="zoom-out light-color"
style="background: #87ceeb; padding: 10px;">↓<br />→
<strong>カーソルを合わせてみてね</strong>←<br />↑</center>ここでも一番重要なのは
class=”zoom-in light-color”
class=”zoom-out light-color”
の部分です。
zoom-outとzoom-inというクラスは上で示した過去記事の中で作成した拡大縮小を実現するCSSのクラスです。
複数のクラスを指定する時はクラス名とクラス名の間をスペースで区切ります。
これによって拡大、縮小、半透明の動作を同時に実現できました。
最後に
今回はWebデザインの一環として、サイト上で対象物を半透明に表示する方法を試してみました。
CSSを使用しただけですが、たった数行でかなり汎用性の高い動きを実現することができました。
他にも、CSSコードだけで実現できる高度なWebデザインを掘り出すため、常にサイト上で物足りないと感じたら、すぐ調べるようにしたいです。
以上、最後までありがとうございました。
コメント