京大院生の備忘録

人との交流が途絶えた大学院生の日々の出来事や考えを遺した備忘録

【ブログ初心者にオススメ】Markdown・2カラム・パンくずリストでブログが快適!

失礼します。次田(@tsugitain)です。
今日はブログのお話。


以前は、はてなtwitter経由で当ブログに訪れてくださる方が大部分を占めていましたが、
最近はGoogleやYahooなどの検索エンジンから閲覧してくださる方も増えてきました。


とりあえず「情報を発信したい!」と思い立って、下調べをせずにブログを開始してしまったため、
初期設定である「見たまま編集」のまま記事を書いたり、カテゴリを乱雑に作ったりしていました。

ブログを書き始めてまだ2ヵ月、これからもっと更新してより発展させたいと考えています。
この機会にブログのデザインを改善しましたので、その一部始終を以下に記します。

1. ブログの記法を「見たまま編集」から「Markdown」へ!

Markdownをご存知でしょうか。
「見たまま編集」はブログを書く際の初期設定です。
直感的に編集しやすく、完成後のイメージが想像しやすいことが特徴です。

しかし、実際に使用してきて、個人的に以下の問題点を感じました。

問題1. コピペするとコピー元の状態が保持される

範囲を選択して、Ctrl+C と Ctrl+V でコピペ出来るのは多くの方がご存知かと思いますが、
コピー元の文章の文字サイズや太字といった状態まで保存されてしまいます。

メモ帳などで下書きをしてからコピペして移す分には問題ないのですが、
固有名詞などを確認のために検索してからコピペしようとする時には困ることがたまにあります。
WordやExcelで同じような経験をしたことがある人も多いと思います。

問題2. 見出しや文字サイズ、改行がわかりにくい

見出しに関しては多くの方が言及されていますが、一応。

見出しを設定する際、標準の設定では「大見出し」「中見出し」「小見出し」がありますが、
これらはそれぞれ[h3][h4][h5]というタグに対応しています。
ちなみに、"h"は heading (=見出し、の意味)の略で、数字が小さいほど上位の見出しです。

記事のタイトル(本記事でいえば、【ブログ初心者にオススメ】~)が最上位の[h1]に相当するため、
何も考えずに用意された見出しを使うと、大見出しが[h3]扱いですので、

「あれ、[h2]はどこいったの?」

って事態に陥るんですよね。

Markdownの場合、"#“の記号1つで見出しを表現できます。
たとえば大見出しにしたい場合は、その文の前に[##]を入れるだけです。簡単ですね。


文字サイズと改行については、これは僕だけかもしれないですが。
普通に文章を打っていたのに、プレビューすると一部だけ小さくなっていることがあります。
しかも編集画面では他の普通の文章との違いがわからない。
「見たまま」編集なのに、見た目では違いが判らないのです。

結局、修正の仕方がわからないので、その部分だけメモ帳にコピペして文字情報だけ移し、
それを再び編集画面にコピペしなければならないのです。手間ですね。

問題3. 「見たまま編集」と「はてな記法」は、はてなでしか使えない

この二つの書き方は はてな特有であるため、はてなブログでしか適用されないのです。
一方、Markdownは一般的に用いられているテキストで、かつ とてもシンプルです。

確かに現在は はてなブログで書いているので今のところは問題ないのですが、
ふとした拍子に他のブログサービスに移りたいと思う時がくるかもしれません。
(僕はそのつもりは無いですが、あくまで可能性の話です。)

上記二種の書き方ですと、移行の際にそのままコピペすることができないのです。
さきほど取り上げた見出しの表現などを、一つ一つ手直ししなければなりません。

また、突然はてなブログのサービスが終了するかもしれないですし、
本人の非の有無にかかわらず、急にBANされてアカウントが消えてしまう可能性もゼロではありません。
最悪の事態に備えてバックアップを取る際にも、一般的な書き方の方が良いですよね。


一方で、Markdownも個人的に慣れるまで不便だなと思うことがあります。
それは、空白の改行をする際に「半角スペース2つ」か「[br]タグ」が必要ということです。
半角スペースでは一目では判りにくいため、僕は毎回[br]を添えています。

このデメリットを踏まえても、Markdownはオススメです。

2. ブログデザインテーマを2カラムの「Brooklyn」へ!

初期テーマでは、プロフィールや最近記事などの項目は記事の一番下にまとめられています。
僕は2カラム(これらを左右の一方に縦に表示する)形式にしたいと以前から思っていました。

今回、使用させていただいたデザインテーマはこちらです。

Brooklyn - テーマ ストア

とてもオシャレな雰囲気で、見出しの項目で説明した[h2]タグにも対応しています。
僕はモノクロが好きなので、色などの設定は初期のままにしております。

3. 「パンくずリスト」を導入してカテゴリーを整理!

当ブログでは、「ゲーム」「テレビ」「仕事」といったカテゴリーを設けています。

たとえば、"ゲームA"と"ゲームB"の記事を一つのカテゴリー「ゲーム」に統合していると、
「私はゲームAに関する記事だけが読みたい!」
と思ってくださる読者さんがいた場合、探すのが面倒くさく感じてしまうかもしれません。

それを解決するのが「パンくずリスト」です。
「親カテゴリー」→「子カテゴリー」という階層を作ることができます。
今の例でいうと、「ゲーム」という親カテゴリーを作り、そこから枝分かれするように、
「ゲームA」と「ゲームB」という子カテゴリーを作ることができます。

これで、ゲームの記事を全て見たい方は「ゲーム」カテゴリーを、
“ゲームA"の記事だけを読みたい方は「ゲームA」カテゴリーをクリックすれば快適ですね。

パンくずリストを導入する上で、こちらのソースコードを拝借しました。

bulldra.hatenablog.com

ありがとうございます。

4. カスタムURLでどの記事が一目瞭然!

はてなブログでは、記事を公開する際にURLを設定しなければ、
(西暦4ケタ)/(月2ケタ)/(日にち2ケタ)/(時間6ケタ)
というURLで自動的に公開されます。

これだと、URLを見ただけではどれがどの記事か分からなくなります。
Googleアナリティクスなどで確認する際にも、一目で判る方が良いですよね。
カスタムURL」を用いると、好きなURLを設定することができます。
また、記事を後から加筆修正した場合、URLは変更できません。
気分の問題ですが、古い記事を更新してもURLの日付は変わらないのが気になりそうでしたので。

5. ブログの軽量化を図り一部機能をオフに!

僕は、自宅ではノートPCを、外出先ではスマホを用いて記事を書いているのですが、
旧機種のandroidのせいか、スマホでのはてなブログの閲覧が非常に重いのです。

特に一つの記事を読み終えた時に何かしらの読み込みが入って反応が悪くなるのですが、
その一番の原因と思われるものは、はてなスターであると気付きました。
スターをつけた人のアイコンなどの情報と、スターを押すボタンを表示しようとする際に、
ロードの時間がかかるためか、白くなったまま反応しなくなりがちだったのです。

個人的に、はてなスターは、twitterの「いいね」ボタンと同様に、
記事に対する好意を気軽に示すことのできる素敵な機能と思っていました。

僕もこのスター機能が好きであったため、非表示にすることに抵抗がありました。
一時的に外してみて、体感で重さが変わるか試してみたいと思います。

ついでに、サイドバーの「リンク」という項目も削除しました。
はてなブログのトップページなどへのリンクしかなかったからです。

6. 断定口調から丁寧語に!

当ブログの記事は、従来まで「である」と「ですます」を混合して書いていました。
最初の挨拶は丁寧語(「次田です」など)、本文は断定口調(「~である」など)にしていました。

僕はブログ名のとおり本業が大学院生ですので、多数の論文を目にします。
もちろん英語論文も頻繁に読むのですが、日本語論文はそのほとんどが断定口調です。
その影響もあってか、最初の記事は無意識の内に断定口調で書いていました。

ですが、挨拶で「やぁ、次田だ。」のように軽い挨拶にはしたくなかったので、
挨拶や記事内で他のブロガーの方を紹介する際には、丁寧語にしていました。
結果として一つの記事に断定口調と丁寧語が混合した複雑な文章になっていました。

今回以降、全て丁寧語で統一していきたいと思っております。

最後に

過去に書いた記事も、見出しを追加し、口調を丁寧語にし、カスタムURLにして、加筆して公開し直します。
一番最初に書いた記事(をリライトしたもの)がこちら。
tsugitain.hateblo.jp

いかがでしょうか。
個人的には、ようやくブログらしくなってきたかな、と満足しています。

今回のデザイン更新、および本記事を作成するにあたり、
ポジ熊(id:pojihiguma)さんのこの記事からたくさん勉強させていただきました。
不必要にidコールすることは失礼かもしれませんが、感謝の気持ちも込めて掲載いたします。
www.pojihiguma.com

最後までご覧いただき、ありがとうございました。
これからもよろしくお願いいたします。