ちょっとガチンコでやる
外部ファイルの更新について
かなり以前にかいたのがあるけど、嘘だろってくらい効かなくなってる。もしくは元々そうなのか。
カラーミー側のキャッシュがきつすぎて外部ファイルの変更への反映はほぼ望めない感じになってる。新規にアップしたやつも読み込めるまでラグがあったりして。だから、管理画面上で登録できるものは優先的に使っていったほうがいい。
装飾関係について
かなり大事。
CSS
カラーミーはcssを「全体」「各ページ」でそれぞれ指定できるので、基本的にこれを活用したほうがいい。カラーミーもメイクショップも、付属のFTPサーバーは更新がくっそ遅い。外部ファイル読み込み時にパラメータを付けたら更新されるっていう裏技的なやつは、そもそも読み込むファイルが更新されてないから反映が遅いっていうね。だから管理画面上でcssを打ち込んだほうがいい。フリーページはcssを記載できないので全体用かhtml内に<style>で直接書き込む。
htmlを組むときに全体用と各ページ用でcssファイルを分けて作ったほうがいい。
これを覚えておく。
ちなみにメイクショップと同じく、共通と各ページのcssをカラーミー側がくっつけたものを反映させる仕組みになっている。
js
カラーミーにはjsを記載する枠がない。くっそだるい。
諦めて外部ファイルとして読み込むか、html内に<script>で書き込む。WEBサイト全域にかかるjsを作るなら共通のhtmlに書き込むとか。
更新とか変更をしないって割り切るならjsファイルを読ませるのも手なんだけど、それでもいつかは手を入れるんだから止めといたほうがいい。
どうしても外部ファイルを読ませたい場合
正直なところ、カラーミーのFTPにcssやらjsやらをアップして使うのは止めたほうがいいと思う。何度も痛い目を見てる。
それでもどうしても外部ファイルのまま読ませたいなら、別にサーバーを用意して読み込ませるのがいい。既にサーバーがあるならそれでいいけど、これだけのためにサーバーを契約するのはバカバカしいと思う。
<head>の編集
カラーミーは<head>が編集できない。めちゃくちゃだるい。
jQueryライブラリ
2021/06現在、カラーミーが読み込んでるjQueryライブラリは1.7.2。古すぎる。
現行である3系を使いたい場合は追記で足すしかない。
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>「共通」の先頭に書けば<body>直下の記述になるから力技で上書きできる。
「集客」→「検索エンジン対策」→「共通タブ」→「headタグ内フリースペース設定」でも挿入できる。だけどこっちも追記するだけ。本当だるい。
レスポンシブ化
カラーミーはheadにviewportが書かれていないので、これも足さなきゃいけない。
<script>
$(function () {
// viewport
var viewport = document.createElement('meta');
viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0');
document.getElementsByTagName('head')[0].appendChild(viewport);
});
</script>ogpは標準で設定されてるんだよな。なんだこれ。
デザインについての注意
html、cssは60,000文字を超えると保存できない。
fetchを使えば静的ファイルを読み込めるから省略できるっちゃできるけどそれも前項の通りで、編集時にめんどくさいことになりかねないんで、微妙だと思う。頑張ろう。
まあ、そこまで大量に書き込むのは逆に難しいかもしれないけど、jsを一緒に書くとかしてたら届くかもしれない。
圧縮はしないほうがいい
文字数を減らすためにcssとかjsを圧縮する選択肢が出てくる。圧縮サービスはネット上に転がってる。
使ったところが悪かったのかカラーミーが悪いのかわからないけど、動作がおかしくなることがあるから圧縮サービスはあんまり使わないほうがいい。
「共有」の理解
<body>部分だけ作れる。だからイメージはこんな感じ。
<header></header>
<{include file = $file_name}>
<footer></footer>これに条件分岐を足したり、jsとかで<head>に挿入したりとかをやっていく感じ。
独自タグ
カラーミーには独自タグがある。管理画面上で登録した何やかやを引っ張ってこれるから便利。公式がまとめてるけど単純に見づらい。
レイアウトについて
一番外側の<html>と<head>は自動生成される。そこに「共通」と各ページをぶち込んで表示される。「共通」は強制的に挿入されるんで、例えば「共通」にheaderを入れてるけどこのページには要らないから読ませない、ということができない。
ログイン有無について
<{if members_login_flg == true}>
<a href="<{view_myaccount_url}>">マイアカウント</a>
<a href="<{members_login_url}>">ログアウト</a>
<{else}>
<a href="<{members_login_url}>">ログイン</a>
<a href="<{members_regi_url}>">会員登録</a>
<{/if}>ログイン状態はこれで取得できるんだけど、ログイン後のコンテンツが少なすぎてなんだかなーって感じがある。なんか地味。
まとめ
とりあえずここまでを頭に入れておく。
これらだけでも踏まえたらだいぶ楽になる。
コメント