*

Stinger8トップへ戻るボタンのアイコン変更&自作画像に変更

公開日: : 最終更新日:2020/08/11 WordPress

 

前回はStinger8のデフォルトの「ページトップへ戻る」ボタンの背景色と形を変えてみました。

この元々のアイコンは矢印になっていますが、好みで変更ができます。

アイコンの変更と、オリジナル画像に変更する方法の紹介です。

スポンサーリンク

 

アイコンの変更

アイコンの画像を変更するには「Font Awesome」を使います。

Font Awesomeについては

Stinger8のカスタマイズ 見出しタグh3とh4の装飾の変更

に詳細記事がありますので、よければご覧ください。

使いたいアイコンを「Font Awesome」で探します。

「Font Awesome」で使いたいアイコンを見つけたらクリックします。

すると次のような画面になりますので、

 

 

赤い枠で囲まれているコードをコピーします。

※「Copy code」をクリックするとコードがコピーされます。

そのコードを子テーマのフッター(footer.php)に貼り付けます。

元のコードと書き換えると選んだアイコンになるんですね。

この記述はダッシュボードの「外観」⇒「テーマの編集」で行います。

今回のアイコン(紙飛行機)は<i class=”far fa-paper-plane”></i> がアイコンのコードになります

しかし、子テーマにはテーマフッター(footer.php)がないので、

親テーマからコピーしてこなければなりません。

コピーの仕方がわからない場合は
Stinger8カスタマイズ タイトルをロゴ画像に phpのコピー」 

を参照してください。

コピーすると子テーマのテーマの編集にテーマフッターが追加されます。

子テーマのフッター(footer.php)で次の部分を探します。

大体50行辺りにあると思います。

 

<!– ページトップへ戻る –>
<div id=”page-top”><a href=”#wrapper” class=”fas fa-angle-double-up”></a></div>
<!– ページトップへ戻る 終わり –>

「fas fa-angle-double-up」はFont Awesome5のアイコンです。

この部分を好みのアイコンのコードに変更します。

<!– ページトップへ戻る –>
<div id=”page-top”><a href=”#wrapper” class=”far fa-paper-plane“></a></div>
<!– ページトップへ戻る 終わり –>

 

 

変更後は次のようになります。

 

気にいったアイコンが見つかればそれを使用すればよいのですが、

オリジナル画像にしたいという場合もあります。

オリジナル画像に変更してみます。

 

 

アイコンフォントの画像をオリジナルに変更

先に画像を用意します。

60㎝幅くらいがよいようです。

画像を用意したら、Stinger8の「メディア」にアップします。

アップした画像のURLをメモしておきます。

(ここらへんの操作に関して解らない場合は

Stinger8カスタマイズ タイトルをロゴ画像に phpのコピー」を参照してください。)

そしてURLをコピーしたら子テーマの「footer.php」を開きます。

<!– ページトップへ戻る –>
<div id=”page-top”><a href=”#wrapper” class=”far fa-paper-plane”></a></div>
<!– ページトップへ戻る 終わり –>

<!– ページトップへ戻る –>
<div id=”page-top”><a href=”#wrapper”><img src=”画像のURL”></a></div>
<!– ページトップへ戻る 終わり –>

 

「class=”far fa-paper-plane”」を削除して、画像のURLを記入します。

 

ちゃんと表示されました。

Stinger8トップへ戻るボタンの変更 さいごに

やってみると、案外スムーズにできました。

カスタマイズ自体はどちらかと言えば、記事のためというより、自分の備忘録のような感じで書いていますが、同じようなことで、やり方を探している人もいるのではないかと思い、残しています。

あなたの参考になれば幸いです。

 


にほんブログ村

スポンサーリンク




スポンサーリンク




Message

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


コロナ禍でのアクリルパーテーションの手入れとゴミの出し方

コロナで自粛が続く中、飲食店や会社でもコロナ対策としてアクリルパー

コロナ禍のマスク生活 呼吸が楽なインナーカップとカラーマスク購入

まだまだコロナは収まりそうにないので、マスク生活は続きそうです。

手の痺れはビタミンB12不足が原因? コロナ禍で処方箋を貰った方法

腱鞘炎で痺れと力が入らないという症状から処方してもらっていた薬は、

節分て2月3日じゃなかった?!2021年の節分は2月2日!そのわけは

節分は2月3日!と、もう、ずっと思い込んでいたのに・・ なんと2

狭い部屋にも違和感のないミニ仏壇でお位牌に仮の家を!

前回の記事てお仏壇や位牌のことを調べて書きましたが、迷った末にやっ

→もっと見る

  • こんにちは。波空です

    好きなことを自由にやりたくて
    アフィリエイトにチャレンジ中
    好きなものは・・・アニメ・漫画・ゲーム・お絵描き・
    映画を観ること・パソコンで遊ぶこと
    やりたいことは・・いろいろあるけど、まずは資金と自由な時間を確保しないと進まない。日々どうしたらできるか考えながらリアル仕事に追われています。

  • BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール

  • 手軽に雑誌が読める!
    楽天マガジン

PAGE TOP ↑