ブログのデザインを弄くってみる

★ 今回は、『ブログのデザインを弄くってみる』です。

昨日ブログのデザインを変えました。

今までは、ＦＣ２ブログ公式のＳｋｙＰｈｏｔｏを使っていたのですが、
解像度でCSSを変更するＪａｖａＳｃｒｉｐｔを行なったので、
横幅１２８０の解像度とかで見ると、
あまりにも…という状況だったので思い切って作ってみました。


使った画像は４種類です。


■　タイトルバック画像
タイトルバックの画像は、tricot　＋ＷＥＢ写真素材＋さんのものを加工
変にずれてしまっても困るので両脇のラインも付けておいた。
両脇のラインは別に無くても出来る。

■　ブログ全体の背景
ブログの左右の色は、ＢＯＤＹタグのＣＳＳで色を適用しただけ


■　ブログの背景
両脇のラインのブログバックの画像は自分で作成、
まず、適当にグラデーションを作る（普通にラインにしたい色で作った）
リサイズで１０ｘ１０ぐらいまで縮小（作りたいラインの幅まで縮小）して保存（画像ファイル１）
この画像を１８０度回転して別の名前で保存（画像ファイル２）

次にブログの幅にしたい長さから
上で作ったラインの幅の分の引いた背景に使いたい色の画像を作成
（１０ｐｘ幅なら２０ｐｘ分短くしたものを作る）
８００幅にしたいなら７８０ｘ１０の一色の画像を作成する。（このブログでは白）
後は、画像を連結するだけ。

私は昔からpapy's softwarelibrary - PDF以外のソフトの
疾風-tokikaze-を使わせていただいていますが、
別に操作を滅茶苦茶覚えないと使えないソフトでなくても
このブログ程度のものを作るのには支障がありません、
というより疾風-tokikaze-でも高機能すぎて全部の機能は使わないでしょう。


■　エントリータイトルの背景
記事タイトルのストライプは,
ストライプ画像を簡単作成　Stripe Generator2.0（ストライプジェネレーター２.０）で紹介したストライプジェネレーター２.０で作成して、
ＣＳＳで適応しただけですね。


■　矢印
矢印は、イラスト・アイコンのフリー素材さんから使わせていただきました。

斜めの矢印ってなかなか無いんですよね。
ここはいろいろ揃っています。

エントリータイトルの中に矢印用のｃｌａｓｓをもう一つ作って重ねてやったような形になっています。


タイトルバックと背景画像は、
１０００幅程度に適したものと１２８０幅程度に適したものと二種類づつ作成して、
１２８０幅のときのＣＳＳは幅と背景画像を変えただけという形にしてあります。


そういえば、デザインを変えてみたら
何人かの人がもの凄く記事を読んでくださったみたいで
前の三つの記事の話題が一段落して落ち着いてきたのに
いつもの１.５倍くらいページビューがあった。

これはデザインの効果なんだろうか？

人気ブログランキング

ブログ内関連タグ : ブログ カスタマイズ ＣＳＳ