Bangパソコンの電源を入れた時、メモリー空間に無限の宇宙が拡がる画像が縦長か横長か調べて自動でクラス名をつけるJavaScript画像が横長なのか、縦長なのか、正方形なのかで分けて、それぞれクラス名を追加するJavaScriptを書いてみました。読んでもらっているページに「絶対はみ出さない画像!自動でサイズ調節するスタイルシート」というのがあるんですが、これに関連したことで「スマホで見ても、すべての画像が横幅いっぱいになって、はみ出さなくなったんですが、縦長の写真だけサイズを変えられないか」という質問を受けました。スポンサーリンクうちでよく読んでもらっているページに「絶対はみ出さない画像!自動でサイズ調節するスタイルシート」というのがあるんですが、これに関連したことで質問を受けました。「スマホで見ても、すべての画像が横幅いっぱいになって、はみ出さなくなったんですが、縦長の写真だけサイズを変えられないか」という内容です。画像が横長なのか、縦長なのか、正方形なのかで分けて、それぞれクラス名をつければいいんですが、もうすでに大量のページがある場合は全ページを修正しなくてはいけないし、そうでないとしても毎回画像毎にクラス名を割り当てるのは大変です。そこで、自動でクラス名を追加するJavaScriptを書いてみました。画像のサイズを調べてクラス名を割り当てるJavaScript今回、参考になったのは次のページです。これが非常に素晴らしい内容で、作業がとても簡単になりました。ありがとうございます。こじょらぼで、実際に作ったソースはこんなカンジです。直前」につけるのがいいと思います。いうクラス名が追加されます。square_outerというクラス名が追加されます。このクラス名毎にスマホ専用スタイルシートを書けば、好きなように表示を変えられます。お気づきかと思いますが同じ親ノードの中に、縦長と横長の両方の画像があった場合、両方のクラス名が親ノードに追加されるので、その部分は思ったように表示されないと思います。サンプルページこのスクリプトを適用していない場合と、適用した場合のサンプルページを用意しました。2つのページの違いはスクリプトをつけているか、いないかだけです。スマホで見ても絶対にはみ出しませんが、スクリプトを適用したページだけ、縦長と正方形の表示が変わります。スクリプトを適用していない場合http://dwm.me/download/vertical_and_horizontal_ratio_js_sample_1.htmlスクリプトを適用した場合http://dwm.me/download/vertical_and_horizontal_ratio_js_sample_2.htmlサンプルページのスタイルシートは次のようになっています。200px;}</style>真ん中合わせにしたいのに、左寄せになってしまう場合は下のように変更してください。auto;}2015年1月9日追記:今年になってSeesaaブログでの表示で縦の長さが固定されてしまい、表示がおかしくなったというご指摘がありました。追加してもいいかもしれません。これを、ページの本文にだけ適用させたくて、サイドバーなどそれ以外の部分には影響を与えたくない場合があると思います。中にあるので、それをスタイルシートに追加してください。(同じSeesaaブログでも構成の違うテンプレートがあるようです。詳しくはコメント欄を参照してください。)具体的に言うとこんなカンジになります。10:45すみません。うまく反映できません。上部のスクリプトをデザイン-スマートフォン-コンテンツで自由形式に貼り付け追加しました。デザイン-スマートフォン-デザイン一覧から使用している[photo]というデザインを選び、をスタイルシートの一番下に追加してみました。「ぼぶのラーメン紀行」と「くいどうらく日記」を見てみました。現状は「ぼぶのラーメン紀行」にはスクリプトのみ貼り付け中。追加したスタイルシートは元に戻して外してある。「くいどうらく日記」の方はスクリプトもスタイルシートも両方つけていない。いうことであっているでしょうか。原因ですが「ぼぶのラーメン紀行」と「くいどうらく日記」では、テンプレートの構成が違うようです。いうのは「くいどうらく日記」には、そのまま当てはまります。「くいどうらく日記」に適用する場合は、そのままで行けると思います。「ぼぶのラーメン紀行」のテンプレートは最近出来た新しいタイプのようで違う構成になっていました。.text」を「.article-body」に変更してください。(article-bodyの前にはドットが必要です)具体的には次の通りのスタイルシートで本文中にある、縦長の画像だけ横幅120ピクセルで中央配置になります。数字を変えれば変更できます。すれば左寄せになります。」という項目があります。写真があるのは「記事」だけなので、「記事」のスタイルシートの最後に追加してください。10:43お世話になります。ラーメン紀行・・・指示通りにやったつもりですが、スマートフォンでは縦長画像は100%幅表示のままです。くどうらく・・・PCの表示がおかしくなってしまいました。これまで使っていたデザインを初期値にもどしても、ほかのデザインを使ってもサムネイル画像もすべて100%表示になってしまいました。頭がこんがらかってきました。09:04その後ゆっくりやってみたところ、ラーメン紀行の方は当初の目的は達成したと思います。ありがとうございました。らくの方はスマホの専用ページが、一覧は出ますが記事そのものが全く表示されなくなってしまいました。改良を施してはもどし、していたので原因がわかりません。デザインを新しいものに変えてもだめでした。14:21「くいどうらく日記」について理由はわかりませんがスマホ版はHTMLそのものがおかしくなっています。PC版は正常なので、配置したパーツに原因があるのかもしれません。「記事」を一旦捨てて同じ場所に新しい「記事」を配置してみてください。それで直らなければシーサーのサポートに問い合わせてください。http://www.seesaa.co.jp/pages/enq/input.pl?enq=2写真のレイアウトについてですが「くいどうらく日記」に関しては直ったページを見ないことには回答できません。##############################################################「ラーメン紀行」について写真レイアウトのスクリプトはうまく動いているようです。ひとつ、スタイルシートで真ん中合わせの指定が効いていませんでした。理由はスマホ版テンプレートが予想していなかったHTMLに変更されていたからです。今のままで問題がなければ直す必要はありませんが、もし縦長写真を真ん中合わせにしたい場合は次のようにスタイルシートを変更してください。auto;}これで縦長写真は真ん中合わせになりますが、左合わせが良ければ今のままで構いません。22:39くいどうらくご支持通りにやりましたが、変わりません。それよりデザインを変えるように設定してもデザインすら変わらないようになってしまいました。サポートにも聞いている最中です。ラーメン紀行こちらは今のままで満足です。本当にありがとうございました。12:20くいどうらくの方ですが、コンテンツの「記事」を配置するところが間違っていました。正しい場所に移したら表示はされるようになりました。横長の写真が相変わらずはみ出ます。思い通りになっています。それで、正しく表示されると思います。今お書きになっているスタイルシートのままですと次のように本文以外の画像表示がおかしくなります。