BloggerのQooQテンプレートをカスタマイズしまくってリニューアルしました。ProgateでCSS学んだことを見返したり、カスタマイズ系のブログを参考にしたりして自分好みになったかんという感じです。いずれはWordPressとかに移行しようかな。

ホームの記事リスト

2列から3列にしてサムネイル、記事ボックスの角を丸くした。

.list-item{

    flex-basis: 32%;

    margin-top: 16px;

    border-radius: 13px;

    background: $(other.back);}

引用のデザインを変更

#single-content blockquote{

   position: relative;

    padding: 50px 15px 15px 15px;

    box-sizing: border-box;

    font-style: normal;

    background: #efefef;

    color: #555;

}

#single-content blockquote:before{

   display: inline-block;

    position: absolute;

    top: 13px;

    left: 15px;

    content: "\f10d";

    font-family: FontAwesome;

    color: #cfcfcf;

    font-size: 28px;

    line-height: 1;

    font-weight: 900;

}

ソースコードを載せる

ソースコード用Google Code-Prettifyを導入、テーマはdoxy

参考サイト

https://www.webdesignleaves.com/pr/plugins/google_code_prettify.html

int sum = 0;
for(int i = 1; i <= 10; i++)
{
    sum += i;
}
Debug.Log(sum);

見出しデザイン

h2のデザイン

#single-content h2{

    font-size: 2.1rem;

    font-weight: bold;

    padding-bottom: 0.1rem;/*文字周りの余白*/

    padding-top: 0.1rem;/*文字周りの余白*/

    padding-left: 1rem;

    /* 上下 | 左右 */

    margin: 1.2em 0;

    color: #494949;/*文字色*/

    background: #F0F0F0;/*背景色*/

    border-left: solid 7px #7BAAF7;/*左線（実線 太さ 色）*/

}

h4のデザイン

#single-content h4{

    display: table;

    padding: .5em .5em;

    border-radius: 2px;

    line-height: 1.2;

    background: #F0F0F0;

    color: #494949;/*文字色*/

    /* 上下 | 左右 */

    margin: .9m 0;

}