AD | all

24時間Illustrator「愛(Ai)はクリエイティブを救う」

サイトリニューアル@久々

ふう。約1年ぶりにサイト構成を変更。やっぱり体力のいる作業でした。

コンセプト

兄弟サイトと同じテンプレートで回して行こうと思い、Bloggerと久々にガッツリと取組む。今までで一番勉強になった気がする。最終的には、試作サイトを作ろうと思った時に、パラメータだけをチョロチョロといじれば、ソコソコのものが簡単にできるようなテンプレートを作る事が、脳内的には大きい。
だからベースデザインは、企業サイトっぽい感じにする。で、運用系にも配慮する。他の人にバトンタッチできる様に。

気にした所

  1. Bloggerの管理ページから、背景/幅/色指定等が活かせる様にする事
  2. 左メニュー/右メニューのサイトサンプルを作る事
  3. 出来るだけ「標準的」なものを活用する事(だからBloggerの仕様を結構調べる事になったけれど、ヘルプが全然役に立たない。ググる方が、誰かの人柱の方が役に立つという現状を再認識する事となった…)。
  4. ブラウザ依存のテストは(一応)すること…IEの古いのはやはり辛いぃ。

備忘録

  1. ベースのテンプレートは、新規にブログを作る時に最初に見える「シンプル」。レイアウト原則=(画面サイズ:1020px/左or右メニュー幅:330px(どちらか)/3段フッター)
    ※)左メニューの場合、背景色を付けるせいか、太く見えて来たので、330→290pxへと変更。右メニューの場合は未だ330pxのままで。その結果バナー系も250px幅に変更。
  2. 「content-outer」の外側に、更に一枚divを加えた。左右に50pxだけ大きな、半透明のもの。ここで「calc()」を使ったけれど、Safariがちゃんと計算してくれなくて困る。下記の記事で、「-webkit-」に気付かせてもらった。感謝。
    Favicon
    css calc()で長さを計算して求める | このコードわからん
  3. read more機能は、今まで何度もTryしてきたけれど、シックリ来なかった。今回はテンプレート内には2種類のコードを記述。全然関係ないけれど、metaタグにキーワードを入れるか入れないかで分岐(半分以上コードSampleとしての位置付け)
  4. 。入れた場合=モバイル向けのサムネールと文書を活用、なければJSでゴリゴリ生成する方法。更にモバイル向けのは、最小の図を使っているので、そこをJSで大きいのと入れ替えて、更にサムネールをクリックしても該当「投稿」に飛ぶ様に細工。
  5. パンくずは、今まで自前で作っていたけれど、「ラベル」まで加えてくれるサンプルを見つけたので、ほぼそのまま活用。ただしラベルは最後のもの?しか表示してくれないのが短長ありの印象。全部表示されるのも何だけれど、1stでないものが表示されてもイマイチ。まぁ「投稿」自体にラベルは表示してあるので、良しとする。
    Favicon
    ブログの探究 -ブログ運営のテクニック集-: Bloggerにパンくずリスト(Breadcrumb)を作成
  6. タイトルの表示も順番を入れ替えておく。
    Favicon
    Blogger ブログのページタイトルを「投稿タイトル | ブログタイトル」の順にする方法 | クリボウの Blogger Tips
  7. コード表示(SyntaxHighlighter)は、書き方が少し変わっていてちょっと難儀。兄弟サイト側は、バックアップでXML出力して、一括変換で対処。こっちはそのままで様子見。
    Favicon
    SyntaxHighlighter
    追伸)再開してから問題発生。試作中に前にもあったけれど、このサイトを直参照するとある時間帯ほぼ反応がなくなるぅ。ということで別サーバにCSS/JSを置き直して凌ぐ事にする。s3Sliderも同様にすることにした。
  8. ページ内に書いたモノは検索対象になっていないことに今更気付く。検索してもリストアップするFormatがないためだと勝手に推測する。
  9. AdSense。カスタムドメインだと動きが異なるのか、表示が未だに出来ない。うーん。その内、バックアップサイトやサンプルサイトはサブドメイン化したいので、その時までに調べることと先送り。
  10. 新しい投稿する時に、「見出し/小見出し/準見出し」がh2/h3/h4に対応していることに漸く気付く。なのに転がっているテンプレートは、投稿内の見出しをh3から始めたり、まさに勝手気まま。他人に推薦する時には、こうしたところも見ないとダメだなと、今更ながら。
  11. あとビックリしたのは、HTML/JavaScriptウジェットには、<style>...</style>だけ書くことも出来るという事実。それで○○-outerなどのbackground-imageなどを上書きできてしまう。
  12. 単品で一番時間がかかったのは、Slideshow。結局最軽量という感じで何枚あるか分からないけれど、s3Sliderを使う。無料〜有料まで色々あるのを改めて知る。
  13. 構造を色々といじっていて思うのは、やはり大元のmargin/paddingの設定に馴染めないということ。ここにこんな背景を置きたいとか、ここだけいじりたいとか言った時に連鎖的にゴチャゴチャして来る。ちょっとイラ。実は未だシックリ来ているとは言い難い…。
  14. 最後に、いつも外部ファイルの置き場に困っていて、Dropbox/Google Site/…と色々と漁ったけれど、今回は「無料ホームページ作成サービス」にした。これが一番自然で使い易い気がする。特にJQuerry系のDLしてどこかに置けば良いというものは。JS/CSSだけ置いておいては、申し訳ないので、そのうちMuseの試作サイト等を置いてみたいと思いつつw。