スポンサーリンク

【simplicity】オリジナルSNSボタン作成手順

こんにちわ!simplicityブロガーマコト(@oshasma)です。

ブログデザインをいじるのは楽しいですよね!僕もちょこちょこイジっています。

サイドバー横にはTwitterとfeedlyのボタンを設置していたのですが、どうもfeedlyのボタンデザインが気に入っていませんでした。

「気に入らないなら作ってしまえ!」と安易な考えでhtmlやcssはど素人の僕が、頑張ってみました。

なんとか完成したので、その手順をご紹介したいと思います。

コードも記載しておきますので、気に入った方がいらっしゃったらご自由にお使いください。

デザイン

デザインはサルワカさんのブログを参考にさせていただきました。

コードも記載さていますので、あとは自分の好みにあわせて組み合わせていきました。

こだわったポイントは主にボタンにホバーした時です。

  1. 少し浮き上がる
  2. 背景色及び文字色を変える
  3. ボックスシャドウの色を変える

これでホバーしているんだぞと強調できたと思っています。

コード

それでは実際に僕が書き込んでいるコードをご紹介します

html

<div id="side_sns">
<a class="sns-button fl_tw2" href="○○○○(Twitterのソースコード)">
<i class="fa fa-twitter"></i> Twitter
</a>
</div>
<div id="side_sns">
<a class="sns-button fl_fe2" href="○○○○(feedlyのソースコード)">
<i class="fa fa-rss"></i>Feedly
</a>
</div>

css

.sns-button{/*ボタンの背景*/
  color: #555555;/*文字・アイコン色*/
  border: solid 2px #555;/*線*/
  border-radius: 5px;/*角丸に*/
  display: inline-block;
  height: 40px;/*高さ*/
  width: 220px;/*幅*/
  margin-left: 40px;
  margin-right: 40px;
  text-align: center;/*中身を中央寄せ*/
  font-size: 13px;/*文字のサイズ*/
  line-height: 40px;/*高さと合わせる*/
  vertical-align: middle;/*垂直中央寄せ*/
  background: #FFF;
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}

.fl_tw2 .fa-twitter {
    text-shadow: 0px 0px 0px #4287d6;
    font-size: 15px;
}

.fl_tw2 span {/*テキスト*/
  display:inline-block;
}

.fl_tw2:hover {
    background: #55acee;
    border: solid 2px #55acee;
    color: white !important;
    transform: translateY(-5px);
    box-shadow: 0px 5px 5px rgba(85, 172, 238, 0.5);
}

.fl_fe2 .fa-rss {
    text-shadow: 0px 0px 0px #4287d6;
    font-size: 15px;
}

.fl_fe2 span {/*テキスト*/
  display:inline-block;
}

.fl_fe2:hover {
    background: #6cc655;
    border: solid 2px #6cc655;
    color: white !important;
    transform: translateY(-5px);
    box-shadow: 0px 5px 5px rgba(108,198,85,0.5);
}

記載場所

コードが完成したので、次は記載場所です。

html

htmlはウィジェットで記載しました。

ダッッシュボード>外観>ウィジェットからカスタムhtmlのボックスを選択し、サイドバーウィジェットに持っていきます。

カスタムhtmlの「内容」にhtmlを記載してください。

css

意外と手間取ったのがcssの記載場所でした。

普段cssをいじる時は、ダッシュボード>外観>テーマの編集からsimplicity子テーマのスタイルシート(style.css)をいじれば反映されるのですが、今回その場所に書き込んでもうまく反映されませんでした。

というわけで、cssはダッシュボード>外観>cssの編集に書き込みました。これでうまく表示されるはずです。

まとめ

自己満足の世界ですが、なかなかいいものを作れたと思っています。

その他のSNSボタンもhtmlとcssに少し手を加えれば簡単に作成できるはずです。

最初にも書きましたが、僕はhtmlやcssに関してはど素人です。

しかし、一通り本や参考書は読んだことがあるので、そういった本を読んだことがない方は一読することをオススメします!

以上、『【simplicity】オリジナルSNSボタン作成手順』でした。

つづく

【僕が読んだ本】

スポンサーリンク

★ 記事がお役に立ったらシェアお願いします ★

Milliard