古き良き時代から来ました。

はてなブログを試す、ためにアレコレ書いたり書かなかったりしています。

はてな記法でどこまで書けるか、などのテストエントリー

はてな記法 - 妄想科學倶楽部を拝見して、自分のブログでも試しておくと、後からスタイルシート書く時や記事書く時参考になるな、と思ったので書いてみた記事です。芹沢さん勝手に使ってすいません……。
でもあんまり使わない記法(表組みとかウクレレとか)はパスしようかな。

公開に当たって

例文は適当だったり自分の書いたネタ適当に引っ張ってきたりしてますが他意はありません。たぶん。わはは。

編集の前に覚書

編集画面にPreviewタブがあるのを忘れない。いきなり公開しないようにするんだぞ俺!(この前動画のテストした時公開しちゃってた)
テキストを「>||」と「||<」だけの行で囲むとはてな記法を無視した表示が出来るので(スーパーpre記法)、この手のテストエントリーや何ぞコードとか書く時に有用。

小見出し

行頭でアスタリスク2つ書いて、その後文字書くとその文字で小見出しになる。

リスト

行頭を「-」か「+」で始めると、記号がない行までをリスト筋の要素でマークアップ。混在しても良きに計らってくれる……はず。

+Mazda2
+Mazda3
+Mazda6

-RX-7
-RX-8
-RX-78

+アイドリング!!!
++酒井瞳
++橘ゆりか
++遠藤舞
+ChocoLe
--玉川来夢
--高橋胡桃
--橋本楓
+その他
++奥仲麻琴
++今野鮎莉
++レナ
  1. Mazda2
  2. Mazda3
  3. Mazda6
  1. アイドリング!!!
    1. 酒井瞳
    2. 橘ゆりか
    3. 遠藤舞
  2. ChocoLe
  3. その他
    1. 奥仲麻琴
    2. 今野鮎莉
    3. レナ

……アレ?マークアップがおかしいな、「その他」は3と番号振られるはずなのに。直るかな。→直ってますね。すばらしい。

定義リスト

行頭を「:」で始めて、「:項目の名前:内容」の順に書くと定義リスト要素に。他の記法を併用したかったらコレは使えない(DL 要素をガッツで手作業すれば DT / DD 要素内で使える)。

:はてな記法とは:覚えると手放せなくなる悪魔の記法。
はてな記法とは
覚えると手放せなくなる悪魔の記法。

自動リンクと、そのキャンセル

一重角カッコで URL 等をくくるとリンクアンカーになる。タイトルを書きたかったらURLの後に「:title=なんちょれ」と続ける。空の一重角カッコのペアで文字列を囲む事で自動リンクを指定した範囲のみ止める。

-[http://www.mazda.co.jp/]
-[http://ja.wikipedia.org/wiki/MAZDA:title=マツダ - Wikipedia]
-[][http://dic.nicovideo.jp/a/%E3%83%9E%E3%83%84%E3%83%80:title][]

引用

blockquote要素をガッツで手作業する場合は行頭を「>」で始めて、改行が来るとp要素で自動マークアップするのにキャンセルかけとくこと(んでblockquote閉じた後に「<」を付けてまた元に戻す。
はてな任せで楽する時は行頭を「>引用元URL:title>」または「>引用元URL:タイトル(タイトルを任意の文字列にしたい時)>」で始めて、引用文ベタで書いて、「<<」で閉じる。

>http://shima-ken.tumblr.com/post/9342320491/wallpaper-for-windows7-desktop-jpn:tumblrでこっそり書いた壁紙ネタ>
tumblrで「コレ良いな」という画像があるとダウンロードしてちょっといじって壁紙にする、ということをたまにやっているのだけど。
デスクトップのサイズに対して画像のサイズが足りないな……という時に、<A href="http://shima-ken.tumblr.com/post/6248247786">以前試してみた</A>やり方で、使ってるOSやブラウザのキーボードショートカット一覧を画像化して、空きスペースに追加するということをちょこちょこやるようになった。結構気に入っている。
<<

tumblrで「コレ良いな」という画像があるとダウンロードしてちょっといじって壁紙にする、ということをたまにやっているのだけど。
デスクトップのサイズに対して画像のサイズが足りないな……という時に、以前試してみたやり方で、使ってるOSやブラウザのキーボードショートカット一覧を画像化して、空きスペースに追加するということをちょこちょこやるようになった。結構気に入っている。

http://shima-ken.tumblr.com/post/9342320491/wallpaper-for-windows7-desktop-jpn:tumblrでこっそり書いた壁紙ネタ
><blockquote cite="http://shima-ken.tumblr.com/post/6248247786" title="Emotional Factors">
<p>「キーボードショートカットを一覧表にした画像をデスクトップに敷く」というネタ見る度に「いっぺん作ってみたいけどどうやったら楽できるかな」と考えてた。</p>
<p>今日、ふと「あれ?Win7用のショートカット一覧て表があるなら、こうすりゃ楽じゃね?」と思いついた方法があったので試作してみた。画像はその結果で、その時の作業手順は下記。効率的かどうかは判んない。</p>
+<A href="http://www.microsoft.com/japan/enable/products/keyboard/windows7.mspx">Windows 7 のショートカット キー</A>のソースをダウンロード
+表示をスッキリさせる為、HTMLをテキストエディタで修正(「Windows ロゴ キー」を「Win キー」に置換、等)
+ブラウザで修正したHTMLを表示させて、そのスナップショットを撮る
+デスクトップのサイズに合わせてトリミングとリサイズ
+流石に文字だけだと寂しいので、ロゴだの綺麗なお姉さんだのいうちょっとした素材(?)と組み合わせる
+ストレイト ドキドキする。</p>
</blockquote><

「キーボードショートカットを一覧表にした画像をデスクトップに敷く」というネタ見る度に「いっぺん作ってみたいけどどうやったら楽できるかな」と考えてた。

今日、ふと「あれ?Win7用のショートカット一覧て表があるなら、こうすりゃ楽じゃね?」と思いついた方法があったので試作してみた。画像はその結果で、その時の作業手順は下記。効率的かどうかは判んない。

  1. Windows 7 のショートカット キーのソースをダウンロード
  2. 表示をスッキリさせる為、HTMLをテキストエディタで修正(「Windows ロゴ キー」を「Win キー」に置換、等)
  3. ブラウザで修正したHTMLを表示させて、そのスナップショットを撮る
  4. デスクトップのサイズに合わせてトリミングとリサイズ
  5. 流石に文字だけだと寂しいので、ロゴだの綺麗なお姉さんだのいうちょっとした素材(?)と組み合わせる
  6. ストレイト ドキドキする。

どっちも期待通りに動いてないみたい。blockquote要素まるごとガッツで手作業は出来なくなったんかな。秀丸にマクロ仕込んでセミオートでマークアップ出来るようにしてあるのに!(知らんがな)

こんなもんかなあ

KLaxonでよく使ってた記法はこんなモンだったかな。あと Amazon の商品へのリンクとかあるか。おいおい試行していこうー。
しかしリスト要素と引用記法が期待通りのマークアップにならないのは使いにくいなあ。直りますように!

≪前のページ