【SANGOを自分でカスタマイズ】SNSボタンを横長2列にしてみた

SNSボタンをカスタマイズしてみた

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

MENくん
せっかくTwitterはじめたから使っていきたいな~
くま3号
それは別にええんやないか
MENくん
よし!SNSのボタンおしゃれにしよ!
くま3号
それは完全に自己満足やな

こんな感じ

Before

SNSボタンのカスタマイズ前

After

SNSボタンのカスタマイズ後

 


変更点はこんなところです

SNSボタンの変更部分

MENくん
SNSボタンが優しくて押しやすい大きさに!

カスタマイズする準備

プロフィールのウィジェットを設定

ウィジョット追加1
さっそくプロフィールを作成しましょう!WordPress外観ウィジェットで図のように[サイドバー]に[カスタムHTML]を追加します。

ウィジョット追加2
横の▲部分をポチッと押して、開きます。タイトルは記入せずに、内容部分にコードを追加します。

とりあえず追加するコードはSANGOの公式カスタマイズサイトのコードになります。

参考 サイドバーや記事下にプロフィール(この記事を書いた人)を設置するサルワカカスタマイズサイト

背景が濃くなっている2~9行目を使います。

MENくん
ここまでの内容は公式を見て、プロフィールを作っている人はわかってる部分ですね
くま3号
さきに言えや

上で貼り付けたコードの下にこちらの好きなコードを追加してください

くま3号
3~10行目の8つの中から何個か使いたいのを選んで、好きな順番に並べ替えればOKやね
MENくん
#」の部分にリンク先のURLをぶち込んでね!

アイコンのコードが少し変化します。FEEDLYとLINEはそのままいけちゃいますね。

fontawesome4.7

font awesome 5 ~

MENくん
いらないボタン(<a>タグで囲まれた部分)は消しちゃってもいいですからね!

3つのコード追加方法

追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードを追加する

style.cssにコードを追加する

MENくん
コードを修正しました。めっちゃ短くなりましたw

うまくできたか確認しましょう

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

こんな色はどうでしょう

 

カラーコードはこちら

ボタン通常ホバーアイコンコード
Twitter#80C7F2#1DA1F2<i class=”fa fa-twitter” aria-hidden=”true”></i>
FEEDLY#80CF93#2BB24C<i class=”fa fa-rss” aria-hidden=”true”></i>
Facebook#3B579D#748DCC<i class=”fa fa-facebook” aria-hidden=”true”></i>
Push7-1#EECC75#EEAC00<i class=”fa fa-bolt” aria-hidden=”true”></i>
Push7-2#81878C#23272B
amazon-1#FFC266#FF9900
文字
#232F3E
<i class=”fa fa-amazon” aria-hidden=”true”></i>
amazon-2#474F59#232F3E
文字
#FF9900
profile#828282#424242<i class=”fa fa-user-circle-o” aria-hidden=”true”></i>
insta-1#F397E8#F360E2<i class=”fa fa-instagram” aria-hidden=”true”></i>
insta-2#DB86B3#BB1F72
LINE#7ED67E#00B900<i class=”fa fa-comment” aria-hidden=”true”></i>
MENくん
全然うまく説明できなかったから、自己満足記事決定だわさ
くま3号
リライトはしろよ
MEMO
コードを変更してホバー時の色調整はすべて、透明度で設定しています。

SNSボタンをカスタマイズする手順まとめ

追加CSSのまとめ

MENくん
SNSボタンが3倍の大きさになったら、3倍いいねされるかも!
くま3号
どんな理屈だよ

 

コメント( ˶ˆ꒳ˆ˵ )

avatar