テーマ

【LION MEDIA】CSSカスタマイズまとめ

2020年4月26日

「LION MEDIA」はおしゃれなデザインに豊富な機能が特徴のとても優秀なWordPressのテーマですが、部分的にカスタマイズしたいことがよくあります。

そのため今回は「LION MEDIA」のテーマをカスタマイズするHTML・CSSのサンプルをまとめてみたいと思います。

まだまだカスタマイズするつもりなので、定期的に更新していきます。

作業の前に以下は忘れないでください。

カスタマイズの注意点

・CSSの記述はstyle.cssではなく、カスタマイズの追加CSSにする

・コメントで後から見た時にどこの箇所か分かるようにする

・カスタマイズは自己責任、絶対バックアップをとる

共通

文字サイズ

/*投稿ページ文字デザイン*/
body p {
font-family: arial;/*文字のフォント*/
font-size: 16px;/*文字のサイズ*/
color:#16160e;/*文字の色*/
line-height: 1.6;/*行の高さ*/
margin-bottom: 1.em;
}

/*投稿ページ文字デザイン(スマホ表示)*/
@media screen and (max-width: 768px){
body p {
font-family: arial;/*文字のフォント*/
font-size: 17px;/*文字のサイズ*/
color:#16160e;/*文字の色*/
line-height: 1.6;/*行の高さ*/
margin-bottom: 1.em;
}
}

リンク文字

/*投稿ページリンク文字デザイン*/
.content a {
font-family: arial;/*文字のフォント*/
font-size: 16px;/*文字のサイズ*/
}

/*投稿ページリンク文字デザイン(スマホ表示)*/
@media screen and (max-width: 768px){
.content a {
font-family: arial;/*文字のフォント*/
font-size: 17px;/*文字のサイズ*/
}
}

リスト文字

/*投稿ページリスト文字デザイン*/
.content ul li, .content ol li {
font-family: arial;/*文字のフォント*/
font-size: 17px;/*文字のサイズ*/
}

/*投稿ページリスト文字デザイン(スマホ表示)*/
@media screen and (max-width: 768px){
.content ul li, .content ol li {
font-family: arial;/*文字のフォント*/
font-size: 16px;/*文字のサイズ*/
}
}

蛍光ペン色

<p><strong class="r_line">赤色のライン</strong></p>
<p><strong class="y_line">黄色のライン</strong></p>
<p><strong class="b_line">ブルーのライン</strong></p>
<p><strong class="g_line">グリーンのライン</strong></p>
<p><strong class="p_line">ピンクのライン</strong></p>
/*赤色*/
.r_line {
background:linear-gradient(transparent 60%, #FF0000 60%) ;
}
/*黄色*/
.y_line {
background:linear-gradient(transparent 60%, #ffff66 60%) ;
}
/*ブルー色*/
.b_line {
background:linear-gradient(transparent 60%, #cce5ff 60%) ;
}
/*グリーン色*/
.g_line {
background:linear-gradient(transparent 60%, #ccff99 60%) ;
}
/*ピンク色*/
.p_line {
background:linear-gradient(transparent 60%, #ffccff 60%) ;
}

transparent 60%

トップページ

サイドバーの見出し

.heading.heading-widget {color: #ffffff;
padding: 0.5em;
display: inline-block;
line-height: 1.3;
background: #EB8686;
vertical-align: middle;
border-radius: 25px 0px 0px 25px;
width: 100%;
border-bottom: none!important;
}.heading.heading-widget::before {
content: ‘ ‘;
color: white;
margin-right: 8px;
border-bottom: none!important;
border-color: transparent;
position: static;
}
.heading.heading-widget::after {
border-bottom: none!important;
border-color: transparent;
position: static;
}

投稿ページ

目次

/*目次デザイン*/
.content a {
font-size: 16px;/*目次本文の文字サイズ*/
}
.content .outline {
width: 100%;/*目次の外枠の幅*/
border: solid 4px #bbdbf3;/*外枠の線の種類 太さ 色*/
}
.content .outline__number {
background: #FFFFFF;/*見出数字の文字色*/
font-weight: 800;/*見出数字の文字の太さ*/
font-size: 16px;/*見出数字の文字サイズ*/
}

BOX

枠線

<div class="borderBox">BOX 枠線</div>
/*枠線ボックス*/
.content .borderBox{
border:1px solid #E5E5E5;/*枠色*/
padding:20px;
margin-top:20px;
}

枠線 二重線

<div class="border2Box">BOX 二重線</div>
/*二重線ボックス*/
.content .border2Box{
border:4px double #E5E5E5;/*枠色・太さ*/
padding:20px;
margin-top:20px;
}

背景

<div class="bgBox">BOX 背景</div>
/*背景ボックス*/
.content .bgBox{
background:#F2F2F2;
padding:20px;
margin-top:20px;
}

ペーパー

<div class="paperBox">BOX ペーパー</div>
/*ペーパーボックス*/
.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;
}

太文字

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

括弧

<div class="bracketsBox">BOX 括弧</div>
/*括弧ボックス*/
.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;
}

びっくり

<div class="bikkuri_box">BOX びっくり</div>
.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;}

ポイント

<div class="pointBox">BOX ポイント</div>
/*ポイントボックス*/
.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;
}

合わせて読みたい

<div class="emphasize-link">
<p><a href="" target="_blank" rel="noopener noreferrer"></a></p>
<p><a href="" target="_blank" rel="noopener noreferrer"></a></p>
</div>
/*合わせて読みたい(複数リンク)*/
.emphasize-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #000000	;
background-color: #fffbf5;
margin: 60px 0px;
}
.emphasize-link a {
color:#000000	;
}
.emphasize-link p:last-child {
margin-bottom: 0;
}
.emphasize-link::before {
position: absolute;
bottom: 100%;
left: -2px;
padding: 2px 6px;
content: "あわせて読みたい";
background-color: #000000	;
color: #fff;
font-weight: bold;
}

注釈

<span class="asterisk">注釈</span>
/*注釈*/
.content .asterisk{
display: block;
font-size: 1.3rem;
color: #7F7F7F;
}

当サイトで申込みが多いプログラミングスクール・教室はこちら!

【1位】ポテパンキャンプ:Webエンジニア輩出率No1

【2位】CodeCamp:満足度96.6%のプログラミングレッスン

【3位】DMM WEBCAMP:プログラマー転職成功率98%

【4位】TechAcademy:プログラミングスクール受講者数No1

【5位】GEEK JOB:満足度・転職率が高い・20代社会人経験者向け

-テーマ
-

© 2021 nukoblog