CSS

久しぶりにCSSの記事を。

毎日ワクワクしてますか!?AllSync.jpへようこそ。Sync.(@AllSync.jp)です!

少し前からスマホ表示の際は、記事タイトルをアイキャッチの上に重ねて表示しています。スマホの場合は画面サイズが限られてくるので、僕が普段から参考にしているブロガーさんのサイトでもよく見られる記事の表示方法です。


画像の上に文字や背景を重ねる方法。

CSS

こんな感じにしたときのメモです。

/*HTML*/
<div class="img_box">/*画像のブロック要素*/
<a href="http://画像URL" target="_blank" title="サンプル">
<img src="イメージのファイル名" alt="サンプル" width="300" height="150" />
</a>
<p class="img_title">/*画像の上にしたいブログタイトル*/
<a href="http://リンクのURL" target="_blank" title="画像のタイトル">画像に重ねるリンクタイトル</a>
</p>
</div>
/*CSS*/
/*画層ブロックの高さと幅を指定*/
.img_box {
    position:relative; /*ポジション指定(absoluteの基点) */
    display:block;
    width:200px; /*画像と同じサイズで*/
    height:150px; /*画像と同じサイズで*/
}
.img_box img {
    z-index:0; /*重なりの順序を指定*/
}
.img_box a {
    color:white; /*リンクの色指定 */
}
/*タイトル記事*/
.img_title {
    position:absolute; /*ポジション指定(relative指定しているimg_boxが基点)*/
    top:0px; /*基点からの位置を決める数値を指定*/
    bottom:0px;
    left:0px;
    right:0px;
    z-index:1; /*数値が大きい方が上に重なる。*/
    background-color:#000;
}
.img_title a:hover {
    color:blue; /*リンクにカーソルが乗った際のカラー指定*/
}
.img_title  {
    filter:alpha(opacity=70); /*タイトルの背景色の透かし*/
    -moz-opacity: 0.7;
    opacity: 0.7;
}

僕がスマートフォン表示用に参考にしたCSSサンプルのページを載せておきます。今回の記事は、このCSSサンプルを自分のサイトに置き換えた際のメモなんですが、参考になれば幸いです。


AllSync

ネットに使えるCSSサンプルはたくさんあるので助かります。あとはそれをベースにして、自分のサイトに置き換えて使えるようにして、CSSを少しづつ覚えています。