転職サイト系 中級アフィリエイター

いいえ、トップアフィリエイターではございません。

テキストや画像を動かすHTML【<marquee>】


こちらのASPへの登録はお済みですか?

まずは、広告主が多いASPや、メジャー案件を扱う大手ASPを登録からしましょう。

クローズド案件、ニッチ案件などは、ある程度、アフィリエイトのコツを知ってから登録しても遅くないです。

取り組むジャンルとしては、転職系以外には、無料お試し、一括見積り、無料見積り、自動車保険などのジャンルが初心者にはおすすめです。

登録必須の大手ASP


CSSを使わなくても、HTMLだけでテキストや画像を動かす方法の紹介です。

<marquee>動くテキスト</marquee>

とHTMLで記述すると以下のようになります。

動くテキスト

アフィリエイトの商品説明の際に使ったり、アイキャッチ的な意味合いで用いる事ができます。

 

ちなみに、二行になるような文字数の場合だと勝手に改行された状態で、文字が動いてしまう事があるので、長い文章を動かそうとする場合は注意が必要です。

もし、自動で改行されてしまう場合は、

<nobr>改行させたくないテキスト</nobr>

とする事で改行されるのを防ぐ事ができます。

 

上記と合わせると、

<nobr><marquee>動くテキスト</marquee></nobr>

というような記述になります。

 

もし、改行させたい場合は、改行させたい箇所に<br>を記述すればOKです。

1行目
2行目
3行目

<marquee>1行目<br />2行目<br />3行目</marquee>

これはテキストで表示していますが、画像<img>でも同じように動かす事が可能です。

 

【<marquee>】の使用バリエーション

1.左から右

左から右に動くテキスト

 <Marquee direction="right">左から右に動くテキスト</marquee>

 

2.左右移動

左右に動くテキスト

 <Marquee behavior="alternate">左右に動くテキスト</marquee>

 

3.下から上に移動

指定した範囲を
下から上に
動きます。

<marquee direction="up" width="300" height="100" >指定した範囲を<br />下から上に<br />動きます。</marquee>

<marquee direction="doown">にすると上から下に動きます。

 

4.動く速度を調整

動く速度を調整(早く)

動く速度を調整(遅く)

 <marquee scrollamount="50" truespeed="">動く速度を調整</marquee>

数値を大きくすると早くなります。小さくすると遅くなります。(早く:50、遅く:2を指定しています。)

 

5.背景をつける

文字が動く部分の背景を黄色にする。

<marquee bgcolor="yellow">文字が動く部分の背景を黄色にする。</marquee>

 

いくつかのバリエーションをコンビネーション

コンビネーション

 <marquee bgcolor="red" direction="up" height="50" scrollamount="2" truespeed=""><marquee behavior="alternate">コンビネーション</marquee></marquee>

 

【<marquee>】の使い方アドバイス

テキストを動かす方法は、CSSで調整する事もできますが、HTMLで動かす方法は、特定の記事の特定の箇所(テキストor画像)のみを動かしたい場合に重宝します。

アフィリエイトリンクのボタンなどはCSSによってアニメーション化させた方が、のちのち管理が楽なので上手に使い分けて下さい。