STINGER3のスタイルシートを変更してみた | ミンキームーンネットワーク

STINGER3のスタイルシートを変更してみた

サーバー

wordpressのテーマをSTINGER3に変更してみたところ、非常に良い感じです

以前使っていたテーマは海外製ばかりだったので、日本語のレイアウトにきちんと対応していることも大きなメリットかな

 

しばらくはデフォルトで使っていたのだけれど、初めてスタイルシートに手を加えてみました

(私は1995年からインターネットに関わっているのに、2013年も終わろうという今になってというのもお粗末な話ですがw)

きっと今後バージョンアップした時にどこを更新したのか分からなくなるのでデフォルトから更新した個所を自分用のメモ

いろいろなサイトからつまみ食いしたので具体的なサイト名を表記できずすみません・・・

 

feedlyの購読者を表示させるボタンも追加しました

(参考サイト:http://ushigyu.net/2013/08/20/feedly-button-with-subscribers-number/)

 

styleseet.css

h2 {
font-size: 24px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 35px;
border-left-width: 5px;
border-left-style: double;
border-left-color: #1e90ff;
color: #333;
border-bottom: 2px solid #1e90ff;
line-height: 30px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: -40px;
}

 

.motto a {
color: #FFF;
text-decoration: none;
background-color: #f3f3f3;
/* width: 90px; */
width: 90%;
color: #666666;
text-align: center;
display: block;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
font-weight: normal;
-webkit-transition: color linear 0.3s;
-moz-transition: color linear 0.3s;
-o-transition: color linear 0.3s;
}

* {
font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif;
}

.entry-title {
border-bottom: dotted 7px #b0c4de;
padding: 0px 5px 8px;
}

p {
font-size: 17px;
line-height: 30px;
}

/* 購読者数つきFeedlyボタン */
#feedly-followers {
display: block;
}
/* 購読者数の表示部分 */
#feedly-count {
margin-bottom: 6px;
width: 62px; ←カウンタの幅
height: 31px; ←カウンタの高さ
background-color: #FFF;
position: relative;
border: 1px solid #669966;
border-radius: 4px;
padding: 0 4px;
font-family: Arial;
font-size: 16px;
line-height: 31px;
text-align: center;
display: block;
background: white;
}
/* 購読者数吹き出し部分 */
.fdly-count:after,
.fdly-count:before {
border: solid transparent;
content: ‘ ‘;
right: 43%;
position: absolute;
}
.fdly-count:before {
border-width: 5px;
border-top-color: #B0C1D8;
top: 32px;
}
.fdly-count:after {
border-width: 5px;
border-top-color: #FFF;
top: 30px;
}

 

sidebar.php

feedlyの購読ボタンを追加

 

functions.php

URLは日本語が好き。post-xxxだと一目でわからないし・・・ というわけで、18行目から以下の行を削除(コメントアウトの方が安全)

//WordPress の投稿スラッグを自動的に生成する

function auto_post_slug( $slug, $post_ID, $post_status, $post_type ) {
    if ( preg_match( '/(%[0-9a-f]{2})+/', $slug ) ) {
        $slug = utf8_uri_encode( $post_type ) . '-' . $post_ID;
    }
    return $slug;
}
add_filter( 'wp_unique_post_slug', 'auto_post_slug', 10, 4  );

sns.php

<li>
<?php
/**
* FeedlyのブログRSS購読者数(フォロワー数)を取得・表示
*/

// 値がない、もしくは古いときはデータベースへ一時保存
if ( false === ( $subscribers = get_transient( ‘feedly_subscribers’ ) ) ) :
// RSS feed のURLをエンコード
$feed_url = rawurlencode( get_bloginfo( ‘rss2_url’ ) );
// 購読情報をJsonで取得して購読者数だけ頂く
$subscribers = wp_remote_get( “http://cloud.feedly.com/v3/feeds/feed%2F$feed_url” );
$subscribers = json_decode( $subscribers[‘body’] );
$subscribers = $subscribers->subscribers;

// データベースへ購読者数を一時保存する。60 * 60 * 12 = 半日。お好きに値は変えましょう
set_transient( ‘feedly_subscribers’, $subscribers, 60 * 60 * 12 );
endif;
?>
<div id=”feedly-followers”>
<span id=”feedly-count” class=”fdly-count”><?php echo $subscribers; ?></span>
<a href=’http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fushigyu.net%2Ffeed%2F’ target=’_blank’><img id=’feedlyFollow’ src=’http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-medium_2x.png’ alt=’follow us in feedly’ width=’71’ height=’28’></a>
</div>
</li>

コメント