スポンサーリンク

【WordPress】Simplicityのバイラルタイプのシェアボタンを 横一列 にする方法

横一列 ブログ運営

どうもスルメです。

当ブログは、わいひらさんが提供されているWordPressの無料テーマ「 Simplicity2 」で運営させていただいております。

Simplicity
内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

ソースコードなんて全く触れない私でも簡単にカスタマイズできる。

そして、サポート体制も万全というかフォーラムがめっちゃ充実してて、本当に無料ではありえないほどのサービスをご提供していただいております。ありがとうございます。

私のブログも簡単にできるカスタマイズは一通り完了し、満足しておりました。

しかし、最近気になったことが。

Simplicityが最高すぎて、この無料テーマを使っているブロガーさんが凄い多いんですよね。

なんでそれがわかったかというと、SNSのシェアボタン。

Simplicityをつかっている多くのブロガーさんは、ヘッダー画像や見出しのカスタマイズなどを施し、個性的なデザインとなっております。

しかし、シェアボタンを見ると「 あっ。このブログもSimplicityだ。 」って最近わかるようになっちゃったんですよね。

そうなると、シェアボタンをカスタムしたくなるのが人の性。

まずは私も少しでも個性を出そうと、Simplicityに準備されているシェアボタンのバイラルタイプに変更しました。

しかし、表示が上手くないんです。

大きすぎるし、改行位置がなんだかイケてない!

ってことで、今回はSimplicityに最初からあるバイラルタイプのシェアボタンを 横一列 にカスタマイズしてみたので、その方法を紹介します。

スポンサーリンク

バイラルタイプのシェアボタンを 横一列 にする方法

CSSなんてまったくわからない私でも、検索したものを組み合わせると出来るものですね。

今回私は、自動的に今見ているブラウザの横幅に収まるサイズのボタンで横一列にする方法をとっております。

まずは、PCとモバイルのシェアタイプのボタンをバイラルタイプに変更します。

カスタマイズ→SNSです。

バイラルタイプに変更

そしてスタイルシート (style.css)とmobile.cssに下記2つをコピペします。

こちらが横一列に表示させるためのもの。

/*シェアボタン均等割り*/
.sns-group-viral ul {
	  display: flex; 
}

最初は、一つ一つの横幅のサイズを指定して一列に表示しようと思ってんですが上手く行きませんでした。ボタンは小さくなるんだけど、横の空白が詰まっていかなかった。

上記コードは横幅から計算して均等割してくれるコードだそうです。

スタイルシートにコピペ?って方は下記を参照ください。

【wordpress】 コピペで一発 カスタム!ってどこに?が解決

さらに、SNSの文字を消したいので下記も追記します。

/* SNSの名称部分を非表示 */
.icon-hatena::after, .icon-googleplus::after, .icon-facebook::after, .icon-twitter::after, .icon-pocket::after, .icon-line::after, .icon-feedly::after {
    display: none;
}

これで、SNSアイコンに入る文字を表示しなくします。

これでどう変わるのか?

PCのバイラルボタン

変更前がコチラです。

PC変更前

4つか8つじゃないとバランスが悪いですね。

アイキャッチ画像までのスペースもとりすぎてる気がします。

これが気に入りませんでした。まぁ個人の感じ方ですが。

そして変更後がコチラです。

PC変更後

美しい!

そしてシンプルでカッコいい!

スマホのバイラルボタン

スマホの方がもっと変わり映えします。

変更前がコチラです。

スマホ変更前

記事本文に行くまでスペースがありすぎ&偶数じゃなかったら…状態です。

上記コードを追記した変更後はコチラです。

スマホ変更後1

すっきりいい感じですね。

さらにスマホを横向きにして横長画面にした場合はコチラ。

スマホ変更後2

めっちゃイケてます。

最高です。ありがとうございました。

まとめ

気になっていたけど、どうやって変更すればいいかわからなかった問題が解決してスッキリしました。

そして、ブログデザインもよりオリジナル感が出て、記事を書くことに集中して頑張れそうです。

Simplicityが最高なんだけど、シェアボタンでSimplicityってバレるから変更したいな〜って思っている方は、この機会に自分の好きなようにシェアボタンをカスタマイズしてみてはいかがでしょうか。

頑張ってシェアボタンカスタムしてるけど、おめーの記事って全くシェアされてねーじゃねーか!ってのは、言わないで〜(;´∀`)

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
ブログ運営
スポンサーリンク
オススメの記事



イエノナカノヒト

コメント