ALOHA AND MAHALO

Aloha And Mahalo

ハワイおたくによる『リアルなハワイ情報』ときどき育児

はてなブログの記事本文にWEBアイコンを表示する方法。コピペ+辞書登録でとても簡単にできます♪

はてなブログ WEBアイコン 表示 コピペ コピー ソース

こんにちは🌴みぅです。


WEBアイコン。ブロガーのなかでは”Font Awesome”が有名ですよね。


実ははてなブログも公式でWEBアイコンを提供しています。このWEBアイコンは、HTMLタグを使用すれば、簡単にブログ記事の本文に挿入することができます。


例えば、こんな感じで本文の中にWEBアイコンを挿入できます(今回は見やすいように赤字にするHTMLも追加しています)。


サンプル検索用の虫メガネとか、いいね!とか、外部リンクを知らせるこんなマークとか。この枠のタイトルにあるリストマークもHTMLタグを使用して表示しています。例えば、「<i class="blogicon-pen"></i>」と入力すると、記事上は「」が表示されます。

このHTMLタグをパソコンスマホの辞書ツールに登録しておけば、簡単に使えます。CSSをカスタマイズするより簡単ですよね♪

読者の注意をひきたいときや、見出しのアクセントにとても便利ですね。


こちらのブログで、はてなブログのWEBアイコン一覧を掲載してくれています。


上記の一覧のなかで使用頻度の高そうなアイコンをこちらでピックアップして、辞書ツール用のHTMLを作成しました
パソコンやスマートフォンのユーザー辞書にこのHTMLタグを保存しておけば、簡単に使えますのでよかったらご活用ください。

ご注意
このHTMLタグは「はてな記法」または「Markdown」でご使用ください。

はてなブログWEBアイコン 辞書ツール登録用のコード

こちらが、私のほうで作成したHTMLタグの一覧です。

アイコン
登録名
HTMLタグ



ぐらふ

<i class="blogicon-analytics"></i>



ぺん

<i class="blogicon-pen"></i>



あまぞん

<i class="blogicon-amazon"></i>



いいね

<i class="blogicon-good"></i>



こーど

<i class="blogicon-code"></i>



りすと

<i class="blogicon-list"></i>



めも

<i class="blogicon-entry"></i>



むしめがね

<i class="blogicon-search"></i>



こめんと

<i class="blogicon-comment"></i>



ほーむ

<i class="blogicon-home"></i>



かすたむ

<i class="blogicon-setting"></i>



がいぶ

<i class="blogicon-external"></i>



ぱそこん

<i class="blogicon-laptop"></i>



すまほ

<i class="blogicon-smartphone"></i>



はてなぶろぐ

<i class="blogicon-hatenablog"></i>



はてな

<i class="blogicon-help"></i>



かぎ

<i class="blogicon-private"></i>



ちぇっく

<i class="blogicon-check"></i>



ついったー

<i class="blogicon-twitter"></i>



えふびー

<i class="blogicon-facebook"></i>



しぇあ

<i class="blogicon-share"></i>

ユーザー辞書ツールへの登録方法

以下の2つの方法のうち、どちらかお好きな方で登録できます。なお、Windows PCのユーザー辞書ツールは、画面右下のIMEオプションツールから開けます(「あ」とか「A」と表示されている箇所を右クリックし、「ユーザー辞書ツール」をクリック)。

1.テキストファイルをインポートする(推奨)

インポート用のテキストファイルをGoogleドライブにアップしました。こちらを辞書ツールにインポートすると、上の表の内容がすべて辞書ツールに反映されます。(無断転用・配布はお控えください)


インポートの手順は以下の通りです。

  1. Googleドライブからテキストファイルをダウンロードし、デスクトップ等に一時的に保存する。
  2. ユーザー辞書ツールの「ツール」>「テキストファイルからの登録」をクリックし、テキストファイルを選択する。

これだけでOKです。簡単なので、こちらの方法がおすすめです。

2.コピペで登録する

上の表の「登録名」と「HTMLタグ」に記載してある文字列をコピーして、お使いのパソコンやスマホのユーザー辞書にペーストする方法です。

  1. ユーザー辞書ツールの「編集」>「新規登録」を開きます。
  2. 「単語」欄に表の「HTMLタグ」をコピペ。「よみ」欄に表の「登録名」をコピペ。

こんな感じで入力します。
f:id:m_by_the_sea:20190926163157p:plain:w300

以上です。この操作を1つずつするので手間がかかりますが、これでも登録可能です。なお、「登録名」はお好きな単語に書き換えても大丈夫です♪


使い方

ブログ記事作成中に、表の「登録名」に記載してある単語を入力すると、変換候補にHTMLタグが出るようになりますので、これを選択すればOKです。

例えば「めも」と入力するとこんな感じで出てきます。
f:id:m_by_the_sea:20190926220041p:plain:w300

このタグを選択すると、ブログ記事では「」がされます。


以上になります。お役に立てれば幸いです😄🌺


はてなブックマークへのコメントありがとうございます

id:m421miyako さん
お役に立ててうれしいです😄是非ご活用ください♪

ブログランキング参加中です。押していただけると励みになります😄🌺
にほんブログ村 旅行ブログ ハワイ旅行へ