Blogのデザイン向上を目指して…
どうもマリアです。
とりあえず、まだまだBlogの見栄えが悪いので
カスタマイズをしてみたまとめを書いておく。
…といってもいろんなWebページのコピペだが( ˊ̱˂˃ˋ̱ )
フォントの設定
手書き風のフォントを使いたかったので
『ふいフォント』を設定する。
/*ふいフォントの設定*/ @font-face { font-family: HuiFontP109; src: url(/fonts/public/HuiFont/HuiFontP109.eot); src: url(/fonts/public/HuiFont/HuiFontP109.eot?#iefix) format('embedded-opentype'), url(/fonts/public/HuiFont/HuiFontP109.woff) format('woff'), url(/fonts/public/HuiFont/HuiFontP109.ttf) format('truetype'), url(/fonts/public/HuiFont/HuiFontP109.svg#HuiFontP109) format('svg'); } .huifont{font-family:HuiFontP109}
ソースコード表示の色設定
できれば単色より多色の方が区別つくかなと思い変更。
ついでに背景色も黒にしてそれっぽくした。
/*ソースコードパレット*/ .entry-content pre.code { background-color: #282a36; color: #ffffff; } .synComment { color: #6272a4; } .synConstant { color: #f1fa8c; } .synIdentifier { color: #bd93f9; } .synPreProc { color: #a199c8; } .synSpecial { color: #c000c0; } .synStatement { color: #50fa7b; } .synType { color: #ff79c6; }
サイドバーの設定
まずはデザインの初期化をしておく。
/* サイドバー のリセット */ .hatena-module-title { position: relative; background-color:transparet; border: none; } .hatena-module-title::before, .hatena-module-title::after { content: none; }
初期化したら、見た目を変えていく。
/* サイドバー レース風 */ .hatena-module-title { color: #fff; font-size: 150%;/* 文字サイズ */ font-weight: bold;/* 太字 */ position: relative; padding: 0.2em 0.5em; background-color: pink; box-shadow: 0px 0px 0px 5px pink; border-top: 2px dashed #fff; border-bottom: 2px dashed #fff; margin-bottom: 15px;/* 下余白 */ }
目次の設定
初期設定だとシンプルなのでストライプに変更。
/* 目次 ストライプ背景2 */ .entry-content .table-of-contents { position: relative; color: #555; font-size: 100%; background: repeating-linear-gradient(-45deg, #ffeaff, #ffeaff 10px, #fff4ff 0, #fff4ff 20px); border: none; border-top: 40px solid pink;/* アクセントカラー */ padding: 10px 25px 15px 45px; margin-top: 1em; margin-bottom: 1em; width: 100%!important; box-sizing: border-box; } .entry-content ul.table-of-contents, .entry-content ul.table-of-contents li { list-style-type: decimal;/* 番号振り */ } .entry-content .table-of-contents::before { display: block; font-family: 'FontAwesome'; content: '\f00b'; color: #fff; font-weight: bold; font-size: 120%; padding-left: 3px; margin: 0; position: absolute; top: -35px; left: 10px; border-bottom: none; } .entry-content .table-of-contents:after { display: block; content: 'Contents'; color: #fff; font-weight: bold; font-size: 120%; position: absolute; top: -35px; left: 40px; } .entry-content .table-of-contents>li { font-weight: bold; } .entry-content ul.table-of-contents li a { color: #555; text-decoration:none; }
見出しの設定
目次と同様の見た目に変更。
/* 見出し ストライプ */ .entry-content h3 { font-size: 140%; padding: .5em 0 .5em .75em; border-left: 5px solid pink; background: repeating-linear-gradient(-45deg, #ffeaff, #ffeaff 10px, #fff4ff 0, #fff4ff 20px); }
マーカーの設定
太字を設定すればピンクのマーカー
斜体字を設定すれば黄色のマーカー
下線を設定すれば緑のマーカー
をひく状態にしてみた。
<style type="text/css"> /* 強調表示を蛍光ペン(ピンク)風に */ article strong{ margin:0 0.1em; padding:0.1em 0.2em; background:#fcfc60 !important; background:linear-gradient(to bottom, transparent 60%, rgba(255,153,255,1) 60%) !important; } /* bタグは太字 */ article b{ margin:0 0.1em; padding:0.1em 0.2em; background:#fcfc60 !important; background:linear-gradient(to bottom, transparent 60%, rgba(255,153,255,1) 60%) !important;} /* 斜体表示を蛍光ペン(黄)風に */ article em{ font-weight:bold; font-style: normal; margin:0 0.1em; padding:0.1em 0.2em; background:#fcfc60 !important; background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important; } /* iタグは斜体*/ article i{ font-weight:bold; font-style: normal; margin:0 0.1em; padding:0.1em 0.2em; background:#fcfc60 !important; background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important; } /* アンダーライン表示を蛍光ペン(緑)風に */ article u{ font-weight:bold; text-decoration: none; margin:0 0.1em; padding:0.1em 0.2em; background:#fcfc60 !important; background:linear-gradient(to bottom, transparent 60%, rgba(102,255,204,1) 60%) !important; } </style>