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

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

カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

この記事では
プロフィール部分のSNSボタンをちょっとおしゃれにカスタマイズした方法を説明。
MENくん

せっかくTwitterはじめたから使っていきたいな~

くま3号

それは別にええんやないか

MENくん

よし!SNSのボタンおしゃれにしよ!

くま3号

それは完全に自己満足やな


このサイトの環境

テーマ
子テーマ
プラグイン

こんな感じ

Before

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

After

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

 


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

SNSボタンの変更部分

MENくん

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


使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

SNSボタンをカスタマイズをする準備

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

プロフィールをすでに作成している方4にジャンプ(こちらをクリック)してください。

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

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

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

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

ここまでは、プロフィールを作成している方は、必要ないですね。
先に言えよ


3の赤文字部分(<div class=”prof-sns dfont”>以下)をこちらのコードに変更して貼り付けてください。

WordPress外観ウィジェットサイドバーカスタムHTML(プロフィール)

カスタムHTML(追加するコード2:プロフィール用)

上のコードは「Twitter」「プロフィール」「FEEDLY」「欲しいものリスト」の4つのボタンにする際のコードです。

順番を変更したい場合は、色の部分ごと入れ替えてください。

わかる方は、この後説明するcssと照らし合わせながら、クラス名を変更したり色を変えたり、URLを入力したり、ボタンを追加したり削除したりたりたりしてください。

呪文に見える方は、とりあえず適当なURLを入れて、カスタムHTMLに貼り付けて完了ボタンを押しておきましょう。

青色のTwitter部分だけ説明します。

Twitterの部分

まず、<a ~ >ではじまりますよね。これはここからリンクにするよ!という意味です。
そしてこの<a ~ >の中にはあるのは

class=”pf-tw”

クラス名です。この<a ~ >に名前をつけています。今回はプロフィールのツイッターのボタンなのでpf-twという名前をつけています。他のプロフィールボタンやFEEDLYボタンも同じように名前をつけていますね。

href=” URL “

これはリンク先のURLを示すものです。何も考えずにURLを入れましょう。

target=”_blank”

これは新しいタブで開くよ!という案内みたいなものです。

MENくん

全然難しいことは書いてありませんね!

次に書いてあるのが<i class=”fa fa-twitter”></i>です。これはアイコンを表示するやつですね。

最後に書いてあるのが<div >@name</div>これは段落みたいなイメージです(個人的イメージです)。<div>がくると改行するので、アイコンの下に@nameが来るように書いてあるだけです。

この、アイコンと@nameをリンクの<a> ~ </a>で囲んでいますよね、これでボタンの上に文字やアイコンが来る形になります♪

下手くそな説明になりましたが、時間のあるときに他で詳しく説明します。たぶん。

MENくん

さて、ここまで来たらあとはstyle.cssにコードを追加するだけです。

カスタマイズ方法

追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

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

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

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

ボタンが4つあるので、コードが長いです。ただし書いてあることは背景色とか以外は一緒です。

 

確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新
キャッシュを削除して更新
ブラウザ(Google Chromeなど)で自分のサイトを開いた状態で、F12を押す>更新マーク右クリックキャッシュの削除とハード再読込をクリックするとスタイルが反映されます。

背景色の参考

こんな色はどうでしょう

 

カラーコードはこちら

ボタン 通常 ホバー アイコンコード
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号

リライトはしろよ

 

 

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

追加CSSのまとめ

手順をザクッと説明
変更手順
  • サイドバーにプロフィールウィジェットを作成。
  • HTML追加コードを書き込む。
  • FTPソフトとテキストエディタを開いてcss追加の準備。
  • css追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
MENくん

SNSボタンが3倍の大きさになったら、3倍いいねされるかも!

くま3号

どんな理屈だよ

 

 
ブログの執筆を減速させるソフト <イラストレーター・フォトショップ>
MENくん

記事を書くのに集中したいブロガーは絶対に買っちゃダメだよ☆

くま1号

もし買うなら、せめて安く買おうね

アドビの漫画 アドビの漫画2
フォトショ・イラレはこちら

1.お申込み方法をクリック

2.キャンペーンのバナーをクリック

3.お申込みはこちらをクリック