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

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

鳥さんプカプカ可愛いﾈｰ ((( *´꒳`* ))) ﾎﾟﾜﾜｰﾝ

さてさて。

【 現時点での My ブログ 】

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

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

ぇ？　そーでもない？

お黙り！！ ( ･ὢ･ ) ｵｺｯ！

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

 今回、いじる場所は

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

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

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

ココで やることは以下。⇩

• </> 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>

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

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

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

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

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

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

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

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

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

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

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

▼・ｪ・▼ね。

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の鳥さんマークの飛ぶ高さを変えたい

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

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

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

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

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

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

▼・ｪ・▼はね、-20px にしたよ！

ｳﾝｳﾝ、イイ感じ！(๑•̀ㅂ•́)و✧

鳥さんプカプカ可愛いねー！((( *´꒳`* ))) ﾎﾟﾜﾜｰﾝ

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

こんな人もいるかもしんないよね。 (◞‸◟ㆀ) ｼｮﾎﾞﾝ

そうゆう人はね！！

こうだよ！！！

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

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

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

ﾟ*｡．ღ ⊹⊱  ￡ονё & βＬёｓｓ уｏц  ⊰⊹ ღ．｡*ﾟ

Thank you.

I love you.