スマホ固定フッターメニューのアイコンを大きくする!

ブログ

【Affinger5】スマホ下固定メニューのアイコンを大きくしよう。

投稿日:

Affinger5のスマホのフッター固定メニューがなんとか大きくならないかなーと頑張った結果。

\ ド ド ン /

適用後スマホ固定フッターメニュー

Fontawesomeを使うと小さくなる!

Affinger5のスマホのフッター固定メニューのカスタムリンクにFontawesomeで入れるとどうしても小さくなってしまいますよね。

適用前スマホ固定フッターメニュー

こんな感じですね。

このスマホのフッター固定メニュー、結構クセモノでして。

spanタグでも大きくならない。
!importantでも大きくならない。

でも中途半端に当たっているらしく、場所は広がるんです。

というわけで、私がフッターメニューのアイコンを大きくした方法を記事にしてみました。

実際にアイコンをデカくする手順

スマホ下固定メニューの作成方法はこちら。
[sanko href="http://affinger5.com/manual/post-4675/" title="スマホ用フッターメニューの追加" site="WINGマニュアル"]

カスタムリンクでメニューが出来上がっていることを前提に書いていきます。

[timeline]
[tl label='手順1' title='リンク文字列']
リンク文字列

ここ、公式サイトには<i class="fa fa-home" aria-hidden="true"></i><br/>ホームを入力すると書いてありますね。

ここを大胆に変更します。
[/tl]
[tl label='手順2' title='入力する文字列']

<img src="https://icongr.am/clarity/home.svg?size=30&color=ffffff"><br>ホーム

これです。

「ホーム」の部分は、Homeでもホームでも構いません。
[/tl]
[/timeline]

これで、ホームのアイコンが大きくなります。

一体どういうことなの?

これは、icongramというサイトのsvgという技術を使ったアイコンです。

SVGはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の頭文字を取ったもので、jpg画像やpng画像といったビットマップデータ(画素数や色の配置が決まっているデータ)とは違う、ベクターデータと呼ばれるものです。

ベクターデータは、テキストエディタで開くことで簡単な変更やクラスをもたせることが出来るイラストレーター用の画像ファイルのことを言いますが、少し難しい話になるので、ここでは省略させていただきます。

icongramの使い方

使い方は簡単です。
<img src="https://icongr.am/ジャンル名/アイコン名.svg?size=数字&color=#16進数の数字">

これを貼るだけ。

16進数の数字はおわかりですよね?

そう。

#ffffffなら白といった、RGBを2桁ごとに区切った色の数字指定です。

headタグに何かを入れるわけでもなく、ただ単純に記載すればいいだけです。

たくさんあるので、気に入ったアイコンを探して設置してみましょう!

[box class="box26" title="icongramのジャンル"]

  • clarit
  • devicon
  • entypo
  • feather
  • fontawesome
  • jam
  • material
  • octicons
  • simple

[/box]

[alert title="注意"]
当サイトは「SANGO」を使用しています。
子テーマは「Poripu tears」です。
[/alert]

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


  • この記事を書いた人

こなゆき

パーフェクト趣味人。 知的好奇心MAX。 ゲーム・パソコン全般・科学・DIY・オーパーツとか怪しげなものも大好物。

-ブログ
-

Copyright© さぶかるぐらし , 2019 All Rights Reserved.