Memoサイト移行 CSS Menu→

新規スタイル作成

新しいテーマ/スタイルを作成し、自分好みのthemesファイルをつくる。MTスタイルは汎用性を追及しているので冗長が多い。そのため属性定義が重複していたりするので、カストマイズしにくく時間がかかる。これをもっとシンプルにして後で引用しやすくする。

最初はもっともシンプルなPicoテーマを採用

テキストや写真といったコンテンツを引き立てるシンプルなデザインのテーマで、マイクロブログを作成するのに適している。アーカイブリストなどの関連コンテンツは、メインコンテンツの下に配置され、スマホを含めたレスポンシブデザインになっている。※様々な種類の機器や画面サイズに単一のファイルで対応するWebデザイン手法。

背景の基調は、Dark Blue, Dark Grey, Tan, Whiteの4種が用意されているが、自由に自分の好みに変更しやすい。閲覧のときに基調色を切り替えられるようにスクリプトを使ってもいい。最初はTanにした。目に優しく、色合いの検討も可能である。

新しいスタイル picotan

  1. 後で使えるように /assets/script/themes/picotan/ に保存する。
  2. MT標準のblog.cssとpico.cssを統合して、picotan.cssにする。
  3. 各ブログのstyles.cssに@importする。ブログ固有のカストマイズはstyles.cssで行う。

MT6ブログ設定

  1. MTコメントとトラックバックは無効にする。
  2. Facebookコメントを有効にする。
  3. Facebookコネクトを利用したコメント投稿者の登録機能を提供
    FBアプリを作成して取得したキーとシークレットを、MTのプラグインFacebook Commenters2.2の設定で入力する。タグは、<$MTGreetFacebookCommenters$>
  4. ミクシイアカウントを使ってMTにログインしてコメントできるように設定
    mixiComent1.4の設定にあるリンクからmixiにログインして規約に「同意」・・・
    Not Acceptable! An appropriate representation of the requested resource could not be found on this server. This error was generated by Mod_Security
  5. つぎのタグ(日付)を削除してシンプルにした。日付は各記事の最後尾に表示。
    <mt:DateHeader>
    <h2 class="date-header"><$mt:EntryDate format="%x"$></h2>
    </mt:DateHeader>

MT標準テンプレートのスタイルシートは1,000行を超える。テーマ共通(blog.css)が約600行、テーマ固有(たとえばminimalist/screnn.css)が500行くらいになる。Style Catcherを使って簡単にテーマを切り替えられるのはいいが、カストマイズが厄介である。styles.cssにカストマイズしたスタイルを追加すればいいのだが、ページ構成にかかわるスタイルを下手に変えるとページが乱れてしまう。いったん乱れると、その原因調査にたいへんな労力を費やすことになる。これまで何度悩まされたことか。