本ページにはプロモーションが含まれます。
当ブログのHTML/CSSコードをご紹介します。
今回ははてなブログの「引用」をカスタマイズしました。
ご自由にコピペしていただき構いません。
当ブログの引用
ある程度は引用って分かるように目立たせたいけど、でもすっきり見せたい・・・そんな感じを両立させました。
少なくともデフォルトデザインよりはだいぶ目立ってるはず。
引用元:引用元は手動で文字を小さくして入れています。
背景色は目に優しく彩度を落としています。
スマホでそのまま表示できるよう、なるべく文章欄の横幅を長くしました。
引用元
こちらのサイトで紹介されているコードを元に作成しました。
サルワカ
CSSで作る!魅力的な引用デザインのサンプル30(blockquote)
デザインテーマ・設定
デザインテーマ:Smooth(デフォルト)
レスポンシブデザイン
コード
【デザインCSS】に貼るコード
.entry-content blockquote {
position: relative;
padding:12px;
padding-left:42px;
margin-top:12px;
box-sizing: border-box;
background: #DFEBDE;
border-radius:6px;
}
.entry-content blockquote:before{
display: inline-block;
position: absolute;
top:12px;
left:6px;
content:"“";
font-family:sans-serif;
color:#fff;
font-size:70px;
line-height: 1;
}
.entry-content blockquote p {
line-height:28px;
font-size:100% !important;
letter-spacing:0.3pt !important;
font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif !important;
}
CSS解説
.entry-content blockquote {
position:relativeは枠を相対位置に置く;
padding:枠の内側の余白px;
padding-left:枠の内側左の余白px;
margin-top:枠の外側の余白の数値px;
box-sizing: border-box;
background: #背景の色(カラーコード);
border-radius:背景の角の丸みの数値px;
}
.entry-content blockquote:before{
display:inline-block;
position:absoluteで枠の中の固定位置に置く;
top:上の余白px;
left:左の余白px;
content:"“(引用マーク)";
font-family:引用マークの字体;
color:#引用マークの色(カラーコード);
font-size:マークの大きさの数値px;
}
.entry-content blockquote p {
line-height:行間の数値px;
font-size:文字サイズの割合% !important;
letter-spacing:文字間隔の数値pt !important;
font-family:字体;
}
- ・通常、CSSは下に追加したコードの指示が優先して反映されますが「!important」を付けると順番に関係無く最優先で反映されるためスタイル崩れを防ぐことができます。
- ・元から記述されているコードは消さないで最後の「 } 」のすぐ下にペーストします。
- ・他に自分でコードを書いている場合も同様に最後の「 } 」の下に追加でペーストします。
- ・↓字体の設定の仕方はこちらで知ることができます。
- 【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
- ・↓カラーコードはこのサイトで調べられます。
- WEB色見本 原色大辞典 - HTMLカラーコード
ご参考になれば幸いです。
\ CSSを勉強する /