IT女子ちーさんのwebろぐ

面白いwebサービス・アプリの紹介を中心に、ユーザー目線でITな情報を発信!エンジニアではないですがweb広告メディア営業が本業のインターネット大好き女子。広く浅く情報収集も好きなので日々の学びもシェアします。主に週末に更新です。

はてなブログ編集をショートカットする裏技3選【便利なショートカットキー10個と無料ツール紹介】

f:id:i-chihiro93115:20190817070236p:plain

ショートカットキー使い倒してますか?こんにちは!IT女子のちーさんです。

今日は、私がはてなブログを4年間使う中で編み出した、はてなブログを効率的に更新・編集する方法を伝授します。

 

覚えておこう!ショートカットキー

はてなブログの編集は、ショートカットキーを使うと便利です。

いちいちマウスでやるのではなく、ショートカットキーでやったほうが断然楽です。

 

見出しを作る

Mac:Command+1~6
Windows:Ctrl+1~6

意外と知られてないショートカットキーかも。他のエディタでは機能しないのですが、はてブでは使えるショートカットキーです。

 

太字にする

Mac:Command+B
Windows:Ctrl+B

登場頻度No.1のよく使うショートカットキーなので必ず覚えましょう!大抵のエディタはこれで太字になります。

 

切り取り

Mac:Command+X
Windows:Ctrl+X

コピペするときに、コピー先の文言は決して貼り付け先に移動したいというときは、切り取りが便利です。

 

書式を無視して貼り付け

Mac:Command+Shift+V
Windows:Ctrl+Shift+V

他のエディタなどで書いた文章をはてブのエディタに貼り付けたいときは、書式を無視して貼り付けましょう。そうすると、余計な装飾がなく貼り付けることができます。私は、iOS搭載のメモにいつも下書きを書いてからはてブに貼り付けてます。

 

全て選択

Mac:Command+A
Windows:Ctrl+A

何らかの事情で一度書いた記事を全てコピーしたいときなどに使いましょう。全て消したいというときにも有効です。

 

元に戻す

Mac:Command+Z
Windows:Ctrl+Z

「あ、間違えちゃった!」というときにあなたを救ってくれるショートカットキーです。このコマンドを押せば、きれいに元通りになります。

 

改行タグ<br>を追加

Mac:Command+Shift+Enter
Windows:Ctrl+Shift+Enter

はてなブログで普通にエンターを押すと、<p>タグが付与されて段落になってしまいます。<p>タグ内での改行をしたい場合は、このショートカットキーで対応できます。

 

進む

Mac:Command+Y
Windows:Ctrl+Y

これは主に、元に戻すコマンドを使った後に発動します。「あ、やっぱり元に戻さなくてよかった!」というときに、 押すと元に戻す前の状態に戻ります。

 

ブラウザ内タブ移動

Mac:Command+Alt+左右キー
Windows:Ctrl+Fun+上下キー

はてなブログ内のコマンドではありませんが、ブラウザで他のタブを見ながらブログを書くことは多いですよね? そんなときに使えるのがコレ。このコマンドを操作することで、見たいタブとはてなブログのエディタタブを自由に行き来できます。

 

ウィンドウの移動

Mac:Control+左右キー
Windows:Alt+Tab

他の作業ウィンドウに移動できるショートカットキーです。Macだと3本指でやるアレですね。ネットサーフィンでは3本指でもいいかもですが、やはりブログ執筆はキーボード操作がメインなので、ウィンドウの移動もショートカットキーで行った方が楽です。

 

ブラウザで使えるショートカットキーはこちらの記事でも紹介しています。

 

こちらの記事もオススメ

i-chihiro93115.hatenablog.com

 

蛍光ペン装飾をショートカットする裏技

私は、ブログの装飾で蛍光ペンを使っていますが、これも実はある裏技を使ってショートカットキーでやっています。

蛍光ペンの装飾は、デフォルトでは搭載されておらず、はてなブログのCSSをいじる必要があります。

はてなブログのショートカットキーであまり使わない「斜体」コマンドを利用する方法です。

デフォルトの設定で斜体にするには、文字を選択して「Command(Ctrl)+I」を押す斜体になります。

その際に、HTMLでは選んだ文字を囲うように<em></em>が付与されます。デフォルトのCSSでは「<em>で囲うと斜体になる」という設定になっているのですが、これを「<em>で囲うと蛍光ペンになる」に変えれば良いのです。

具体的には、はてなブログのCSS設定で、以下の文言を追記します。

/* 蛍光ペン */
.entry-content em{
font-weight:bold;
text-decoration: none;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(102,255,204,1) 60%) !important;
}

f:id:i-chihiro93115:20190816073440p:plain

はてなブログCSS設定画面

こうすると、エディタ上で「Command(Ctrl)+I」をすると、蛍光ペンになります

もしこれを設定しないと、わざわざHTML編集で蛍光ペンにするための記述をする必要が出てきます。(めんどくさい)

 

吹き出しをショートカットする裏技

最後に簡単に吹き出しを作る方法です。

吹き出しのCSS設定については以下の記事を参考にしてください。

 

mamazakki.hatenablog.com

 

吹き出しは記事のHTMLを少しいじらないと作れないようになっています。だた、挿入するHTMLの記述は毎回共通しているので、これを簡単に呼び出せればOKです。

そこで活躍するのが、Clipy(Mac)とClibor(Windows)です!

 

clipy.softonic.jp

www.vector.co.jp

 

Clipy(Clibor)は、コピー履歴を保存するのですが、定型文の登録もできます。なので、コメントを呼び出すための文言を登録しておいて、<p>タグの中に入れればOK!

f:id:i-chihiro93115:20190816071827p:plain

Cliborを使った吹き出しコマンドの呼び出し

吹き出しHTMLはこうなってます。

<p class="r-fuki chihiro">最後に簡単に吹き出しを作る方法です。</p>

Cliborには、「 class="r-fuki chihiro"」を登録しておき、吹き出しにしたい<p>タグの"p"の後ろに入れればOKということです。

 

これらの裏技を使って、はてなブログ編集を高速化してみてくださいね!

以上、IT女子のちーさんでした!