\ 最大ポイント10倍還元中! /

【ブログ時短テク】よく使うHTMLをショートカットで呼び出せる!【MacアプリClipy】

ブログを見やすくするためのカスタマイズを調べていると、

管理人みゆき

このカスタマイズ、おしゃれ!
でも、HTMLを打ち込むタイプか・・・。

HTMLを打ち込むことに臆する場面はないでしょうか。

(私がそうでした。)

おしゃれなテーブル、吹き出し、見出し、ブロックを見ては自分のブログでも使いたい!と思うのですが、

HTMLを打ち込むタイプだと、途端に管理が大変そうで導入する気がなくなるんですよね・・・。

管理人みゆき

WordPressのブロックみたいに
1クリックで挿入出来たらいいのに・・・

と思っていたら、その方法が見つかりました。

この記事は、Wordpress用テンプレートCocoonと
Mac用アプリClipyを用いた方法の解説になります。

スポンサーリンク
目次

Macアプリ【Clipy】で保存したHTMLを簡単に貼り付け

Macを使う方限定ではありますが、アプリ「Clipy」を使えば
よく使う/保存しておいたメモ簡単に呼び出して貼り付けることができます。

使用例

「カスタムHTML」ブロックを挿入し、登録したショートカットを押したところです。

「Clippy」に登録しておいたHTMLコードを呼び出せます。

ショートカットキーでClipyを呼び出し、HTMLを挿入する
あわせて読みたい
Clipy Clipboard extension app for macOS

使い方

では、ClippyでHTMLを呼び出せるようにする方法を解説します。

Clipyのダウンロード、インストール

ClipyはApp storeにはありません。こちらのサイトからダウンロードします。

あわせて読みたい
Clipy Clipboard extension app for macOS

ダウンロード後、アプリフォルダにドラッグ&ドロップしてインストールします。

インストールが完了すると、右上のメニューバーにClipyアイコンが追加されます。

MacメニューバーにClipyアイコンが追加された

よく使うHTMLの登録

次に、Clipyによく使うHTMLを登録し、すぐに呼び出せるようにします。

Clipyアイコンをクリック→スニペット編集を選択

Clipyアイコンをクリック、スニペットを編集を選択します。

スニペット編集画面が表示されます。

スニペット編集画面

フォルダ追加→スニペット追加でよく使うHTMLを追加する

スニペット編集画面で「フォルダ追加」をクリックし、フォルダを追加します。

作成したフォルダ(例ではuntitled folder)をクリックした状態で「スニペット追加」をクリックすると、スニペットが追加されます。

右の「スニペットの内容を記入してください」欄に保存したいHTMLコードを入力します。

参考

私も使用している「Cocoonでランキング表示に使える王冠と星を表示させる方法」タグを参考にさせていただきました!

デジやま
Cocoonでランキング表示に使える王冠と星を表示させる方法 ども!あき山です。Wordpressテーマ「Cocoon(コクーン)」、とても高機能なテーマなので私も利用させてもらってます。更新頻度も高く、作者の「わいひら」さんが積極的に...

HTMLタグを記入したところです。

自分で管理しやすいように、「Untitled snippet」を「ランキング1位」としておきました。

これで、よく使うHTMLコードを「Clipy」に登録できました。

ブログに貼り付け

「Clipy」に登録したHTMLコードを呼び出します。

呼び出す方法は、

  • メニューバーのClipyアイコンからクリックで貼り付け
  • ショートカットで貼り付け

の2通りあります。

私のオススメは「ショートカットで貼り付け」ですが、両方紹介しますね。

メニューバーのClipyアイコンからクリックで貼り付けする方法

WordPressの記事投稿画面で、「カスタムHTML」ブロックを選択します。

カスタムHTMLブロック

「カスタムHTML」ブロックの「HTMLを入力」欄にカーソルを合わせた状態で、「Clipy」アイコンをクリックし、先ほど追加したHTMLコードを選びます。

クリックすると、保存しておいたHTMLコードが入力されます。

clipyアイコンから貼り付けする方法は以上です。

ショートカットで貼り付けする方法

ショートカットでHTMLコードを貼り付けする方法です。

管理人みゆき

慣れればこちらの方が早いので、私はもっぱらこちらの方法を使っています。

まず、カスタムHTMLブロックを挿入します。(ここまではアイコンから貼り付ける方法と同じです。

ショートカットキーを押すと、登録したHTMLコードが呼び出されます。

貼り付けできた

貼り付け後のイメージです。

設定しておいたHTMLのコード通り、プレビューが表示されました!

まとめ

読みやすいブログを書く際に欠かせないHTMLコードですが、コードの管理が大変で導入を躊躇していた方も多いのではないでしょうか。

Macのアプリケーション限定ではありますが、「Clipy」を使えば、よく使うHTMLコードをショートカットキーですぐに呼び出せます。

管理人みゆき

わたしも、Clipyのおかげでブログを書くのが楽しくなりました。

ぜひ、導入してみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次