どうもUGです。

音楽と同じくくらい日々勉強しているのが

ブログ!Wordpressです。

CSSとかHTMLという言葉を聞くと

めまいを起こしていた私がよくここまで

頑張っているのだと思います(誰か褒めてw)

 

さて、今日は私が使っているWordpressのテーマ

賢威でソーシャルボタンをカスタマイズしようとすると

なぜかカラム落ちが発生してしまいました。

その原因を調べて原因がわかったので書いてみたいと思います。

カラム落ちとは?

一言で言えばデザインの崩壊です。

私の場合はこんな感じになりました。

投稿ページではこう表示されるはずが、

こんな感じになり、どこへ行ったかというと、

なぜか、こんなところに…

これがカラム落ちというやつです。

はじめて経験しましたが、

ホント焦ります…

では、どうしてこうなったのかというと

タイトルに書いたとおり

ソーシャルボタンの変更が原因でした。





ソーシャルボタン

賢威のソーシャルボタンはとても小さく、あまり見栄えのするものではありません。

それを他のブロガーさんが使っている

大きいボタンにしたいと思いました。

こっちの方が絶対かっこいいw

 

ソーシャルボタンの変更

ダッシュボード⇒賢威の設定⇒SNSの設定で投稿ページのソーシャルボタンのチェックを外します。

これでソーシャルボタンが表示されます。

 

 

次に

外観⇒テーマの編集⇒social-button2.php

元にあったデータをすべて削除して、

次のコードをコピペします。

投稿ページを確認して

SNS文字で縦に並んでいたらOKです。

注意スべきは

「$twitter_account = ‘yuukivp(あなたのアカウント)’;」ということ

上記のコードは私のあツイッターアカウントです。

 

次にbaseCSSの最後の段にこのコードを打ち込むか

カスタムCSSプラグインを導入して、そちらにコピペしてもOKです。

Csutom CSSはbase CSSを触らなくてもいいので、

ちょっとCSSいじるの怖いなーという人には安心なプラグインです。

私も上記のコードはCustom CSSに打ち込んでいます。

これでソーシャルボタンを大きくできます。

次にSNS Count Cacheプラグインを導入します。

SNS Count Cacheは、SNSでシェアされた数を表示するためにのものです。

SNS Count Cacheを導入することでボタンのとなりに数値が現れます。

目指せ4桁w

まだまだ道は遠いw

 

さてカラム落ちの原因はなんだったのか?というと

本来は

 

上記が正しいコードですが

ソーシャルボタンのカスタマイズについて説明している

個人サイトのコードをコピペさせてもらったのですが、

その方のコードには

<div class=”sns-wrap”>

が入っていませんでした。

しかし、コードの意味もわからない私がここが原因だと気づくわけもなく

一晩夢の中で悩んでおりましたが

他の方のコードを見比べたときに、

<div class=”sns-wrap”>

を見つけ

試しにやってみたら上手くいきました。

ひょっとしたら、

<div class=”sns-wrap”>が

なくてもいけるのかもしれませんが、

私のブログではそこが原因でした。





さいごに

ソーシャルボタンのカスタマイズ方法にかぎらずサイトのデザインで

大切なのはコードの正確さを改めて学びました。

私と同じように悩んでいる人がいたら是非試してみてください。