wordpressの記事投稿の時に文字のデザインをする。

完全自己流です。

 

これまで記事を書くときに強調したい箇所は、strongタグを
使っていましたが、なんだか物足りなさを感じました。
 
また、見出しは h1, h2, h3…のようにHTMLの文法に従い記事を書いていましたが、
 
記事が長くなると、h3 の次に　h1 を使ったりしてHTMLの文法上、間違った書き方になってしまったので独自に見出しと強調を作りました。

  
wordpressの記事投稿時にcssのクラス指定することで、テキスト文字の装飾ができます。

 
❶wordpress投稿画面でテキストモードにしてHTMLタグで入力します。 

<p class="heading_l">見出し大　h1風</p>

<p class="heading_m">見出し中　h2風</p>

<p class="heading_s">見出し小 h3風</p>

 
❷このクラス名に装飾をするのでwordpress内のスタイルシート（style.css）に下記を記述します。
 

style.css

.heading_l{
width: 96%;
border-left: solid 10px #06F;
line-height: 40px;
padding: 10px 10px;
background: #fff;
margin-bottom: 20px;
text-align: left;
font-size: 1.8rem;
}




.heading_m{
width: 96%;
border-left: solid 5px #06F;
line-height: 40px;
padding: 10px 10px;
background: #fff;
margin-bottom: 20px;
text-align: left;
font-size: 1.7rem;
}



.heading_s{
width: 96%;
border-left: solid 2px #06F;
padding-left:10px;
background: #fff;
margin-bottom: 20px;
text-align: left;
font-size: 1.6rem;
}

 

*セレクタ名の意味（自己流）

 

large ⇒ l
 

medium = m
 

small ⇒ s

 

すると、HTMLのh1, h2, h3を装飾したようデザインになりました。
*Pタグに装飾してます。
 

見出し大　h1風

 

見出し中　h2風

 

見出し小 h3風

 

      
続いて、記事の間で強調したいときは、

 
❶wordpress投稿画面でテキストモードにしてHTMLタグで入力します。 

<span class="code_red">赤い文字で強調</span>

 
❷このクラス名に装飾をするのでwordpress内のスタイルシート（style.css）に下記を記述します。
 
style.css

.code_red {
    padding: 2px 4px;
    font-size: 1.8rem;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}

と、style.cssに記述すると
赤い文字で強調になりました。

 

      
次は、蛍光ペンのようなマーカーで強調します。

 
❶wordpress投稿画面でテキストモードにしてHTMLタグで入力します。 

<span class="marker_yellow_l">黄色マーカー　大　で強調する</span>

<span class="marker_yellow_m">黄色マーカー　中　で強調する</span>

<span class="marker_yellow_s">黄色マーカー　小　で強調する</span>

 
❷このクラス名に装飾をするのでwordpress内のスタイルシート（style.css）に下記を記述します。
 
style.css

.marker_yellow_l {
background: linear-gradient(transparent 0%, #ffff66 0%);
font-size: 1.8rem;
padding: 0px 10px;
}

.marker_yellow_m {
background: linear-gradient(transparent 60%, #ffff66 60%);
font-size: 1.7rem;
padding: 0px 10px;
}

.marker_yellow_s {
background: linear-gradient(transparent 85%, #ffff66 85%);
font-size: 1.6rem;
padding: 0px 10px;
}

黄色マーカー　大　で強調する
とこんな感じです。

  

黄色マーカー　中　で強調する
とこんな感じです。

  

黄色マーカー　小　で強調する
とこんな感じです。

  

    
最後に、関連記事などのブロックをつくりたいときは
  
❶wordpress投稿画面でテキストモードにしてHTMLタグで入力します。 

<div class="related_article">
<p class="related_head">関連記事のブロック</p>
こんな感じになります
wordpress投稿記事内でCSSを利用すれば
このように自由にテキストの装飾ができます。
</div>

 
❷このクラス名に装飾をするのでwordpress内のスタイルシート（style.css）に下記を記述します。
 
style.css

div.related_article{
width: 90%;
color: #06F;
border: dashed 1px #06F;
padding: 20px;
margin:0px auto;
background: white;
}

div.related_article .related_head{
width: 100%;
color: white;
padding: 10px 0px;
margin:0px auto;
text-align: center;
background: #06f;
margin-bottom: 20px;
}