やっと来たNikonD800と共に憧れのニコ爺生活。写真撮ったり、北米語とイギリス英語の違いついて考察したり、デザインについて考えたり、外国生活について問答したり。それぞれの比重はそのときに興味あるものによって変化します。まあ、ちょっとマニアな話が多い。

2012/04/04

Bloggerをスパイスアップしてみる(細かい所いじりいじり編)

2012/04/04
このエントリーをはてなブックマークに追加
初心者編、Zanback導入編と、半ば死に体になりながら改造を続けてきた当ブログですが、CSSの挙動にも慣れてきて初期のぐだぐだだった頃よりずいぶんマシになってきました。
うむ。まさか3回目があるとは思わなかったぞ。

2回目にいろいろな所に登録しまくった結果、すこーしだけ人の流れが変わったかな・・・。といっても大きな事はGoogle以外の検索エンジンから人が来てくれるようになった事だけで、以外にPing送信がどうのこうのでにぎわっていた(ように見えた)ランキング系からは人が来ないよ。(いやあ、おめえのブログが飛沫なんだろと言う問題ではなく、そもそもランキングのトラフィック自体が少ないという事)有名人とか有名ブログを除いてはああいう所も結構下火になっているのかもしれないですね。

3回目はやっと人の書いたCSSのClassの探り方が分かってきたので、デザインの細かい所を色々修正しております。FirefoxのInspect Element機能最高!

  1. サイトの面取り
    最近角嫌々病にかかっているので、至る所の角を削る。
  2. 写真表示方法の変更
    写真が増えてきたので、スライドショーで見せた方が見てもらいやすいかと思いスライドショー効果をON。同時にサムネイルの方はふちをつけてちょっとお上品に展示。昔はこんなの画像自体を加工しないと出来なかったんだけど、いい時代になったもんだー
  3. Recent Postsをアップデート。
    やっと気に入るウィジェットを見つけました。
    これを入れた瞬間に、自分のブログがプロのウェブサイトみたいに見えてちょっとカンドー。このブログはほとんどの写真も自分で撮っているので、それを考えるとまるで自分で小さいウェブマガジンを発行しているようで非常に楽しい。
    http://www.proknowliz.info/2011/05/recent-post-widget-with-thumbnail.html
    http://www.madtomatoe.com/recent-posts-widget-with-thumbnails-for-blogger/

    上記の二つを組み合わせて使いました。
  4. もう少しにぎやかしが欲しかったのでTop 10 Articlesも入れてみる。
    まだ記事数が少ないので色々被っちゃってるが、1年後どうなっているか楽しみである。
    http://www.bloggerplugins.org/2010/09/popular-posts-blog-stats-widgets.html
    ここは安定のBloogerpluginsから拝借。
  5. そして今回の最難関ちょろり。
    いやーなんか、ちまたで流行りつつあるリボンレイアウトなんていうものに身の丈以上に挑戦してしまったせいで、異常に時間がかかってしまった。
    http://www.red-team-design.com/css-ribbons
    3D Ribbonと呼ばれているようである。
  1. 今更フォント環境を見直す。
    元々のテンプレートが英語版だったので日本語がちゃんと設定できてないっぽい+うちにはWindows環境がないので、実際の所ちゃんと出来ているのかよくわからないけど、一応ちゃんと出るっぽく調整してみる。(もし明朝で見えた人はおしえてくださーい)
    http://mu4log.com/blog/font-family/
    http://blog.daichifive.com/archives/1200
    アルファベットはタイプフェイスに凝っているサイトも結構あるんだけど、日本語だと未だに実質ゴシック一択なんですなー。エフェクトも効果的に使いにくいし、何という足枷。。。
  2. ソーシャルボタンを色々いじる
    貼るだけっちゃーはるだけなんだけど、サイト全体に対してのクリックなのか個々のポストへのクリックなのかとか、色々挙動を制御するのがめんどい・・・。
    http://www.bloggersentral.com/2010/07/add-facebook-like-button-to-blogger_30.html
  3. ネタが分散化してきたので、ナビケーションの改善のためにカテゴリーバーを追加。
    http://www.bloggersentral.com/2011/02/list-all-posts-of-particular-category.html
  4. もっと読むをクリックすると途中から始まるのが気に入らなかったので、地味に改善
    http://www.kuribo.info/2012/03/blogger_11.html
  5. タグ単位で記事を表示した時、変なメッセージが出るのが気に入らなかったので取る
    http://www.theinfow.com/2011/01/get-rid-of-showing-posts-with-label.html
  6. 長い記事が多いので、マガジン風のサブタイトルとクオートをきちんとデザインして見た目をちょっと整理

こんなもんかなー。半分自分の記録用なので素っ気なくて済みません。もし質問があれば下からどうぞ。これで一応ブログの見た目も許容範囲になってきたので、ブログを猿のように改造し続ける日々も一旦終わるかもしれない。まだJqueryとかで遊んでないのでやってみたい気はするんですが。

しかしここまでやるんだったら、テンプレート(しかもHTML5のダイナミック仕様・・・)などで始めずに、最初からシンプルで簡単なものをいじっていった方が敷居が低かったのでは・・・とおもう。まあ、この間の仕事でグラデ使いまくりのピクセル単位で調整するWeb2.0ロゴデザインなるものの作り方も大方習得したし、CSSいじりも出来ないよりかは出来る方がいいので、RPGツクール作ってるよりは仕事の役に立つか。


閑話休題。
昔はグラフィックデザインて印刷行程を経ないと具現化しなかったけれども、今はデジタルで作ってデジタルで終了できるので、最終結果がすぐ分かっていいですね。Web黎明期は紙よりもウェブで出来ない事の方が多くて、デザインの仕方ももっと生々しくテクノロジーむき出しってかんじで、そりが合わなかったんだけど、この10年位の間にウェブはウェブの長所に磨きがかかり、いい意味で個性付けがされてきたと思います。CSSとか見ても分かるようにデザイナーはなるべくコード触らないでデザインだけ触れるように出来てるし。(笑)
あともうひとつ隠された利点は、紙より圧倒的に解像度が低いから、作る方は楽。(これもアップルのRetinaディスプレイの普及いかんによっては、近い未来どうなるかわからんけどね)うちのモニターは24インチなんだけど、これだとA3を扱うのはパレットとかが邪魔して意外に不便なんだけど、ウェブを作るとなったらもう楽々〜。いつもより無駄にパレット開いてもまだ隙間がありますみたいなw 最近は特にタブレットとかスマートフォントとかの影響で、ウェブの閲覧されるスクリーンサイズが以前よりも断然多様化しているらしく、これからさらにサイトの横幅が広がることはもうあまりないのかも。(読みにくいし)
その代わり、1ピクセルを巡る攻防が色々ある訳で、ここら辺の調整がウェブデザイナーの腕の見せ所なのでしょうね。