りゅんた(@RyunNote)です(・ω・)ノ
記憶に残らないほど前に、当ブログは問い合わせページを設置致しました。
それから・・・はや・・・１年（当サイトは開設日”2013/08/07”）
質問全然来ませんでした！wwwwwwww
ははっ笑うしかないよねw
っともう問い合わせページの存在を忘れかけていた今日この頃。質問が届きました！！
２件問い合わせがあったのですが、今回は１つめ。以下は問い合わせ内容そのまま＋回答になっているか分からない回答です。
スポンサーリンク
りゅんたに来た問い合わせ
〜略〜
記事タイトル部分が吹き出しになっていますよね?
見出し１の部分です。
その部分の変更で悩んでいるのですがもしよろしければ教えていただけませんでしょうか?
どうぞよろしくお願いします(*^^*)
（by Mちゃん）
ふむふむなるほど。見出しデザインに悩んでいるってことで大丈夫なのでしょうか？w
確かに悩みますよねぇ〜c⌒っﾟДﾟ)っあんまり周りと被りたくないし、個性的なデザインにしたいしね〜♬
今日はMちゃんのお悩みを解決しようではありませんか！
最近Webデザインの勉強もちょこちょこ始めたので、それらも交えて話して行きたいと思います。
スポンサーリンク
見出しのみに特化して話すなら簡単で
[R]もはやCSSの知識不要？３分でオリジナル見出しができる”CSS見出しジェネレータ”が便利+おまけ
こちらの記事を読んだことがあるでしょうか？僕が大分前に書いた記事なので、存在すら忘れられているかも知れません・・・（検索順位も落ちたし・・・）
ネットというものは非常に便利でして、超簡単に見出しを作成できてしまうツール（ジェネレーター）が数多く存在します。
もちろんタイトルのみでなく、h2,h3・・・などあらゆる場面に合った見出しが作成できます。
Ryun's Web Noteの見出しはどうなっている？
アイキャッチ画像でも使用していますが、Ryun's Web Noteのタイトルは吹き出しのようなデザインになっていますよね？
凝っているようにも見える方もいるかも知れませんが、その期待を裏切り、デザインはコピペデスc⌒っﾟДﾟ)っ
ただそのまま使用している訳ではなく、大元はコピペ、それを若干ではありますがカスタマイズしています。
その魅力的なデザインサイトを紹介しましょう。
H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
この記事の５の”アメリカンな（？）吹き出し”を大元としています。カスタマイズといっても斜線を消して、陰を若干変えたっけかなぁ？wそのぐらいの変更点です。
ジェネレーターを使用しても気に入ったデザインを作れなかった場合は、参考にするのも手ですね♬
同じサイト記事
アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン / SQUEEZE - Web Design Studio -
こちらを参考にしてもいいかも知れません。
ジェネレーター＋紹介した記事で十分魅力的なデザインが作成できるはずです。
いい答えになったでしょうかw？案外僕がやっていることは簡単なことなんですよw
さてここからは僕がちょこっと勉強した話。
スポンサーリンク
Webデザインの基礎
Webデザインをするのは難しくて、初心者が作ると当ブログみたいなデザインになってしまいますw
それをちょっとでもカッコいい感じに見せる方法があります。
デザインするときは”なぜそのデザインにしたのか説明できるように”
呆然とコピペしてもいいデザインはできません。◀︎自分に言ってますww
デザインする際は、なぜそのデザインにしたのかを明確化することで、レイアウトや配色がしやすくなります。
ターゲットは誰？万人受けは無理だよ？
photo credit: loungerie via photopin cc
残念なことに万人受けのいいデザインなんてありません。誰かが「いいデザインですね」っと言えば「なにこのデザイン。ださくてマジないわ〜。うちがデザインした方がもっといいもんできるっつうの」っていう人もいます。
より受けのいいデザインにするには、あなたが”誰に対してのブログを書いているか”を明確化にすることです。
映画が好きな人？車が好きな人？音楽が好きな人？パソコンが好きな人？男？女？
ターゲットを絞ることでちょっと配色がし易くなります。
例えば
- 映画好きな人のためのサイト▶︎映画館のような配色がいいなぁ
- 車が好きな人のために▶︎フェラーリみたいな黄色い色に赤とか？
- 音楽好きな人のために▶︎白を基本にピンクなど明るい色
- パソコンが好きな人のために▶︎角張ったデザイン（ロボットを想像w）でグレーかな
- 男向け▶︎グレー・黒、黄色・赤・緑（レゲエチック）
- 女向け▶︎ピンクやオレンジ、柔らかい配色
こんな感じですかねぇ( ๑*╹౪╹)(╹౪╹*๑)ﾈｰ
配色の仕方
結構難しいお話なのですが、配色はバラバラに組むと見づらいブログになってしまいます・・・
しかしちょっとした工夫で見やすい配色になりますよ♬
似た色の配色を使う
明るい系色、暗い系色、薄い系色、濃い系色などなど。
色もジャンルに分かれると思うのですが、似た色同士を使用するのが最も簡単かと思われます。
Ryun's Web Noteではグレーと黒と茶色、ワンポイントで青などを使用していますが、見やすいでしょうかw？僕は気に入った配色なんですけどね(￢ω￢;A)
スポンサーリンク
見やすいブログを目指すならルールを作ろう！
photo credit: funkandjazz via photopin cc
規則正しいブログ記事は見ていてかなり読み易いです。
僕も多少はルールを決めて書いているのですが、たまに気分が変わって変えちゃうんですよねw
以下は僕が意識しているルールです。
画像サイズは横長め
これは僕の完全なる好み。縦長の画像や写真があまり好きじゃないんです。なぜかは分からないんだけど・・・なんでだろう・・・
しょうがない場合を除き、ほとんどの画像は横長のものを使用しています。
見出し前は１行空行
cssで指定すればいいやん！ってかStinger使ってるなら指定されているやんw
これも完全なる好みです。ちょっと多めに改行を入れることでまとまり感がでるかなぁっと。
画像や引用の著作表示は右揃え
本文に関係ないような表示物は右揃えにしちゃっています。
区別がつかなくなってもしょうがないしね(￢ω￢;A)
あ、案外僕が意識しているルールって少ないんですねww
これぐらいの意識ですが、読んでいる方々はどうでしょうか？
レイアウト的なルールで言うと、”まとまりは他と区別させる”というのみです。
残念ながらStingerはまとまり感があまりありません。
それを当ブログはカスタマイズして、トップページを見ても各記事は１記事１記事はっきり区別化してますし、サイドバーも同じように区別化してあります。
改訂版を書こう書こうと思っているけど書いてませんが・・・一応
参考ー[R]【Stinger3カスタマイズ】棒線を加えて記事と記事を区別化しよう！
スポンサーリンク
りゅんた的ℜoundUp
なんか今回の記事は僕の殴り書きみたいになってしまって申し訳ないです(￢ω￢;A)
ブログ環境をちょっと変えないとなぁ〜（；￣Д￣）