読者です 読者をやめる 読者になる 読者になる

何でもない日常だから

幸せだと思う。

はてなブログ見たまま編集モードではてな専用絵文字は使えるの?(とりあえず解決しました)

はてなブログ

スポンサーリンク

長いタイトルそのままです。

ただ単に絵文字を使うなら外部サービスのWEBフォントがあるのですが、はてなの機能としてインストールされているようです。

※少しだけ追記しました(10月9日)

 

書式も公開されていたので試してみます。

「<i class="blogicon-hatenablog"></i>はてなブログ」

赤文字部分を変更する事で各種アイコンに変更出来ます・・・が・・・

 

見たままモードのHTML編集に貼り付けてプレビューしてみると表示されません。。。

 

という事でHTMLを確認してみるときれいにタグが無くなっています。

どうやら見たままモードでは<i>のタグはサポートされていないようです。

見たままモードは文章を書くには便利なモードですし、ちょっとした間違いは自動(勝手に)で修正してくれるので便利と言えば便利なのですが、<table>タグ内で間違えた時などは悲惨です。

もう修正するくらいなら一度破棄して書き直した方が早いくらいです。

 

と前置きが長くなってしまいましたが、このままでは見たままモードでは絵文字が使えない!で終わってしまいます。

そんな訳で少しだけ足掻いてみます・・・

 

まず確認として、はてな記法とマークダウンではOKでした。

 

その後色々試してとりあえず表示出来た方法がこれです。

 

「<p class="blogicon-hatenablog"></p>はてなブログ」

 

<i>タグを<p>タグに変更。<p>タグなので改行が入るので改行位置を変更して

 

「<p class="blogicon-hatenablog">はてなブログ</p>」

 

これをHTML編集に切替えて入力すると・・・

 

はてなブログ

 

見事表示出来ました。ちなみに見たままモードでは絵文字は表示されまんが、プレビューでは確認できます。

ただし絵文字を使うからには色々加工して使いたいので試してみます・・・

文字サイズの変更・・・

 

はてなブログ

 

 ・・・出来ません。

タグを確認すると

<p class="blogicon-hatenablog"><span style="font-size: 200%;">はてなブログ</span></p>

と言う事で文字サイズ変更タグが絵文字の後ろになってしまっているので絵文字の前に移動させてみます。

<span style="font-size: 200%;"><p class="blogicon-hatenablog">はてなブログ</span></p>

これをHTML編集で入力

 

はてなブログ

 

 きれいに<span>タグが消去されて文字サイズが標準サイズになってしまいます。

想定している使い方として文字列の最後にリンクアイコンを使おうとしているのですが、絵文字の出力に<p>タグを使っているので改行が入ってしまいこれも不可でした。

 

こんな感じでギリギリ表示は出来たのですが、自由に使うには程遠い感じです。

解決方法を知っている方がいましたら教えて頂きたいと思います。

 

 解決編(追記分)

なんとなくあちこちのブログをさまよっていたらこのブログテーマの作者さんのブログ内のコメント覧から発見しました。

ある方が質問同じ事を質問されていまして、回避方法として提案されていた方法がこちら

記入方法を

<i class="blogicon-hatenablog">はてなブログ</i>

とする事です。<i></i>内に文字入力しています。(最低1文字入力すればOKみたいです。アイコンのみ表示したい場合は全角スペースを入れます。空白が出来てしまいますが、工夫すればなんとかなりそうです)

 

はてなブログ

うまく表示されました。

ちなみにHTMLを確認すると

 <p><em class="blogicon-hatenablog">はてなブログ</em></p>

となっていました。ま~表示されるならOKです。

そしてもう1つの問題点拡大縮小が出来るか?

はてなブログ

 ♪上手に出来ました~♪

ちなみにHTMLはこんな感じになっています。

<p><span style="font-size: 200%;"><em class="blogicon-hatenablog">はてなブログ</em></span></p>

これで使えそうです!

 

スポンサーリンク