情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

Stringerは完成度が高い!~ブログ運営記録2016年5月①~

ブログのテーマを「Stringer7」に変更しました。

今まで幾つかテーマを使ってきましたが、ここまで完成度が高いのはあまりないと思います。色々と考えられているし、使いやすいです。

ただ、デフォルトのデザインには不満点が幾つかあったのでCSS(style.css)を変更しました。

1つ目。フォントを変更しました。

* {
    font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Verdana, Arial, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    margin: 0px;
    padding: 0px;
}

2つ目。PREタグやCODEタグに対するスタイルを指定しました。

pre code {
    border: 0 !important;
    color: #fff !important;
    background-color: #000 !important;
}

code {
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
    color: #000 !important;
    border: 1px solid #ddd;
    background-color: #f5f5f5 !important;
    border-radius: 3px;
}

pre {
    border: 1px solid #cccccc !important;
    background-color: #000 !important;
    margin-bottom: 32px;
}

3つ目。PCで表示した際の段落や見出しやリストのフォントサイズを少し大きくしました。

@media only screen and (min-width: 781px) {
(中略)

    p {
        font-size: 18px;
        line-height: 23px;
        margin-bottom: 20px;
    }

(中略)

    .post h3 {
        font-size: 24px;
        line-height: 30px;
    }

(中略)

    .post ul li {
        font-size: 18px;
        line-height: 27px;
    }

    .post ol li {
        font-size: 18px;
        line-height: 27px;
    }

(中略)

}

4つ目。見出しのスタイルを少し変更しました。

.post h3 {
    font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
    margin-top: 10px;
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    color: #1a1a1a;
    line-height: 27px;
    background-repeat: no-repeat;
    background-position: left center;
    margin-left: 0px;
    border-bottom: 10px #b6f0fc solid;
}

それから、「STINGER管理」のページに移動し、設定を変更しました。

  • 「著者情報を表示する」をチェック。←やっぱり止めました。「Simple Author Box」プラグインを使うことにします。
  • 「お知らせをTOPページの一番上に表示する」をチェック。

STINGERの設定

それから、Stringer7には最初からSNSボタンが設置されているので、今まで使っていた「WP Social Bookmarking Light」プラグインを停止しました。

それから、メニューの設定を行いました。

メニューの設定

それから、ヘッダー画像を非表示にしました。

ヘッダー画像の設定

それから、ウィジェットを整理しました。

ウィジェットの設定

それから、サイドバーのデザインを変更しました。「Follow on feedly」ボタンや「Follow on Twitter」ボタンを追加し、ツイートを表示するようにしました。sidebar.phpに下のようなコードを追加しました。

<div class="social-buttons">
    <div class="feedly">
        <a href="http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Finfo-i.net%2Ffeed"  target="_blank">
            <img src="http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-big_2x.png" alt="follow me in feedly">
        </a>
    </div>
    <div class="twitter">
        <a href="https://twitter.com/pizyumi" target="_blank">
            <img src="http://i.imgur.com/Nl7Ex1L.png" alt="Follow me on Twitter" />
        </a>
    </div>
</div>

<a class="twitter-timeline"  href="https://twitter.com/pizyumi" data-widget-id="727455063086518272">@pizyumiさんのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

最後に、これはStinger7とは関係ありませんが、幾つか便利そうなプラグインを導入してみました。

  • Table of Contents Plus・・・記事の目次を自動生成。
  • SiteGuard WP plugin・・・様々なセキュリティ対策。
  • Broken Link Checker・・・リンクが切れていないか定期的にチェック。
  • Better Delete Revision・・・記事のリビジョンを削除。
  • Master Post Advert・・・moreタグの直後にコンテンツを追加。
  • Simple Local Avatars・・・アバターに任意の画像を設定。
  • Simple Author Box・・・記事の著者情報を表示。

ようやくまともなブログになってきた感じがします^^。

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-アクセスアップ, ブログ運営