常時表示されるリンクアイコン

きらら舎では、お問合せやご相談、無料命式やホロスコープなどのお渡しを基本的にLINEでやっています。

そのため、ページにLINEを開くアイコンを付けました。

右にフクロモモンガが、それです。

ページをスクロールして、常に右下に出ています（うざいかもだけど）。

動く画像（Gifアニメーション）にしたので、透過ができないため、移動した先の背景色によっては枠が出てしまっていますが、動かないpng画像にすれば枠も表示されません。

これをどうやったら付けられるのかというお問合せがあったので説明を書いておきます。

基本的にWordPressでのサイト制作の説明をしているので、ここも、WordPressでの設置です。

WordPressはヘッダと本体とフッタ（人によってはサイドバー）など、部分部分独立しています。

今回のアイコンはすべてのページに登場できるように、フッタエリアに書きます。

外観➡ウィジェット➡フッター1を開き、
ページのパーツ・・・つまり、段落や見出しや画像などの中から「カスタムHTML」というものを選びます。

そこに以下のように書き込みます。
<a href="リンク先" target="_blank" class="line-button">
<img src="画像へのリンク" alt="LINEで問い合わせ">
</a>

<style>
.line-button {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
width: 100px;
}
.line-button img {
width: 100%;
height: auto;
}
</style>

リンク先は、そのアイコンを押した時に表示するページのURL。
line-buttonというのは、適当に付けた名前（半角英数字）。
img srcは画像URL。別途FTPからサーバにアップする必要があります。
あるいは、通常の記事にアップするように画像をアップし（ページには表示しないで）、アップした画像のURLをコピーしてもかまいません。
（わからなかったらLINEでご質問ください）。

FTPができる方は・・・ロリポップレンタルサーバを使っていると仮定した場合、

サーバの管理・設定➡ロリポップ！FTPを開きます。

アップしたいフォルダを選択して、一番上の左にあるアップロードからファイルをアップロードします。

たとえば、一番最初に表示されるところに「image」などのフォルダを作り、そこへ移動してからアップロードボタンを押して、link.pngという画像をアップしたとします。

その場合は
https://〇〇.com/image/link.png

と書きます。

<style>
.line-button {

ここは最初につけた名前と同じものを書きます。

プログラムに影響はなにもないので、上のサンプルどおりにしておくのが楽だと思います。

これで、どのページにもアイコンが表示されるようになります。