¡el BLANCO!

Our trip and my favorite things

はてなブログテーマ「SOHO」カスタマイズ SNSボタンを好きな色に変更する

f:id:lavieenrose0427:20180205125312j:image

 

こんにちは。
Madori(@madori_10)です _φ(・_・

 

カスタマイズの記事です。

 

SNS(ソーシャルメディア)のボタンを好きな色に

現在は、記事一覧がカード型(PC 2カラム・スマホ 1カラム)のテーマ、rokuzeudon さんの「UNDER SHIRT」を利用しています。

 

ですが、シロマさんの「SOHO」も大好きなテーマ。

 

ベースは「UNDER SHIRT」ですが、「SOHO」で気に入っていた部分をカスタマイズによって取り入れています。

 

今回のカスタマイズは、シロマさんのテーマ「SOHO」を使っているかた向けの記事になります。

 

SOHO - テーマ ストア

 

設置の仕方は既にあるので、リンクを貼らせていただくだけになります。

 

私が紹介させていただくのは、そのボタンの色を変える方法です。

 

元々のボタンの色は黒っぽい色です。

 

・他の人と被りたくない

・好きな色に変更したい

 

というかた向けに参考になれば幸いです。

 

フォローボタンの設置

まずはフォローボタンです。

 

設置方法は、こちらの記事を参照してください。

 

www.notitle-weblog.com

 

私は、サイドバーに設置しました。

 

色は、リンクカラー と同じにしました。

 

やり方は、生成されたコードの間に以下のHTMLを入れるだけです。

 

なんてエラそうに言いましたが、方法はダンナさんに聞きました(爆)

 

フォローボタンのコードの前に <font color="#b38f9f">

フォローボタンのコードの後に</font>

  

(例)はてなブログアイコンの色を変える

 

 <font color="#b38f9f"><i class="blogicon-hatenablog lg"></i></font>

 

「#」は、好きなカラーコード。

 

⇩カラーコードはこちら

www.colordic.org

 

作成したコードがこちらです。

前後に入れたコードは太字で表示しています。

 

<!-- フォローボタン -->

<div class="sh-follow-btn-small">

<div class="sh-follow-btn-inner">

<a class="hatena" href="http://blog.hatena.ne.jp/lavieenrose0427/www.encanta-europa10.com/subscribe" target="_blank"><font color="#b38f9f"><i class="blogicon-hatenablog lg"></i></font></a>

<a class="twitter" href="https://twitter.com/intent/follow?screen_name=madori_10" target="_blank"><font color="#b38f9f"><i class="fa fa-twitter"></i></font></a>

<a class="instagram" href="https://www.instagram.com/Madori__omd" target="_blank"><font color="#b38f9f"><i class="fa fa-instagram"></i></font></a>

</div>

</div>

<!-- フォローボタンここまで -->

シェアボタンの設置

設置方法は、こちらの記事を参照してください。

 

www.notitle-weblog.com

 

色の変えかたは、フォローボタンと同じです。

 

シェアボタンは薄いグレーにしました。

 

(例)はてなブックマークの色を変える

 

<font color="#9f9f98"><i class="blogicon-bookmark lg"></i></font>

 

「#」は、好きなカラーコード。

 

私は、記事下に入れました。

前後に入れたコードは太字で表示しています。

 

<div class="sh-share-area">

  <p class="sh-share-text">この記事をシェアする</p>

  <ul class="sh-share-list">

    <li class="sh-share-item hatebu">

      <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" target="_blank"><font color="#9f9f98"><i class="blogicon-bookmark lg"></i></font><span class="sh-hatebu-count sh-share-count"></span></a>

    </li>

    <li class="sh-share-item facebook">

      <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" target="_blank"><font color="#9f9f98"><i class="fa fa-facebook-square"></i></font><span class="sh-facebook-count sh-share-count"></span></a>

    </li>

    <li class="sh-share-item twitter"><a href="http://twitter.com/intent/tweet?text={Title} - {BlogTitle} {URLEncodedPermalink}" target="_blank"><font color="#9f9f98"><i class="fa fa-twitter"></i></font></a></li>

    <li class="sh-share-item pocket"><a href="http://getpocket.com/edit?url={URLEncodedPermalink}" target="_blank"><font color="#9f9f98"><i class="fa fa-get-pocket"></i></font></a></li>

  </ul>

</div> 

 

ちなみに、私は「この記事をシェアする」という文言も外しました。

 

外したい場合は、以下の部分(コードの2行目)を削除します。

 

  <p class="sh-share-text">この記事をシェアする</p>

理想的なSNSボタン

こちらは海外サイトのボタンですが、お洒落ですよね〜。

 

手書きのようなフォントも素敵です。

 

f:id:lavieenrose0427:20180205125712j:image

 

これ、どうやって設置できるんだろう!?

ボタンの作成から自分でやるのでしょうか…。

 

 

下の写真は普通のシンプルなボタンですが、あえて目立たない色にしているのがツボです。

 

f:id:lavieenrose0427:20180205125723j:image

  

数あるブログの中から、当ブログ「¡ El Blanco !(エル ブランコ)」を訪れていただきありがとうございました。

  

Madoriでした (´ー`)