読者です 読者をやめる 読者になる 読者になる

Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

はてな記法を使い倒す ブログカードのリンク形式を変えてみた

はてなブログ

f:id:syofuso:20161230202146j:plain
はてなダイアリーユーザーにはおなじみでしたが、はてなブログ以降新規ユーザーにあまり使われていない「はてな記法モード」。ちょっとしたことですがブロガーにとっては色々便利なので「はてな記法」の使い方をご紹介したいと思います。

ブログカードのクリック率について

ちょっと前にはてなブログのリンク形式のひとつ、ブログカードはクリックされないというPtengineによる検証結果が話題となりました。
ド素人でも3分でおしゃれなブログデザインを実現する11の法則 - 今日はこれを証明しようと思う。

↑の記事での検証結果は分析ツールのPtengineでiframeが検出されないのが原因で、実際にはクリックされないということはないそうです。
「ブログカードは死ぬほどクリックされない」はウソ。Ptengineの仕様から見えた真実とは? - NaeNote

ブログカードの構造

「記事編集画面」でurlを埋め込むとデフォルトではこのようなHTML構造のブログカードが生成されます。

<iframe src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.google.co.jp" title="Google" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://www.google.co.jp">www.google.co.jp</a></cite>

f:id:syofuso:20161230183251j:plain
カードの下に参照元URLへのリンクがURLをアンカーテキストとして表示されます。

ブログカードのリンク形式を変える

なごみ (id:yururimaaruku) さんも記事にされていますが、(上記のようにiframeが検出されないだけの可能性があるのですが)、ブログカードのカード下のcitation(参照元URL明示)の部分はURLそのままだと、読者にリンクだとわかりにくそうです。
おすすめ。ブログ分析とアクセスアップにかなり役立つGoogle Page Analisticsツール。 - ゆるりまあるく
そこではてな記法では簡単にブログカードの下の部分をタイトル付きのテキストリンクへ変更できます。

「記事編集画面」でurlを埋め込むとデフォルトでは以下のようなはてな記法のコードが出てきます。

[https://www.google.co.jp:embed:cite]

citeの部分をtitleに置き換えると

[https://www.google.co.jp:embed:title]

f:id:syofuso:20161230184335j:plain
このようにcitation部分がアンカーテキストがタイトル名のテキストリンクに変わります。
このリンクを埋め込むはてな記法は見たままモードでも使えます。

はてな記法を使い倒そう

使い倒すというほど、使いこなせている訳ではありませんが、はてな記法は慣れれば記事作成が捗ります。よく使うはてな記法を紹介してみます。

見出し記法

*見出しh3
**小見出しh4
***小々見出しh5

見出しh3

小見出しh4

小々見出しh5

このように半角アスタリスク*をつけると、自動的に見出しh3が生成されます。**をつけると小見出しh4になります。

カテゴリー記法

はてなダイアリーではよく使いました。タイトルに

[カテゴリー]エントリータイトル

[]でカテゴリーを入力すると、記事にカテゴリーの設定ができます。

リスト記法

「-」(半角ハイフン・マイナス)や「+」(半角プラス)をつけると自動的にリストになります。

-リスト1
--リスト1-1
-リスト2
-リスト3
  • リスト1
    • リスト1-1
  • リスト2
  • リスト3

また、「+」を使うと数字つきのリストになります。

引用記法

「>>」だけの行と、「<<」だけの行で段落をはさむと、その部分が引用文blockquotetタグだと明示できます。

>>
ここは引用文です。
<<

ここは引用文です。

「>>」の間に引用元のURLを入れると

>https://www.google.co.jp/>
ここは引用です。
<<

ここは引用です。

https://www.google.co.jp/

引用枠の最後の行に引用元URLへのリンクが追加されます。

id記法

id:syofusoとすればそのidのユーザーへ通知を送れます。idコールと呼んだりします。ブログで言及するときや、そのユーザーに読んで欲しいときなど、連絡用にも使えます。
画像をつけたりもっと詳しい使い方は↓公式ヘルプをどうぞ。
はてなユーザーにリンクする(id記法) - はてなダイアリーのヘルプ

fotolife記法

画像をブログ記事内へ挿入すると

[f:id:hatenablog:20101106100658j:plain]

このようはfotolife記法のコードが生成されます。「:plan」のところを「:image」に変えてさらに指定を追加すると

[f:id:hatenablog:20101106100658j:image:w300:w90,h67,right]あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
<br style="clear:both">

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。


このように画像にテキストを回り込ませたり、画像のサイズを指定して表示することができます。

<br style="clear:both">

でfloat解除(回り込み解除)できます。

google記法

Google検索結果へのリンクを貼ることが出来ます。

[google:はてな記法]

google:はてな記法

表組み記法

半角の縦棒「|」で仕切ることで簡単にtable(表組み)を表示させることができます。

|*名前|*色|*個数|
|りんご|赤|1|
|みかん|だいだい|2|
名前 個数
りんご 1
みかん だいだい 2

半角アスタリスク*をつけると項目名となります

スーパーpre記法、シンタックス・ハイライト

入力したコードやはてな記法をそのまま表示するスーパーpre記法に先頭の>||の2本のパイプ(||)の間にそのコードのファイルタイプ(言語)を指定するとソースコードを色付けして表示する(シンタックスハイライト)が利用できます。
ブログでソースコードを紹介するときによく使います。

「>|言語|」のみの行と「||<」のみの行でソースコードを挟むと、シンタックスハイライトされたソースコードが表示されます。

 class Foo
   def bar'baz' # return baz
   end
 end

ソースコードを色付けして記述する(シンタックス・ハイライト) - はてなダイアリーのヘルプ

目次記法

目次記法は見たままモード、MarkDownモード、はてな記法モードすべての編集モードで使えます。

[:contents]

これで目次が挿入されます。

他にもウクレレ記法AA(アスキーアート)記法など何のためにあるのかわからない?記法もあります。

ホビヲ (id:hobiwo) さんの調査によるとはてなブロガーでは「見たままモード」利用者が87.5%らしいので、この記事はあまり役に立たないかもしれませんが、「あれ、何だっけ?」というときに参考にしていただければ幸いです。
見たまま? はてな記法? Markdown記法? はてなブログの編集モード調査・2016夏 - ホビヲログ

見たままモードでもIDコールやhttp記法など一部のはてな記法は使えるのでぜひ使ってみて下さい。はてなブックマークコメントでも使えたはずです。

はてなブログの記事編集画面の使い方については以前記事にしているので、よろしければそちらもご参照ください。

関連記事
はてなブログ記事編集画面の使い方② 入力補助ツール
はてなブログ記事編集画面の使い方①

はてな記法参考元:はてな記法一覧 - はてなダイアリーのヘルプ