横着者のためのテンプレート

未分類

テンプレートを変えてみました~
IEで見るとただの普通~な感じのデザインなんですけど
Google ChromeFirefoxなどのモダンブラウザで見ると
下の写真のようにちょっとしたアクセントがついてきます
 
え?変わってないって? ちょ、ちょっと変わってるんですよ・・・w
で!なぜシンプルにしたかというとですね、カスタマイズが楽なんですよw
背景画像とタイトル部分以外に画像を使ってないので(現状右メニューの本も)
タイトルの傾き加減とか記事背景のグラデーションの色とかまで数値でOK!
しかも右の画像のように背景画像を変えるだけでも印象変えられるんですよね~
このテンプレートをプレイ中のゲームに合わせて
タイトル部分変えたり、色変えたりすれば1年ぐらいは使い回せるんでない?
って自分が横着するために作ったテンプレートですね~w
まあ、途中で飽きたらまた作り変えますけどね・・・w
(飽きないようにシンプルにしたという話もあり)
それとCSS3を使って見たかったってのもあるんですよね~
仕事だとIEに対応してないデザインってまず作れないので(シェアが5割あるので)
こんな感じどうかな?ってのが出来ても、IEで表示確認すると
「なんだこれ?・・・」って状態になっているので
IE用に直していくと手間がかかるし、出来ないことも多いんですよね~
タイトル傾けるのも、IE9ですらまだ対応してないですからね~
なので仕事だと使えない技をいかんなく使ってみましたって感じですw
IEユーザーの方、ごめんなさい~w

コメント

  1. ねね より:

    シンプルなのが1番カッコイイと思うのだ(・ω・`)

  2. hana-ichi より:

    「Now Playing」いいですねぇ
    safariではいい感じに見えていますw

  3. oyaGame より:

    やっぱシンプルなのは良いですよね、基本は書いた記事を読んでもらうことが
    重要だと思うので、飾りはシンプルなほうが読んでもらえるからなとw
    でもコメント投稿して気づいたけど、なんか微調整が必要のようだ・・・w

  4. oyaGame より:

    Now Playingは前からやりたかったんですよ~
    今何をプレイしてるのか一目瞭然で良いかなと思いましてw
    Safariで制作してるのでベストビューなはずですw

  5. yoruo,530 より:

    それにしてもどうすればそのようなテンプレートが作成出来るのですか。
    私もoyaGameさんのようにテンプレを作りたいのですが
    作り方がさっぱり分かりませぬ…(・д・`)

  6. sato9y より:

    どうも。
    いやぁ~カッコいぃっす‼自分のブログも一周年だし変えようかなぁ~

  7. oyaGame より:

    一から作るのは大変なので、気に入ったテンプレートをカスタマイズすることから
    始めてみると良いと思いますよ~
    「テンプレートの設定」のところの「スタイルシートの編集」で
    例えば「color: #000000;」ってところの#以降の6つの数字が
    色指定でこの場合は黒なんですが、#333333にするとグレーになるとか
    色を自分の好みに変えていくとかでも良いんじゃないでしょうかね~
    http://www.colordic.org/
    色見本は上のサイトを参照にして、#以降の6つの英数字をコピーして
    スタイルシートの編集で変更したい色の箇所に貼りつけてプレビューで確認
    更新してしまうと、変更されてしまうのでプレビューで確認しながら
    気に入った色合いになるまで試してみるとかね
    そういうことをして覚えていくと自由にカスタマイズ出来るようになりますよ~

  8. oyaGame より:

    ありがとうございます~
    テンプレ変えると気分も変わりますよ~

  9. ymsh@ぐみお より:

    タイトルの傾き加減が良い感じでアクセントになっていてオシャレですね!
    それにNow Playingのゲームも斜めにしているのも拘りを感じます。
    当方は素人なので抜けの多い知識でブログテンプレートを弄っておりますが、
    CSS3って面倒なことをせずに簡単にデザインに工夫できて便利ですよね~。
    自分もCSS3を使って枠線の角を丸くしようかと悩んでいますが、
    IEユーザーのことも考えると…どうしても踏み止まってしまいます。
    全部統一してくれればいいのに><

  10. oyaGame より:

    ありがとうございます!
    このテンプレはCSS3でタイトルを試しに傾けてみたところから
    お?良いんでない?って感じで、それに合わせて作りました~
    自分の場合、最初からこういうデザインでって決めて作るわけじゃなくて
    感覚的に作る感じが多いですね~
    真っ黒(#000)は使わないでちょっとでもグレー(#111とか)にしたりとか
    モノクロにはわりと拘ってるんですけどねw
    枠線の角を丸くとかはIE自体が対応してないのでスルーしてくれるので
    モダンブラウザでは角丸、IEは直角ってなるだけなので
    ばしばし使ってあげてください~w
    文字とかBOXのシャドウなんかもIEはスルーしてくれますw
    角丸をIEに対応させる方法とかもあるみたいですけどね~
    外部のファイルを読みこませるタイプのようですね
    http://kruz-graphix.com/2010/02/css3_radius_shadow_for_ie/

  11. HiRo より:

    IEと狐で見比べてみましたが、ナナメになるだけでかなり印象が変わりますね^^
    私は特に、右メニュータイトルのナナメが
    めっちゃいいなと思いました。

  12. oyaGame より:

    そうなんですよね、ちょっと斜めにしただけでアクセントになるので
    特に飾りつけもいらないかなと思いましてw
    タイトル部分もグラデーション入れたり出来るのですが
    とりあえずカスタマイズし易いようにと思ってシンプルにしちゃいましたw