mirimiricutch.com

ミリミリカッチドットコム
<< November 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
 
PROFILE
ARCHIVES
RECENT COMMENT
MOBILE
qrcode
RECENT TRACKBACK
無料ブログ作成サービス JUGEM
 
サイトにtwitterウィジェットが表示されないのを解決

 

調べてみてもなかなかわからなかった

ことを何とか自己流で解決できたので、

WEBのルール的に正しいかどうかは

甚だ怪しいですが、とりあえず記録。

 

 

ホームページに、任意のTwitterの

タイムラインを表示するやつ。

Twitterウィジェットの件です。

 

 


0

    タイムラインが表示されない

     

    こちらのサイトの右ちょい下、

    Twitterのタイムラインが貼られてます。

    これがTwitterウィジェット。

     

    ホームページを持っていて

    なおかつTwitterアカウントを持ってる

    サイトは、よくこういうことしてますよね。

     

    こういうのを、私がメンテをしてる

    映画『じんじん』のサイトで

    表示していたのですが、

    (左下に表示されてると思います)

    ある時期から、

    表示されなくなってしまったのです。

     

     

    (画像はクリックで同じ拡大

    →ブラウザの「戻る」で本文に。以降同様)

     

    こんなかんじ。

    メインの写真の左下に、

    NEWSとしてブログのタイトルは

    表示されていますが、

    その下にTwitterのタイムラインが

    出てきていない。

     

    Firefoxだけ表示されてる…

     

    Safari、IE、Chromeで

    このようになり、

    Firefoxだけは表示されるという

    不思議な状態。

     

    ちなみに、なぜ

    「Twitter表示されない方はこちら」

    というメッセージが出ているかというと、

     

    デフォルトなら

    「@jinjin-movieさんのツイート」

    という文字だけが出るようになっています。

     

    表示されない原因がなかなか特定されず、

    当分解決できそうにないなと思ったときに

    「@jinjin_movieさんのツイート」

    という言葉は、その文字をクリックして

    Twitterのページを読みに行ってもらうには

    案内としてわかりづらいと思ったので

    ソースを書き直したのでした。

     

     

    ↑黄色くマーカーした箇所です。

     

    いちおう簡単に解説しておくと

    この「じんじん」トップページは

    実際に触ってみていただけると

    わかるのですが、写真の下に散らされた

    ちぎった色紙やメモのようなものは

    すべてリンクボタンで、

    クリックするとポップアップが出てきたり

    なかなか凝ってるのです。

    (デザインは私ではないです)

     

    Twitterの表示部分の位置などは

    別ファイルのCSSで指定しています。

     

    あれこれ解決方法をネットで

    探してみたんですが、

    多くのサイトでは

     

    「Safariだけ表示されない」

    「IEは出てるけどFirefoxがダメ」

     

    というのが多い。

     

    私のように、Firefoxだけ表示される人は

    いないようでした。

     

    ウィジェットを埋め込んでいる

    htmlのソースはもちろんのこと、

    Twitterのウィジェット画面にも

    行ってみて、いろいろいじってみたり

    twitter表示部分のcssも

    いじってみましたが、効果なし。

     

    Twitterのサイトで

    新しいウィジェットも配布されたので

    そちらで設定しても全く同じ状況。

    (新しいウィジェットは、

    個別にふられるIDが

    こちらから見えないようになっていました)

     

     

    「Firefoxだけ大丈夫」のケースを発見

     

    原因がわからないままいろいろ読んでるうち

    「ウィジェットの見た目(色や罫線など)を

    jQueryやJavascriptで指定する方法」

    なんてのが出てきた。

     

    ますます「??」になりながら読むと

    それを使用する理由として

    「Firefoxは問題なく表示されるようだが

    SafariやChromeでは

    レスポンシブデザインの場合

    外部ファイルはiframeで読み込むことでしか

    表示の順番を認識できない、

    とか何とかかんとか。」

     

    (ごめんなさい出典ページメモ忘れました)

     

     

    おっ、はじめて出てきた

    「Firefoxは大丈夫だけどそれ以外はダメ」

    のケース。

     

    そして「表示の順番」に、お、と思った。

     

    さっきも書きましたがこのトップページは

     

    いろんなメモ風のリンクボタンを

    ベースの背景の上にぺたぺたと

    貼りつけるように作っていて、

    ためしにCSSのz-indexなどを

    いじってみると、タイムラインを

    覆い隠すようにリンクボタンが出たりする。

     

    こんな複雑な表示指定だから

    (すみません自分で作れないもんだから…)

    表示されないだけなのかもしれない。

     

    ウィジェットだけの別ファイル

     

    ためしに、とtwitterウィジェットだけの

    ページ(twi.htmlと名付けた)を作成。

     

    ソースはこんなかんじ。

     

     

    すると、SafariでもChromeでも

    あっさり表示されるじゃないですかー!

     

     

    iframeで別ファイルを表示

     

    そうか、表示されなかったのは

    index.html(とcss)内での

    表示順序の指定が、

    SafariやChromeやIEには

    なんかうまくいってなかったり

    足りてなかったりしたんだ(適当…)。

     

    じゃあ、このファイルを

    iframeで呼び出せばいいのでは?

    と、思いついたのでした。

     

    jQueryとかJavaとか

    全然使わないけど、大丈夫かな?

     

    とりあえず今までのウィジェットも

    残したまま、雑にiframeを入れてみる。

     

     

    ブラウザで見てみると…

    表示された!

    SafariでもChromeでも大丈夫です。

     

     

    しかしウィンドウが小さい。

    で、widthとheightを指定する。

    そしてついに今までのウィジェット部分を

    ソースから外してみた。

     

     

    おぉぉ 表示されました。

    しかし下に長い。

    リンクボタン(メモ画面)が

    隠れてしまっている。区切り線については

    frameborder=0を入れる前のものです。

     

     

     

    高さを短くし、ついでに、widthも

    iframe分のスクロールバーが

    出ないけどそのぶん場所をとってるので

    cssよりも少し広めに指定し直した。

     

     

    Twitterのウィジェットのところも

    高さ600で指定してたのを短くする。

    フッタの「埋め込む・Twitterで表示」

    が表示されるように。

     

     

    さっき作ったtwi.htmlを新規アップロード、

    そしてindex.htmlを更新アップしたら

    このやり方が正しいかどうかはともかく

    ちゃんと表示されました!

     

     

    ==================

     

    日々の仕事のなかで、

    詳しい人に教えていただいたり、また、

    知らない誰かがアップしてくださっている

    WEBやDTP、パソコン関係の

    解決法、対処法みたいな記事に

    これまで、どれほど助けられたか

    わからないので、

     

    すごく怪しい解決法かもしれませんが

    ひとりでも同じ悩みの誰かの目に留って

    解決のお役に立てたらと思いました…

     

    (そのやり方は違うよ、とか

    それじゃうまくいかなかったよ、とか

    すでに◎◎に出てるよ、とかいう
    ご指導ツッコミ歓迎です。汗)

     

    コメント
    コメントする









     
    トラックバック
    この記事のトラックバックURL
    http://mirimiricutch.jugem.jp/trackback/793528