最近、はてなブログのカスタマイズにハマってしまった@kiwi.jpnです。私を含め、はてなブロガーの皆さんはブログのカスタマイズがお好きなようで、ワードプレスと見間違えるようなブログデザインにしている方もたくさんいらっしゃいます。
反対に、ブログデザインについて、全く興味がなさそうな方もいて、そういう方々からは「ブログはデザインじゃねえ！文章力だ！」という意識が見えて、なんだか、はてなブログっぽいなあと思います。
今回の記事では、はてなブログの記事の中にHTMLやCSSなど、はてなブログをカスタマイズするためのコードを載せる方法を紹介しています。このやり方を知っていると、自分がカスタマイズしたブログのデザインを、記事にして紹介することができたり、自分がカスタマイズした部分を備忘録として記録できるので、とてもオススメです。
はてなブログの記事にHTMLやCSSなどのソースコードを表示させる方法【はてなブログのカスタマイズ】
はてなブログでは、記事を書くときに3つのモードが用意されています。ぞれぞれやり方が異なりますので、自分の編集モードと照らし合わせて、自分のやり方にあった方法でソースコード(HTML&CSS)を表示させましょう。
はてな記法モードで >|| と ||< で囲む
はてな記法モードで記事を書いている人は、「 >|| と ||< 」で囲むだけで、ソースコードを表示させることが可能です。記事編集で定型文貼り付けに上のカッコ内を登録しておけば、カスタマイズについての記事を書く際にとても便利です。
.css {
width: 100px;
}
また、 >|| を >|css| のように言語を指定すれば、自動で色がついてとても分かりやすいです。これを”シンタックスハイライト”と呼びます。
.css { height: 100px; }
この方法はとても簡単なのですが、私ははてな記法モードではなく、見たままモードでいつも記事を書いているので、これだけのために編集モードを切り替えなければいけないのは少々面倒です。
Markdownモードで ``` と ``` で囲む
Markdownモードでは、 ``` と ``` で囲めば、上記のはてな記法モードと同じように表示させることが出来ます。また、 ```css 〜コード〜 ``` のように言語を指定すれば、シンタックスハイライトをつけることも可能です。
Markdown記法モードは、はてなブログだけでなく色々なブログサービスで採用されている編集モードなので、普段からMarkdownモードを使っている人は、こちらがオススメです。
見たままモードに貼り付ける
3つ目の方法は、はてな記法モード、またはMarkdown記法モードでプレビュー表示させたコードを、見たままモードに貼り付けるという方法です。見たままモードには、上記2つのような綺麗にソースコードを表示させる機能がありません。しかし、コピーした要素をそのまま貼り付けてくれるという大きな特性があるので、それを活かして表示させます。
はてなブログをカスタマイズすることで得られるメリット
はてなブログのカスタマイズはSEOの内部対策で超重要
私は、はてなブログはどんどんカスタマイズした方が良いと思っている派です。はてなブログはシンプルという点で、他のブログサービスには無い書きやすさ、見やすさを追求しているように思えますが、元のデザインテーマがシンプルすぎて、SEOの内部対策において、もっと改善させられる余地があるのではないかと考えています。
SEOの観点から言えば、どこにSNSシェアボタンを配置するかでシェアされる数が変わったり、関連する記事を上手く配置することで、直帰率を改善させることが出来たりと、SEOの内部対策では超重要なため、はてなブログのカスタマイズは絶対にしておいた方が良さそうです。
カスタマイズした部分を紹介することで、記事を量産できる
実は、はてなブログのカスタマイズをするこることでしか得られない大きなメリットがもう一つあります。それは、「はてなブログのカスタマイズについての記事を書くことで、被リンクを多く得ることができる」ということです。
実はこれ、はてなブログのカスタマイズについての記事を実際に書いたことがある人しか知らない大きな秘密なのですが、普通の記事を書くよりも、はてなブログのカスタマイズについての記事を書いた方が圧倒的にシェアされやすい傾向にあります。
この記事で紹介しているように、ブログデザインのカスタマイズは、難しそうに見えてとても簡単なので、ぜひカスタマイズに挑戦して、記事を量産してください。
リゾート地で住み込みで働くリゾートバイトという働き方で日本中を旅しています。現在は長野県の白馬村でリゾートバイトをしながらこのブログを書いています。
