【TCD】アイコンフォントでLINEを追加する方法【SNSアイコン】

デザイン&マーケティング
typographyimages / Pixabay
プロフィール
この記事を書いた人
アバター画像

【GOMA (ゴーマ)】くまさん(夫)ときのこ(妻)のユニット。京都胡麻(ごま)に移住して、新しい田舎暮らしを提唱するGOMA(ゴーマ)を立ち上げました。ゲストハウス経営とサイクリングツアーをはじめとしたアウトドアアクティビティ、ウェブデザイン、デジタルマーケティング、ドローンフォトグラファーなど多業を行なっています。サイクリングやテクノロジー、DIY、田舎暮らしの情報などを中心に誰にでもわかりやすく解説しています。2018年第一子誕生。
現在はZwiftでヴァーチャルライド中心にロードバイクを楽しんでいます。ユーザーネーム「Atsushi Higashiura(gomanote.com)」。2019年夏からマラソン挑戦に続き2020年からトライアスロン挑戦。
くまさん(東裏篤史)の詳しいプロフィールはこちら

東裏 篤史をフォローする

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で送るボタンが現れます。

 

 

GOMAデザイン
もっと楽しく伝わる「カタチ」をつくりませんか。

京都を中心に、ローカルでビジネスを行う中小企業や団体に着目したホームページ制作会社です。地元を元気にするページづくりを心がけます。ウェブのちょっとしたことから、ウェブ制作・リニューアルまで、お話をじっくり聞いて最善の選択ができるようご提案しています。
くまさんの20年以上のデザイナー歴で獲得したノウハウと、東京、大阪で磨いたきのこのマーケター視点から見た最新のトレンドで、web、SNS、動画、印刷物駆使し、「どうやって使って成果に結びつけるか」まで、責任を持ってお手伝いします。

デザイン&マーケティング
シェアする
東裏 篤史をフォローする
ゴーマの休日定期購読

コメント