WEB制作技術やツールこんにちは。新潟ホームページ制作【マザーシップ】です。「テキストが横に流れていくアレ」についてご紹介します。業界用語(?)で「ティッカー」と呼ぶらしいです。10年くらい前に流行したあと一度廃れた気がするこのティッカーですが、スマホ対応のサイトが増えるとともに、省スペースで「重要なお知らせ」を目立たせつつ見せたいという目的で実装の依頼が増えてきています。【pure】さんです。<marquee>タグですが昔は<marquee>タグでOKでしたよね。ガラケーサイトを制作するときにもよく使っていたような気がします。<marquee>文字</marquee>簡単な記述で実装できますし、ネットスケープでは動作しないとありますが、最近の大抵のブラウザでは動作するようです(最新のIE,クローム,サファリ,Firefox,Operaなどで確認できています)しかし、「HTML5で廃止されるタグ」という点が個人的には気になっており、今後制作するホームページでは使わないほうが良いのかなぁと思っています。CSS3のマーキーモジュールHTML5で廃止された<marquee>タグのかわりにCSS3に「マーキーモジュール」なるものが登場しました。marquee-style:scroll">文字</p>みたいな感じで実装します。こちらは動作するブラウザが少なすぎて、実用は厳しいです。今はjQueryを使った実装が一般的なようです。私がよく使っているのは、coolcarousels。下の画像をクリックすると、デモをご覧いただくことが可能です。list何がいいかというと、汎用性の高さ。1つのjsファイルで次のようなカルーセルを一緒に実装できちゃうところが気に入っています。src='http://yoursite.jp/アップロードしたフォルダ/jquery.carouFredSel-6.2.1-packed.js'></script>デモページにあるHTMLタグ、Jsタグ、CSSタグを参考にいろいろと書き込めばOKです。ティッカーの場合、なるべくシンプルにすると下記のような記述になります。Fieldsなどを駆使して、更新しやすくカスタムすることをおすすめします。Ticker」が今のところのおすすめです。インストールが完了すると、管理画面のサイドバーにというメニューが現れて、こんな感じで入力が可能です。入力が完了するとショートコードが現れるので、それをテンプレートあるいは記事内に貼り付ければOKです。移動する方向やスピードも管理画面から調整可能です。こちらのプラグイン、日本語仕様ではないため最初は戸惑うかもしれませんが、一度覚えてしまえば実装も更新も簡単です。いうわけで、ティッカーいかがでしたでしょうか。皆様のホームページ制作のお役にたつことができましたら幸いです。ゆうこ新潟市在住、SOHO(フリーランス)のWEBデザイナー兼子育て中の主婦です。Web関連職では約10年の実務経験があります。ご用件に関わらず、全てお断りします。10:00~17:00土日祝日はお休みいただいております。