新着情報

2021/02/26
アフィリエイトトレジャーのHTMLタグを編集する手順
を更新しました

2021/02/26
カテゴリページ知ると便利な知識
スマホサイトで情報商材を紹介する必須条件とは?
アフィリエイトトレジャーで画像挿入する時の注意点
を公開しました

アフィリエイトトレジャーでスマホサイト作成TOP > スマホサイト作成 > アフィリエイトトレジャーの画像サイズの拡大縮小

アフィリエイトトレジャーの画像サイズの拡大縮小

 

アフィリエイトトレジャーのHTMLタグを編集
(3ページ目)の続きです。



1ページ目で紹介した、トレジャーで
スマホサイトを作る方法を掲載した
サイトは本当に参考になりました。



モバイルフレンドリーに合格できるサイトとは
(1ページ目の記事)



【重要1】画像表示について



ですが、そのサイトには
ある重要な点が書かれてませんでした。


それは・・・



スマホから見た時の
掲載した画像が
はみ出さず収まる




ということについてです。




これをしないと挿入画像が画面からはみ出ます







テンプレートはスマホ対応になってもですよ?

記事中に掲載した画像が大きいと
はみ出てしまうことがあります。



これでは、一般ユーザーからしたら
見苦しいサイトになってしまいます。

じゃあ、小さな画像しか掲載できない
かと言いますと、いいえ。



どんな大きなサイズの画像でも
スマホ観覧時にピッタリ収まる
編集の方法があるのです!




つまり画像の拡大縮小の自動化です。

実は、別のサイトですが、
参考になった方法を見つけたのです。

それが、下記のリンクです。



[CSS]ウインドウサイズに合わせて画像を拡大縮小する方法




再度cssファイルを編集









面倒かもしれませんが、再度、
「CSS」フォルダの中にある
「base.css」を編集します。

ファイルを開くと、一番上には



@charset "Shift_JIS";

a { color: #0000FF; }
a:hover { color: #0033FF; }
img {border: none;}




こうなっていますよね。

その中にある



img {border: none;}




を書き換えるのです。

正確には、{}内にある
「border: none;」を、これを



max-width: 100%;
height: auto;




に書き換えます!

(コピーして貼り付けてください)



要は、画像表示に至っては、
スタイルシートにたった2行を
書き換えるだけで解決できるのです!


どうですか、簡単ですよね。










トレジャーのカスタマイズはまだ終わりません!

コレもやっておくと便利で、
且つ訪問者から見てもスッキリした
印象を与える編集があります。


次の5ページ目をご覧ください。



アフィリエイトトレジャーのメニューの編集手順
(5ページ目)




 

スマホサイト作成記事一覧

室井良和さんのパーフェクトトレジャーとは

アフィリエイトトレジャーって何?改めて申し上げますが、アナタは、アフィリエイトトレジャーというサイト作成ツールをご存じですか?いえ、別の言い方をすれば、パーフェクトトレジャ...

モバイルフレンドリーに合格できるサイトの条件

大変勉強になったサイト室井良和さんのパーフェクトトレジャーとは(1ページ目)の続きです。実は、トレジャーツールを使ってスマートフォンサイトを作成したというそんなレビュー記事...

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

モバイルフレンドリーに合格できるサイトの条件(2ページ目)の続きです。いよいよ、トレジャーツールでスマートフォンサイトを作成するためのカスタマイズ方法を紹介します。先ほど掲載し...

アフィリエイトトレジャーの画像サイズの拡大縮小

アフィリエイトトレジャーのHTMLタグを編集(3ページ目)の続きです。1ページ目で紹介した、トレジャーでスマホサイトを作る方法を掲載したサイトは本当に参考になりました。モバ...

アフィリエイトトレジャーのメニューの編集手順

アフィリエイトトレジャーの画像サイズの拡大縮小(4ページ目)の続きです。さて、HTMLファイルを編集してスマホ表示ができるようになったり、CSSもカスタマイズして画像表示も無事...

アフィリエイトトレジャーでスマホサイト作成まとめ

スマホサイト作成のまとめアフィリエイトトレジャーのメニューの編集手順(5ページ目)の続きです。いかがですか。先ほどの、個別記事がズラーっと並んでた状態と比べても、だいぶスッ...