賢威のコンテンツエリアをカスタマイズする

公開日: 2014年02月03日
最終更新日: 2014年02月16日

コンテンツエリア

今回は、inosh blogに使用しているテーマ「賢威」のコンテンツ部分をカスタマイズしていく様子をご紹介します。全体背景の指定、コンテンツ部分の見出しのカスタマイズ、コメント送信のボタンのカスタマイズなど。

もくじ

はじめに

今回は、賢威のコンテンツエリアをカスタマイズしたいと思います。

現在のコンテンツエリアはこのような状態↓
賢威のコンテンツエリア

それでは、カスタマイズスタートです。

背景画像を指定する

inosh blogのテーマカラーは前々回の記事(ブログのテーマカラーを決める)で、以下のように決めました。

inosh blogのテーマカラー

ということで、背景色を#f2f2f2に近い形にしたいと思います。

ただ一色で塗りつぶすのも面白くないな~ということで、どうしようかな~と悩んでいたのですが、みんな大好きLIGさんのブログで2014年流行の兆し!ポリゴンスタイル・ローポリイラストのデザイン作成方法・参考サイト集という記事がありましたので、試しにポリゴンスタイルを取り入れてみようと思いました。

背景画像にするローポリイラストは、LIGさんでも紹介されているようにtriangulatorを使って原型を作り、後はInkscapeを使って微調整しました。(イラストレーターは、持っているのですが訳ありで現在使っていません…)

triangulatorって何?って方は、こちらをご覧ください↓

なんかこんな感じで、簡単にローポリイラストを作ることが出来ます(ざっくり)。

ポリゴンスタイルやtriangulatorについてもっと知りたい方は、みんな大好きWebクリエイターボックスさんの静かに流行り始めているポリゴン風デザインに挑戦!も併せて読むと、大変勉強になると思います。

ということで、ポリゴンスタイル風の背景画像を用意し、以下のようにCSSを記述しました。

mystyle.css

    #main {
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/bg.png) repeat;
    background-size:50%;
}

すると、このように背景画像が敷かれます↓
コンテンツエリアと背景画像

次は、見出し部分のスタイルを調整していきたいと思います。

見出しのスタイル定義

見出し部分のスタイルは、mystyle.cssに以下のように記述しました。

mystyle.css

/* 記事タイトル */
#main-contents h2.post-title {
    color:#333;
    font-size:23px;
    font-weight:bold;
    line-height:120%;
    padding:0 0 15px 0;
    margin:10px 0 20px 0;
    border-top:none;
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/h2_bg.png) left bottom repeat-x;
}

/* 中見出し */
#main-contents h3 {
    color:#555;
    font-size:22px;
    padding-left:15px;
    border:none; padding:2px;
    border-left:6px solid #e41858;
}

/* コメントの見出し */
#main-contents #respond h3 {
    color:#fff;
    position:relative;
    margin:0 -10px 40px;
    padding:10px 0 10px 55px;
    border-left:none;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    background:url(http://inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/comment_b.png) 12px 15px no-repeat #222;
    background-size:34px 22px;
}

/* コメントの見出しの吹き出し部分 */
#main-contents #respond h3:after {
    position:absolute;
    bottom:-15px;
    left:35px;
    z-index:2;
    border-top:15px solid #222;
    border-left:15px solid transparent;
    border-right:15px solid transparent;
    border-bottom:0;
    content:"";
}

すると、記事タイトルと中見出しはこのような形に。
見出しのスタイル

コメント部分の見出しは以下のように変化しました。
賢威デフォルトのコメント見出し

下矢印

カスタマイズ後のコメント見出し

次は、「コメントを送信」ボタン部分のスタイルを調整していきたいと思います。

コメントを送信ボタンのスタイル定義

コメントを送信ボタン部分のスタイルは、mystyle.cssに以下のように記述しました。

mystyle.css

#respond form #submit {
    color:#fff;
    padding:11px 24px 11px;
    background:#222;
    border:none;
}

/* マウスオーバー時 */
#respond form #submit:hover {
    background:#e41858;
}

/* クリック時 */
#respond form #submit:focus {
    background-color: #c00040 !important;/* 賢威のデフォルトCSSで!importantの記述がされているため、!importantでさらに上書き */
}

すると以下のように変わりました。

カスタマイズ後のコメント見出し → カスタマイズ後のコメント見出し

これにより、コメント部分の全体イメージは以下のように変化しました。
賢威デフォルトのコメント部分全体

下矢印

カスタマイズ後のコメント部分全体

とりあえず、今回はこれでコンテンツエリアのカスタマイズを終了します。

右下に固定表示されている「このページの先頭へ」というページトップへ戻るボタンに関しては、後日カスタマイズしようと思います。

ある意味、賢威っぽさをなくしてオリジナリティを出すためには、1番変更しないといけないところだと思いますので、ここには少しこだわりたいと思っています。

\(^o^)/ ぼっけぇシェア \(^o^)/

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む