F-lightではシェアボタンをクリックすると、ポップアップウィンドウ(サイズを指定した小窓)として開くようになっています。
好みの問題ですが自分はポップアップウィンドウがあまり好きではないため、一般的な別タブ(新しいタブ)で開くタイプに変更しました。
本記事ではF-lightのシェアボタンを別タブで開くように変更する方法を解説します!
HTMLの編集手順
左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。
それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。
HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。
HTMLの編集が終わったらプレビュー画面で確認して、保存をします。
シェアボタンを別タブで開くように変更する方法
HTMLの編集画面で<div class='sns-share-buttons'>を検索します。
その下16行を書き換えていきます。
function tweet_btn(){window.open("https://x.com/intent/tweet?url="+encodeURIComponent(location.href)+"&text="+encodeURIComponent(document.title),"_blank")}
/*]]>*/</script>
<span class='facebook' onclick='fb_btn()' role='button' title='シェア'><svg aria-label='Facebookにシェア' class='svg svg-facebook-f'><use href='#svg-facebook-f'/></svg></span>
<script>/*<![CDATA[*/
function fb_btn(){window.open("https://www.facebook.com/sharer.php?u="+encodeURIComponent(location.href),"_blank")}
/*]]>*/</script>
<span class='line' onclick='line_btn()' role='button' title='LINEで送る'><svg aria-label='ラインで送る' class='linesvg'><use href='#linesvg'/></svg></span>
<script>/*<![CDATA[*/
function line_btn(){window.open("https://social-plugins.line.me/lineit/share?url="+encodeURIComponent(location.href),"_blank")}
/*]]>*/</script>
<span class='hatena' onclick='hatena_btn()' role='button' title='はてなブックマークに登録'><svg aria-label='はてなブックマーク' class='hatebusvg'><use href='#hatebusvg'/></svg></span>
<script>/*<![CDATA[*/
function hatena_btn(){window.open("https://b.hatena.ne.jp/entry/panel/?url="+encodeURIComponent(location.href),"_blank")}
/*]]>*/</script>
黄色の部分が変更箇所ですが、上記を全文コピペして置き換えてもOKです。
簡単に説明すると、各関数の window.open(...) において、URLと "_blank"(別タブで開く) だけを指定する形に変更しています。
ちなみにこの16行の下にあるPocketはサービス終了しているため、変更せずに削除しています。
詳細はコチラ ➡ サービス終了のPocketをシェアボタンから削除する方法
F-lightを自分好みにカスタマイズ!
これでシェアボタンをクリックした際、別タブで開くようになりました。
細かなカスタマイズですが、少しでも自分好みのブログを目指して色々と変更してみてくださいね!




