TCDのアイコンフォントでLINEを追加する方法
この記事は2020年5月19日に加筆・修正しました。
アイコンフォント、LINEがないじゃないか！
TCDのテーマの管理画面から選べるソーシャルアイコン。その一覧にLINEがないじゃないですか。もしかしたら入ってるんじゃないかと思い探したらありました！
忘備録として実装の方法を書いておきます。
WordPressテーマ「HEAL (tcd077)」でLINEアイコンを追加
テーマフォルダの中にあるフォルダを確認
「wp-content」＞「themes」＞「heal_tcd077」＞「css」＞「sns-botton.css」
この中のコード
@charset "UTF-8";
/* ----------------------- Share button -------------------------- */
@font-face {
font-family: 'design_plus';
src: url('../fonts/design_plus.eot?v=1.5');
src: url('../fonts/design_plus.eot?v=1.5#iefix') format('embedded-opentype'),
url('../fonts/design_plus.woff?v=1.5') format('woff'),
url('../fonts/design_plus.ttf?v=1.5') format('truetype'),
url('../fonts/design_plus.svg?v=1.5#design_plus') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: "design_plus" !important;
line-height: 1; font-style: normal; font-variant: normal; font-weight: normal; speak: none; text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.icon-feedly:before { content: "\e907"; }
.icon-hatebu:before { content: "\e908"; }
.icon-line:before { content: "\e909"; }
.icon-pocket:before { content: "\e90a"; }
.icon-google-plus:before { content: "\e900"; }
.icon-google-plus2:before { content: "\e901"; }
.icon-facebook:before { content: "\e902"; }
.icon-facebook2:before { content: "\e903"; }
.icon-twitter:before { content: "\e904"; }
.icon-rss:before { content: "\e90b"; }
.icon-rss2:before { content: "\e906"; }
.icon-pinterest:before { content: "\e905"; }
ありましたね〜！管理画面に出てないだけで一通りのソーシャルアイコンが揃っています。
なんでディフォルトでLINE無いんでしょうか？
CSSを追加
以下のCSSを追加します。
#header_social_link li.line a:before { content:'\e909'; }
HTMLで使わないソーシャルと入れ替え
<?php if($pinterest) { ?><li class="line"><a href="<?php echo esc_url($pinterest); ?>" rel="nofollow" target="_blank" title="Line"><span>Line</span></a></li><?php }; ?>
はい。ピンタレストは使わないので入れ替えました。
これでバックエンドを触らないでアイコンのみ、ピンタレストを選んだらLINEにできました。
シェアボタンに「LINEで送る」ボタンを追加
ここからはテーマ「oops！」の使用事例です。
記事のシェアボタンに「LINEで送る」がありません。これを追加してみます。
使わない「Pocket」ボタンと入れ替え
「template-parts」ディレクトリ内の「sns-btn-top.php」と「sns-btn-btm.php」の155行目あたりにに以下のコードがあります。
<li class="c-share__btn c-share__btn--pocket"> <a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="_blank"> <i class="c-share__icn c-share__icn--pocket"></i> <span class="c-share__title">LINE</span> </a> </li>
ここの「http://getpocket.com/edit?url=」をLINEで送るボタンのコード「https://social-plugins.line.me/lineit/share?url=」と入れ替えます。
さらに「<span class=”c-share__title”>pocket</span>」のpocketを「LINE」と打ち替えてあげます。
次に、「style.css」内の
.c-share--mono .c-share__btn--pocket a:hover { background-color: #ee4056; }
の「background-color: #ee4056;」をLINEのカラー「#00b900」にしてあげます。
で、以下のコードをCSSに追記します。
.c-share__icn--pocket::before { content: "\e909"; }
これで、シェアボタンにpocketを表示するとLINEで送るボタンが現れます。
コメント