(新)タイトルいつ決めるのさ

何かの参考にして頂ければ幸いです。

はてなブログのエディタ画面の使い方と Markdown 記法

ブログ記述用にはてなブログのエディタ画面の使い方と Markdown 記法の一部をメモしておきます。
自分用です、ハイ。

■ 文字修飾

「太字」「斜体」「打ち消し」「アンダーライン」「文字サイズ変更」「文字色変更」については、はてなブログのエディタ上部にあるツールチップを使うのが簡単です。使い方は適用したい範囲をドラッグで選択してツールボタンを押すだけ。対応する htmlタグが自動的に挿入されます。

                           
ツールチップ 挿入される htmlタグ実行結果備考
<b> 太字 </b>太字<em> や <strong> タグも似た効果
<i> 斜体 </i>斜体
<s> 打消 </s>打消
<u> アンダーライン </u>アンダーライン
<span style="font-size: 80%"> フォントサイズ </span>フォントサイズ(80%)80%~200%の4段階。%表記を「px」表記にしてもOK。
<span style="color: #ff0000"> 文字色 </span>文字色(赤)色名やカラーコード直接指定でも可

色見本については以下のページが非常に便利。

■ 見出し

・「#」の個数で htmlタグの「<h1> 〇〇〇 </h1>」~「<h6> 〇〇〇 </h6>」に対応。
・ ブログエディタのプルダウンメニューを使う場合は「大見出し<h3>」~「小見出し<h5>」が使用可。
・「#」の後には半角スペースが必要。

# 見出し 1
## 見出し 2
### 見出し 3
#### 見出し 4
##### 見出し 5
###### 見出し 6

上の記述の表示例:

見出し 1

見出し 2

見出し 3

見出し 4

見出し 5
見出し 6

■ リスト表示

・ブログエディタ上部ツールチップの「 」からでも使用可能。
・「-」「+」「*」のいずれかの後に半角スペースを置いてから項目記述。
・階層を付ける場合は先頭に1段階に付き半角スペース4個挿入。

- 親項目 A
    - 子項目 α
        - 孫項目 1
        - 孫項目 2
    - 子項目 β
- 親項目 B

上の記述の表示例:

  • 親項目 A
    • 子項目 α
      • 孫項目 1
      • 孫項目 2
    • 子項目 β
  • 親項目 B

■ 番号付きリスト表示

・ブログエディタ上部ツールチップの「 」からでも使用可能。
・番号の後に「.(ピリオド)」と半角スペースを置いてから項目記述。
・階層化は可能だがやり過ぎると見にくそう。

1. リスト A
    1. 子リスト α
    2. 子リスト β
        1. 孫リスト X
        2. 孫リスト Y
2. リスト B

上の記述の表示例:

  1. リスト A
    1. 子リスト α
    2. 子リスト β
      1. 孫リスト X
      2. 孫リスト Y
  2. リスト B

■ 引用

・ブログエディタ上部ツールチップの「 」からでも使用可能。
・「>」に続いて半角スペースを置いてから引用する文章を記述。
・「>>」「>>>」でやろうと思えば2階層目、3階層目も可能。

> このように引用する文章が表示される
>> 2階層目

上の記述の表示例:

このように引用する文章が表示される

2階層目

■ リンク・ブログカードの挿入

・ブログエディタ上部ツールチップの「 」からリンクを張りたい URLをペーストすれば使用可能。
・直接エディタ上にURLをペーストしても同じ。


埋め込み: [https://chateau-vulpes.com/:embed:cite]
タイトル: [https://chateau-vulpes.com/:title]
URL  : [https://chateau-vulpes.com/]

上の記述の表示例:

埋め込み:カード風になります。 chateau-vulpes.com タイトル: (新)タイトルいつ決めるのさ
URL   : https://chateau-vulpes.com/

ちなみに埋め込み時に「:embed:cite」の「:cite」を消しておくと のようにブログカード下の URL が消えてちょっとすっきりします。

■ 画像挿入

 「はてなフォトライフ」にアップロードした画像を貼り付ける場合
   1. ブログエディタ右のツールバーから「」をクリックして貼り付けたい写真を選択。
   2. 「選択した写真を貼り付け」をクリックし必要に応じて alt属性などを記入して貼り付け。


このような形式のコードが貼られる。⇒ [f:id:ユーザー名:ファイル名j:plain:alt=サンプル画像]

サンプル画像
   3. サイズ調節、位置調節も可能。


幅150pxで左に文章を回り込みさせた場合 ⇒ [f:id:ユーザー名:ファイル名j:plain:alt=サンプル画像:w150,right]

サンプル画像 ここに文章が入る。


幅150pxで右に文章を回り込みさせた場合 ⇒ [f:id:ユーザー名:ファイル名j:plain:alt=サンプル画像:w150,left]

サンプル画像 ここに文章が入る。
回り込みを解除させたい所で「 <br clear="all"> 」を入れておくこと。

但し複雑なこと(URL埋め込みなど)をさせたい場合は htmlタグの方が分かりやすい。
自分で貼り付けた画像のURLを取得したい時は画像右クリックから「画像のURLをコピー」が楽。

■ 水平線

・改行してから「---(上の場合)」「- - -(下の場合) 」を入力して更に改行。



■ 脚注

・付けた脚注には自動的に番号が振られ、内容は全てブログ末尾にまとめて表示される。
・ブログエディタ上部ツールチップの「 」を使って以下のように記述。


脚注を付けたい文章 ((ここに脚注を書きます))

上の記述の表示例:

脚注を付けたい文章 *1

■ コメントアウト

・下のサンプルの()内にコメントアウトしておきたい文章を記述。
・途中に改行も入れたい場合は htmlタグ(<!-- 〇〇〇 -->)の方が便利かも。


[](コメントアウトしたい内容)


■ URL を自動リンクにさせない方法

Markdown で http や https から始まるアドレスやメールアドレスなどを記述すると自動リンクになっ
 てしまいます。
・これを防ぐには、対象の文字列をバック・クォート(`)で囲みます。
 例えば、https://chateau-vulpes.com/ と書くと自動リンクになってしまうものを、


`https://chateau-vulpes.com/`

と書くことで、https://chateau-vulpes.com/ のように自動リンクさせずに記述することができるようになります。


尚、表を作る時は素直に html を使う事にしました。



*1:ここに脚注を書きます