BloggerのロゴをFontで使えるLigatureSymbolsの解説

Bloggerロゴ

BloggerでブログをしてるんだからBloggerのロゴである「  」を記事中にも入れたい!
そして、どうせなら画像ではなくフォントとして使い「 Blogger」←こんな風に文章を書きたい!!
Bloggerでブログを書いてる人なら誰だってそう思いますよね?

スポンサーリンク

 Bloggerで使えるアイコンwebフォントは?

この小さなこだわりと願いから生まれた悪戦苦闘の日々。
アップロードサーバーの無い Bloggerでは無理なのか?

なぜ、Font Awesome にBloggerのアイコンが無いんだー!(#`д´)ノ

過去記事: Font Awesomeの使い方はこちら 

ブリブリ怒りながら、やっと見つけた
WE LOVE ICON FONTS  

しかし!!
「WE LOVE ICON FONTS」の「Brandico」には Bloggerのアイコンフォントがあり、サーバーにフォントをアップロード不要で使用できるのに
試してみたら
記事作成画面で見えないのは、どのWEBフォントも同じですが
プレビュー画面でも表示されなくて「公開」しないと表示されませんでした。

さすがに、公開するまで見えないフォントでは使い辛いうえに、公開してから手直しを見つけるのも嫌なので却下。

WordPressユーザーに人気で
国内のWEBサービスのアイコンが揃っててリガチャー(合字)によりWEBフォントの欠点を補ったLigatureSymbols  を使いたい!


ヤフー Google+  Blogger  はてブ  LINE  WordPress   Amazon


↑これ全部フォントで書いてるんですよ!(^^)

でも、「LigatureSymbols」を使うにはサーバーを探さなくては!

「猿でも分かる」と言われても、Bloggerで「LigatureSymbols」の解説をしたサイトが見つからない(>_<)

猿ではないゴリラになって「ゴリ霧中」の旅へ・・・

Bloggerに最適なサーバーは?

まずは、Googleサイトでサイトを作り「キャビネット」(ファイル置場)へ「LigatureSymbols」をアップロードしたのですが、
URLをちゃんとキャビネットのURL+ファイル名でダウンロードは出来るのにCSSでは読み込んでくれませんでした。(T_T)

次に試したのが、Googleドライブ 

ここでも最初読み込まず、落ち込みましたがURLをGoogleサイトでの使い方と変えてやることで上手くいきました♪

Googleドライブへ「LigatureSymbols」をアップロード

まずは、「LigatureSymbols」 のサイトから一番下にある
Downloadボタンをクリックして保存しておきます。

Googleドライブ

GoogleドライブはBloggerユーザーなら同じアカウントで使用できます。

ドライブの画面で新規フォルダ

Googleドライブ2

名前を分かりやすいように「font」と付けます。

出来た「font」フォルダを右クリックから共有をクリック。
開いた画面下側の詳細設定をクリック。

Googleドライブ共有設定

共有設定の画面が開きます。

アクセスできるユーザーが「非公開」となってるので変更をクリック。

Googleドライブ共有設定2

リンクの共有設定画面が開きます。
一番上の「ウェブ上で一般公開」を選択して保存をクリックして閉じます。

LigatureSymbolsアップロード

fontフォルダをダブルクリックして開くと、「ここにファイルをドロップ」と書かれています。

ダウンロードした「LigatureSymbols」を開き、5つあるフォントファイルを全てドラッグ&ドロップでアップロードして下さい。

LigatureSymbols共有

アップロードした5つのファイルのうち、拡張子が.otfを除く4つのファイルを順番に右クリックして共有をクリックします。

LigatureSymbols共有2

開いた「他のユーザーと共有」画面に書かれたURLの
/ ~ /viewの間に28桁ほどの(私の場合)IDが書かれてるのでコピーしておきます。

(どの拡張子のIDかを間違えないように)

LigatureSymbolsのインストール

Bloggerの「テンプレート」⇒「カスタマイズ」⇒「上級者」から
カスタムCSSを追加します。

解説
5行目~10行目を、先ほどGoogleドライブからコピーしたIDで書き換えて下さい。
間違えないように上から2つ.eotのIDです。

53行目から下には、私が使うアイコンを登録してるので
お好みで添削して下さいね。
上から、

入力方法は、記事作成画面のHTML側から

<span class="lsf-icon amazon">Amazon</span>Amazon
<span class="lsf-icon amazon"></span>
となります。

↑のアイコンの順番でコードを貼っておきます。

↑これをメモ帳にでもコピーして記事作成時、使いたいアイコンをコピペで使います。

CSSでアイコンの右側は隙間を空けてますが、左側に隙間が欲しい時は、コードの前に&nbsp;を付けて半角スペースを空けることができます。


お疲れ様でした♪

この「Ligature Symbols」と「Font Awesome」があれば充分だと思います。

過去記事: Font Awesomeの使い方はこちら 

ただし、
欠点は古いブラウザや一部の環境では表示されないことと、
Bloggerの場合は、テンプレートモバイルの設定ボタンから
モバイルテンプレートを下側の「いいえ。携帯端末でPCテンプレートを使用する。」を選択しないとスマートフォンでは表示されないかもしれません。

最後までご覧いただき ありがとうございました。

この記事が役に立ったと思った方はシェアして頂けると嬉しいです。(^^)

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る