▼・ェ・▼にっき。

ゲームをこよなく愛する▼・ェ・▼のメインBlogデス

ソーシャルボタンをお洒落にしたい! - 【 DUDE 編 】

 

 

 

f:id:bless-you:20161026222116j:plain

 

 

オシャレなソーシャルボタンは、「DUDE」の魅力の一つだと思う。

鳥さんプカプカ可愛いネー ((( *´꒳`* ))) ポワワーン

 

 

 

 

さてさて。

 

 

【 現時点での My ブログ 】

f:id:bless-you:20161026195348j:plain

 

 

プロフィール欄を改造しただけでも、

ちょっと垢抜けた感じになったんじゃないの!?

 

 

ぇ? そーでもない?

 

 

お黙り!! ( ・ὢ・ ) オコッ!

 

 

今日は、ソーシャルボタンをおしゃんてぃーにするよ!

 

 

 今回、いじる場所は

 「ダッシュボード」⇨「デザイン」⇨「カスタマイズ」⇨「モジュールを追加」

 

 

f:id:bless-you:20161026200200j:plain

 

 

モジュールを追加すると、

下の画像のように小窓が開くよ。

 

 

f:id:bless-you:20161026200708j:plain

 

ココで やることは以下。

  • </> HTML の項目を選択
  • タイトルは空欄のままでOK
  • <p>・・・</p> の欄にコードを張り付ける
  • 必要のないボタンは削除する

 

コピペするコードは以下。

*赤文字の分部は、それぞれ自分のものを入力してね。

 

<div class="sidesocial" >
<h4><i class="blogicon-subscribe"></i>FOLLOW ME</h4>

<!--はてな読者登録-->
<span class="hatenafollow socialbtn" >
<a href="http://blog.hatena.ne.jp/はてなID/ブログURL(http://をのぞいた部分)/subscribe" target="_blank">
<i class="blogicon-hatenablog lg"></i></a></span> <!--はてな読者登録ここまで-->

<!--ツイッタフォロー-->
<span class="twitterfollow socialbtn" >
<a href="https://twitter.com/intent/follow?screen_name=ツイッターアカウント名" target="_blank"><i class="blogicon-twitter lg"></i>
</a></span> <!--ツイッタフォローここまで-->

<!--feedlyフォロー-->
<span class="feedly socialbtn" >
<a href="http://feedly.com/i/subscription/feed/ブログURL/feed" target="_blank">
<i class="blogicon-rss lg"></i></a></span> <!--feedlyフォローここまで-->

<!--facebookページ-->
<span class="fbfollow socialbtn" >
<a href="facebookページのURL" target="_blank"><i class=" blogicon-facebook lg"></i>
</a></span> <!--facebookページここまで-->

</div><div style="clear: both;"></div>

 

 

コードを張り付けたら「適用」を押す。

 

f:id:bless-you:20161026164411j:plain

 

 

「変更を保存する」ボタンも忘れずにね!

 

 

ソーシャルボタンの位置を変えたい

 

このままだと、ソーシャルボタン

サイドバーの一番下になっちゃってるんだよね。

 

 

f:id:bless-you:20161026214632j:plain

 

 

だから、見本と同じように、

プロフィール欄の直下まで移動させるよ!

 

 

f:id:bless-you:20161026214737j:plain

 

 

ソーシャルボタンのモジュール欄を

ドラッグしたまま、好きな位置に移動させたらいいよね!

 

 

f:id:bless-you:20161026164411j:plain

 

 

移動させたら、「変更を保存する」ボタン忘れずに!

 

 

不要なソーシャルボタンを削除する

 

▼・ェ・▼ね。

facebookとか空恐ろしいもの登録してないからね。

要らないの。

 

<!--facebookページ-->
<span class="fbfollow socialbtn" >
<a href="facebookページのURL" target="_blank"><i class=" blogicon-facebook lg"></i>
</a></span> <!--facebookページここまで-->

 

この部分消しちゃう! ^p^

 

 

Feedly ってなんぞ??

ちょっとだけ調べてみたら、別に▼・ェ・▼側で登録してなくてもOKぽい。

Feedly 登録してる人が使うボタンだって解釈した!

残しとくことにしたよ!

 

 

Twitterの鳥さんマークの飛ぶ高さを変えたい

 

f:id:bless-you:20161026220942j:plain

 

ちょっと高く飛び過ぎ感が否めなかったので、

もう少し低めに設定し直そうと思うの。

 

 

f:id:bless-you:20161026161619j:plain

 

この設定は、「デザインCSS」でやるよ。

貼り付けるコードは以下。

 

/* Twitterの鳥さんの飛ぶ高さ調整 */
@keyframes bounce { 50% { transform: translateY(-40px); } }


 

高さの調節は、赤文字の分部の数値を変更するのねん。

 

 

f:id:bless-you:20161026222016j:plain

 

 

▼・ェ・▼はね、-20px にしたよ!

 

 

f:id:bless-you:20161026222116j:plain

 

 

ウンウン、イイ感じ!(๑•̀ㅂ•́)و✧

鳥さんプカプカ可愛いねー!((( *´꒳`* ))) ポワワーン

 

 

Twitterの鳥とか、むしろ飛ばなくていい

 

 

こんな人もいるかもしんないよね。 (◞‸◟ㆀ) ショボン

 

 

そうゆう人はね!!

こうだよ!!!

 

 

/* Twitterの鳥は飛ぶな! */
.twitterfollow { animation: none; }

 

 

CSSに貼り付ければいいよね。

 

 

今日の改造は、これでおしまい!

 

 

 

 

゚*。.ღ ⊹⊱  £ονё & βLёss уoц  ⊰⊹ ღ.。*゚

Thank you.

I love you.