アフィリエイトトレジャーのＨＴＭＬタグを編集する手順

２０２２/１２/１０更新


モバイルフレンドリーに合格できるサイトの条件
（１ページ目）の続きです。



いよいよ、トレジャーツールで
スマートフォンサイトを作成するための
カスタマイズ方法を紹介します。

先ほど掲載した、大変勉強になった
サイトと少し被るのですが。


アフィリエイトトレジャーと、
パーフェクトトレジャー、
カスタマイズの手順は全く同じです。

つまり、どちらでも編集可能です。

スマホサイトを作成する手順

---

上記の画像をご覧ください。

中にある、赤枠で囲った
「ｔｅｍｐ」
というフォルダを開きます。







「テンプレートｈｔｍｌ〜」
と書かれたフォルダが沢山あります。

「ｉｍｇ」を除く全てのフォルダを
編集していきます。



『テンプレートｈｔｍｌ１_オレンジ』

から順番に編集していきます。







すると、４つのフォルダがありますが、

「ｃｏｌｏｍ１」

というフォルダだけ編集します。


他のフォルダには一切手を加えなくても良いです。

というか他フォルダのは、
２〜３カラムですからスマホサイトを
作るには向いてないのです。







開きましたら、いよいよ編集です。

まずは、

「ｉｎｄｅｘ.ｈｔｍｌ」

というファイルを、メモ帳で開きます。


沢山の半角英数字と記号が並びますが
間違えて消したりしないでくださいね。

下記の画像のように



＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /＞



の下に、コチラ↓のタグを加えます。

<meta name="viewport" content="width=device-width,initial-scale=1">

（そのままコピーして貼り付けてください）







このＨＴＭＬタグを、
コピーして貼り付けます。

そして上書き保存します。


「ｓｉｔｅｍａｐ」
「０１」

と書かれたそれぞれのフォルダの
ＨＴＭＬファイルも一緒に編集します。







「０１」の中のフォルダにある

「００１.ｈｔｍｌ」

も一緒に編集します。


全部で４つのｈｔｍｌファイルに上記の
タグを書き足すことになります。

ＣＳＳファイルの編集

---

続いて、「ＣＳＳ」ファイルです。

「ｃｏｌｏｍ１」の中にある

「ｓｔｙｌｅ」

のフォルダを開きます。


その中にある
「ＣＳＳ」フォルダを開きます。


さらにその中の

「ｂａｓｅ.ｃｓｓ」

というファイルをメモ帳で編集します。







開きましたら、
「/* コンテンツエリア */」
の所にあります、
#wrapperのwidthおよび_widthを

「９０〜９８％」

に変更します。


最低９０％、最高９８％ですね。

分からない場合は９０％で良いです。

及びに#containerのwidthも、
「９０〜９８％」に変更します。







「/* フッターエリア */」の所にある、
#footerのwidthおよび_widthも、
「９０〜９８％」に変更します。

そして、上書き保存です。







以上、ｃｓｓファイルの編集は完了です。

残り３１個のテンプレートカラーが
ありますが同じように全て
カスタマイズするのです。


ただ全て編集するのは大変ですから、
サイト作成時に使う時だけで良いです。

あとは、スマホサイト作成の時に、
編集したテンプレートを使用して、
サイトを構築するだけです。

スマホ対応のテンプレートは３まで

---

上記、画像を添付しましたが、
１カラムのテンプレートを使う上で
注意事項があります。

実は、モバイルフレンドリーに合格できる
テンプレートは３までと限られてます。


「ｔｅｍｐ」フォルダの中には、
計３２個のテンプレートフォルダがあります。

フォルダごとに


「テンプレートｈｔｍｌ●_〇〇」
（●＝１〜４までの数字／〇〇＝色の名称）


と名前が付けられてますよね。

うち「４」のＨＴＭＬテンプレートは
スマホ対応しておりません！


実際に４のテンプレートで作ってみた結果
モバイルフレンドリーには不合格でした。

スマホで閲覧しようと思えばできますが、
グーグルからの評価は下がります。


なので、ＨＴＭＬ１〜３までの２４個の
テンプレートを使うことを推奨します。

テンプレート２の時は中央揃えに

---

※２０２２/１２/１０追記



テンプレート２ですが、コチラも
使わない方が良いとわかりました。

上記の画像をご覧ください。


「２」はどういうわけか、記事中に
２本の縦の線が強制的に表示されます。

なので「２」を使用する場合は、
記事全体を範囲選択・ドラッグし
そして文章が中央揃えになるボタンを
クリックするのです。


（中央揃えボタンは下記の画像を参照）








以上、最低限これだけは絶対に
行っておくべき編集の解説は終わりました。

が、トレジャーのカスタマイズは
まだまだ続きがあります！


一緒に編集しておくと便利なので、
次の３ページ目をご覧ください。



アフィリエイトトレジャーの画像サイズの自動化
（３ページ目）