iiie

物づくりと生活、"経験"を記事へ

CSS:サイドバーで使うおしゃれな画像ボックスの作り方

f:id:gorislog:20190407194632p:plain

 

画像背景のリンクボックスをフッター(実際にはサイドバー扱いですが)に設置しました。

 

www.iiie.nagoya

”はじめに読んでほしいオススメ記事”のリンクボックスです。

 

f:id:gorislog:20190415085756p:plain

 

背景ははてなブログのデザイン内にある選択できる背景より使用、左側に斜め掛けリボンを設置している簡単な仕様です。文字リンク部にマウスオーバーすると、色がゆっくりと変化するCSSも記入済み。

 

CSS

.whitebox{
margin:10px 0;
height: 32px;
padding: 10px 0;
border: solid 2px #172033;
width: calc (100%-4px);
background-image: url('/images/theme/backgrounds/2014/photo-05.jpg');
background-repeat: no-repeat;
background-position: 50% 35%;
background-size: cover;
position:relative;
overflow: hidden;
}
.ribbon{
float: left;
position: absolite;
top: 0;
left: 0;
width: 100px;
hight: 30px;
line-height;
background: #ff0000;
color: #ff0000;
-webkit-transform: rotate(-45deg) translate(-20px,-25px);
-moz-transform: rotate(-45deg) translate(-20px,-25px);
-o-transform: rotate(-45deg) translate(-20px,-25px);
-ms-transform: rotate(-45deg) translate(-20px,-25px);
text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
-1px 1px 0 #FFF, 1px -1px 0 #FFF,
0px 1px 0 #FFF, 0-1px 0 #FFF,
-1px 0 0 #FFF, 1px 0 0 #FFF;
}
.whiteboxi{
position: absolute;
padding: 15px;
margin-left: -100px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.whiteboxi a{
color: #172033;
font-weight: bold;
text-align: center;
text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
-1px 1px 0 #FFF, 1px -1px 0 #FFF,
0px 1px 0 #FFF, 0-1px 0 #FFF,
-1px 0 0 #FFF, 1px 0 0 #FFF;
}
.whiteboxi a:hover{
color: #6fb7ff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;

※赤文字部分で背景画像指定

 

『.whitebox』は当初白背景のシンプルなデザインボックスを作ろうとしていた名残です。CSSの中に不必要な記述がいくつかありますが、当サイトのCSSとの干渉があったので、変な部分があります。無駄な部分は最適化して利用していただけたら幸いです。

 

html

<div class="whitebox">
<div class="ribbon"><i class="blogicon-pages"></i> Hot</div>
<div class="whiteboxi">
<a href="https://www.iiie.nagoya/first"><i class="blogicon-good lg"></i> はじめに読んでほしいオススメ記事</a>
</div>
</div> 

※変更する部分は赤

 

サイドバー内にある『モジュール追加』より『html』を選択して貼り付けてください。

URLやアイコンフォント(i class="blogicon-good lg"></i>の部分)、表示する文字などは各自変更してください。

 

はてなブログで使えるアイコンフォント

www.foxism.jp

 

解説

一部変更部分を除き、ほぼコピペで使用できると思います。サイズもwidth:100%で指定しているので、レスポンシブデザインにも適応してると思います。連続して使用する際は、padding、marginなどの余白指定をし、くっつかないようにするなど調整は必要かもしれません。(僕は1ボックスのみの掲載だったので指定してません)

 

paddingやmarginの解説

saruwakakun.com

おわり