読みやすい記事のためのブログ文字・画像装飾まとめ

読みやすい記事を書くために気を付けていることってありますか?

私は、あまり1文が長くならないように、適宜読点をいれたり、適切な長さで改行を入れることで、視覚的にも文章のまとまりが分かりやすくすることを一番に考えています。

もう一つは、文字の太さや色、大きさを変えることで、メリハリが付いたりしますよね。見出しをうまく使うのは、その代表的な例だと思います。

私が読みやすい記事を書くために使っている文字装飾の例をいくつか載せておきますね。

 

文字の修飾

桃色の蛍光ペン(細)

<span class="marker_pink">桃色の蛍光ペン(細)</span>

css ↓ ↓ ↓
.marker_pink {
background: linear-gradient(transparent 60%, #ff66ff 60%);
}

 

水色の蛍光ペン(細)

<span class="marker_water">水色の蛍光ペン(細)</span>

css ↓ ↓ ↓
.marker_water {
background: linear-gradient(transparent 60%, #66ccff 60%);
}

 

黄色の蛍光ペン(細)

<span class="marker_yellow">黄色の蛍光ペン(細)</span>

css ↓ ↓ ↓
.marker_yellow {
background: linear-gradient(transparent 60%, #ffff66 60%);
}

 

文字が右寄せになります

<p class="al-r">文字が右寄せになります</p>

 

⇒太字で少し大きめの文字のリンク

<span style="font-size: 16px;font-weight: bold;">
<a href="http://korea.k-forte.net/2016/11/ju-mong-free-movie/" target="_blank">⇒このソフトについての情報詳細はこちら</a>
</span>

 

黒い太字でフォントサイズ指定

<span style="font-weight: bold;font-size: 16px;">黒い太字でフォントサイズ指定</span>

 

赤い太字でフォントサイズ指定

<span style="color: #ff0000;font-weight: bold;font-size: 14px;">赤い太字でフォントサイズ指定</span>

 

青い太字でフォントサイズ指定

<span style="color: #4169e1;font-weight: bold;font-size: 14px;">青い太字でフォントサイズ指定</span>

 

ピンク太字でフォントサイズ指定

<span style="color: #ff1493;font-weight: bold;font-size: 13px;">ピンク太字でフォントサイズ指定</span>

 

オレンジ太字でフォントサイズ指定

<span style="color: #ff4500;font-weight: bold;font-size: 12px;">オレンジ太字でフォントサイズ指定</span>

 

一行の改行を入れる(WordPress)のエディタでも消えない方式

<p>&nbsp;</p>

 

画像・動画・ボタン等

左寄せ画像(記事の横幅の30%の大きさで縦は自動調整。リンク先は開かない。)

スパイス

<img class="alignleft size-full wp-image-4377" src="http://web.at-aisas.com/wp-content/uploads/2016/12/spices-1914130_640.jpg" alt="スパイス" width="50%" height="auto" />
<div style="clear: both;"></div>
<p>&nbsp;</p>

 

右寄せ画像(記事の横幅の30%の大きさで縦は自動調整。リンク先は開く。)

スパイス

<p><a href="http://web.at-aisas.com/wp-content/uploads/2016/12/spices-1914130_640.jpg" target="_blank">
<img class="alignright size-full wp-image-4377" src="http://web.at-aisas.com/wp-content/uploads/2016/12/spices-1914130_640.jpg" alt="スパイス" width="30%" height="auto" /></p>
</a>
<div style="clear: both;"></div>
<p>&nbsp;</p>

 

記事の横幅いっぱいのYoutube埋め込み表示。表示サイズ変わっても自動調節する。

映画スノーホワイト
<div class="movie-wrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ILDeA7AqA84" frameborder="0" allowfullscreen></iframe>
</div>
</p>
<div style="width: 448px;clear: both;font-size: .8em">映画スノーホワイト</div>
<p>&nbsp;</p>

 

赤いボタン

<div class="clearfix rankst">
<div class="rankstlink-a">
<p><a href="http://web.at-aisas.com/" target="_blank" rel="nofollow">セカイの詳細</a></p>
</div>
</div>

 

オレンジボタン

<div class="clearfix rankst">
<div class="rankstlink-or">
<p><a href="http://web.at-aisas.com/" target="_blank" rel="nofollow">セカイの詳細</a></p>
</div>
</div>

 

緑ボタン

<div class="clearfix rankst">
<div class="rankstlink-gr">
<p><a href="http://web.at-aisas.com/" target="_blank" rel="nofollow">セカイの詳細</a></p>
</div>
</div>

 

青いボタン

<div class="clearfix rankst">
<div class="rankstlink-b">
<p><a href="http://web.at-aisas.com/" target="_blank" rel="nofollow">セカイの詳細</a></p>
</div>
</div>

 

囲み注意書き

2016年6月追記  ↓ ↓ ↓

もし、海外の動画を見たりしたい目的の場合、海外の匿名proxyサーバを使う方法は、セキュリティで不安があり、今ではあまり使わないほうが良いと思います。もっと安全性の高い方法については、新たに記事を書きましたので、そちら(海外から視聴制限のある日本の動画サービスを見る2つの方法)を参考にしてください。

<div class="maru_area3 cf3">
<p><span style="color: #ff6600"><strong>2016年6月追記  ↓ ↓ ↓</strong></span></p>
<p>もし、海外の動画を見たりしたい目的の場合、海外の匿名proxyサーバを使う方法は、<span style="font-weight: bold;color: #ff0000">セキュリティで不安があり、今ではあまり使わないほうが良い</span>と思います。もっと安全性の高い方法については、新たに記事を書きましたので、そちら(<a href="http://web.plus-idea.net/2016/06/streaming-foreign-proxy-vpn/" target="_blank">海外から視聴制限のある日本の動画サービスを見る2つの方法</a>)を参考にしてください。</p>
</div>
<p>&nbsp;</p>

 

テーブルの装飾

錠数 価格 1錠あたりのお値段
75錠(75ソフトジェル) 3,353円 44.7円
150錠(75ソフトジェル) 4,112円 28.5円
150錠(75ソフトジェル)(ヤマト便) 3,469円 23.1円(75錠のほぼ半額!)
<table summary="テーブルの題名">
<thead>
<tr>
<th class="w30">錠数</th>
<th class="w30">価格</th>
<th class="w40">1錠あたりのお値段</th>
</tr>
</thead>
<tbody>
<tr>
<td>75錠(75ソフトジェル)</td>
<td>3,353円</td>
<td>44.7円</td>
</tr>
<tr>
<td>150錠(75ソフトジェル)</td>
<td>4,112円</td>
<td>28.5円</td>
</tr>
<tr>
<td>150錠(75ソフトジェル)(ヤマト便)</td>
<td>3,469円</td>
<td>23.1円(<strong><span style="color: #ff0000;">75錠のほぼ半額!</span></strong>)</td>
</tr>
</tbody>
</table>

 

リンク先の紹介

囲い商品リンク

<div class="pakunlink-box">
<div class="pakunlink-image"><img src="http://fan.plus-idea.net/wp-content/uploads/2016/08/img_57ae8d9f8700c.png" width="150" height="auto" style="border: none;" /></div>
<div class="pakunlink-info">
<div class="pakunlink-name"><a href="http://web.at-aisas.com/" target="_blank" rel="nofollow">YouKu</a></div>
<div class="pakunlink-detail">
<p>検索に比較的日本語も利用できるサイト。2012年3月に、下のTudou(土豆網)を合併しました。</p>
<p>YouKuとTodouは中国の動画サイト1,2位のサイトだったため、実質的に中国No1のグループになっています。</p>
</div>
<div class="pakunlink-link1">
<div class="pakunlink"><a href="http://web.at-aisas.com/" target="_blank" rel="nofollow">YouKu(优酷网)へGo!</a></div>
</div>
</div>
</div>
<!-- box -->
<p>&nbsp;</p>

 

リスト形式

チェックリスト

  • ううう
  • ああ
<ul class="defaultlist listcheck">
<li>ううう</li>
<li>ああ</li>
</ul>

 

ノートリスト

  • ううう
  • ああ
<ul class="defaultlist listnote">
<li>ううう</li>
<li>ああ</li>
</ul>

 

矢印リスト

  • ううう
  • ああ
<ul class="defaultlist listarrow">
<li>ううう&</li>
<li>ああ&</li>
</ul>

 

program

print "ssss"
print "ssss"
<pre class="cmdline">
print "ssss"
print "ssss"
</pre>

 

 

 

 

こんな記事も関係あるかも。読んでみてね。

コメントを残す

サブコンテンツ

このページの先頭へ