ブログノウハウ

記事本文にSNSボタンをカスタマイズ!【Cocoonプラグイン不要】

どうも、まつぼっくりです。

今日はブログ記事内へのSNSボタンのカスタマイズ方法を調べて、やってみたのでにメモします( ・`д・´)

このメモでは完全に自分でプログラムを書いてSNSボタンを追加しているわけではありません。

世の中にはSNSボタンをブログ等で紹介している素晴らしい方々がいます。

ネット上から自分好みのSNSボタンを探して、ブログに追加する方法を自分で見かえすためにまとめたので、参考になれば幸いです。

実はSNSを始めたのも最近です。恥ずかしながら1カ月前までInstagram、Twitterって何?の状態でした(;´・ω・)

そんな私と同じようにプログラムも分からず、ブログを始めて間もない方に読んでもらえたらと思います。

記事の途中にも入れることができるので便利ですよ。

SNSボタンを好きなデザインでレイアウトしたい。

今回は私が使用しているCocoonでのSNSボタンなので、Cocoonを使っている方、ぜひご参考に。

CocoonのSNSボタンデザイン

これはCocoonのデフォルトのSNSボタンデザインです。

私はこれをもっと色味のあるものにしたかったので、SNSボタンのカスタマイズをやることにしました。

実際にレイアウトしたSNSボタン

実際にレイアウトしたSNSボタンデザインですが、カラフルでカーソルを合わせると少し上に動くボタンになっています。

すごいですよね?

私はプログラミングができないので、ネット上で探していたら、すごくわかりやすいカゲオさんのサイトを見つけて、SNSボタンのコードを拝借しました( ・`д・´)

レイアウト方法

しかし、CSS、HTMLの違いも分からないブログ超初心者の私には理解するのも一苦労・・・

そこで自分で分かるように、この記事でまとめとおこうと思います。

まず、ステップは下記2ステップです。

style.cssへのCSSコードの追加:ボタンの色や文字サイズなどの装飾
記事本文へのHTMLコードの追加:文章の構造

style.cssへのCSSの追加

まずはcssの追加からです。

カゲオさんが紹介している「四角いベタ塗りのSNSボタン(文字付き)」を追加する方法です。

① WordPressの画面から、外観→テーマエディターをクリックし、エディター画面を出します。

② 右上の「編集するテーマ」をcocoon childにします。

③ スタイルシートを選択し、style.cssを表示します。
(多分、①のテーマエディターをクリックしたときにデフォルトでCocoon Child:スタイルシート(style.css)が表示されると思いますので、念のため確認してください。)

④ カゲオさんの「四角いベタ塗りのSNSボタン(文字付き)」の記事から、</>style.cssのコードをコピーします。

⑤ Cocoon Child:スタイルシート(style.css)の一番下に貼り付けます。

これで、css(ボタンの装飾)は準備完了!

記事本文へのHTMLの追加

次にHTMLの設定をしていきましょう。

① カゲオさんの「四角いベタ塗りのSNSボタン(文字付き)」の記事から、</>HTMLのコードをコピーします。

② WordPress記事作成の画面でカスタムHTMLで貼り付ける。

③ 貼り付けたコードの~のURLの部分に自分のSNSのURLを貼り付ける。

④ 使ってないSNSは<li><a~~~</li>までの2行を削除する。
例えばpochetは使わない。という方は
<li><a href=”https://getpocket.com/edit?url=https://自分のサイトドメイン名/” class=”flowbtn fl_pk1″><i class=”fab fa-get-pocket”></i><div>Pocket</div></a></li>
の部分を丸ごと削除です。

ちなみにcss側のコードは、残しておいてもHTML側になければ反映されませんので、いつかSNSが増えたときにHTMLを追加すればそのまま使えます。

まとめ

以上で記事本文へのSNSボタンのレイアウトでした。

この記事のように今後も超初心者目線での「ブログノウハウ」を書き留めていきますので、みなさんの参考になれば幸いです(^_^)

では!( ・`д・´)

お時間あればSNSもご覧ください。

\ Follow me /
タイトルとURLをコピーしました