LION MEDIAの文字装飾サンプルと使い方~色変更などのカスタマイズ

2019-05-29カスタマイズLION MEDIA

LION MEDIAに標準で搭載されている文字装飾13種のサンプルと、色やサイズを変えたい際の方法についてです。

 

LION MEDIAとは

 

無料で高機能、デザイン性にも優れたテーマで、設定項目からのカスタマイズだけで素敵なサイトが完成します。AMPにも対応。

LION MEDIA

 

LION MEDIAのその他のカスタマイズについては以下もご覧ください。

LION MEDIAの記事

基本的な事

 

エディタで装飾をつけるには「テキストエディタ」にあるボタンを使います。

8209_13

(ビジュアルエディタから使いたい場合は、クイックタグや定型文で登録するカスタマイズが必要)

 

カスタマイズは子テーマのスタイルシート(style.css)に記述します。

8209_14

 

装飾の各種とカスタマイズ例

 

カスタマイズ例CSSでの色は適当なものに書き換えて下さい。

色変更には以下もご利用下さい。

 色別カラーコード

マカロンビビッドパステル伝統色和色セーフ色名 配色パターンサンプル

 

BOX 枠線

8209_01

挿入されるHTML

<div class="borderBox">BOX 枠線</div>

 

初期CSSコード

/*枠線ボックス*/
.content .borderBox{
border:1px solid #E5E5E5;
padding:20px;
margin-top:20px;
}

 

枠色を変える例

/*枠線ボックス*/
.content .borderBox{
border:1px solid #333333; /*枠色*/
}

 

BOX 二重線

8209_02

挿入されるHTML

<div class="border2Box">BOX 二重線</div>

 

初期CSSコード

/*二重線ボックス*/
.content .border2Box{
border:4px double #E5E5E5;
padding:20px;
margin-top:20px;
}

 

枠色を変える例

/*二重線ボックス*/
.content .border2Box{
border:4px double #333333; /*枠色・太さ*/
}

 

BOX 背景

8209_03

挿入されるHTML

<div class="bgBox">BOX 背景</div>

 

初期CSSコード

/*背景ボックス*/
.content .bgBox{
background:#F2F2F2;
padding:20px;
margin-top:20px;
}

 

背景色・文字色を変える例

/*背景ボックス*/
.content .bgBox{
background:#33333; /*背景色*/
color:#ffffff; /*文字色*/
}

 

BOX ペーパー

8209_04

挿入されるHTML

<div class="paperBox">BOX ペーパー</div>

 

初期CSSコード

/*ペーパーボックス*/
.content .paperBox {
position: relative;
padding:20px;
margin-top:20px;
background-color: #F2F2F2;
}
.content .paperBox::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
border-color: #D8D8D8 #ffffff #ffffff #D8D8D8;
border-style: solid;
border-width: 0 0 20px 20px;
}

 

背景色・文字色を変える例

/*ペーパーボックス*/
.content .paperBox {
background-color: #33333; /*背景色*/
color:#ffffff; /*文字色*/
}
.content .paperBox::after {
border-color: #6b6a6a #D8D8D8 #D8D8D8 #6b6a6a; /*折れた部分の色*/
}

 

BOX 太文字

8209_05

挿入されるHTML

<div class="boldBox">BOX 太文字</div>

 

初期CSSコード

/*太文字ボックス*/
.content .boldBox{
border:3px solid #191919;
padding:20px;
margin-top:20px;
font-weight:700;
}

 

枠色を変える例

/*太文字ボックス*/
.content .boldBox{
border:3px solid #6b6a6a;
}

 

BOX 括弧

8209_06

挿入されるHTML

<div class="bracketsBox">BOX 括弧</div>

 

初期CSSコード

/*括弧ボックス*/
.content .bracketsBox{
position:relative;
padding:20px;
margin-top:20px;
}
.content .bracketsBox:before,
.content .bracketsBox:after {
display: inline-block;
position: absolute;
width: 20px;
height: 30px;
content: "";
}
.content .bracketsBox:before {
top: 0;
left: 0;
border-top: solid 1px #191919;
border-left: solid 1px #191919;
}
.content .bracketsBox:after {
right: 0;
bottom: 0;
border-right: solid 1px #191919;
border-bottom: solid 1px #191919;
}

 

枠色を変える例

/*括弧ボックス*/
.content .bracketsBox:before {
border-top: solid 1px #9eceff;  /*左上の色*/
border-left: solid 1px #9eceff;
}
.content .bracketsBox:after {
border-right: solid 1px #9eceff; /*右下の色*/
border-bottom: solid 1px #9eceff;
}

 

BOX はてな

8209_07

挿入されるHTML

<div class="question_box">BOX はてな</div>

 

初期CSSコード

.content .questionBox,
position:relative;
margin-top:20px;
padding:20px 20px 20px 70px;
}
.content .questionBox{background-color: #D9EFF7;}
.content .questionBox::before,
position:absolute;
top:20px;
left:20px;
font-size:2rem;
font-weight:700;
color: #ffffff;
text-align: center;
vertical-align: middle;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
}
.content .questionBox::before{content: "?";background: #0096c8;}

 

色を変える例

.content .questionBox{background-color: #9eceff; /*背景色*/
}
.content .questionBox::before{content: "?";background: #005ebb; /*マーク色*/
}

 

BOX びっくり

8209_08

挿入されるHTML

<div class="bikkuri_box">BOX びっくり</div>

 

初期CSSコード

.content .exclamationBox{
position:relative;
margin-top:20px;
padding:20px 20px 20px 70px;
}
.content .exclamationBox{background-color: #F6E1DF;}
.content .exclamationBox::before{
position:absolute;
top:20px;
left:20px;
font-size:2rem;
font-weight:700;
color: #ffffff;
text-align: center;
vertical-align: middle;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
}
.content .exclamationBox::before{content: "!";background: #c53929;}

 

色を変える例

.content .exclamationBox{background-color: #9eceff; /*背景色*/
}
.content .exclamationBox::before{content: "!";background: #005ebb; /*マーク色*/
}

 

BOX ポイント

8209_09

挿入されるHTML

<div class="pointBox">BOX ポイント</div>

 

初期CSSコード

/*ポイントボックス*/
.content .pointBox {
position: relative;
border: 2px solid #c53929;
border-radius: 5px;
padding:20px;
margin-top:20px;
}
.content .pointBox::before {
content: "POINT";
position: absolute;
top: -15px;
left: 15px;
font-size: 1.6rem;
font-weight: 700;
background-color: #ffffff;
color: #c53929;
padding: 0 10px;
}

 

色を変える例

/*ポイントボックス*/
.content .pointBox {
border: 2px solid #ffa8ff; /*枠色*/
}
.content .pointBox::before {
color: #ffa8ff; /*POINT文字色*/
}

 

注釈

8209_10

挿入されるHTML

<span class="asterisk">注釈</span>

 

初期CSSコード

/*注釈*/
.content .asterisk{
display: block;
font-size: 1.3rem;
color: #7F7F7F;
}

 

マーカー各色

8209_11

挿入されるHTML

<span class="markerYellow">マーカーイエロー</span>
<span class="markerPink">マーカーピンク</span>
<span class="markerBlue">マーカーブルー</span>

 

初期CSSコード

/*イエローマーカー*/
.content .markerYellow{background: linear-gradient(transparent 60%, #ffffbc 60%);}
/*ピンクマーカー*/
.content .markerPink{background: linear-gradient(transparent 60%, #FFDFEF 60%);}
/*ブルーマーカー*/
.content .markerBlue{background: linear-gradient(transparent 60%, #cce5ff 60%);}

 

1行すべてに装飾してみる

<span>タグではなく<div>タグを使うと文字の下線ではなく、1行に装飾できます。

8209_12

<div class="markerYellow">マーカーイエロー</div>
<div class="markerPink">マーカーピンク</div>
<div class="markerBlue">マーカーブルー</div>

 

 

CSSが反映されない場合

 

CSSコードを記述したのに変化がない場合は、キャッシュをクリアして下さい。

 

以下も参考にして下さい。

 

 

 

以上です!

 

LION MEDIA については以下も参考にして下さい。