このブログの作り方 - 駄目プログラマー脱出記

ブログのデザイン

はてなブログのデザイン『 Epic 』をベースとして作成しました。

カスタマイズ CSS

見出しのデザイン

見出しのデザインはこちら f:id:katsualso:20160625151116p:plain

/ 引用のデザイン1 /
.entry-content blockquote {
padding: 20px 55px;
background: rgba(245,245,245,0.8);
color: #222;
position: relative;
border: solid 1px #fff;
margin: 0.8em 0;
}
/ 引用のデザイン2 /
.entry-content blockquote:before {
color: rgba(200, 200, 200, 1);
content: "“";
font-family: serif;
font-size: 600%;
left: 0;
line-height: 1em;
position: absolute;
top: 0;
}
/ 引用のデザイン3 /
.entry-content blockquote:after {
content: "”";
font-family: serif;
position: absolute;
bottom: 0;
right: 0;
font-size: 600%;
color: rgba(200,200,200,1);
line-height: 0;
}

引用のデザイン

引用１のデザインはこちら
f:id:katsualso:20160625145751p:plain

引用１のソースコードはこちら

h1 {
padding-bottom: .5em;
border-bottom: 1px solid #ccc;
}

引用２のデザインはこちら
f:id:katsualso:20160625151434p:plain

引用２のソースコードはこちら

h2 {
padding: .25em 0 .25em .75em;
border-left: 6px solid #ccc;
}

スタイルのカスタマイズ

*貼り付けた画像に枠を付けるブログのヘッダ、フッタ部分に下記の style を適用する。

/ 画像に枠を付ける /
.entry-content img { border : 1px solid #DADADA ; border-bottom : 1px solid #757575 ; box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ; }

*自動でつくキーワードリンクの下線を削除する
ブログのヘッダ、フッタ部分に下記の style を適用する。

/ 邪魔なキーワード下線を消す /
a.keyword {
border: 0 !important;
text-decoration: none !important;
pointer-events: none !important;
cursor: default;
color: #5A5A5A;
}