素人でもやればできるんだ!SNSボタンの設置をCSSの記述でやってみた。

前回の記事では苦戦しながらもAdSenseの設定を済ませました。そして今回はASPの登録を!と行きたいところですが、ちょっとまだそれはおいといて別の事をします。

何かと言うと、SNSボタンの設置をしたいと思います。

いろいろな方のブログを拝見していると、皆さんスタイリッシュなボタンを配置してますよね。

なんかSNSのボタンがあるだけで凄くブログブログしてますよね。(何言ってんだこいつ)

と言うことで私のブログもブログブログさせたいので、ちゃちゃっと設置してみたいと思います。

さぁて今回はどれだけ時間がかかるかな(^_^;)

スポンサーリンク

1.CSSの記述で設置

SNSボタンの設置はプラグインや公式のコードなどを使えばめちゃくちゃ簡単に設置する事が出来ます。

だがしかし、ブログがちょっとばかし重くなってしまいます。

ネットサーフィンしててページが開くのに時間がかかってイラッとすることありますよね。私の体感だど5秒くらい待たされると別のサイトに行っちゃいますね。

まぁ余程気になる記事だった場合はもうちょい待ちますが…。

なのでブログが重くなるのだけは避けたいです。軽量化できるのなら、多少めんどうでもチャレンジしてみる価値はあります。

こういうチャレンジ精神大事です。

2.コードはどこに貼る?

と、でかい口を叩いてみたものの、いざ貼り方をグーグル先生に聞いてみたが…全く分からない。

出てくるのは、ボタンのおしゃれなデザインのコードであったり、ボタンのカスタマイズのコードであったり…。

肝心のそのコードを記述する場所が出てこない。一体どこに記述すればいいんですかー(*_*;

調べること1時間…。

ようやく分かりました。と言うより、前回のAdSence広告の貼り方でお世話になったサイト『アフィリエイトで稼ぐ方法を全部話そうと思う』様で解説記事を見つけました。

その記事はこちら

ソーシャルボタンを自作してWordPressの高速化

本当にこのサイト様は為になる情報ばかりです。しかもめちゃくちゃ分かりやすい。

それで、解説してあった内容をかいつまんで説明するとこんな感じでした。

SNSボタン自体のコード子テーマのCSSに記述する

SNSボタンを配置するコード子テーマのsns.phpに記述する

配置したい場所にsns.phpを呼び出す

因みに②のsns.phpは自分でファイルを作成します。上記の参考サイトではロリポップでの作成方法だったので、エックスサーバーでの作成方法を載せておきます。

2.1.エックスサーバーでのsns.phpの作り方

まず、エックスサーバーのインフォパネルへ行きます。

ファイルマネージャーへ『ログイン』します。

画面右下のファイル名の文字コードを『UTF-8』にしておきます。そして、ファイル名から『ご自身のサイト』を選択します。

『public html』をクリック。

『themes』をクリック。

『child』をクリック。

画面右下の[作成]から『sns.php』と入力して『ファイル作成』をクリック。

『sns.php』が作成されたら完了です。WordPressの子テーマに反映されているか確認してください。

3.WEBフォントの使い方

コードの貼る場所もわかったので、参考サイトの通りに設置作業を行ってみました。

思いのほかサクサクと進めることが出来ましたが、結果こうなりました。

…。

あれ?

WEBフォントが四角になってる…(´・ω・`)

コードを貼り付ける場所が分かれば簡単じゃーん!と浮かれている時期が僕にもありました。

ここから原因を調べること1時間…。

ぜんっぜんわかんねー!!

時間は深夜をとうに過ぎていたのでいったん寝ることにしました(笑)

3.1.WEBフォントの豆腐化の原因

一晩寝て冷静な頭で思い当たる節を探っているとあることが分かりました。

WEBフォントがこのように四角(豆腐)に表示される時は、コードを読みだしている所にそのWEBフォントがない場合にこの様に表示されるみたいです。

ただ、何度確かめてもWEBフォントは子テーマがある階層にしっかり入っています。

となると考えられるのは、WEBフォントの読出しを行っているコードとなりますが…。

( ゚Д゚)ハッ!

どうやら答えが分かりました。

このコードは子テーマに直接書き込まないといけないところを、私はカスタムCSSへ記述していました。

呼び出しを行うコードはWEBフォントがある場所(子テーマ)に記述しないといけないんです。

まぁ普通に考えればそうですよね(^_^;)

4.SNSボタンの設定結果

コードを子テーマに記述しなおして再度ブログを見てみると。

キタ――(゚∀゚)――!!

しっかりと表示させることができましたよ!!

5.まとめ

今回もかなり手こずりながらもなんとか目的であったSNSボタンの設置を達成する事ができました。

なんでこう毎回苦戦しないといけないんだろう(泣)

この間ブログの更新がお留守になってしまったので、ここからはペースを上げて記事作成に力を入れていかないと。

以上、素人でもやればできるSNSボタンの設置方法でした。

スポンサーリンク

返信を残す

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