[記事公開日]2019/02/03
[最終更新日]2019/02/06

【WordPress】style.cssに書くこと

 

黄色蛍光ペン

/*黄色蛍光ペン*/
.under span {
box-shadow: inset 0 -10px yellow;
}

例)

このように黄色いアンダーラインを引くことができます。

 

hタグの設定

 

h2{

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

padding: 0.5em;/*文字周りの余白*/

color: white;/*文字を白に*/

border-radius: 0.5em;/*角の丸み*/

}

h3{

font-weight: bold;

}

h4{

border-left:7px solid #00FF00;

padding:.6em .8em

}

 

例)ここはh2タグです

スポンサーリンク  

例)ここはh3タグです

例)ここはh4タグです

 

例2)

h3 {
background: #FF82B2;
padding: 0.5em;
border-radius: 0.5em;
color: white;
margin-top: 2em;
}

h4 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
border-left: solid 5px #FF82B2;/*左線*/
margin-top: 2em;
}

http://inner-beauty.info/

 

例3)

/*hタグ*/
.entry-content h1, .comment-content h1{
position: relative;
background: #D9E5FF;
padding: 2px 5px 2px 25px;
font-size: 20px;
color: #474747;
border-radius: 0 10px 10px 0;
}

.entry-content h1:before, .comment-content h1:before{
font-family: "Font Awesome 5 Free";
content: "\f135";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #8EB8FF;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 3px white; 
border-radius: 50%;
}

.entry-content h2, .comment-content h2{
padding: 0.25em 0.5em;/*上下 左右の余白*/
border-left: solid 5px #C2EEFF;/*左線*/
margin-top: 2em;
}

http://takeru.yamatunes.net/

 

引用文

引用文と分かるような見た目にします。

 

 /*引用文~*/

blockquote {

    position: relative;

    padding: 30px 15px 8px 15px;

    box-sizing: border-box;

    font-style: italic;

    background: #efefef;

    color: #555;

}

blockquote:before{

    display: inline-block;

    position: absolute;

    top: 13px;

    left: 15px;

    vertical-align: middle;

    content: "\f10d";

    font-family: FontAwesome;

    color: #cfcfcf;

    font-size: 28px;

    line-height: 1;

}

blockquote p {

    padding: 0;

    margin: 10px 0;

    line-height: 1.7;

}

blockquote cite {

    display: block;

    text-align: right;

    color: #888888;

    font-size: 0.9em;

}

 

例)

これなら

引用文と

分かりますね