JUGEMテーマ:テンプレート



今朝、何気なく久しぶりに、iPhoneから自分のブログを見てみたら、最近の写真が横にはみ出してたり、Youtubeの動画も同じようにはみ出したりしてるのを発見しました。


それでネットで調べたら、どうやら、ローカルからアップした画像とかは大丈夫でも、YoutubeとかFlickrその他の外部のサービスのリンクをHTMLでパソコンで貼ると、パソコン上ではそのまま普通に見えるのにスマホだと横にはみ出すみたいです。


そこで、その解決策についてです。


 

 

  • 画像の場合



img { max-width : 100% ; height : auto;}とHTMLに加えれば良い、という説明が多く見られました。

写真のHTMLのところの、<img〜    >の内側に、max-width : 100% ; height : autoと付け足せば良いようです。

ただ、Jugemでそうやって試して、一度更新してうまくいったのに、もう一度見るとダメだったりということを何度か繰り返しました。
そのダメだった時にHTMLを確認すると、なんか書き直されてるんですよね。しかも、記述が抜けてる状態になって。

それで、ちょっと試行錯誤して、最終的には、勝手に修正された形に従って、

height="auto" max-width="100%” と書くと、うまくいきました。

一度上手くいくと、次からは、これをコピペすれば良いだけなんで楽でした。



こちらのサイトが参考になりました。


ブログ画像の自動調整と大きさの変更 | アフィラボ

 

 

  • 動画の場合


動画の場合は、割と簡単にいきました。

こちらのサイトにあるように、


YouTube動画をスマホに最適なサイズにしてみよう! | ブログカスタマイズ講座「ロベルトとポリンのStepUp!JUGEM」


class="movieif_smartphone_resize"という記述を、<iframe〜   >の末尾(</iframe>の前の>の直前)に付け足すだけで、できました。



 

  • 最後に



iPhoneで何度か確認したんですけど、一度画像がはみ出して表示されたページは、再度読み込み直さないと、きちんと表示されなかったりもしました。
さらに、再度読み込みをしてもダメな場合もあり、その時は一度タブを閉じて新規で開くと直ってたり、それでもダメな場合は一度ブラウザ毎終了させたら直ったりもしました。キャッシュの問題なんですかね。


あとJugemの場合は、右上のPC版というボタンを押してもらうと、パソコンと同じ表示にもなります。


それにしても、後で自分で気づいたのは、以前のパソコン嫌いの自分だったらHTMLをいじるとか無理だったでしょうね。

調べるのもしんどいし、今日みたいに少し試してみてうまくいかなかったからもう嫌になって諦めてたと思いますね。


Macだからこそ、余計なストレスがないから、気軽に普通に調べてトライ&エラーを繰り返しながらも、なんとかできたのかな、と思いました。


初めてMacでドヤ顔の意味が分かった時。 | Creative Arts Showers's Blog

Comment





   

Calendar

S M T W T F S
    123
45678910
11121314151617
18192021222324
25262728   
<< February 2018 >>
follow us in feedly

Profile

筆者説明文pc.jpg

Link

persimage 6のコピー.jpg


お勧め記事

《幸福度調査1位》幸せ大国デンマークの幸せの素「ヒュッゲ」を日本での生活でも増やしていきたいという話。 (2014.08.27)

スピリチュアルなセッションでも効果がイマイチだったり、嫌な思いをするケースもある原因について。 (2017/06/07)

神殿の神官系と街中の魔法使い系とか霊能者系、サイキッカー系のタイプや出来ることは実はかなり違うという話。

スピリチュアルで危険を回避し、安全に生活に活かしていくために必要な前提知識。サイキック的な能力推しの危険性について。 (2017.05.05 )

才能とか素質とか天才性は、結局どれだけその分野について努力できるかがかなり重要な判断基準だと思った件。 (2015/10/12)

現実的な成功法則とスピリチュアルの関係。引き寄せの法則の信憑性についても。 (2016/06/12)

瞑想の効果の科学的な検証が進み、「マインドフルネス革命」の兆しが現れてるとのこと。企業にも、教育にも、社会にも良い効果があると思います(2015/11/1)7)

人間にとっての「静かな」方のエネルギー(ハワイで言えばマナ)の重要性について (2015/06.04)

パソコン嫌いだった自分が、Macで苦手意識を克服した後、初めてMacでドヤ顔の意味が分かった時。 (2014.08.30)

スティーブ・ジョブズ氏がAppleを追放されたことで生まれたもの達、そして変わった世界。 (2014.12.04)

Appleのジョナサンアイブのエリートな凄さが良く分かる本「ジョナサン・アイブ 偉大な製品を生み出すアップルの天才デザイナー」読みました。(2015.01.13 )

ブログ第三章に突入中。やはりMacでブログ書くなら超有名ブログエディタアプリMarsEditは必須だなと振り返るこの半年。(2015/02/17)

Airmail2.0  Macの優良メールアプリがYosemite対応。通知センターウィジェットは便利。アカウントも引継ぎ可能。細かい変更点では最初戸惑った点も。 (2014/10/27)

役者さんが語る空気(エネルギー)(2014/06/18)

準静電界ー人とか物とかが発してるとされる電気の話ー (2014.10.14)

スピリチュアルじゃないと改善・解決しない問題もある。限られた一部のヒーリングじゃないと改善・解決しない問題もある。 (2016/11/06)

「エネルギーバンパイア」で検索したら特徴とか対策とかの記事が凄い数出てくる件。 (2015/01/09)

人間にとっての見えないエネルギーの重要性。心身の健康、運気、性格、気分、相性、素質、適性、やる気、信仰等、広範に関係・影響。(2015/09/14)

(遠隔)ヒーリングの存在意義とか効果やヒーラーの素質などについて。 (2015/04/21)

コテコテ系ではなく、分かり難いスピリチュアル。透明感重視。その方が俗世にも良い影響も及ぼしやすいのではとも思ったり。(2016/01/07)

エネルギーワークと脳と人間の変化の関係。脳科学的に人間が変わるのは簡単じゃない前提での、エネルギーワークの特異な効果や意味について。 (2016/07/21)

願望実現・目的実現のために、スピリチュアル×コーチング。深くから且つ現実的に前進可能。 (2017/02/11)

《レビュー》WiMAX2+ Speed Wi-Fi NEXT WX01 実速度大幅アップ。5GHz帯を利用できる点が評価高し。(2015/03/20)

Selected Entry

Mobile

qrcode

Archive

Comment

  • Things3が、Apple製品専用アプリならではの、素晴らしいタスク管理アプリだった!
    watarai
  • Things3が、Apple製品専用アプリならではの、素晴らしいタスク管理アプリだった!
    後藤
  • Macアプリ Airmail  Macの優良メールアプリがYosemite以降にも対応。通知センターウィジェットは便利。アカウントも引継ぎ可能。(追記) El CapitanのSplit Screenにも対応。
    watarai
  • Macアプリ Airmail  Macの優良メールアプリがYosemite以降にも対応。通知センターウィジェットは便利。アカウントも引継ぎ可能。(追記) El CapitanのSplit Screenにも対応。
    mona

Search

Other

Powered

無料ブログ作成サービス JUGEM