インターネット

XWRITEカスタマイズ・SNSフォローアイコンのtwitterをXに変更する方法

hiro
記事内に商品プロモーションを含む場合があります

いずれ、公式のアップデートでTWITTERがXに変更されると思いますが、とりあえず、XWRITEのウィジットのフォローボタンの方をXに変えといたのでメモします。

こちらのサイト様がXアイコンをSVGで示してくれています!大変助かりました!

jQuery

jQuery(document).ready(function($) {
    // TwitterアイコンをSVGに置き換える
    $('#sns_widget-2 .icon-twitter').replaceWith('<svg viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg"><path d="m714.163 519.284 446.727-519.284h-105.86l-387.893 450.887-309.809-450.887h-357.328l468.492 681.821-468.492 544.549h105.866l409.625-476.152 327.181 476.152h357.328l-485.863-707.086zm-144.998 168.544-47.468-67.894-377.686-540.2396h162.604l304.797 435.9906 47.468 67.894 396.2 566.721h-162.604l-323.311-462.446z" fill="#fff"/></svg>');
});

です、fillのところで色はお好みで変えてくださいね。

今使っているCSSです、とりあえず

#sns_widget-2 svg {
    width: 18px;
    height: 18px;
    text-decoration: none;
    transition: all 0.5s;
    cursor: pointer;
}

CSSもお好みで色々変えてくださいね。

タグクラウドで探す

皆様の応援で頑張れます
広告
ABOUT ME
hiro
小1娘を育児中の主婦。娘の不登校と向き合っています。ブログカスタマイズが趣味。
記事URLをコピーしました