Stinger3 の single.php で使われている style.css をカスタマイズ

公開日: : ブログ , ,

デフォルトの状態でも読みやすいと感じる Stinger3 ですが、このブログはプログラムのソースコードを貼り付けることが多いので「少し文字サイズを小さくしたほうが全体のバランスがいいかな」と常々思っていまして。

休日なのにまとまった時間が出来たので CSS をいじってみました。

single.php で使われている .kizi クラス内のスタイルについて手を加えました。

icatch-blog-customize_mini

photo credit: Adam Foster | Codefor via photopin cc

目次

カスタマイズした項目は以下の通りです。
いろいろいじったように見えますが、項目が多いだけで大したことはしてないです。

ちなみに、このブログで使っている Stinger3 のバージョンは “ver20131217″ です。

1. 記事内の p タグと ul, ol タグを修正

手始めに記事内の p タグと ul, ol タグをいじりました。

記事(=ブログの本文)は、<div class="kizi"> で囲われていますので、この kizi クラスを指定してカスタマイズします。
このようにすると、サイドバーなどの記事以外の部分に対する変更を防ぐことができます。

さて、style.css に追加した内容は次の通りです。

/* 記事内の p タグ */
.kizi p {
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 20px;
    margin-top: 20px;
}
 
/* 記事内の ul, ol タグ */
.kizi ol li {
    font-size: 14px;
    line-height: 25px;
    list-style-type: decimal;
}

.kizi ul li {
    font-size: 14px;
    line-height: 25px;
}

.post .kizi ul {
    list-style-type: disc;
    padding-top: 0px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 40px;
}

Github に style.css を登録してあります。
こちらも参考にしてみてください。

2. photo-credit 用の class を追加

このブログにもアイキャッチ画像を付けるようにしています。
テキストだけよりも、やっぱり画像があったほうが見た目がいいですからね。

アイキャッチ画像は次のサイトのものをよく使っています。

このサイトから拝借した画像はクレジットを付ける必要があって、そのクレジット用のスタイルを追加しました。

/* 記事内にある写真のクレジット */
.kizi p.photo-credit {
    font-size: 13px;
    text-align: right;
}

Github に style.css を登録してあります。
こちらも参考にしてみてください。

3. h2,h3 タグのスタイルを修正

見出しタグである h2h3 をいじりました。

ブログの見た目が平面的な感じがしていたので、ちょっと表情を付けるイメージで h2h3 タグにアイコンを付けました。

アイコン画像は次のサイトのものを拝借しました。

かわいらしいアイコンが300種類も揃っていて、かつ、フリーです。
ありがたく使わせてもらいました。ありがとうございます!

で、スタイルは次のように修正しました。

.kizi h2 {
    font-size: 24px;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 45px;
    border-left: 10px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    color: #333;
    background-color: #f8f8f8;
    line-height: 40px;
    background-image: url(images/icon-right-arrow-01.png);
    background-repeat: no-repeat;
    background-position: 1% center;
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: -40px;
}
.kizi h3 {
font-size: 20px;
margin-bottom: 30px;
    padding-top: 15px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 45px;
    color: #000000;
    background-color: #f8f8f8;
    line-height: 30px;
    background-image: url(images/icon-right-arrow-02.png);
    background-repeat: no-repeat;
    background-position: 1% center;
    margin-left: 0px;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #999999;
}

Github に style.css を登録してあります。
こちらも参考にしてみてください。

4. #main の背景色を #f8f8f8 に変更

これは苦肉の策というか、「とりあえず」対応です。

上記で設定したアイコン画像なんですが、透過にできず背景色が付いたままなんです。

なので、背景色が白地だとアイコン画像の背景が浮き出てしまってカッコ悪いので、記事全体の背景色を同じような色にして誤魔化してしまえ、という理由でこのようにしてあります。

#wrap #wrap-in #main {
    float: left;
    width: 550px;
    padding-right: 39px;
    padding-left: 39px;
    padding-top: 20px;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    border-radius: 4px 4px 4px 4px;
    padding-bottom: 20px;
}

Github に style.css を登録してあります。
こちらも参考にしてみてください。

5. 記事内の画像に枠線を付ける

記事内のアイキャッチ画像や、自分でアップロードした画像を目立たせるために枠線を付けました。

カッコいい写真の枠線の付け方は検索すればいろいろ出てきますが、そこだけ浮いてしまうのでシンプルにしておきました。

/* 記事内にある画像 */
.kizi p a img {
    border: 1px solid #1a1a1a;
}

Github に style.css を登録してあります。
こちらも参考にしてみてください。

6. 記事内の h4 タグを修正

h4 タグは恐らく2箇所でしか使っていないはずですが、バランスが悪かったので修正しました。

/* 記事内にある h4 タグ */
.post .kizi h4 {
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 10px;
    background-color: #f8f8f8;
    line-height: 28px;
}

Github に style.css を登録してあります。
こちらも参考にしてみてください。

7. 記事内の code タグを追加

ソースコードのキーワードを code タグで囲む癖が付いていて、せっかくタグが付いているのだからちょっと目立たせたいってことでスタイルを追加しました。

/* 記事内にある code タグ */
.kizi p code {
    margin: 0 2px;
    padding: 0px 5px;
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 3px;
    font-size: 14px;
    font-family: Consolas, "Liberation Mono", Courier, monospace;
}

Github に style.css を登録してあります。
こちらも参考にしてみてください。

8. まとめ

段落の間を広げたことが最も読みやすさに繋がった感じがしています。

何だかカスタマイズ前よりも地味な印象になってしまいましたが、今後の課題としておきます。

とりあえず、設定したアイコン画像を透過にしなくては。。。

このブログで使っている Stinger3 のテーマを Github に登録しました

作業前にバックアップファイルを作るのが面倒だったので Github にテーマファイル一式を登録しました。

元々 Stinger3 はフリーで配布されていますし、隠し持っておくよりも管理のし易さを優先しました。

よかったら参考にしてみてください。

10. その他の ブログ に関する記事

その他の ブログ に関する記事は次の通りです。
気になる記事があったらぜひチェックしてみてください!

Googleアドセンス用(PC)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

icatch-pocket

Stinger3 に Pocket ボタンを設置しました

「あとで読む」系のサービスのひとつである Pocket。 ボクも Pocket を使っていまして、通

記事を読む

icatch-feedly-buttom

Stinger3 に Feedly ボタンを設置しました

Google Reader が終了してしまってから RSS フィードの購読に使っている Feedly

記事を読む

icatch-money-93206_640

9円!!

このブログに設置してある Google Adsense の見積もり収益額を確認すると、現時点での今月

記事を読む

icatch-measure_4153762400_mini-thumbnail

GTMatrix の診断結果でF判定になった項目の対策まとめ

ブログを運営している誰もが取り組む「ブログ表示の高速化」。 優先度が低かったので測定すらしていませ

記事を読む

2014-04-07-icatch

ブログを本格的に始めて3ヶ月経って分かったこと

tomoyamkung のブログ を2014年1月から本格的に始めました。 それから3ヶ月が経ちま

記事を読む

icatch-seeking_mini

Stinger3 の追尾式 SNS ボタンを削除する方法

Stinger3 ではデフォルトで画面左下に追尾式の SNS ボタンが表示されます。 これはこれであ

記事を読む

Googleアドセンス用(PC)

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


二 + = 11

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Googleアドセンス用(PC)

icatch-jersey_multi_pathparams
Jerseyの@PathParamはスラッシュの間に複数指定できる

http://hoge-api/user/{id}.{format}

icatch-vagrant_box_customize
VagrantのBoxファイルをカスタマイズして独自のBoxファイルを作成する

配布されている Vagrant の Box ファイルを使って検証環境を

icatch-2015-006-1
バリデーションチェックにJava8のOptionalを使ってスマートに書く(自分比)

Web アプリのバリデーションチェックにアノテーションを使うことが増え

icatch-2015-005-1
ユニットテストの偏りを防ぐ命名規則の付け方

ユニットテスト名に以下の命名規則を付けるようにして二ヶ月ぐらい経った。

icatch-2015-004-1
Vagrantで起動したCentOS上のOctopressをホストOSから確認する設定

タイトルの通りだが、Vagrant を使って起動した CentOS に

→もっと見る

PAGE TOP ↑