MENU
みぅあねろの画像
みぅあねろ
ママトラベラー
19歳でハワイに一目惚れ。その後留学・ホームステイ、年1回のペースでハワイ旅行。

ヒルトンタイムシェアオーナー/ JALマイラー

国内旅行も大好き。国内旅行業務取扱管理者でもあります。
サイト移行に関するお知らせ

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

2019 9/27

はてなブログ 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 さん
お役に立ててうれしいです😄是非ご活用ください♪

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


スポンサーリンク

この記事を書いた人

ハワイに恋したOL
2018年第一子を出産/ 19歳でハワイに魅了され留学・ホームステイ。その後も年1回ハワイ旅行/ ヒルトンタイムシェアオーナー/ JALマイラー

国内旅行も好き。国内旅行業務取扱管理者でもあります。

コメント

コメントする

目次
閉じる