LION MEDIAにPAGETOPボタンを追加する

LION MEDIAには、画面をスクロールした際に、ページの先頭へ戻る為のボタンがありますが、一番下までいかないと見えません。

そこで、ページの途中でもいつも小さく「PAGETOPボタン」を出しておくように追加のボタンを設置してみます。

HTMLを追記する

<div id="page_top"><a href="#"></a></div>

CSSを追記する

シンプルな▲の例

「外観」→「テーマエディター」から子テーマのスタイルシート（style.css）に

/**********************
PAGETOPボタン
*******************/#page_top{
width: 40px;
height: 40px;
position: fixed;
right: 5px;
bottom: 20px;
background: #5787b7;
opacity: 0.6;
}
#page_top a{
position: relative;
display: block;
width: 40px;
height: 40px;
text-decoration: none;
}
#page_top a::after{
content: '▲';
font-size: 14px;
font-weight: bold;
color: #fff;
position: absolute;
top: 10px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

結果

アイコンフォントを使った例

#page_top{
width: 50px;
height: 50px;
position: fixed;
right: 0;
bottom: 50px;
background: #003a75; /*ボタンの色*/opacity: 0.6;
border-radius: 50%; /*角の丸み*/}
#page_top a{
position: relative;
display: block;
width: 50px;
height: 50px;
text-decoration: none;
}
#page_top a::before{
font-family: "Font Awesome 5 Free";
content: "f102"; /*アイコン*/font-weight: 900;
font-size: 25px;
color: #fff; /*アイコンの色*/position: absolute;
width: 25px;
height: 25px;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}

結果

アイコンフォントの使い方

LION MEDIAは、SNSアイコンなど「Font Awesome」のフリーのもので、特定のアイコンフォントのみ使えるようになっています。（ダウンロード方式）

自分でアイコンフォントを使う場合は、無料のフリーアイコンフォントをCDNで利用する事で簡単に使用できます。

LION MEDIAでCSSのリンクを貼る場所は、以下です。

当記事作成時の「Font Awesome」バージョン（5.7.2）でよければ以下のコードをご利用下さい。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

「Font Awesome」詳細は以下をご覧ください。

色を変える

カラーコードは以下もご利用下さい。

マカロンビビッドパステル和色セーフ色名 赤桃青紫黄橙緑茶黒

その他のボタンについては以下も参考にして下さい。

CSSが反映されない場合

以下も参考にして下さい。