オシャレなソーシャルボタンは、「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に貼り付ければいいよね。
今日の改造は、これでおしまい!
゚*。.ღ ⊹⊱ £ονё & βLёss уoц ⊰⊹ ღ.。*゚
Thank you.
I love you.