ダンゴムシ情報

* 生物飼育、マクロ撮影、ブログカスタムなどの情報共有 *

はてなブログのヘッダー画像の下をぼかす&タイトルを左上にする

本ページにはプロモーションが含まれます。

はてなブログのCSSコードをご紹介します。

使えそうであればご自由にコピペしていただき構いません。

今回は、ヘッダー画像の下をぼかす方法などをご紹介します。

ヘッダー完成例

スマホ表示

はてなブログのヘッダー画像下をぼかした例

タブレット縦画面

タブレット横画面

Photo by hokori / yu_dai

引用元

↓こちらのサイトで勉強させていただきました。

Black Everyday Company

CSS3 box-shadowを使って画像の輪郭(境界線)をぼかす | Black Everyday Company

yuri memo

背景画像を隙間なく表示させる方法 - background-sizeの使い方 - yuri memo

ゆずもちろぐ。

【これで解決!】スマホ表示をするとタイトル画像の左右が切れる問題【はてなブログ】 | ゆずもちろぐ。

 

デザインの設定

デザインテーマ:Smooth(デフォルト)

レスポンシブデザイン:◯

背景色:白

  1. Smooth以外のテーマを使用していても、解説を元にコードの数値を調整すれば使えると思います。

 

ヘッダー画像の下をぼかす&記事の枠線を消す

【デザインCSS】に貼るコード

.header-image-enable #blog-title-inner {
box-shadow:inset 0px -100px 20px -70px #fff;
background-size:cover;
}
@media (max-width: 480px){#blog-title-inner{
height:200px;
width:500px;
}
}

.entry{
border:none;
}

.page-archive .archive-entries .archive-entry {
border:none;
}

 

CSS解説

.header-image-enable #blog-title-inner {
box-shadow:inset…画像内側に影を作る 0px…左右の影は無し -100px…画像下内側に付ける影の幅 20px…ぼかし幅 -70px…影の大きさ #fff…影の色(白);
background-size:cover…画像を横幅いっぱいに表示させる;
}↓スマホ表示で画像を半分に縮小する
@media (max-width: 480px…幅480px以下の端末){#blog-title-inner{
height:200px…表示する高さ !important…優先して反映;
width:500px…表示する幅 !important;
}
}

.entry{
border:none…記事スペースの枠線を消す;
}

.page-archive .archive-entries .archive-entry {
border:none…記事一覧の枠線を消す;
}

  1. ・ブログの背景色は白がおすすめです。白じゃない場合は同化させるため影の色を指定するカラーコードを背景色と同じにしてください。【デザインCSS】欄に自動で「body{background:#◯◯◯◯◯◯;}」という記述がされてあり、そこを見ると背景に設定している色のカラーコードが分かります。
  2. ・Smoothはデフォルトで記事と記事一覧に細い枠線がありますが、ぼかしを綺麗になじんで見せるためにこの線が邪魔だったので消しました。
  3. ・元から記述されているコードは消さないで下にペーストします。
  4. ・他に自分でコードを入力している場合も同様に下に追加でペーストします。
  5. ・通常、コードは下のコードが優先して反映されます。
  6. ・上手く反映されないコードがある場合は、「 ;  」の前に!importantと入力すると優先して反映されます。

 

タイトルと説明を左上にする&字体を変える

【デザインCSS】に貼るコード

#title a{
text-shadow:black 1px;
font-weight:bold;
font-size:28px;
color:#fff;
letter-spacing:1.5pt;
font-family:'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;
position:absolute;
left:20px;
top:25px;
}
#blog-description{
text-shadow:black 1px;
font-weight:bold;
font-size:12px;
color:#fff;
letter-spacing:0.5pt;
font-family:'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;
position:absolute;
left:10px;
top:5px;
}

 

CSS解説

#title a{↓タイトルについて
text-shadow:black…影の色(黒) 0px…影と文字のずれ;
font-weight:bold…太字;
font-size:28px…文字の大きさ;
color:#fff…文字の色(白);
letter-spacing:1.5pt…文字の間隔;
font-family:'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif…字体;
position:absolute…絶対位置;
left:20px…左端から位置指定;
top:25px…上端から位置指定;
}↓ブログのひとこと説明について 上と意味は同じ
#blog-description{
text-shadow:black 0px;
font-weight:bold;
font-size:12px;
color:#fff;
letter-spacing:0.5pt;
font-family:'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;
position:absolute;
left:10px !important…優先して反映;
top:5px !important;
}

  1. ・Smoothのデフォルトの字体を変えたくない場合は細字部分のコードを抜いてください。
  2. ・元から記述されているコードは消さないで下にペーストします。
  3. ・他に自分でコードを入力している場合も同様に下に追加でペーストします。
  4. ・通常、コードは下のコードが優先して反映されます。
  5. ・上手く反映されないコードがある場合は、「 ;  」の前に!importantと入力すると優先して反映されます。
  6. ・↓カラーコードはこのサイトで調べられます。
  7. WEB色見本 原色大辞典 - HTMLカラーコード

 

 

以上、ご参考になれば幸いです。

 

 

\ CSSを勉強する /