本ページにはプロモーションが含まれます。
はてなブログのCSSコードをご紹介します。
使えそうであればご自由にコピペしていただき構いません。
今回は、ヘッダー画像の下をぼかす方法などをご紹介します。
ヘッダー完成例
Photo by hokori / yu_dai
引用元
↓こちらのサイトで勉強させていただきました。
Black Everyday Company
CSS3 box-shadowを使って画像の輪郭(境界線)をぼかす | Black Everyday Company
yuri memo
背景画像を隙間なく表示させる方法 - background-sizeの使い方 - yuri memo
ゆずもちろぐ。
【これで解決!】スマホ表示をするとタイトル画像の左右が切れる問題【はてなブログ】 | ゆずもちろぐ。
デザインの設定
デザインテーマ:Smooth(デフォルト)
レスポンシブデザイン:◯
背景色:白
- Smooth以外のテーマを使用していても、解説を元にコードの数値を調整すれば使えると思います。
ヘッダー画像の下をぼかす&記事の枠線を消す
【デザインCSS】に貼るコード
.header-image-enable #blog-title-inner { .entry{ .page-archive .archive-entries .archive-entry { |
CSS解説
.header-image-enable #blog-title-inner { .entry{ .page-archive .archive-entries .archive-entry { |
- ・ブログの背景色は白がおすすめです。白じゃない場合は同化させるため影の色を指定するカラーコードを背景色と同じにしてください。【デザインCSS】欄に自動で「body{background:#◯◯◯◯◯◯;}」という記述がされてあり、そこを見ると背景に設定している色のカラーコードが分かります。
- ・Smoothはデフォルトで記事と記事一覧に細い枠線がありますが、ぼかしを綺麗になじんで見せるためにこの線が邪魔だったので消しました。
- ・元から記述されているコードは消さないで下にペーストします。
- ・他に自分でコードを入力している場合も同様に下に追加でペーストします。
- ・通常、コードは下のコードが優先して反映されます。
- ・上手く反映されないコードがある場合は、「 ; 」の前に!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;
}
- ・Smoothのデフォルトの字体を変えたくない場合は細字部分のコードを抜いてください。
- ・元から記述されているコードは消さないで下にペーストします。
- ・他に自分でコードを入力している場合も同様に下に追加でペーストします。
- ・通常、コードは下のコードが優先して反映されます。
- ・上手く反映されないコードがある場合は、「 ; 」の前に!importantと入力すると優先して反映されます。
- ・↓カラーコードはこのサイトで調べられます。
- WEB色見本 原色大辞典 - HTMLカラーコード
以上、ご参考になれば幸いです。
\ CSSを勉強する /