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

カスタマイズLION MEDIA

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

 

8364_05

 

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

 

8364_06

HTMLを1行追加し、デザインCSSを入れるだけで簡単に実装できます。

 

LION MEDIAのその他のカスタマイズについては以下もご覧ください。

LION MEDIAの記事

 

HTMLを追記する

 

 「外観」→「カスタマイズ」→「高度な設定[LION用]」を開きます。

 

8364_04

 

 「</body>直上の自由入力エリア」に以下のコードを追記します。

 

<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;
}

 

結果

 タブレット

8364_03

 

 スマホ

8364_02

 

 

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

 

#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;
}

 

結果

8364_06

 

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

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

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

CSSリンクを貼る事で、今回のカスタマイズに限らず、どこででも自由にアイコンフォントを利用出来ます。

 

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

 「外観」→「カスタマイズ」→「高度な設定[LION用]」

8324_04

 

 </head>直上の自由入力エリアにフリーアイコンフォントのCSS用コードを貼ります。

8324_05

 

当記事作成時の「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が反映されない場合

 

CSSコードを記述したのに変化がない場合は、キャッシュをクリアして下さい。

 

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