WordPress Artisteer

Artisteerでテンプレートを作ってColorMeで使う、覚え書き

投稿日:2009年6月23日 更新日:

1.Artisteerで2カラムのデザインテンプレート作成。安全を考え外観がColorMEに使えそうなものにする。で、HTMLエクスポート。

2.ColorMeにアクセスし、管理画面のデザイン画面で、基本であるオレンジノートをコピーする。バックアップ。素のデザインテンプレートを使う方法もあるが、商品一覧ページとか商取引法のページとかを作り込むのが面倒なので。

3.コピー済みのオレンジノートの共通部分のデザイン設定を開く。基本デザインは外部リンクしたCSSを使うため、カスタムの共通CSSで使わなさそうな部分(今回は会員専用ページより上とした)を削除。

4.1で作ったテンプレートのHTMLのBody以下と、既存のColorMeのコードをエディタで開き、ドッキングする。DIVタグが多いので間違いやすい。面倒な作業で時間もかかったが、気をつけてやればできる。

5.4で作ったコードの先頭に以下のコードを入れる。

<link rel=”stylesheet” href=”style.css” type=”xxx/text/css” media=”screen” />
<!–[if IE 6]>
<script type=”text/javascript” src=”http://hogehoge.com/script.js”></script>
<link rel=”xxx/stylesheet” href=”style.ie6.css” type=”text/css” media=”screen” />
<![endif]–>
<!–[if IE 7]>
<link rel=”stylesheet” href=”xxx/style.ie7.css” type=”text/css” media=”screen” />
<![endif]–>

(xxxは外部サーバのパス)

6.ColorMeはFTPが使えなくて、画像以外のメディアをアップできないので、外部サーバー(今回は自社サーバ)へスタイルシートおよびJavaScriptの各ファイルと、imageフォルダをUP

7.できあがり。FireFox、IE6、IE7で確認し、細かい修正を繰り返して仕上げる。


今回、IE6で見た際のデザインがガタガタになった。FFとIEはキレイだったのに。うんうん原因を確かめるのに全力かけて半日以上。
結局<!–[if IE 6]>の近辺にスペースを入れたり消したりしているうちに直った。
ゴミの全角文字が入っていたからかもしれないが確かなことはわからず。

苦労したけど次回に同じ仕事があればもっとうまくできるはず。

追伸:

img.thumnail を width:170px にするなど、削ったデフォルトCSSを追加する必要が出てきた。まだあるかも。

-WordPress, Artisteer

執筆者:

関連記事

YITH WooCommerce Order Trackingのトラッキングコードをメールに表示するには

以下のブログ主さんが、表題の件を実現する方法をレクチャしてくれているのを発見、けども・・・。 WordPress YITH WooCommerce Order Trackingのトラッキングコードをメ …

no image

httpからhttpsに移行した際にいいねカウントを保持するためにWordPressサイトでやったこと

以前の記事でXeoryBaseのテーマにおいていろいろと作業をしてたことを書いた。 これでもって厄介な「いいねカウント」問題を解決した・・・と思っていたのだが、またおかしくなった。原因は不明。 プラグ …

no image

WordPress管理画面のパスワード忘れたとき

ローカルインストールのWordPressの管理画面のパスワードを忘れたときに、以下のページが参考になったので、備忘録。 WordPress のパスワードをマニュアルでリセットする方法 | コリス

no image

WordPressで新着情報

WordPressで新着情報を作る際は、毎回、「えーっと、どうやるんだっけ・・・」と、過去に作ったコードを、過去に作ったメモの中からひっくり返して探し出し、さらに記憶の中からも実装手順をひっくり返して …

no image

ArtisteerはWYSWYGエディタを使って文字編集すると勝手にスペースを追加する

Artisteerで、WYSWYGエディタを使って(HTMLエディタを使わないで)修正すると、勝手に左にスペースが作られていく(HTMLエディタで見ないとわからないが)。 本日、色々試してみて、HTM …