もしもDS商品サイトをせっかくMODxでつくったなら自作テンプレートで

CMS, WEBマスター

MODxを使ってて「良いなー」と思っていることは、HTMLテンプレートを取り込んでサイトのテンプレートに転用するのが非常に簡単なことです。
私はPHPをマスターしていないこともあり、WordPressのテーマを自作することは出来ません。
その代わりWordPressではたくさんの無料テーマがネット上にありますが、MODxのテンプレートは種類があまりネット上にありません。
というわけで表記サイト製作には、自作テンプレートにすることにしました。
どうせ一から自作するならと、SEO的にやりたいことを全部やれるレイアウトにしました。

  1. 可変幅レイアウト
    画面が大きい人にはアイテム数を横方向にたくさん表示させ、縦スクロールを少なくできるようにしました。
    自分が作ったほかの全てのサイトは固定幅ですが、ショッピングサイトには固定幅・可変幅いったいどっちが適しているんだろう?と思って調べるために楽天とAmazonをみたら、どっちも可変幅だったので。
  2. 真ん中が本文で両側がサイドバーの3カラム
    3カラムの真ん中に本文が入るので、htmlをブラウザで開くときに先に読み込まれる(htmlの先に記述する)部分は真ん中の本文になるように、CSSを設定しました。
    これは商品名やカテゴリ名の検索に対し、出来るだけ本文の内容を検索エンジンに関連付けさせたいというSEO的考えです。
  3. <title><h1><h2>全部に商品名を入れる
    <title>にはサイト名も併記しますが、<h1><h2>は商品名だけです。

メニューやアイテム紹介には、DittoとWayfinderをたくさん使いました。 この2つのスニペットは、MODxでサイトを作る上での中核だと思います。

あと上記で作成したテンプレートは、PC閲覧用です。
上記とは別にスマホ用のテンプレートも作り、プラグインMobileConverterを使って携帯からのアクセスはスマホ用のテンプレートに切り替えるようにしています。
スマホ用テンプレートは、以前書いたのとほぼ同じ方法で作りました。

スポンサーリンク

CMS, WEBマスターMODx, もしもDS

Posted by エコタウン