ガーリーデザインのための画像を使ったCSSテクニック

f:id:syofuso:20170619215704j:plain
最近アメブロカスタマイズのお仕事もご依頼いただくようになってきました。アメブロはサロン経営者の方や女性個人事業主が運営されていることが多く、女性向けの「きれい・かわいい」デザインが求められます。

アメブロカスタマイズの紹介は別記事で改めてさせていただきますが、この記事でははてなブログでも使えるガーリーデザインのための画像を使ったCSSテクニックをご紹介したいと思います。
基本的な内容なので、初心者向けとなります。

ガーリーデザインの画像素材を使おう
こどみすさんの新テーマ「Minimalism」をガーリーにカスタマイズ！
background-imageプロパティを使う
::before疑似要素に画像を指定する

ガーリーデザインの画像素材を使おう

ガーリーデザインのサイトを作るときにはどうしても画像を使うことが多くなります。CSSで全部表現出来たら良いんですが、手描きのかすれた感じとか繊細なニュアンスを出すにはやはり画像を使うしかありません。 ====
幸いネット上にはかわいいデザインの画像素材がたくさんありますし、素材集も充実していますね。
ガーリーデザインの素材についてはコチラ↓の記事をどうぞ。
blog.minimal-green.com

今回はこちら↓の素材集から使いました。

Girly Style with GOLD オシャレな質感の大人デザイン装飾素材集

posted with カエレバ

ingectar-e ソーテック社 2013-04-27

Amazon

素材はpngとjpegだけですが、とっても繊細なレース素材や、描けそうで描けない手描きのラインがかわいくて見てるだけで気分がアガリます。
↓の素材集はpng/jpegに加えてIllustrator EPSデータもあり、とても使いやすいガーリーデザイン素材集です。

装飾パーツ素材集大人セレブリティー (ijデジタルBOOK)

posted with カエレバ

Power Design インプレス 2012-02-24

Amazon

こどみすさんの新テーマ「Minimalism」をガーリーにカスタマイズ！

hitsuzi.hatenablog.com

id:codomisuさんが新しいテーマを公開されたとのことで、早速使ってみました。元のテーマのシンプルな可愛らしさを活かして、派手すぎない「ミニマム×ガーリーデザイン×エレガント」なデザインを目指しました。大人の女性が使っても恥ずかしくない上品さを保ちながら、ガーリーなゴージャス感を出してみたつもりです。
デザインはこちら↓
f:id:syofuso:20170619215240j:plain
sample-blog.hatenadiary.jp

ミニマムと言うには装飾過多ですが、これでもデコリ過ぎないようにしたつもりですｗ

background-imageプロパティを使う

背景にはレースの壁紙素材を使いました。はてなブログでは背景画像を簡単にアップロード設定する機能があるのでCSSは書かなくて良いのですが、以下はどんなサイトでも使える書き方です。

body { 
background-image: url(画像URL);/* 画像URLを指定 */
background-repeat: repeat;/* 画像を縦横に繰り返す */
background-color:transparent;/* 背景色透明 */
background-attachment: scroll;/* スクロールすると背景画像も動く */
background-position: left top;/* 背景画像の表示開始位置 */
}

基本的にはbackground-imageプロパティで画像URLを指定すればOKです。繰り返しや位置なども設定するにはbackground-repeatプロパティやbackground-positionプロパティで指定しましょう。
詳しくは↓をどうぞ。
www.htmq.com
これでブログやサイト全体の背景画像を設定することができます。

サイドバーリストの点線の仕切り線もbackground-imageプロパティを使っています。
f:id:syofuso:20170619215337j:plain

.hatena-urllist li {
    padding: 8px 0;
    border-bottom: none;/* 元々あったボーダーを消す */
    line-height: 1.5;
    background-image: url(画像URL);/* 画像URLを指定 */
    background-repeat: repeat-x;/* 横方向のみ繰り返す */
    background-position: left bottom;/* 背景画像の表示開始位置 */
}

::before疑似要素に画像を指定する

疑似要素を使えば対象の要素の特定の部分のスタイルを指定することができます。::before疑似要素を使えばHTMLの変更なく対象要素の前にアイコンフォントや画像、文字を挿入することができます。
f:id:syofuso:20170619215351j:plain
サイドバータイトルのリボンモチーフのところは::beforeを使っています。（文字はGoogle Font）
左寄せの場合

.hatena-module-title {
    position: relative;
    padding-left: 50px;
    line-height: 1.4;
    font-size:130%;/* 文字サイズは適宜調整 */
}
.hatena-module-title::before {
    content: url(画像URL);
    position: absolute;
    font-size: 1em;
    left: 0;
    top: -9px;
}

中央寄せの場合

.hatena-module-title {
    height: 60px;
    line-height: 60px;
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 120%;
    position: relative;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
		
}
.hatena-module-title::before {
    content: url(画像URL);
    position: relative;
    top:5px;
    left:5px;
}