WordPress『ストーク』でSNSシェアボタンのデザインをカスタマイズ

【コピペだけでOK】ストークのSNSシェアボタンのデザイン変更

本記事は「ストーク」「ハミングバード」のワードプレステーマ向けの内容です。

以前、このブログでは「ハミングバード」を使用していましたが、2018年4月にJIN(WordPressテーマをJIN(ジン)に変更!デザインのカスタマイズ性が◎)にテーマを変更しました。

きたむ(wakajps)です。

WordPressテーマである『ストーク』『ハミングバード』のテーマでは、標準機能でSNSシェアボタンを設置することできます。

「他の方のブログデザインと差別化をはかりたいなぁ。」と思いネットで、良い方法がないか探してみましたが、あてはまる情報がなかったので、自分でCSSをいじって作成してしまいました。

この記事で紹介させていただくCSSを使うと、以下のようにSNSボタンのデザインをカスタマイズすることができます。

▼記事タイトル下

 

▼記事下

『ストーク』と『ハミングバード』は、テーマのCSSに互換性があるため、どちらのテーマを使っていても、同様の手順でデザインを変更することができます。

SNSシェアボタンのデザインをカスタマイズする手順

WordPressのテーマの編集から子テーマを開き、以下枠内のCSSをコピペして完了です。

コピペする場所は、スタイルシート『style.css』内の一番下でOKです。

.sns li a {
font-size:80%;
position:relative;
display:block;
padding:10px;
color:#fff;
border-radius: 2px;
text-align:center;
text-decoration: none;
text-shadow:none;
}
.sns li a:hover {
-webkit-transform: none;
-moz-transform: none;
transform: none;
box-shadow:none;
}

.sns li a .text{
font-weight:none;
}

/* ツイッター */
.sns .twitter a {
color: #22b8ff !important;
border: solid 1px #22b8ff !important;
background: #fff !important;
box-shadow:none;
}
.sns .twitter a:hover {
color: #fff !important;
border: solid 1px #22b8ff !important;
background: #22b8ff !important;
}

/* Facebook */
.sns .facebook a {
color: #6680d8 !important;
border: solid 1px #6680d8 !important;
background: #fff !important;
box-shadow:none;
}
.sns .facebook a:hover {
color: #fff !important;
border: solid 1px #6680d8 !important;
background: #6680d8 !important;
}

/* グーグル */
.sns .googleplus a {
color: #db4a39 !important;
border: solid 1px #db4a39 !important;
background: #fff !important;
box-shadow:none;
}
.sns .googleplus a:hover {
color: #fff !important;
border: solid 1px #db4a39 !important;
background: #db4a39 !important;
}

/* はてぶ */
.sns .hatebu a {
color: #5d8ac1 !important;
border: solid 1px #5d8ac1 !important;
background: #fff !important;
box-shadow:none;
}
.sns .hatebu a:hover {
color: #fff !important;
border: solid 1px #5d8ac1 !important;
background: #5d8ac1 !important;
}

/* Pocket */
.sns .pocket a {
color: #ff6d82 !important;
border: solid 1px #ff6d82 !important;
background: #fff !important;
box-shadow:none;
}
.sns .pocket a:hover {
color: #fff !important;
border: solid 1px #ff6d82 !important;
background: #ff6d82 !important;
}

/* Feedly */
.sns .feedly a {
color: #6cc655 !important;
border: solid 1px #6cc655 !important;
background: #fff !important;
box-shadow:none;
}
.sns .feedly a:hover {
color: #fff !important;
border: solid 1px #6cc655 !important;
background: #6cc655 !important;
}

テーマJINに移行しました!

これまでワードプレステーマ「ハミングバード」を使用していましたが、JINを購入し移行しました。テンプレートでデザインが用意されているので、書くことに集中できるとても良いテーマです。

JIN用のカスタマイズCSSも公開中です!

WordPressテーマ「JIN」に変更
WordPressテーマをJIN(ジン)に変更!デザインのテンプレートが豊富!新しくWordPress(ワードプレス)テーマを購入しました!そして、移行作業を終え、このページはすでに新しいテーマに切り替わっております。 今回、購入したのは『JIN(ジン)』という有料のテーマ。 デザインと機能性に一目ぼれしたのが、購入にいたった理由です。 仮に他に理由を挙げるとしたら、以下の理由。ちなみに、以前は『ハミングバード』というテーマを使っていました。 ハミングバード、使い勝手はもの凄く良かったのですが、デザインが流行っているテーマ『ストーク(STORK)』と酷似しているため、そのぶん他のサイトと似たり寄ったりなデザイン・構造になってしまっいたこと。 自分でCSS弄れよ.....
ABOUT ME
きたむ
アフリカではたらくフリースタイルジャパニーズ |三度の飯と写真|87年生の伊豆下田育ち→大学職員人事→ 南ア現地NGOでICT・マイクロファイナンスを軸に活動中|キリマンジャロ登頂|スマホ歴12年|旅行14カ国|仕事7カ国|<プロフィール詳細>

POSTED COMMENT

  1. あいか(@aika_aimemo)さんのブログ『Ai MEMO』で本記事をご紹介いただきました。ありがとうございます!

  2. りな より:

    参考になる記事をありがとうございます。アフリカの記事も大変興味深いです。
    ひとつ質問なのですが、ボタンの上に▼ SNSでシェアする ▼ という一文がありますが、これはどこをいじって書き込めばこの位置に表示できるのでしょうか?

    • きたむ より:

      りなさん、コメントいただきありがとうございます。アフリカの記事もご覧いただきありがとうございました。

      ボタン上に文字を表示する際は、PHP等のソースコードで変更を加えるのではなく、「外観>カスタマイズ>投稿・固定ページ設定>記事下のシェアタイトルを入力」から表示させたい文字を入力させることができます。htmlを打ち込むこともできるので、文字の大きさや色も変えることができます。

      よろしくお願いいたします。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

error: Content is protected !!