WordPress.comのCSSを変更する自分でホストするWordpressサイトの購読ボタン

Question

私はthis instructionを使用して、JavaScriptとWordpress.comページの購読ボタンのように見えるCSSでボタンを作成しました。 [購読]ボタンの代わりに、私はちょうどテキストを使用します。

<?php wp_footer(); ?> 
<style type="text/css" media="screen"> 
#bit, #bit * {} 
#bit { 
     bottom: -300px; 
     font: 13px Helvetica,sans-serif; 
     position: fixed; 
     right: 10px; 
     z-index: 999999; 
     width: 230px; 
    } 
#bit a.bsub { 
     background-color: #464646; 
     background-image: -moz-linear-gradient(center bottom , #3F3F3F, #464646 5px); 
     background: -webkit-gradient(linear, left top, left bottom, from(#3F3F3F), to(#464646)); 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3F3F3F', endColorstr='#464646'); 

     border: 0 none; 
     box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2); 
     color: #CCCCCC; 
     display: block; 
     float: right; 
     font: 13px/28px Helvetica,sans-serif; 
     letter-spacing: normal; 
     outline-style: none; 
     outline-width: 0; 
     overflow: hidden; 
     padding: 0 10px 0 8px; 
     text-decoration: none !important; 
     text-shadow: 0 -1px 0 #444444; 
    } 
#bit a.bsub { 
     border-radius: 2px 2px 0 0; 
    } 
#bit a.bsub span { 
     background-attachment: scroll; 
     background-clip: border-box; 
     background-color: transparent; 
     background-image: url("http://sacriba.bplaced.net/wordpress/wp-content/uploads/2014/07/Favicon_small.png"); 
     background-origin: padding-box; 
     background-position: 2px 3px; 
     background-repeat: no-repeat; 
     background-size: 30% auto; 
     padding-left: 18px; 
    } 
#bit a:hover span, #bit a.bsub.open span { 
     /*background-position: 0 -117px;*/ 
     color: #FFFFFF !important; 
    } 
#bit a.bsub.open { 
     background: none repeat scroll 0 0 #333333; 
    } 
#bitsubscribe { 
     background: none repeat scroll 0 0 #464646; 
     border-radius: 2px 0 0 0; 
     color: #FFFFFF; 
     margin-top: 27px; 
     padding: 15px; 
     width: 200px; 
     float: right; 
     margin-top: 0; 
    } 

div#bitsubscribe.open { 
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); 
    } 

    #bitsubscribe div { 
     overflow: hidden; 
    } 

    #bit h3, #bit #bitsubscribe h3 { 
     color: #fff; 
     font-family: Helvetica,Arial,sans-serif; 
     font-size: 20px; 
     font-weight: 300; 
     margin: 0 0 0.5em !important; 
     text-align: center; 
     text-shadow: 0 1px 0 #333333; 
    } 

#bit #bitsubscribe p { 
     font: 300 15px/1.3em Helvetica,Arial,sans-serif; 
     margin: 0 0 1em; 
     text-shadow: 0 1px 0 #333333; 
    } 

    #bitsubscribe p a { 
     margin: 20px 0 0; 
     color: #FF7A3D; 
     display: block; 
    } 

    #bit #bitsubscribe p.bit-follow-count { 
     font-size: 13px; 
    } 
#bitsubscribe.open { 
     display: block; 
    } 
#bitsubscribe #bsub-credit { 
     border-top: 1px solid #3C3C3C; 
     font: 11px Helvetica,sans-serif; 
     margin: 0 0 -15px; 
     padding: 7px 0; 
     text-align: center; 
    } 
#bitsubscribe #bsub-credit a { 
     background: none repeat scroll 0 0 transparent; 
     color: #AAAAAA; 
     text-decoration: none; 
     text-shadow: 0 1px 0 #262626; 
    } 
#bitsubscribe #bsub-credit a:hover { 
     background: none repeat scroll 0 0 transparent; 
     color: #FFFFFF; 
    } 
</style> 
<script type="text/javascript" charset="utf-8"> 
    jQuery.extend(jQuery.easing, { 
     easeOutCubic: function (x, t, b, c, d) { 
      return c * ((t = t/d - 1) * t * t + 1) + b; 
     } 
    }); 
    jQuery(document).ready(function() { 
     var isopen = false, 
      bitHeight = jQuery('#bitsubscribe').height(); 
     setTimeout(function() { 
      jQuery('#bit').animate({ 
       bottom: '-' + bitHeight - 30 + 'px' 
      }, 200); 
     }, 300); 
     jQuery('#bit a.bsub').click(function() { 
      if (!isopen) { 
       isopen = true; 
       jQuery('#bit a.bsub').addClass('open'); 
       jQuery('#bit #bitsubscribe').addClass('open') 
       jQuery('#bit').stop(); 
       jQuery('#bit').animate({ 
        bottom: '0px' 
       }, { 
        duration: 400, 
        easing: "easeOutCubic" 
       }); 
      } else { 
       isopen = false; 
       jQuery('#bit').stop(); 
       jQuery('#bit').animate({ 
        bottom: '-' + bitHeight - 30 + 'px' 
       }, 200, function() { 
        jQuery('#bit a.bsub').removeClass('open'); 
        jQuery('#bit #bitsubscribe').removeClass('open'); 
       }); 
      } 
     }); 
    }); 
</script> 
<div id="bit" class=""> 
<a class="bsub" href="javascript:void(0)"><span id='bsub-text'>Scroll</span></a> 
<div id="bitsubscribe"> 
<p><a href="#">Raufscrollen</a></p> 
<p><a href="#showcategorylist">Zur Artikelliste</a></p> 
</div> 
</div> 
</body> 
</html> 

テキストは、この（右下）のようになります： sacriba.bplaced.net

1. なぜオレンジ色のテキストが整列され、左

   私は、CSSコードを修正するためのサポートを探していますか？マージンやパディングの値が原因だと思われますが、それらを特定することはできません。

2. テキストを中央揃え（灰色の領域内）に変更するにはどうすればよいですか？
3. CSSは私の目的のためにむしろ肥大しているようです。それ以上必要とされないセレクタはありますか？

より効率的に読むために、回答の前に質問番号を記載してください。

Answer 1

1と2の回答：のタグには、display：blockとtext-align：centerというプロパティが含まれている必要があります。
3のための答え：#bitsubscriber pを調整して、テキストの大きさを制御します。