薔薇のイラストを販売開始しました

2013年06月12日
こんにちは、シュガリーです。
先月西武ドームで開催されていた「国際バラとガーデニングショウ」に行ってきたんです('ω'*
そこでたくさん資料を撮影してきたので、薔薇のイラストを描いてみました。

薔薇のイラストを販売開始しましたレトロな雰囲気がいいなーと思って、彩度下げめのトーンです。

そして、せっかくなのでストックフォトで販売してみることにしましたー('∀'
この薔薇のイラストと、これをベースにしたフレームの素材や背景用のシームレスな壁紙素材を販売中です。
▼PIXTA、fotolia、photolibraryのマイページ
sp_pixta.pngsp_fotolia.pngsp_pl.png

posted by シュガリー at 00:04 | Comment(12) | TrackBack(0) | デザインのこと | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
お忙しい中申し訳ありません!

実は僕のサイトのロゴマークやメニューボタンが設置されてある上の段のHTMLは意味のない空白やテーブル、改行禁止などとっても汚いソースで構成されています(汗
このソースでは<h1>の意味もお飾りだけになって、テーブルレイアウトという最低なレイアウトになってしまっています(汗

これをきれいに直す方法はないでしょうか。
CSSとかもいじってきれいなソースにしたいです(汗

http://pondamiya.seesaa.net/styles-index.css

↑ちなみにこれが僕のサイトのCSSです。

お忙しい中、ホント申し訳ないんですが、よろしく御願いします。

長くなりそうでしたら、メールでご返信よろしく御願いします!
Posted by ポンダ宮 at 2013年06月23日 16:43
いらっしゃいませ!
サイトのソース拝見しました!いつ見てもいろんな事にチャレンジしている素敵なサイトだなーと思います!

ソースをきれいにとのことですね、それはSEO(検索エンジンから人がたくさん来るようにする事)にも効果があるのですごくいいことだと思いますよー('∀'*

ソースをきれいにするには、なるべくページの"内容"だけをHTMLに書き、"レイアウト"の要素はCSSに書くといいですね。
画像のまわりに空白を作ったり、右に寄せたり、サイトのレイアウトに関する事はほとんどcssでできちゃいます。
たとえば現在h1タグ内のレイアウトは空白タグやalignタグで調整されていますが、これは
サイト名とメニューボタンを別のブロックに分けて、それぞれにcssで配置する位置を指定します。

具体的にいうとh1内にサイト名だけを入れ、
メニューボタンのtableにid="header_navi(任意のわかりやすい名前)"などの名前を付け、
cssでh1は横幅何pxで左寄せ、header_naviは幅何pxで右寄せという指示を書くかんじですね。
上下左右の余白もcssで調整できます。


次に脱テーブルについてですが、
SEOの視点で、最近は各タグに適切な内容が入っているかが重要視されているんです。
なので"表"の意味を持つtableタグがあまり使われなくなってきてます。
tableから変わるとすれば"リスト"を意味するliタグですかね。メニューのリストってかんじで。
でもちょっとliタグの書き方が難しいようなら、汎用なdivタグでid="header_navi(任意のわかりやすい名前)"を付けるでもいいと思います。<div id="header_navi">画像タグ画像タグ画像タグ画像タグ画像タグ</div>

具体的なタグとか書いてないですが下手な日本語で伝わりますかね...w
また分からなかったら気軽に聞きにきてください('∀'*
Posted by シュガリー at 2013年06月23日 19:26
お忙しい中、ご回答本当にありがとうございます!

回答ありがとうございます!!!

本当に厚かましい限りなんですが、

<h1>ロゴ画像とリンク</h1><div class="header_navi">
<ul>
<li><a href=""><img src=""></a></li><li><a href=""><img src=""></a></li></ul></div>

として、僕のサイトのようなデザインとほぼ変わらないような感じになるCSSの例を教えて下さらないでしょうか?
数値とかはもちろん僕が調節するのでこうしたらいいよーとかあったら教えてくださいm(_ _)m

Posted by ポンダ宮 at 2013年06月23日 21:37
P.S. <h1>から</div>までが改行されないようにしていただけるとありがたいですm(_ _)m
Posted by ポンダ宮 at 2013年06月23日 21:51
HTMLももうちょっと省略できますよー!

<h1>ロゴ画像とリンク</h1>
<ul class="header_navi">
<li><a href=""><img src=""></a></li>
<li><a href=""><img src=""></a></li>
</ul>
<br clear="all" />

最後のbrはなしでも崩れなければなしでOKです。
CSSは以下のようなかんじです↓

h1 {
float: left; /* 左寄せ */
width: 300px; /* 横幅(ロゴ画像の幅) */
margin-top: 20px;
margin-left: 30px;
}
.header_navi {
float: right; /* 右寄せ */
width: 100px; /* 横幅(ボタン画像の幅を合計したもの) */
margin-top: 20px;
margin-right: 30px;
}
.header_navi li {
width: 50px; /* 横幅(ボタン画像の幅) */
float: left; /* 左寄せ */
list-style: none;
}

こな具合ですー!どぞー!
Posted by シュガリー at 2013年06月24日 16:31
本当に本当にありがとうございました!!!!
シュガリーさんのおっしゃる通りにやってみると、すっごくスッキリとしたHTMLにすることができました!!!
これなら、ちょっとデザインを変えたい時でもCSSをちょこっといじればすみようになりそうです!

今回は本当にありがとうございました!!!!

P.S.当サイトのリンク集に掲載させてもらってもよろしいでしょうか?
Posted by ポンダ宮 at 2013年06月26日 20:19
うまくできたようでよかったですねー('∀'*
リンク集とかすごい嬉しいです!すでに更新が停滞気味になってきてますが...w
貼るも剥がすも自由にしていただいて大丈夫ですー☆
Posted by シュガリー at 2013年06月26日 20:40
なんどもすみません!

この際と思って、僕のサイトのトップページのbody部分のリスト(観葉植物について、植物を楽しむ、植物販売情報)もテーブルレイアウトから脱却すべく、HTMLとCSSを使ってレイアウトしたんですが、
・なぜか、リストの順番がHTMLの記述とま逆になる。
・左側に変な空白ができる。
・ブラウザによって表示が異なってしまう。
というような不具合が出てしまいました...

ちなみにHTMLは

<ul class="topmenu_navi">
<li><a href=""><img src=""></a></li>
<li><a href=""><img src=""></a></li>
</ul>

CSSは
.topmenu_navi {
float: left;
width: 609px;
margin-top: 3px
margin-left: 0px
}
.topmenu_navi li {
width: 203px;
float: left;
list-style: none;

です。

どうしたら不具合が解消するでしょうか...
何度も何度も申し訳ございません!

よろしくお願いいたします。

Posted by ポンダ宮 at 2013年06月28日 01:18
P.S.リストがHTMLの真逆になる現象はいつの間にか治ったようですが依然として、ブラウザによって表示がバラバラです(汗
Posted by ポンダ宮 at 2013年06月28日 01:28
こにちわー!
ブラウザごとの差が気になるときはcssの最初に下記を記入してみてください。

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

これでたぶん変な空白など解消します。

順番が逆になる件は...なんですかね〜
ちょっとだけ記述の間違いがあるのでその影響かもです。
正しくは以下です。

.topmenu_navi {
float: left;
width: 609px;
margin-top: 3px;
margin-left: 0px;
padding: 0px;
}
.topmenu_navi li {
width: 203px;
float: left;
list-style: none;
}

プロパティ最後の;とスタイルを閉じる記号の}が抜けてました。
どうでしょうかー?
Posted by シュガリー at 2013年07月01日 18:27
本当にありがとうございました!!!
シュガリーさんのおっしゃる通り、CSSの;と}が抜けていただけで、綺麗な表示に戻すことができました!!
これからも、調べてもわからないことがあったらぜひとも教えてくださいm(_ _)m。

P.S.遅くなりましたが、僕のサイトのリンク集にシュガリーさんのサイトをリンクしました(。・ω・。)ノ
パソコン関連のリンク集の項目です\( 'ω')/
ぜひご確認ください♪
Posted by ポンダ宮 at 2013年07月02日 20:41
うまくいきましたか!よかったですー('∀'*
ややや!リンクもありがとうございますー!嬉しいです!
これからもどうぞよろしくおねがいしますー☆
Posted by シュガリー at 2013年07月03日 13:02
Name *
Mail
Website

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。