サポート » プラグイン » TinyMCE Advancedでのロールオーバーの方法

  • 解決済 alansmithee2015

    (@alansmithee2015)


    画像にマウスのポインタが触れたときに画像が変わるロールオーバーをしようと考え、
    検索で「TinyMCE Advanced」というのでロールオーバーができると知りインストールしました。

    設定のページで機能のボタンをいくつか見てみましたがロールオーバーをできるようなものが
    見当たりません。

    どのように設定すればよいのでしょうか。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • alansmithee2015

    (@alansmithee2015)

    トピ主です。

    ロールオーバーについては、こちらのトピックを拝読しました。
    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の標準仕様で画像にロールオーバーをさせることができたのでしょうか。

    alansmithee2015

    (@alansmithee2015)

    トピ主です。

    前述したこちらのトピック
    https://ja.forums.wordpress.org/topic/4524

    で、下から2つめコメント(質問者さまのコメント)で、

    成功したというタグが書かれてあります。

    ここにあるとおりにやってみたのですが、うまく行きません。
    編集ページの「テキスト」モードでこのタグを記入して「ビジュアル」モードにして、
    再度、「テキスト」モードにしてみたら、1枚目の画像のタグのみになっていて、タグの一部が消滅していまいました。

    リンク先のタグをその通りコピーしただけだったら、タグの書き方を間違っているかと思われます。
    また JavaScriptを用いた方法なので、「ビジュアル」モードにして、再度、「テキスト」モードに戻せば当然消えてしまいます。
    そして、閲覧者側のブラウザでJavaScriptをサポートしていない場合や、任意でJavaScriptの動作を止めている場合は、正しく機能しません。わたしも、ブラウザのJavaScriptは動作を禁じています。
    ですから、期待の効果は得られないと思います。

    alansmithee2015

    (@alansmithee2015)

    맹조さま
    ご回答ありがとうございます。
    JavaScriptではない方法をさがしてみます。
    ありがとうございました。

    前述したこちらのトピック
    https://ja.forums.wordpress.org/topic/4524
    で、下から2つめコメント(質問者さまのコメント)で、
    成功したというタグが書かれてあります。

    ここにあるとおりにやってみたのですが、出来ました。

    http://wp.me/p6z6Fn-1wn

    alansmithee2015

    (@alansmithee2015)

    맹조さま

    重ねてのご回答ありがとうございます。

    リンク先拝見しました。
    わざわざ試してくださったのですか。
    本当にありがとうございます。

    前述のトピック内のコメントにある「成功した」とされるタグが

    <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)'”&gt;

    そして、「ビジュアル」モードにしました。

    すると、編集画面には画像1が表示されていました。
    したがって画像1のURLは間違っていないことになります。(画像2も正しいはずです)
    (あらかじめ「メディアを追加」で同じページにアップしておいた画像1と画像2のURLを確認し、それぞれをコピペしたので間違っておりません)

    「プレビュー」してみました。
    画像1にマウスのポインタを触れてみました。しかし画像2に変わりませんでした。

    さらに、「テキスト」モードにしてみたら、さっきのタグの一部が消えてしまっています。

    以下のようになっているのです。

    <img src=”http://私のドメイン.com/wp/wp-content/uploads/2016/03/AAAAA.jpg ” alt=”” border=”0″ />

    原因がわかりません。

    上記のタグを単に編集画面の「テキスト」モードに記述するのが間違っているのでしょうか。

    「プレビュー」してみました。

    タグにミスが無いならば、テキストモードで「公開」しましょう。

    さらに、「テキスト」モードにしてみたら、さっきのタグの一部が消えてしまっています。

    ビジュアルリッチエディタに切り替えた時点で、タグが整理されているんですよ。

    alansmithee2015

    (@alansmithee2015)

    맹조さま

    重ねてのご回答をくださり大変ありがとうございます。

    アドバイスいただきましたとおり、プレビューなしで、「公開」しました。
    画像が表示されました。

    しかし、こういう現象が起きました。

    その前に、まず
    画像1(マウスポインタが触れないときの画像)
    画像2(触れたときの画像)
    とします。

    公開すると、ページに、

    ・画像1が表示された。
    ・画像1にマウスポインタが触れたら画像2が表示された。

    しかし、
    ・画像2からマウスポインタを離した瞬間
     画像1に戻らず、画像2も消えた。

    つまり、公開のページから、画像1、画像2とも、消えてしまいました(表示されなくなってしまいました)。

    alansmithee2015

    (@alansmithee2015)

    補足です。

    ブラウザの更新ボタンを押しました。
    すると再び画像1が表示されました。

    そしてマウスポインタが触れると画像2が表示されます。

    ここまではOKです。

    ところが、画像2からポインタを離すと、
    再びページから画像2だけではなく画像1も消えてしまいます。

    ブラウザの更新ボタンを押すと、再び画像1が表示されます。

    こういう現象が起きています。

    alansmithee2015

    (@alansmithee2015)

    맹조さま

    できました。

    大変すみません。原因が判明しました。
    私の単純なミスでした。

    コピーした

    <img src=”画像1のurl ” border=”0″ alt=”” onmouseover=”this
    .src=’画像2のurl ‘” onmouseout=”this .src=’画像1のurl‘”>

    の中に混じっていた後ろの方の丸カッコ  ) を削除せずにアップしておりました。

    これを取り除いて更新したところ、正常に画像1と2がロールオーバーしました。

    お手数をかけ申し訳ありませんでした。

    そしてアドバイスをいただきありがとうございました。

    「テキスト」から「ビジュアル」にしたときにタグが整理されることは
    知りませんでした。
    「テキストモードで公開する」ということを教えていただいたおかげで解決しました。

    解決といたします。

    本当にありがとうございました。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「TinyMCE Advancedでのロールオーバーの方法」には新たに返信することはできません。