ブログを見やすくするためのカスタマイズを調べていると、
このカスタマイズ、おしゃれ！
でも、HTMLを打ち込むタイプか・・・。
とHTMLを打ち込むことに臆する場面はないでしょうか。
（私がそうでした。）
おしゃれなテーブル、吹き出し、見出し、ブロックを見ては自分のブログでも使いたい！と思うのですが、
HTMLを打ち込むタイプだと、途端に管理が大変そうで導入する気がなくなるんですよね・・・。
WordPressのブロックみたいに
１クリック（それか、簡単にコピペできる仕組みがあれば導入するのに）
と思っていたら、その方法が見つかりました。
Macアプリ【Clipy】で保存したHTMLを簡単に貼り付け
Macを使う方限定ではありますが、アプリ「Clipy」を使えば
よく使う/保存しておいたメモを簡単に呼び出して貼り付けることができます。
ショートカットキーを押した画面がこちら。
1タップで、登録しておいたHTMLが呼び出せます！
使い方
Clipyのダウンロード、インストール
ClipyはApp storeにはありません。こちらのサイトからダウンロードします。
ダウンロード後、アプリフォルダにドラッグ＆ドロップしてインストールします。
インストールが完了すると、右上のメニューバーにClipyアイコンが追加されます。
よく使うHTMLの登録
次に、Clipyによく使うHTMLを登録し、すぐに呼び出せるようにします。
Clipyアイコンをクリック→スニペット編集を選択
Clipyアイコンをクリックすると、下記項目が表示されます。
ここで、スニペットを編集を選択します。
スニペット編集画面が表示されます。
フォルダ追加→スニペット追加でよく使うHTMLを追加する
スニペット編集画面で「フォルダ追加」をクリックすると、フォルダが追加されます。
作成したフォルダ（例ではuntitled folder）をクリックした状態で「スニペット追加」をクリックすると、スニペットが追加されます。
右の「スニペットの内容を記入してください」欄に保存したいHTMLコードを入力します。
この記事では、私も使用している「Cocoonでランキング表示に使える王冠と星を表示させる方法」タグを参考にさせていただきました！
HTMLタグを記入したところです。
自分で管理しやすいように、「Untitled snippet」を「ランキング１位」としておきました。
これで、よく使うHTMLコードを「Clipy」に登録できました。
ブログに貼り付け
「Clipy」に登録したHTMLコードを呼び出します。
呼び出す方法は、
- メニューバーのClipyアイコンからクリックで貼り付け
- ショートカットで貼り付け
の２通りあります。
私のオススメは「ショートカットで貼り付け」ですが、両方紹介しますね。
メニューバーのClipyアイコンからクリックで貼り付けする方法
WordPressの記事投稿画面で、「カスタムHTML」ブロックを選択します。
「カスタムHTML」ブロックの「HTMLを入力」欄にカーソルを合わせた状態で、「Clipy」アイコンをクリックし、先ほど追加したHTMLコードを選びます。
クリックすると、保存しておいてHTMLコードが入力されます。
clipyアイコンから貼り付けする方法は以上です。
ショートカットで貼り付けする方法
ショートカットでHTMLコードを貼り付けする方法です。
慣れればこちらの方が早いので、私はもっぱらこちらの方法を使っています。
まず、カスタムHTMLブロックを挿入します。（ここまではアイコンから貼り付ける方法と同じです。
ショートカットキーを押すと、登録したHTMLコードが呼び出されます。
ショートカットキーは、「環境設定」→「ショートカット」から確認できます。
×ボタンを押した後、表示されている任意のキーの組み合わせでキーボードを押すとショートカットを自分で設定できます。
私は左手だけで操作したかったので、
スニペットのショートカットキーは「command+B」と設定しました。
貼り付けできた
貼り付け後のイメージです。
設定しておいたHTMLのコード通り、プレビューが表示されました！
まとめ
読みやすいブログを書く際に欠かせないHTMLコードですが、コードの管理が大変で導入を躊躇していた方も多いのではないでしょうか。
Macのアプリケーション限定ではありますが、「Clipy」を使えば、よく使うHTMLコードをショートカットキーですぐに呼び出せます。
管理人も、Clipyのおかげでブログを書くのが楽しくなりました。
ぜひ、導入してみてください。
ボヤキ
ここからは、管理人のボヤキです。ブログを初めて３年は経とうとしているのに、なぜ「Clipy」のような便利な存在を知らなかったのか。
恥ずかしいことではありますが、管理人の検索力の低さ&最近の検索事情についての愚痴にはなりますが興味があれば読んでいってください。
「スニペット」という単語を知らなかったため検索できなかった
今回、運よく「Clipy」という望んでいたアプリケーションにたどり着けました。
そして、「Clipy 」は私が望んでいた機能を全て含んでいるアプリでした。
ですが、「Clipy」を見つけるまで思ったよりも時間がかかりました。（10分くらいで見つかると思ったのに、2日かかった）
「Clipy」のようなソフトを見つけるのに、次のような条件で検索しまくっていました
なので、「HTML ブログ」「ブログ HTML よく使う」等の語句で検索していましたが、「Clipy」は引っかかりませんでした。
そこで、検索語句を
といった検索語句で探すようにしたら、少しずつ求めていたものに近づいてきました。
そして、検索結果を見ていくと、
どうやら私が探していたものは「スニペット」という語句で表すことができたようなのです。
スニペット(英語: snippet)とは、「断片」という意味で、再利用可能なソースコード、マシンコード、またはテキストの小さな領域を表すプログラミング用語である。 通常、これらはより大きなプログラミングモジュールに組み込むために正式に定義された操作ユニットである。スニペット管理は、一部のテキストエディタ、ソースコードエディタ、統合開発環境、および関連ソフトウェアの機能である。 これにより、ユーザーは日常の編集操作中に繰り返し入力する必要がなくなる[1]。
https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%8B%E3%83%9A%E3%83%83%E3%83%88
あいまい検索が難しくなってきている？
「スニペット アプリ Mac」で、やっと「Clippy」にたどり着きました。
正直、SEでもなんでもない趣味ブロガーでは「スニペット」というワードにたどり着くことすら困難でした。
「Clippy」でも「スニペット」と言う単語が使われているぐらいですし、業界ではメジャーな単語だと思うと無知な自分が悔しかったです。
あいまい検索に寛容になってほしい
「スニペット」という単語を知らない自分に情けなさを覚えると共に、
昔だったら、「HTML 使い回し したい」
だけで「Clipy」のようなアプリやレビューブログがスパッと出てきたりしたと思うのですが、アップデートで難しくなったのですかね・・・。
