treeが3年程はてなブログ（はてなダイアリー）を運営してみて、これはやっておけばよかったなあ・・・でも今更もう遅いわあ・・・という事が沢山あるので、ブログを始めるならこれを最初に考えておいた方がいいよ！という事をまとめてみたいと思います。
はてなブログ専用の項目と、汎用的な項目と入り乱れてしまいますが、ご容赦下さい。
また、プログラマチックな話になって伝わりにくいかもしれませんが、ご容赦下さい。
結構ボリュームがあるのでじっくり御覧ください！
記法
はてなブログの場合、以下の3種類が選択できます。
- 見たままモード
- はてな記法モード
- Markdownモード
それぞれ以下の用途で使うといいと思います。
見たままモード
htmlやcssがほぼ書けない方向け。
メリットは、wygsygエディタのように誰でも簡単に文字装飾等が行える点。
デメリットは、装飾された文字がどんなhtml・cssになっているか解りにくい点。
はてな記法モード
はてなブログ専用の記法です。私はこれを選択しています。
メリットは、スーパーpre等、普通にやろうとすると非常に手間がかかる事が簡単にできる点です。
デメリットは、他のブログに移行しようとした時、全く使い物にならなくなる点です。
Markdownモード
汎用的な記法です。githabuのreadme等はマークダウン形式になっています。
メリットは、汎用的な記法であるが故、他のブログへの移行も可能な点。
デメリットは、スーパーpre記法等が存在しない点。
treeは何故はてな記法モードを選択したのか
私は所謂ガチ開発者なので「見たままモード」は論外。
となると普通に考えるとmarkdown形式ですが、これが後から追加されたんですよ・・・・
もしはてなブログのサービス開始から存在していたら、markdownにしていました。
私が「はてな記法モード」を選択した理由はたったこれだけのシンプルな理由です。
しかしmarkdownも「続きを読む」の記法が冗長だったり、そもそも「続きをよむ」の記法がmarkdownに存在しないものなので、純粋なmarkdownじゃないんですよね。だから、markdownで運用しても他のブログに綺麗に移行できないです。
記事URL
以下の3種類から選択できます。
- 標準
- タイトル
- ダイアリー
まずこの中で、タイトルだけは地雷なので絶対選択しない方がいいです。
何故なのかは以前以下の記事を書いたのでご覧下さい。
簡単に言うと、タイトルを選択した場合、記事タイトルがURLになるのですが、後から記事タイトルを変更してもURLは昔のまま、という最悪な事になります。
標準とダイアリー
特に理由が無ければ標準がいいと思います。
正直あまり違いがないというか、何が違うのか解らないですが、迷った時は極力標準を選択するのが鉄則です。
段落
ブログ開始して暫く経つまで段落を軽視してました。
行き当たりばったりで、段落を使ったり使わなかったり。
プログラミングでもそうなのですが、文章の構造化は非常に重要です。
はてなブログの場合は以下の3段落まで最初から用意されてるので、とりあえず最大3段落までで運用しましょう。4段落以上は冗長だし、htmlタグを自分で書かないと実現できません。
* ほげ（htmlタグのh3になります） ** ほげほげ（htmlタグのh4になります） *** ほげほげほげ（htmlタグのh5になります）
事前に「こういうパターンで段落を分ける」というルールを設定し、適宜段落分けしましょう。
段落が綺麗に設定できると文章が構造化されます。
すると、「段落が深くなる程より詳細な事を書いているな！」とユーザに簡単に伝える事ができ、ユーザが記事を読みやすくなります。
treeが実際に使っている段落のcss定義
css
.entry-content h3 { font-size: 36px; font-weight: bold; margin: 5px -15px 20px 0px; padding: 13px 0px 10px 15px; border-left: 10px solid #37A4CB; border-bottom: solid 1px #37A4CB; color: #37A4CB; border-top: solid 1px #dcdcdc; border-right: solid 1px #dcdcdc; background-color: #f5fffa; } .entry-content h4 { border-left: solid 5px #37A4CB; border-bottom: solid 1px #37A4CB; padding: 6px 0px 6px 8px; margin: 10px 0px 10px 0px; width: 100%; font-weight: bold; font-size: 24px; color: #37A4CB; } .entry-content h5 { padding-left: 15px; border-left: solid 3px #37A4CB; border-bottom: dashed 1px #37A4CB; font-weight: bold; color: #37A4CB; }
このcssですが、
* ほげ
と書くとそれが<h3>になるので、
.entry-content h3
というセレクタでcssを定義しています。このようにcssを定義しておけば、テーマ変更等でデザインを変更したくなった場合、このcssを修正するだけで全記事の段落のデザインを修正する事ができます。
記事内の改行
これは実は非常に重要です。
皆さんどこで改行を入れてますか？改行を入れるルールを決めていますか？
私は最初ははてなブログ公式テーマを使っていたので、そのテーマの横幅に綺麗に収まるように頑張って改行していました。しかしこれが恐ろしい程の誤りだったのです。
ある日テーマを変えてみて愕然としました。なんとそこには改行が想定した位置で行われずガタガタになった文章がありました。
私が想定していた改行
今日はいいお天気です。 ここで改行します。
テーマ変更後の改行
今日はいいお天気で す。 ここで改行します。
そうです。テーマが変わって記事部分の横幅(width)が変わり、改行位置が変わってしまったのです・・・わざわざ公式のテーマの横幅に合わせて文章の長さやフォントサイズまで調節して改行を入れたのに、それが逆に仇となって想定外の改行が行われてしまったのです！！
これを避けるため、文章が改行しそうな長さの場合は敢えて改行しないで横長にダラダラ書く事を強くおすすめします。敢えて改行せず、記事の横幅指定（width）による自動改行に任せた方がいいです。
こうするとテーマのwidthを気にしなくていいし、レスポンシブのテーマに変えても改行が前述のようにガタガタしません。
私はこれに気づくのが遅すぎたので、過去の記事は大分残念な改行になってしまいました。
記事内の強調表示の方法
例えばこんな感じでテキストの色を変えたり
テキストを大きくしたりする方法です。
はてなブログだと、大・中・標準・小の4パターンしかありません。
私はもの凄くデカイ文字も扱いたかったり、細かく調整したかったので、cssを全部定義しました。
treeが実際に使っているフォントカラー定義
css
.feature1 {color: #1E90FF; font-weight: bold;} .feature2 {color: #6B8E23; font-weight: bold;} .feature3 {color: #8B4500; font-weight: bold;}
使い方
<span class="feature1">記事中にこのhtmlを書くとフォントカラーが変わるよ</span>
1,2,3はフォントカラーが違うだけです。ポイントは連番にしている点。
ブログのテーマを変えると、記事部分の背景色を白からダークに変更した時、一括でテキストを明るい色に変えたいですよね。そういう時「feature_red」等と定義すると、赤から薄いピンク変えようとすると「feature_red」というセレクタなのに定義された値は「color: lightpink」とかになってたりして、矛盾するからです。
なので、私は敢えて連番を振る事で、セレクタ名と色の関連を持たせないようにしています。
では1,2,3はどう使い分けるのか？というと、1はポジティブな強調、2はネガティブな強調、3は1と2では足りない時に仕方なく使う、としています。
treeが実際に使っているフォントサイズ定義
css
.font16 {font-size: 16px;} .font18 {font-size: 18px;} .font20 {font-size: 20px;} .font22 {font-size: 22px;} .font24 {font-size: 24px;} .font26 {font-size: 26px;} .font28 {font-size: 28px;} .font30 {font-size: 30px;} .font32 {font-size: 32px;} .font34 {font-size: 34px;} .font36 {font-size: 36px;} .font38 {font-size: 38px;} .font40 {font-size: 40px;} .font50 {font-size: 50px;}
使い方
<span class="feature1 font50">巨大な文字！</span>
この例では、テキストカラーの変更と、テキストのサイズ変更を同時に行っています。
沢山サイズを用意しているのは、強調する文字の長さによって微妙に調節するためです。
はてなブログ標準のサイズ指定だと、font50並に大きなテキスト表示にできないです。だからこうやってcssを定義します。
はてなブログ標準のフォントサイズやフォントカラー指定は劣悪
例えば「ほげほげ」をフォントカラーを赤、フォントサイズを最大にすると、以下のなります。
<span style="font-size: 200%"><span style="color: #ff2600">ほげほげ</span></span>
なんだこれ・・・後から一括でフォントサイズ・カラー変更する時死ぬじゃん・・・テーマ変更した時どうすんのよこれ・・・
テーマを変えた時
テーマ変更次は、前述のフォントカラー「feature1, feature2, feature3」のcolor定義の変更を行います。
今背景色が白のテーマなので、feature1は水色ですが、ダークなテーマに変更したら、薄い水色にしないと文字が見えません。
このcssを変えるだけで、記事内の強調表示が綺麗に全て変更されます。
headに要素を追加
これは
タグに任意のタグを追加する設定です。個人的に以下のタグを入れておく事をおすすめします。
<meta name="robots" content="noarchive">
これは、検索エンジンで「キャッシュを表示」を表示させなくするタグです。
キャッシュを表示させるメリットはあるのか？
私はメリットが無いかな？と思ってます。
例えばテーマを変えてcssもガッツリ変えた後に、キャッシュから古いページが参照されてしまったりすると、嫌ですよね。
他にも、「あ、この記事やばいや、即効削除しないと・・・」という時、googleにキャッシュされると、いつ消して貰えるか解らないのです。記事自体はなくなっていますが、googleのキャッシュからそのマズイ記事が見えてしまい、いつ消えるのか解らない恐怖に怯える可能性があります。
続きを読む
この機能です。比較的新しい機能です。
この続きを読む機能ですが、どこで「続きを読む」ボタンを表示するかを自分で決める必要があります。
さあ、どこに挟みますか？適当ですか？ルールを決めてますか？そもそもこの機能使いますか？
なお、続きを読む機能ですが、ブログトップにのみ表示されます。記事ページには表示されません。
続きを読むを使うかどうかの選定
デザインや記事の書き方で、ブログ毎に離脱率が変わると思うので、お試して導入してみて、ブログトップからの離脱率の変化を観測しましょう。離脱率が挙がっているなら、ユーザは「続きを読むなんて押したくねえ。面倒くせえ」と思っています。
何故続きを読む機能を使うのか
そもそも何故必要なのでしょう。
理由は簡単。一覧性のためです。ブログトップの最新記事を一覧形式でざっくり把握して貰うためですね。
大手のニュースサイトなんかは、トップページは一覧形式で、詳細は続きを読む等のリンクを押させますよね。そういう事です。
しかしはてなブログではブログトップに一覧性を持たせるのは、デザイン的に難しいのが残念なところです。
続きを読むの前後をどう分けるか
続きを読む記法は、以下のような文章構造になっています。
誰でも簡単にお金を節約できる凄い方法を「無料」で「今日だけ」特別に公開します！！ それは・・・ ===== お金を一切使うな。
こんな感じで「====」の部分より上側が表示され、下側は省略されて代わりに「続きを読む」リンクが表示されます。
この中で特に上側をどう書くかがキモになりますね。
簡単に言うと、ユーザを釣る文章を短く書くのです。
前述の↑の例、ふざけてると思いました？私は結構本気で書きました。
- なにやら興味深い事を書くと言っている。
- しかし「それは・・・・」で文章が終わっている。
- 続きを読むをクリックすれば、この気になる内容を知ることができる。
- 続きを見たが、書いてある内容はゴミだった。殴りたくなった。
最後のは冗談ですが、こうやって短い文章でユーザに興味を持たせ、肝心な詳細は上側には書かず、続きを読まないと解らないようにします。これでユーザの気を引く事ができます。
トップページに一覧性を持たせるため、極力短い文章で書かないと、一覧性が低くなって、ユーザが最新記事を読む機会が減ってしまうので、上側の文章が長くなり過ぎないようにするといいかと思います。
まだ終わりじゃない！
さて、最後にユーザは殴りたくなりました。
その後のユーザの行動はどうでしょうか。
- そっ閉じ
- 記事自体に興味が無いので広告に目が行く
はい。僅かな確率かもしれませんが、ユーザは広告に目が行き、クリックする可能性があります。
何故ここでクリックするかというと、ユーザは記事があまりにクソだと他の興味を探し始めるという行動を取る事があるからです。普段なら広告より記事の内容の方が興味があるのですが、今回はそれが逆転してしまったので、逆に広告が魅力的に見えるという逆転の発送ですね。
しかしこんなクソ記事が増えるとサイトの評価が下がる可能性があるので、意図的にやるのはやめしょう。。。
雑感
当ブログにとって大分手遅れな内容が多いのですが、これからブログを始める、始めたばかりの方はこれらに注意して記事を書いたりすると、後で色々とメンテナスが楽になるかと思います。
こうしてみると、記事を書く時に結構htmlタグを使っています。ちょっと面倒ではありますが、テーマ変更やデザイン変更の際にcssを1箇所修正するだけで、そのcssセレクタを使っている部分が全て変更される、というメンテナンス性が重要なので、私は面倒でも自分でhtmlを書く事をおすすめします。（というかそもそもはてなブログの太字ボタンとか押してもhtmlタグが出力されますしね）
しかしこれだけ書いておいて、実はルールを守ってかけてない点には突っ込まないで頂けるとありがたいです。。。
