どうもでょおです。このブログを運営してからずーっと思ってる悩みの一つに「直帰率の低さ」があります。いつも80%台です。雑多ブログといえどコレはかなり高い数値です。
以前、雑多ブログは直帰率低くて当たり前。対策なんてやーめた。って内容の記事を書いたこともありました。
最近は専門ブログも運営しているんですが、こっちも70%台。アレ？専門ブログでも直帰率高いやん。
こうなれば疑うべきは「記事の質」しかないです。といっても文章力を簡単に向上することはできないので文字の装飾をして見やすくしたいと思うんですよ。こんな感じ。
このブログはただの真っ黒文字が多く、メリハリがないので読んでて疲れそうです。でも怠慢だからメリハリのない文章を書いてるのではなくて、SEOのルールに従うという深い意味があるのです。
太字にする<strong>タグのルール
まず最もオーソドックスな文字の装飾と言えば「太字」ですよね。はてなブログで太字にする場合は「comand＋b」やエディタのBマークを押すと思います。
この時に挿入されるhtmlタグは<strong>タグ。強調を意味するタグです。
強調を意味するタグなのでSEO的には多用するのは禁止と言われていて、度が過ぎるとペナルティくらうとか。理想的な数はページ内に3つ程度だそうで、さらに現在はSEO的影響力が少なくなったとの話もあり<strong>タグを使わないサイトも多いです。
<strong>タグと全く同じように太字にしてくれる<b>タグというものもあります。
【htmlの表記】
<strong>太字にする</strong>
<b>太字にする</b>
【ブラウザ上での見え方】
太字にする←strongタグ
太字にする←bタグ
<strong>タグは検索エンジンに「この文字重要です」って強調の意味を伝えるものですが、<b>タグは単純にデザイン的に太くするって意味しかありません。
「じゃあ<strong>タグじゃなくて<b>タグを多用すれば良いじゃん」って思った訳ですが、はてなブログでは<b>タグを挿入すると自動的に<strong>タグに置き換わる仕様です。
斜体にするemタグも全く一緒
次に使われることが多いであろう装飾は斜体です。イタリック体ってやつで、こちらも太字にするボタンと同じ挙動をします。
これも<strong>タグと同じように強調の意味を持っていて、検索エンジンに「この文字重要です」って意味を伝えるものです。当然こちらも多用するのは禁止とされています。
<strong>タグと同様に、同じ見た目になるタグ<i>タグがあります。
【htmlの表記】
<em>斜体にする</em>
<i>斜体にする</i>
【ブラウザ上での見え方】
斜体にする←emタグ
斜体にする←iタグ
<i>タグにはSEO的効果がなくデザイン上の変化なので多用したいところですが、はてなブログでは<i>タグは自動的に<em>タグに置き換えられてしまいます。
理想はスタイルシートで指定
そもそもhtmlは内容のみ、装飾はcssのスタイルシートで行いましょうというルールがあります。どういうことかというと例えば、
例）これはhtmlで装飾しています
はてなブログのエディタボタンで太字、文字色、文字サイズを変更してみました。こうするとhtmlではこんな表記になります。
例）これは<span style="color: #d32f2f; font-size: 150%;"><strong>htmlで装飾</strong></span>しています
こんな感じにhtmlに直接、装飾スタイルを記述することになります。スタイルシートで別途指定するのが理想なので、本当はコレすらよくないってことになります。
解決策
一応の解決策としては、「よく使う装飾文字はcssで作っとく」ってことになります。適当ですが見本に作ってみました。
- 普通の文字
- 強調文字
- もうちょっと強調文字
- さらに強調文字
4段階もあれば十分でしょう。これをそのまま実装したいという方は下記のcssをコピペしてください。
コピペコード
/*強調文字*/
.hl1{
font-weight:bold;
}
/*もうちょっと強調文字*/
.hl2{
font-weight:bold;
background: linear-gradient(transparent 50%, #ffffa3 50%);
}
/*さらに強調文字*/
.hl3{
font-weight:bold;
background: linear-gradient(transparent 50%, #ffffa3 50%);
font-size:120%;
}
スマホに貼付ける場合は<style></style>で括ってください。
貼付ける場所は、
【PCの場合】「ダッシュボード」-「デザイン」-「デザインCSS」
【スマホの場合】「ダッシュボード」-「デザイン」-「記事」-「記事上」
あたりが良いかと思います。
スマホの場合は一応どこに貼付けても大丈夫ですが記事上、または記事下が良いと思います。
使用するとき
この強調文字を使用するときはHTML編集にして、強調文字にしたい部分にスタイルを付与します。
例）<p>この文章の<span class="hl3">ここだけ</span>を強調したい</p>
↓
例）この文章のここだけを強調したい
hlの後ろの文字を変えると文字の強調具合がかえられるという仕組みです。
- hl1
- hl2
- hl3
最後に
と、まあ解決策を出してみはしたんですが、これって見たままモードで記述する場合いちいちHTML編集と切り替えないと行けないのでめっちゃめんどくさそう。
HTMLモードだと文字が小さくてみにくい上に動作が重いし、Markdownだと簡単にクラスを付与できるけどスマホでブログ書くとき大変だし。
何か使い勝手が良い方法はないんだろうか。
見たままモードでhtmlが効いたら一番良いんだろうけどなー。
ではまた。
