sneaker テーマのサイドバーをカスタマイズしてみよう

sneaker テーマのサイドバーの位置を変更

テーマを使い始めると、カスタマイズしたくなりますよね! そんなあなたのための、簡単なカスタマイズを紹介していきます。

デザイン / / スタイルシート を開きます。

テキストエリアの一番下に、以下のCSSをコピーして貼り付けてみましょう。

@media (min-width: 1025px){
    #wrapper {
        order: 2;
    }
}

成功すると、サイドバーは左側に表示されます。どうですか?

f:id:tenman:20190322104300j:plain

sneaker テーマのサイドバーの配色を変更

デザイン / / スタイルシート を開きます。

テキストエリアの一番下に、以下のCSSをコピーして貼り付けてみましょう。

@media (min-width: 1025px){
#box2{
    background:black;
    color:ghostwhite;
}
/*リンクの色*/
#box2 a{
    color:lightskyblue;
    }
}

カラーネーム

www.htmq.com

成功すると、サイドバーは黒背景で表示されます。

f:id:tenman:20190322110311j:plain



sneaker テーマのサイドバーのタイトルにアイコンを追加

はてなブログでは簡単にアイコンを表示することもできますので、時間があるときにいろいろトライしてみると楽しいかも、、、

デザイン / / スタイルシート を開きます。

テキストエリアの一番下に、以下のCSSをコピーして貼り付けてみましょう。

#box2 .hatena-module-title{
padding-left:1.5rem;
}
#box2 .hatena-module-title:after{
font-family: blogicon;
content: "\f022";
position:absolute;
left:0;
color:red;
}

f:id:tenman:20190322113231p:plain

orefolder-sample.hatenablog.com

TOP