ドグサレ初心者のへっぽこビッグウェーブ

地球の底辺にいるゴミがプログラミングとか音楽とかを語るクソブログ

テンプレートを完全に信用してはいけない

前回はVimあれこれで時間を取られましたが、RubyMineも課金したことだし気を取り直して再開。

前も言った気がするけど、このテーマ(INSTANTと言うよう)をペースにちょきちょき。
http://blacktie.co/2014/05/instant-personal-portfolio-theme/

テーマのstyle.cssいじくっていろいろ気づいたこと
  • 最上部のラッパー(#headerwrapとか) にあるbackgroundベンダープレフィックス指定は以下の2パターン書かれているので、使わない方はコメントアウトしておく
#headerwrap {
…
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
  • background-attachmentの指定おかしくない?エラー吐いてるし、relativeなんて指定方法見つからない。とりあえずscrollにしとく。
  • backgroundとbackground-positionで2回位置指定の記述がある。理由はよくわからないけどoverwriteになるのでコメントアウトしとく。
  • background画像の指定はページ個別になるので、cssじゃなくてerbで以下のように指定した方がよさげ。例えばanimetitlewrapにある背景画像指定だけ切り出すなら、
<div id="animetitlewrap", style="background-image: url(<%= @anime_title.icon_url %>);">
  • backgroundを書き換える場合、なにも考えずに-imageとかつけると、一緒に書かれている他のプロパティ値が通らなくなるので注意。
    • 特に↑の例みたいにbackgroundの一部を切り取って別の場所で指定する場合、自分みたいなポンコツ初心者はそれぞれのプロパティ書いていった方が安定。一緒に書けってワーニングでるけど。


見た目をいじり始めるとすぐ結果が見えるのは嬉しいけど、微調整がすごい。