このブログ色々イジってみました。

CSS

スポンサードリンク

---

元々あったワイドブラックってやつに見出しやら何やらをいじくってシンプル～なブログデザインにしてみました。

黒をメインにしっくりと、でもちょっとだけ色使ってるよっていうクール＆リトルポップ（こんなジャンルありません笑）な感じにしてみました。自分のやりたいようにしただけですが・・・。 

何をどう変えたかちょっとだけご説明しようかなと思います。

変えた箇所は大まかに４つです。すべて日記にしていると大変なので、簡単に出来たことからご紹介したいと思います。単純なことしかやってません＋もっと効率のいいものがあるかも知れませんがもしよろしければご活用ください～。

フォントをメイリオに！ 

はい、私の大好きなフォント。メイリオです。Macのパソコンをお使いの方は何も変わっていないかと思いますが、Windowsパソコンの標準だったゴシック体（正確にはVerdana,Arial,sans-serif）をメイリオに変更しました。

こちらのブログでは

「管理ページ」→「デザイン」→「テンプレート管理」→テンプレート名の右側にある「編集」から変更を加えていきます。 

今回はbody要素に　font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;　を追加します。

書いている順番が優先順位なのでメイリオとMS　Pゴシックが入っている場合はメイリオが表示されることになります。

いやぁ素晴らしい。これだけでも十分満足ですね。これじゃないとあかんくらいの重要性です私には（笑）

ブログ記事のタイトルをやや強めに

ど～んと目に飛び込んでくる感じにしてみました。元々ブラックがメインですので見出しも色合い強めの真っ黒にしてみました。周りに丸みと影をつけて主張しすぎないように若干抑えたつもりです（笑）

まずこの記事のタイトルだけにCSSを適用する必要がありましたので、以前より使っていたGoogle chromeの力をお借りしてこのタイトルをデザインしているやつはどこのどいつかを探って行きます。 

これについてはGoogle chromeのデベロッパーツール使って解析していきます。ソースを見て検索していく方法でも出来るのですが、慣れているchromeのツールを使用しました。まず自分のブログを開いてGoogle chromeの右上閉じるの下に３本線ボタンをクリック。出てきたメニューの下の方にある「その他のツール」から「デベロッパーツール」を選択します。

そしたら英語が。と言いますかCSSが出ます。その上でマウスを動かすと、対応している文章がどこかっていうのが色付きでわかるんですよね！これ非常に便利です。本当に。

で、そこからタイトルを装飾しているやつを探します。右向いている三角のチョボを押すことでドンドン色付きの範囲を狭くすることが出来ます。「div id=container」→「content」→「articles」→そして「articles-title」にたどり着きます。

タイトルを装飾していたのはclass要素のarticles-titleと言うのがわかったので、CSS内から検索します。そして発見してしまったのであらゆるものを付け加えていきます。

真っ黒、角丸く、影付けなどなど。コードは今回は長くなっちゃうので書きません。background（色）とかborder-radius（丸み）、box-shadow（影付け）＋スペース＋CSSなんかで調べて見てください（笑）

そして完成したのが今のタイトルの装飾です。細かく言うとカテゴリー移動させたりとかしましたが文字列変えるだけなので割りかし簡単な部類だと思います。

やっぱり作って行くのは楽しい！

こんな感じで今回はイジってみましたがやっぱり楽しいですね！丸みを帯びさせるのか角を付けるのか、薄くするのか濃いくするのか。あっという間に時間が経ってしまいます（笑）

これに凝りすぎて時間ばっかり取られると大変なのでブログイジりは程々にしてウェブデザイナーのこともしっかり考えていきたいですね。 

---

スポンサードリンク

タグ：CSS