脳窓全開ブログ

どうでもいいことにムキになりながら無駄に熱く長く書きなぐる日記帳ウェブログ。毎日更新!

    タグ:リッチエディタ


    確か、一昨年の6月頃、リッチエディタでの改行及び行間に不具合が生じる問題が起きた。

    ※参照:
    【解決済み】<追記あり>ドラッグ&ドロップ画像アップロード実装後、発生している問題と改善について

    元々は「画像のドラッグ&ドロップによるアップロード機能」に端を発した問題だったようだけど、それについては割愛。要はそれのせいで「改行をおこなった時に、正しく改行されなかったり、行間が開きすぎたり、詰まりすぎたり、意図しない仕上がりになる」という不具合が起きていたというもの。

    実際のところ、これには僕も悩まされていて、その回避策としてぼくは、お題以外はリッチエディタの「以前のバージョン」を使うことで、この問題を回避していた。

    ※注:
    何故、お題の時はそうしなかったかというと、以前のバージョンからお題を書こうとすると、TBのURLをいちいち取得して、記事投稿時にペーストしなきゃいけなかったり、そこまでしているのに、TBが正常に送信されなかったりするエラーに度々見舞われていたためだった。

    そこで、色々調べた結果「あるタグをCSSにブッ込めばいいだけ」ということがわかり、実践してみたところ、結果として、問題が解消された。

    なので、今回はその手順についてシェアしたいと思う。 【【JUGEM】JUGEMブログのリッチエディタの改行・行間問題は、このタグで解決する。】の続きを読む ■EDIT

    かなり以前に「リッチエディタのYouTubeボタンを使って、Amazonのアフィリタグをブッ込む!」というエントリを書いた。

    ※関連過去ログ

    上記エントリの概要としては「YouTubeボタン」は「iframe」というタグを認識するからamazonの個別商品リンク(テキスト&画像)も同様に反映される、というようなことを書いた・

    けど、これ「テキストのみ」とか「画像のみ」の場合だと「iframe」じゃないから出来ないのかと思いきや、なんと普通にできてびっくりしたので、ここにシェア。

    手順としては、上記エントリと全く一緒。

    YouTubeボタンをクリックし「埋め込みコードを貼り付けて下さい」の欄に「amazonの画像リンク(a href=ではじまるHTMLタグ)をそのまま放り込むだけ。 何気なくダメ元でこのコードをYouTubeボタンの埋め込みコード欄に放り込んだら、普通に画像リンクが表示されてビックリした。iframeタグじゃなくてもいける!

    ※詳細は1個前のエントリ「【お題】暖房器具は、なにをつかっていますか?」を参照のこと。

    リッチエディタを使っていて、amazonのアフィリエイトリンクを貼りたい人は、是非試してみるといいですよ!いちいちHTMLモードにひっくり返すの面倒ですもんね。

    ※注1: この裏ワザが通用するのは、リッチエディタの「以前のバージョン」のみとなります。
    ※注2: バージョン切り替えの際は、書いている途中ではなく「書く前」あるいは「一旦下書き保存してから」切り替えるようにしましょう。じゃないとせっかく書いた文章が消えますのでご注意を。

    ■EDIT

    ●リッチエディタのYouTubeボタンからの埋め込みで、Amazonのアフィリタグをブッ込んでちゃんと表示されるか
     

    いけた!すげえ!  

    ということで、JUGEMでアフィリエイトをやるのに「レビュー機能がどうも使い勝手が悪くて嫌だなあ。でもAmazonのアフィリエイトは貼りたい!」とか、「記事文頭或いは文末ではなく、記事中の任意の場所にアフィリ広告を貼りたい!」って思ってた人にとっては、ちょっとした朗報ではないだろうか。  

    まあ、普通に<HTML>モードで入れるのとやってることは全く一緒なんだけど、自分みたいに文中に段落を入れる人や、リッチテキストを色々いじりすぎて<HTML>モードから戻した時にレイアウトが崩れちゃうから嫌!って人にとってはそれなりに需要はあると思う。  

    ちうことで、以下、手順おさらい。  


    ■リッチエディタ:入力支援ツール「YouTube」ボタンを使ってAmazonのアフィリエイトタグを挿入■

    1. リッチテキストモードの入力支援ツール「YouTube」ボタンをクリック  
    2. 別途表示されるダイアログボックスの「埋め込みコードを貼り付けて下さい」の部分に、Amazonの<iframe>タグをブッ込む!


    リッチテキストフィールドには、下書き保存前なら、Amazonのリンクがそのまま表示される。 プレビュー後は、「IFRAME」と書かれたBOXが表示されている筈!  

    多分これって、前回も書いたけど、YouTubeボタンの埋め込みコードを入れる所って<iframe>タグを入れる想定になっているから出来ることなんだと思う。

    ※関連過去ログ

    要は中身のURLとか、動画であるか広告であるかまではどうでもよくて「<iframe>タグであるかどうか」ってところが重要なんでしょう。  

    では前回「ニコ動のURLが貼れた」という現象についてだけど、多分、埋め込みコード入力BOXについては、URL入力欄よりも定義が広くて、「とりあえず動画URLさえあれば、リッチテキストフィールドに表示できるか否かは別として、認識はできる」っていう作りなんだと思う。

    動画絡みではないURLで試してないからわからないけど、多分そういうことだと思う。いずれにせよ、これは個人的にいは大発見だ!

    ※注1: この裏ワザが通用するのは、リッチエディタの「以前のバージョン」のみとなります。
    ※注2: バージョン切り替えの際は、書いている途中ではなく「書く前」あるいは「一旦下書き保存してから」切り替えるようにしましょう。じゃないとせっかく書いた文章が消えますのでご注意を。

     

    ■EDIT

    記事投稿の動画埋め込みにおいて、リッチエディタ上での支援パネルのYouTubeボタンは、当然のことながらYouTube動画を埋め込む前提となっている。

    が、埋め込みタグを打ち込むダイアログボックスに、例えばニコ動などの別の動画サイトのタグを打ち込んでも動作するのかが不意に気になり検証してみたところ、普通に埋め込みが出来てびっくりした。

    通常YouTube動画を埋め込んだ場合、リッチテキストエリアには「iframe」と書かれたボックスが表示され「そこに動画が埋め込んであるんですよ」ということが視覚的にわかるようになっている。  

    しかし別のサイトの埋め込みタグを入れた場合、リッチエディタの<HTML>モードだとソースはちゃんと表示されるものの、リッチテキストエリアには何も表示されない。

    なので、これで記事を書こうとするとちょっと大変だと思う。(見えてないものの存在を常に意識しながら書かなくてはならないので)

    ●わかったこと  
    入力支援パネルとYouTubeボタンに、ニコ動の埋め込みタグ(といってもニコ動の場合、純粋に動画URLだけど)を入れたら、リッチエディタのリッチテキストエリアには何も表示はされないが、プレビューするとちゃんと動画は埋め込まれる。

    ●推測  
    リッチエディタの入力支援パネルでのYouTube埋め込みボタンは「iframeタグを入れる前提」になっており、動画の埋め込みタグが通常URLやembedタグではなくiframeだった場合については、恐らく従来通りの挙動で問題なく作動する。


    まあいずれにせよ推奨されないやり方ってことに変わりはないですね。  

    わざわざこんなわかりにくくなってしまうくらいなら、普通に<HTML>モードにひっくり返して埋め込みタグを放り込んだほうがいいと思った。  

    今回はニコ動でしか検証してないけど、今度は埋め込みタグが<embed>だった場合についても検証してみようと思う。多分結果は同じだろうけど。  

    ※160507(土):追記
     ⇒いろんな動画サイトを探してみたけど、そもそも今時<embed>というタグをどこも使ってなかった。
     ⇒もう今はみんな<iframe>タグだった。  
    【【JUGEM】リッチエディタのYouTube埋め込みで、他の動画サイトの埋め込みタグを入れたらどうなるか試してみた】の続きを読む ■EDIT

    このページのトップヘ