こんにちは。先日作った「上に戻るボタン」をカスタマイズしたいmikanusagiです。
◀コレ。
目標はコレに模様をつけることなのですが…試行錯誤中です。
今回は、色を変える方法を試してみます。
※この記事は以前の「上に戻るボタンを設置してみた」記事の内容の続きになります。
１．画像の色を指定する。
色の変更は簡単ですね。
Font Awesome のタグの中に、style="color: #色指定;" を追加するだけでOK。
例えば、赤に変更してみるため、style="color: #ff0000;" を追加。
すると…
赤くなりました。
※カラーコードの話はコチラをどうぞ。。
CSSで指定することもできますね (*´▽｀*)
まあ、とりあえず、ここでは事足りているので割愛。
２．背景画像の色を変える。
CSSでFont Awesomeの指示と関連する箇所 (今回は、#page-top {....}) の中に
background-color: #色指定; を追加する。
すると…
背景に色がついた。
ちなみに…
HTMLで、Font Awesome のタグの中に、単純に
<i class="fas fa-chevron-circle-up fa-3x" style="background-color: #色指定;"> </i>
を追加してみましたが、 下みたいにずれてしまいました…(*´Д｀)
ちょっと右にはみ出してる…。
ブログの仕様の影響もありそうですけどね…。(*´Д｀)
とりあえずこの方法はボツで。
応用編：背景画像を背景に指定する。
CSSでFont Awesomeの指示と関連する箇所 (今回は #page-top {....}) の中に
background-image: url(画像のURL); を追加する。
① 導入したい画像を、非表示のブログなり、どこかのボックスなりにアップロードしてURLを取得。
② そのURLを入力する。
③ 背景が表示される。
今日はここまで。
背景画像の指定は、使い道限定されそうですが。。(笑)
いつか役にたつかもしれないということで、備忘録として残しておきます。
それでは、今回はこのへんで。(*'▽')/
