はてなブログをコピペだけでカスタマイズをしています。
次にどんなカスタマイズができるか Google 先生に聞いてみました。
なんかちょっと気になったのがこういう話題。
「はてなブログの大見出しタグは h2 に変更した方が良いのか？」
これは何の事を言ってるんだろう？
たしか、はてなブログの大見出しは h3 だが、なんで h2 にした方が良いのだろう？
HTML をまったく理解していない私には何の事か全くわかりませんでしたが、
いろいろな記事を読んで理解しました。
HTML のタグは h1 〜 h6 まであって、h1 から順番に使うのが望ましい。
ただはてなブログの場合は、記事のタイトルが h1 なのに大見出しが h3 となり、h2 が抜けている。
これでは SEO 的に集客に問題が出るかもしれない。
（結論は特に大きな問題ではないという事のようですが...?）
という事でコピペで簡単にできるみたいなのでやっておきました。
自動的にタグを書き換えてくれる JQuery をコピペする
以下の JQuery を「デザイン」→「カスタマイズ」→「フッタ」にコピペします。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('h3').replaceWith(function() {
$(this).replaceWith('<h2>'+$(this).text()+'</h2>')
});
$('h4').replaceWith(function() {
$(this).replaceWith('<h3>'+$(this).text()+'</h3>')
});
$('h5').replaceWith(function() {
$(this).replaceWith('<h4>'+$(this).text()+'</h4>')
});
});
</script>
デザインCSS を修正する
デザインCSS で見出しをカスタマイズしている場合には修正が必要です。
/* 見出し文字サイズの変更 */
.entry-content h3 {
font-size:24px;
color: #000000;
padding: 10px 15px;
border-left: 5px solid #000000;
border-bottom: 1px solid #000000;
}
.entry-content h4 {
font-size:22px;
color: #000000;
padding: 10px 15px;
border-left: 4px solid #000000;
border-bottom: 1px solid #000000;
}
.entry-content h5 {
font-size:20px;
color: #000000;
padding: 10px 15px;
border-left: 3px solid #000000 ;
border-bottom: 1px solid #000000;
}
.entry-content p {
font-size:19px;
}
赤字の部分を 2/3/4 に変更するだけです。
これで終了。
見た目は何も変わらないカスタマイズで、効果も分かりませんが、簡単なのでやっておきました。
今回はこちらのブログを参考にさせて頂きました。
【追記あり】はてなブログの大見出しはh2に変更した方がいいのかも【Markdownを使うなど】 - 広汎性発達障害の女がたまに毒を吐くブログ
ありがとうございました。
↓ ランキングに参加しています。よろしければポチッとして下さい。
