今年2回目のブログデザイン変更 [ブログ関連]
久々にブログのデザインを弄りたくなったので、色々と細かい所を変えました。
so-netブログはテンプレートの種類が少なくて、シンプルなものが多いので、自然とカスタマイズしたくなります。
HTMLとCSSを同時に変更しながらプレビューできないのが少しやり難いですが、悪戦苦闘しながら何とか仕上げました。
共有テンプレートとか配布してくれたら嬉しいんですが・・・。
タイトル画像
まずはタイトルのロゴ画像を作る。無料素材のアイコンとフォントを適当に合わせただけですが、かっこいいロゴを作れる自信が無いのでこれで妥協しました。画像の加工はフリーソフトの「GIMP」で。「Photoshop
」や「Illustrator
」を買うほど画像加工はしないし、GIMPでも高性能過ぎて使いこなせてません。背景画像
単色で塗りつぶしても良かったんですが、少し質感のある背景にしたかったので、方眼用紙のような画像を繰り返し表示させました。この繰り返し表示させられる、継ぎ目の無い素材を思うように見つけられなくて、探すのに苦労しました。シンプル過ぎたり、逆に解像度が高すぎてサイズが大きすぎたりして、使えそうな画像が中々無い。
以下、使えそうな背景素材配布サイト。
▽「Subtle Patterns」
白・グレー・黒のモノトーンカラーのみ扱っているテクスチャー配布サイト。その場ですぐ背景画像にした時のプレビューが見られるので、イメージしやすい。質感の高い素材が多い。
▽「Bg repeat」
シンプルな背景素材配布サイト。こちらもブラウザ上で背景画像のプレビューが見られる。
ポップなデザインが多い気がする。
TwitterとRSSのアイコン
メタリックな質感の32×32pxのアイコンに変えました。この素材は「IconsPedia」でダウンロード。クオリティの高いアイコン素材を32×32px～256×256pxまでの5種類からダウンロードできます。
月別表示の変更
so-netブログの月別表示はただ全て縦にずらっと並べるものしか無いのですが、このブログも気づけば2年以上やっている為、縦に並べるとかなりスペースを取り、邪魔になります。
「まぐなすさんの記事」を参考に、というか殆どそのままコピペして、JavaScriptで並べて表示されるようにしました。
ページをスクロールすると出現する、トップへ戻るボタン追加
ブログは縦に長くなりがちなので、あった方が良いかもと思い、ページをある程度スクロールすると、サイドバーの隣に「BACK TO TOP」ボタンが出現するようにしました。現れたり、消えたりするのは「jQuery」で実現していて、「Animated Scroll to Top」のページでデモとコードが見れます。コードをコピペして、CSSで表示を少しカスタマイズして完成。
toraman さん、こんばんは。
探すとカスタマイズする場所ってたくさんありますね。
オイラはもう面倒になってきました・・・・
素材は作りたいと思うのですけど。
by uryyyyyy (2012-04-17 19:49)
>uryyyyyyさん
コメントありがとうございます＾＾
一箇所気になりだすと、他もどんどん直したくなります。
僕も、いつも途中で面倒になって、中途半端な状態でやめますが(^_^;)
素材は探している時も楽しかったりします(^^♪
作ったら是非教えて下さいね(^O^)
by toraman (2012-04-17 20:32)
うおおお！すごい勉強されてますね！(≧ω≦)ｂ 私も参考にしたいですー！っていつなおそうかしら・・・。(((((>_<；)))))更新だけで手がいっぱいで情けない限りです・・・・。
by 大林 森 (2012-04-17 20:54)
＞大林 森さん
コメントありがとうございます＾＾
htmlとcssはかなり理解できるようになったんですが、javascriptとかのプログラム系は未だに意味が分からなかったりします(*_*)
記事の更新楽しみにしています(^^♪
毎回、女の子が可愛くて、じっくり眺めていますｗ
by toraman (2012-04-17 22:07)
私もタイトルの画像を変えたいのですが、すっかりやり方を忘れてしまいました。こういう作業は、気合を入れて一気にやらないとダメなんですよね。頑張ってみます。
by シービーちゃん (2012-04-18 07:44)
今風のデザイン、やぱスッキリしてカッコ良いですね～
そう言えば自分のブログ、とりあえずって感じで、
既存のテンプレに使われてた画像をリサイズして使ってたんですが、
そのままずっと使い続けてました（爆
そろそろオリジナルに変更しなきゃなぁ・・・
by ソノ日暮 (2012-04-18 13:07)
＞シービーちゃん
コメントありがとうございます＾＾
タイトルの画像を変える方法も色々あって、しばらくやっていないと忘れてしまいますよね(^_^;)
僕もデザインを変える時は、いつもやり方を検索しながら作業してます。
＞ソノ日暮さん
コメントありがとうございます＾＾
カッコ良いと思って貰えて嬉しいです(^O^)
僕も以前までボヤけた継ぎ目のある背景素材をつかっていたり、色々と途中でもういいやって思ったまま放置していましたｗ
思い立ったが吉日ですね(^^♪
by toraman (2012-04-18 19:31)