TinyMCE Advancedでのロールオーバーの方法
-
画像にマウスのポインタが触れたときに画像が変わるロールオーバーをしようと考え、
検索で「TinyMCE Advanced」というのでロールオーバーができると知りインストールしました。設定のページで機能のボタンをいくつか見てみましたがロールオーバーをできるようなものが
見当たりません。どのように設定すればよいのでしょうか。
-
トピ主です。
ロールオーバーについては、こちらのトピックを拝読しました。
https://ja.forums.wordpress.org/topic/4524ここで、ご回答者が、ツールバーの「木のマーク」のボタンのことが触れられています。
この木のマークのアイコンが、ロールオーバーができるボタンのようなのですが、
私のWordPress(バージョン4.4.2)のツールバーには「木のマーク」のボタンが見当たりません。同じようにご回答者の中にも、この「木のマーク」のボタンが見当たらないと言われている方もいらっしゃいます。
検索してみましたら、
こちらの解説にある写真を見ると、ツールバーに木のマークがあります。
(ツールバーの上の段の「リンクの削除」のボタンの右)
http://wordpress-custom.jp/hosoku/wordpress-visual.html一方、こちらのほうのツールバーには木のマークはありません。
http://wp-exp.com/blog/advanced-toolbar/私のはこちらと同じです。
いま現在のWordPressのツールバーにこの「木のマーク」のボタンはないのでしょうか。
以前はWordPressの標準仕様で画像にロールオーバーをさせることができたのでしょうか。トピ主です。
前述したこちらのトピック
https://ja.forums.wordpress.org/topic/4524で、下から2つめコメント(質問者さまのコメント)で、
成功したというタグが書かれてあります。
ここにあるとおりにやってみたのですが、うまく行きません。
編集ページの「テキスト」モードでこのタグを記入して「ビジュアル」モードにして、
再度、「テキスト」モードにしてみたら、1枚目の画像のタグのみになっていて、タグの一部が消滅していまいました。リンク先のタグをその通りコピーしただけだったら、タグの書き方を間違っているかと思われます。
また JavaScriptを用いた方法なので、「ビジュアル」モードにして、再度、「テキスト」モードに戻せば当然消えてしまいます。
そして、閲覧者側のブラウザでJavaScriptをサポートしていない場合や、任意でJavaScriptの動作を止めている場合は、正しく機能しません。わたしも、ブラウザのJavaScriptは動作を禁じています。
ですから、期待の効果は得られないと思います。맹조さま
ご回答ありがとうございます。
JavaScriptではない方法をさがしてみます。
ありがとうございました。前述したこちらのトピック
https://ja.forums.wordpress.org/topic/4524
で、下から2つめコメント(質問者さまのコメント)で、
成功したというタグが書かれてあります。ここにあるとおりにやってみたのですが、出来ました。
맹조さま
重ねてのご回答ありがとうございます。
リンク先拝見しました。
わざわざ試してくださったのですか。
本当にありがとうございます。前述のトピック内のコメントにある「成功した」とされるタグが
<img src=”画像1のurl ” border=”0″ alt=”” onmouseover=”this
.src=’画像2のurl ‘” onmouseout=”this .src=’画像1のurl)'”>とありますので、私もこのタグで試してみたのです。
WordPressの、「固定ページの編集」の画面の、「テキスト」の編集モードで
上記タグをコピー&ペーストしました。
そして、画像パスのURLの箇所を、下記のように修正しました。<img src=”http://私のドメイン.com/wp/wp-content/uploads/2016/03/AAAAA.jpg ” border=”0″ alt=”” onmouseover=”this.src=’http://私のドメイン.com/wp/wp-content/uploads/2016/02/BBBBB.jpg ‘” onmouseout=”this .src=’http://私のドメイン.com/wp/wp-content/uploads/2016/03/AAAAA.jpg)'”>
そして、「ビジュアル」モードにしました。
すると、編集画面には画像1が表示されていました。
したがって画像1のURLは間違っていないことになります。(画像2も正しいはずです)
(あらかじめ「メディアを追加」で同じページにアップしておいた画像1と画像2のURLを確認し、それぞれをコピペしたので間違っておりません)「プレビュー」してみました。
画像1にマウスのポインタを触れてみました。しかし画像2に変わりませんでした。さらに、「テキスト」モードにしてみたら、さっきのタグの一部が消えてしまっています。
以下のようになっているのです。
<img src=”http://私のドメイン.com/wp/wp-content/uploads/2016/03/AAAAA.jpg ” alt=”” border=”0″ />
原因がわかりません。
上記のタグを単に編集画面の「テキスト」モードに記述するのが間違っているのでしょうか。
「プレビュー」してみました。
タグにミスが無いならば、テキストモードで「公開」しましょう。
さらに、「テキスト」モードにしてみたら、さっきのタグの一部が消えてしまっています。
ビジュアルリッチエディタに切り替えた時点で、タグが整理されているんですよ。
맹조さま
重ねてのご回答をくださり大変ありがとうございます。
アドバイスいただきましたとおり、プレビューなしで、「公開」しました。
画像が表示されました。しかし、こういう現象が起きました。
その前に、まず
画像1(マウスポインタが触れないときの画像)
画像2(触れたときの画像)
とします。公開すると、ページに、
・画像1が表示された。
・画像1にマウスポインタが触れたら画像2が表示された。しかし、
・画像2からマウスポインタを離した瞬間
画像1に戻らず、画像2も消えた。つまり、公開のページから、画像1、画像2とも、消えてしまいました(表示されなくなってしまいました)。
補足です。
ブラウザの更新ボタンを押しました。
すると再び画像1が表示されました。そしてマウスポインタが触れると画像2が表示されます。
ここまではOKです。
ところが、画像2からポインタを離すと、
再びページから画像2だけではなく画像1も消えてしまいます。ブラウザの更新ボタンを押すと、再び画像1が表示されます。
こういう現象が起きています。
맹조さま
できました。
大変すみません。原因が判明しました。
私の単純なミスでした。コピーした
<img src=”画像1のurl ” border=”0″ alt=”” onmouseover=”this
.src=’画像2のurl ‘” onmouseout=”this .src=’画像1のurl)‘”>の中に混じっていた後ろの方の丸カッコ ) を削除せずにアップしておりました。
これを取り除いて更新したところ、正常に画像1と2がロールオーバーしました。
お手数をかけ申し訳ありませんでした。
そしてアドバイスをいただきありがとうございました。
「テキスト」から「ビジュアル」にしたときにタグが整理されることは
知りませんでした。
「テキストモードで公開する」ということを教えていただいたおかげで解決しました。解決といたします。
本当にありがとうございました。
- トピック「TinyMCE Advancedでのロールオーバーの方法」には新たに返信することはできません。