WEBマスター

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

この記事は約2分で読めます。

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

可変幅レイアウト

画面が大きい人にはアイテム数を横方向にたくさん表示させ、縦スクロールを少なくできるようにしました。
自分が作ったほかの全てのサイトは固定幅ですが、ショッピングサイトには固定幅・可変幅いったいどっちが適しているんだろう?と思って調べるために楽天とAmazonをみたら、どっちも可変幅だったので。

真ん中が本文で両側がサイドバーの3カラム

3カラムの真ん中に本文が入るので、htmlをブラウザで開くときに先に読み込まれる(htmlの先に記述する)部分は真ん中の本文になるように、CSSを設定しました。
これは商品名やカテゴリ名の検索に対し、出来るだけ本文の内容を検索エンジンに関連付けさせたいというSEO的考えです。

<title><h1><h2>全部に商品名を入れる

<title>にはサイト名も併記しますが、<h1><h2>は商品名だけです。

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

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

iPhone用のサイトを構築しやすいModX
会社サイトでは以前からケータイ用のページもつくっていました。 でも、半年間アクセスがありません・・・ 「少ない」じゃなくて「ない」です。 サイトはModXで構築していますので、ケータイページに乗っけているメール送信フォームは、UTF-8対応の機種でないと文...

以前書いたのとほぼ同じ方法で作りました。