はてはカスタマイズ

【はてなブログ】気軽に使える、「Markdown」チートシート一覧

当サイトにお越しいただきありがとうございます。

ブログ運営者のポチ(@sunrise_033)です。

この記事の信用性

2019年4月から「コスパ・お得」をテーマに発信している当サイト「さんログ」を運営、月間平均36000PVの雑記ブロガーです。
ポチ
ポチ
サクサクした記事作成が魅力の「Markdownモード」。

ブログ作成に慣れてくると「見たままモード」と同様に使うことも多くなってくることもあると思います。

今回は、「Markdownモード」で気軽に使えるチートシートをいくつかご紹介したいと思います。

個人的に使っているものがメインなので、足りない情報もあると思いますが、多めにみてください。笑

「Markdownモード」ってなんぞや?という人はこちらの記事から見てみてくださいね。

はてなブログ「Markdownモード」はどうやって使うの?

スポンサーリンク



Markdownモード チートシート① 見出し

チートシート↓

「##」→h2(タイトル)
「###」→h2
「####」→h3

見出しは「#」記号で表記します。

はてなブログの場合は、エディタの左上に「見出し」項目があるのでそこから見出しをつけることができます。

Markdownモード チートシート② 引用

記事作成には、欠かせない表示である「引用」です。

テスト

↓チートシート>テスト

「>」の記号を文章の前に入れるだけで「引用」にすることができます。

Markdownモード チートシート③ コードブロック

htmlなどの文章を囲いたい時に使いたい時には、コードブロックです。

→文章

↓チートシート

“`html
→文章
“`

上記のようなボックス枠を作ることができます。

HTMLコードを貼り付ける時に使っています。

スマートな見た目にすることができるので良いです。

Markdownモード チートシート④ ブロック

文字や文章自体に枠をつけたい時はこちらです。

文章

↓チートシート

`文章`

文章に枠をつけます。

説明文で文字を強調したい時に便利です。

Markdownモード チートシート⑤ 表(テーブルシート)

レビュー記事などでよく使う「表」です。

上のこれが表になります。

↓チートシート

|             |              |               |
|:-------|--------:|:--------|
|             |              |               |
|             |              |               |

表は、Markdown記法だと、上手くいかないので、Evernoteのテーブル機能を貼り付けて使っています。

(難しいことは分からんです。笑)

Markdownモード チートシート⑥ 画像の横幅調整

↓チートシート

横幅の調整
[○○:plain:w300]

「w」はwidthで横幅を指定する時に使用します。

「300」は幅のことなので、ここを調整します。

例を出します。

画像は、「さんログ」アイコンです。

f:id:sanrisesansan:20201209185731p:plain

f:id:sanrisesansan:20201209185731p:plain:w300

こんな感じになります。

スマホだと若干しか変わらないかもですが、PCだと全体的にが小さくなってますよね。

用途としてはオリジナル画像の大きさを調整したりします。

「Markdownモード」では、画像をクリックで調整できないんですよね。

(「見たままモード」ではできます。)

横幅が大きすぎると、PC表示などでバランスが悪くなるので、調整して見やすくします。

Markdownモード チートシート⑦ 画像の縦幅調整

続いては、縦幅の調整です。

↓チートシート

[○○:plain:h200]

「h」はheightで高さを指定する時に使用します。

「300」は幅のことなので、ここを調整します。

f:id:sanrisesansan:20201209185731p:plain

f:id:sanrisesansan:20201209185731p:plain:h200

上記の調整の縦バージョン。

ポチ
ポチ
なんか、PCだとあまり変わらないかもですね。

スマホだと、イラストが細長くなってます。笑

まとめ

今回は個人的によく使うMarkdownモード」簡単に使えるスタイルシートをご紹介しました。

慣れれば、サクサク作業が進むので、ぜひ活用してみてくださいね。

最後まで読んでいただき、ありがとうございます。

こちらの記事もおすすめ↓

【はてなブログ】簡単解説!文章の余白・文字間を調整する方法

【ブログ初心者】はてなブログで表をスクロールさせる方法

サクサク集中できるエディタ、「Bearアプリ」機能と活用方法

 

ポチ
ポチ
この記事が良いと思ったら、ポチっ!してくれると嬉しいです!

↓「ブログ村ランキング」参加中!

PVアクセスランキング にほんブログ村

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です