【3分でわかる！】快適に「はてな記法」でブログ記事を書く方法 リアルタイム表示・画像を直に貼る・ソースコードを書きやすくする方法

「はてな記法」でブログ記事を書く

htmlともマークダウン記法とも微妙に異なる「はてな記法」

ここではその「はてな記法」の便利な使い方をメモしておきます。

リアルタイムプレビューを使う

リアルタイムプレビューのボタン

リアルタイムプレビューの表示例

「はてな記法」はすっきりと書ける反面、「見たまま記法」と違って書いた内容がどの様に表示されるの分かりにくいというのはあります。

そこで「リアルタイムプレビュー」機能です。

このリアルタイムプレビューを使うことで、はてな記法でも実際に近い記事の表示を見ながら編集が可能となります。

使用方法は「記事編集」画面の左上に小さく表示されている「リアルタイムプレビューボタン」を押すだけと、非常に簡単です。

画像を直に貼る

はてなブログではクリップボードの中にある画像をわざわざファイルに保存しなくても、ctrl+Vで直で貼れます。

なのでこれを使うことで、スクリーンショットを貼るときなどには時間を大幅に節約できます。

また、画像を画面にそのままドラッグ＆ドロップすることで直接貼ることも可能です。

ドラッグ＆ドロップで画像を貼る

画像のサイズを整える

画像を貼ると、そのままのサイズで表示されてしまいます。

これを調整したい場合は、:plainの後ろに「:w400」「:h400」と記載すればOK
です。

記載例

元の記載
[f:id:karupoimou:20190430231502p:plain]

横幅を調整
[f:id:karupoimou:20190430231502p:plain:w400]

縦幅を調整
[f:id:karupoimou:20190430231502p:plain:h400]

縦×横幅を調整
[f:id:karupoimou:20190430231502p:plain:w400:h400]

www.milkmemo.com

ソースコードを書く

karupoimou.hatenablog.com

ソースコードを書く際に使う記号である

は単語登録しておくのが便利です。

特に「>|| ||<」を「ソース」として登録しておくと便利です。

補足：ソースコード表示をオシャレに彩る

www.foxism.jp

am1tanaka.hatenablog.com

susisu.hatenablog.com

CSSなどでカスタマイズしておくと見やすくなります。

当ブログのソースコード表示例

import requests
import yaml
payload = {'out': 'yaml'}
r = requests.get('https://api.syosetu.com/novelapi/api/', params=payload).text
print(r)