Maria’s Blog

様々な出来事による心の変化を書き留めようと思います。誰かの希望の詩になれば幸いです。

Blogのデザイン向上を目指して…

お題「思い出のWebサービス」

f:id:Maria_Amami:20190523103806j:plain

どうもマリアです。

とりあえず、まだまだ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>


参考

様々なブロガーさんから参考にさせてもらいました。

kawmra.github.io
blog.minimal-green.com


なんかすごい記事見つけたw

www.tairakenji.com