【SANGOカスタマイズしてみた】メモボックスを色々デザインしてみる

この記事では
SANGOにもともとあるメモボックスをカスタマイズした方法を説明。

ジャンプマップ

カスタマイズの方法

「追加CSS」「子テーマ」「FTPソフト」どれかで行います。

追加CSSについてはこちら

ブログのカスタマイズを加速させる「追加CSS」の使い方

子テーマとFTPは後々記事にします。

カスタマイズいろいろ

もともとのメモボックスのデザイン

メモ

あたえることだよ！ただひとつのほんとうの喜びはあたえることだ！

薄いオレンジ色の背景にオレンジ色のアイコンですね。

ショートコード

[memo title="メモ"]文章[/memo]

1 2	[memo title="メモ"]文章[/memo]

上のショートコードをビジュアルエディタに記入するだけで、簡単に挿入できるボックス。

このデザインを色々といじってみました

今使っている

メモ

あたえることだよ！ただひとつのほんとうの喜びはあたえることだ！

CSSコードを見てみる

.memo{
    background: #FDEE7461;
    padding: 10px 15px;
}
.memo_ttl {
    color: #FFB74D;
}
.memo_ttl:before {
    content: url(画像.svg);
    background: none;
}

.memo{

background: #FDEE7461;

padding: 10px 15px;

}

.memo_ttl {

color: #FFB74D;

}

.memo_ttl:before {

content: url(画像.svg);

background: none;

}

背景はメモ帳（ポストイット）のような黄色です。アイコンにもSVGを使ってスッキリとしたデザインにしています。

カラーを変更してみた

MEMO

あたえることだよ！ただひとつのほんとうの喜びはあたえることだ！

CSSコードを見てみる

.memo {
    background: #E8F5FE;
}
.memo_ttl {
    color: #3AADF4;
}
.memo_ttl:before {
    background: #3AADF4;
}

.memo {

background: #E8F5FE;

}

.memo_ttl {

color: #3AADF4;

}

.memo_ttl:before {

background: #3AADF4;

}

枠線にしてみた

MEMO

あたえることだよ！ただひとつのほんとうの喜びはあたえることだ！

CSSコードを見てみる

.memo {
    padding: .5em;
    background: #fff;
    border: .5em solid #fff9e5;
}

.memo {

padding: .5em;

background: #fff;

border: .5em solid #fff9e5;

}

タイトル部分を変更してみた１

MEMO

あたえることだよ！ただひとつのほんとうの喜びはあたえることだ！

CSSコードを見てみる

.memo_ttl {
    background: #ffd5ad;
    color: white;
    display: table;
    padding-right: 10px;
    border-radius: 5px;
}
.memo_ttl:before {
    margin: 0 -5px 0 3px;
    line-height: 28px;
    background: transparent;
}

.memo_ttl {

background: #ffd5ad;

color: white;

display: table;

padding-right: 10px;

border-radius: 5px;

}

.memo_ttl:before {

margin: 0 -5px 0 3px;

line-height: 28px;

background: transparent;

}

タイトル部分を変更してみた２

MEMO

あたえることだよ！ただひとつのほんとうの喜びはあたえることだ！

CSSコードを見てみる

.memo {
    margin-top: 30px;
    margin-bottom: 1.5em;
    padding: 1.5em 1em 1em;
    background: #fff9e5;
    color: #545454;
    position: relative;
}
.memo_ttl {
    background: #ffb36b;
    color: white;
    display: table;
    padding-right: 10px;
    border-radius: 20px;
    position: absolute;
    top: -17px;
}
.memo_ttl:before {
    margin: 0 -5px 0 3px;
    line-height: 28px;
}

.memo {

margin-top: 30px;

margin-bottom: 1.5em;

padding: 1.5em 1em 1em;

background: #fff9e5;

color: #545454;

position: relative;

}

.memo_ttl {

background: #ffb36b;

color: white;

display: table;

padding-right: 10px;

border-radius: 20px;

position: absolute;

top: -17px;

}

.memo_ttl:before {

margin: 0 -5px 0 3px;

line-height: 28px;

}

シンプルにしてみた

MEMO

あたえることだよ！ただひとつのほんとうの喜びはあたえることだ！

CSSコードを見てみる

.memo {
    background-color: #fff;
    border: 1px solid #ECECEC;
    position: relative;
    padding-top: 2em;
}
.memo_ttl {
    position: absolute;
    top: 0;
    left: 0;
    background: #ececec;
    font-size: 1em;
    padding: 0 10px 0 0px;
    color: #424242;
}
.memo_ttl:before {
    background: transparent;
    color: #424242;
    line-height: 28px;
    margin: 0 -7px 0 0px;
}