Markdownモードに変えました これは早い!!【はてなブログ】

ノートパソコンの写真

はてなブログで記事を書いていらっしゃる皆さん、編集モードは何をお使いですか?

私はブログを始めて7ヵ月が経過し、今年の1月から編集モードを見たままモードから、Markdown(マークダウン) モードに変えました。

ブログ開設当初は何もわからないので、初期設定の「見たままモード」で書いていました。

HTMLはタグを少し覚えている程度です。

それでもHTMLモードで見出しをh3→h2に変えたり、グーグルアドセンスのコードを入れたり、テキストリンクの時は別のタブが開くようにtarget="_blank"を入れたりと、面倒くさいとは思いつつもやっておりました。

「見たままモード」って誤作動しませんか?私だけ??

見出しを付けたいはずが、違うところが太字になったり、プレビューを表示するのにすごく時間がかかったり・・・

すみません、見たままモードがダメだと言っているのではありません(汗)

私、記事を書くのがすごく遅いんですよ(涙)Markdown モードに変えてみたのは、ここが大きいです。

以前から、Markdown モードの方が動作が早いというのはブログの先輩方の記事で見た事があります。

せめて記事の構想は短縮できなくても、編集だけは早くしたいと思ってチャレンジしました。

はてな記法モードと迷いましたが、長くブログを継続できて別のブログを開設する時、はてなブログ以外にもチャレンジするかもしれないと思ったら、マークダウン記法を覚えておいて損はないかな?と感じてMarkdown モードを選びました。

やってみたら、思っていた以上に便利です。

今日は見たままモード→Markdown モードに変えた際に、便利だと実感した事や、困った事を書きます。

Markdown モードに興味がある方のお役に立てれば嬉しいです。

Markdown モードに変えてメリットに思ったこと

マークダウンって何なのか?すみません、説明できず、こちらの記事にリンクをはらせていただきます。

ホントにごめんなさい、マークダウンを理解していなくても、記号さえ覚えれば打てます(大汗)

Markdown モードに変えてもツールバーはほとんど使える

記号を覚えるといっても、見たままモードと同じツールバーもサイドバーもそのまま使えるんです。

はてなブログのMarkdown モードでもツールバーが使える

唯一これだけは覚えた方がよいと思うものは、見出しだけです。

#を付けることで簡単に見出しになります。

ここはいつもお世話になっているはるなぴさんが、マークダウン記法で書く方法を記事にされているのでリンクを貼らせてもらいました。
はるなぴさんのマークダウン記法の記事はこちら🔻

私もまだまだ見出し以外はツールバーで文字の装飾をする方が多いです。

リアルタイムプレビュー機能が嬉しすぎる

Markdown モードで最大におすすめしたいのが、リアルタイムプレビュー機能です。

右端にボックスの中に目のマークが入っているアイコンをクリックすると表示されます。

はてなブログ Markdown モードのリアルタイムプレビュー機能

画面が左右に分かれ、左側が本文、右側がプレビュー画面になっているのです。

はてなブログ Markdown モードのリアルタイムプレビュー機能

全部プレビューされるわけではありませんが、画像や見出し、アフィリエイト広告などは、右側で確認しながら作業できるのです。

タイトルの上にあるプレビュー機能は最後に数回使うだけになりました。

アドセンスコードも直接本文に貼れる

Markdown モードでは本文に直接HTMLのコードが貼れます。

だから、アドセンスのコードも直接貼れるのです!
私は自動広告も利用していますが、手動でもアドセンス広告を貼っているので、この機能を初めて知った時は便利すぎて震えました(笑)

表(テーブル)が簡単につくれる

記事を書く際に「これ表で書けたら、もうちょっと伝わりやすいかな?」という時ありませんか?

Markdown モードだと、表も本当に簡単に作れるんですよ!

ただ装飾があまりうまくできず、私の場合は囲みの線だけしか色を付けられませんでした(苦笑)

見たままモードでHTMLの表を作った事がありますが、泣きそうになりました・・・

表も簡単に作れます!
☆☆◆◆

↑この表も20秒です。

Markdown モードに変えて困った事(すべて解決済み)

ここからは逆にMarkdown モードに変えて困った事です。すでに解決済みですが、はじめは悩みました(苦笑)

改行できない

「マークダウン記法での改行は文末に半角スペースを2つ入る」とマークダウン記法について書かれている記事で見ました。

はじめにここでつまずきました。いくら半角スペースを入れても、スペースが開くだけで改行されません(汗)え、私だけ???

でもHTMLのコードは使えるので、改行タグの< br > を改行したい場所で入れていました。

やっと気づいたんですよ、昨日!!

私からしたら半角スペース2つではなく、半角スペース2つ+Enter

だから文末に半角スペース2つとなるのね!!改行したいところに半角スペース2つ入れてました・・・

それでは改行できるはずないね・・・。詳しい方には笑われてしまいますが、こっちは真剣でした(苦笑)

そこでまた思うのですが、日本語の全角で打っている中で半角スペース2つ+Enterは押しづらいですよね・・・。そこで単語登録を思いだしました。

平仮名の「お」(パソコンのキーでいうと「O」)を入れると半角スペース2つに変換されるように設定したら、スムーズに改行できるようになりました。

「お」にしたのは、1つのキーで変換できるように「あいうえお(A・I・U・E・Oのキー)」から選ぶとしたら、右手の「い(Iキー)」か「お(Oキー)」が一番押しやすいと思って「お」を選びました。

改行を単語登録

<br>の利用は必要最低限

HTMLのコードが使えるので、しばらく<br>で改行していましたが、調べているうちに<br>の連打はSEO的に不利だという事がわかりました。

一応改行と段落を使い分けているので、さすがに連打で使う事はありませんが、<br>で改行するなら必要最小限にした方がよさそうです。

ツールバーのリンクボタンでテキストリンクを設定するとブログ名も一緒に表示される

ツールバーのリンクボタンから、ブログ内の記事のリンクを作るとき、全部にブログ名が表示されてしまうのです。

例えばこんな感じ

子どもの前歯(永久歯)が生えてこない<前編> 前歯なしで過ごした娘の半年間 – 過ぎし子育ての日々はほぼ笑い話

これは当ブログで子どもの前歯が半年も生えてこなくて困った時の記事ですが、このようにブログ名まで表示されます。

見たままモードの時は、編集画面でブログ名を消せたのですが、Markdown モードだと、
[ 記事のURL:title ]
といった記述になっているので、ブログ名を削除できませんでした。

でも手動で、[ 記事のURL:title=記事タイトル ]のように、:titleの後ろに=記事のタイトルを入れたら希望のタイトルが表示されました。

[https://www.hobowarai.com/entry/20181209-ikuji-maeba1:title=子どもの前歯(永久歯)が生えてこない<前編> 前歯なしで過ごした娘の半年間]

 ↓(タイトルを手動で追加)

子どもの前歯(永久歯)が生えてこない<前編> 前歯なしで過ごした娘の半年間

リンクを別タブで開く設定ができずに困った

ツールバーからでもサイドバーの過去記事からでもブログカードのリンクは見たままモードと同じように使えます。

問題は、ツールバーのリンクボタンでテキストを選んだ時に、別タブに開かせる方法がわかりませんでした。

強制的にHTMLのコードで別タブを開く方法にはできるのですが、面倒くさいです(苦笑)

強制的にHTMLのコードで別タブを開くとしたら
<a href=”記事のURL” target=”_blank”>記事のタイトル</a>となります。

どうしようかと思っていたら、外部リンクは別タブで内部リンクは同じタブでリンク先を開くコードを紹介している記事を発見!!!なんてすばらしい✨

外部リンクは別タブで内部リンクは同じタブでリンク先を開くコードの記事はこちら🔻

見たままモードの時は、いつもHTMLから" target="_blank"とコピペして入れていました。

今は内部リンクで強制的に別タブで開いてほしい時だけ、" target="_blank"を使っています。

この方法を調べている最中に、見たままモードでもはてなブログのヘッダー内に一文コードを入れるだけで別タブに開く設定ができると知りました。早く知りたかった(涙)

画像のタイトルがつけられなくて困った

今まで見たままモードで画像を挿入する時は、alt属性(画像の代替えテキスト)と、マウスポインタを画像の上に合わせた時に希望の文字が出るように画像のタイトルを入れていました。

(見たままモードのHTMLで:alt:titleの画像URLを消して、代替えテキストと、画像のタイトルを入れていました。)

スマホだと画像の長押しで出てくるダイヤログに表示される画像のタイトルの事です。

Markdown モードにしても、サイドバーの画像挿入ボタンが使えます。ここでalt属性までは入れる事ができます。

画像挿入ボタンを使って画像を入れた場合はこんな感じにコードが入ります。
[f:id:unohanna:20190124114542j:plain]

これだと画像にマウスポインタを乗せた時のタイトルが画像のURLだけになります。
※下の画像にマウスポインタを乗せると画像URLがでます。

画像挿入のサンプル画像

サイドバーの画像挿入ボタンでalt属性までを入れて画像を挿入すると、マウスポインタを乗せた時にテキストは何も表示されなくなります。

:title=画像タイトル]の前に入れたら、画像のタイトルが出るようになりました。

[f:id:unohanna:20190124114542j:plain:alt=悪態をつくオカメインコ:title=悪態をつくオカメインコ]

※下の画像にマウスポインタを乗せると画像のタイトルがでます。

悪態をつくオカメインコ

最後に

困ったといっても改行ができないこと以外は、私が気になっただけのところです。

Markdown モードに変えてもツールバーやサイドバーは使えるし、本文を打ちながらリアルタイムプレビュー機能で即座に確認でき、HTMLのコードも本文に直接貼れて、表も簡単に作れる!

Markdownモードが気になっている方は、変えて損はないと思います!

それと、過去の見たままモードで作成した記事は、編集する際も見たままモードです。

ほんの少しマークダウンの記号を覚えるだけで、マークダウンの知識0の私でも快適に使えています。

1月からMarkdown モードに変えましたが、すでに見たままモードでの編集に戸惑うくらいなので、Markdown モードおすすめです(笑)

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

見たままモードの記事をMarkdownモードに変更する事はできませんが、新規で作成してURLを差し替える事は出来ました。

見たままモードの記事をMarkdownモードに差し替えた記事はこちら🔻

WordPress初心者だからこそ
高機能レシポンシブ有料テーマ
THE THOR(ザ・トール)

\公式サイトで詳細をみる/

THE・THOR│公式サイト