サイドバーの画像が伸びてしまうのを止める方法

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
  • 0

このサイトのThemeをLP DesignerからSimplicityに変更したのは、WordPressのPluginをなるだけ使いたくなかったことが一番の理由でした。サイドバーにサムネイル画像を表示するNewpost CatchやImage Widget、Wordpress Popular Postなどを使っていたのですが、スマートフォンなどで表示する時にサイドバーが本文の下に移動する仕組みになっている。その時、サイドバーの画像が本文の幅一杯の伸びてしまい、みっともないことになっていました。Simplicityは新着記事や関連記事がディフォルトで用意されており、スマートフォンで表示しても何も問題が起こらないという良さがあります。

広告

Theme本体のStyleシートに画像表示方法を記述することで横伸び表示を回避する

image-widget

Image Widget

Image Widgetだけはバージョンアップをしないできた

勿論、スマートフォンの表示がおかしいまま放っておいたわけではありません。なんとか画像が伸びない方法を見つけ、それをTheme本体のStyleシートに記述しておくことで回避していました。しかし、Image Widjetだけはどうしようもなく、スマートフォンの表示がおかしくならないバージョンのままにしておくという苦肉の策を採っていました。しかし、バージョンアップを促す表示がつきっ放しとなっており、あまり気持ちの良い方法でなかったのは事実でした。何とかならないのか・・・と2年ぶりに挑戦してみたところ、本体のStyleシートに記述することで回避できる方法を見つけたので備忘録として残しておきます。

Image WidgetでLink ID設定可能になっていた

XAMPP上のテストサイトでまず、Image Widgetに類した他のPlug-Inを試してみました。レスポンシブに対応というResponsive image Widgetというのもありましたが、スマートフォンでの表示はまったく同じでした。他にも幾つか試してみたのですが、どれもうまく行きません。走行しているうちにImage Widgetを削除してしまい、インストールし直すことになってしまいました。そして今まで通りの設定に直していると、設定の仕方に少し手が加えられていることに気が付きました。設定項目が少し増えており、その中に『Link ID』というのがあったのです。ひょっとするとと思って調べてみると、これを使うことでStyleシートに表示方法を指定できることが分かりました。

本体のStyle使途に記述を追加して成功

問題はStyleシート内の記述方法なのですが、いろいろいじくっているうちに何とかうまく行く方法が見つかりました。ここではLink IDを『imagewidget』としています。また、画像のサイズなどはメインサイトで実際に使っているものとしました。Theme本体のStyleシートに以下の記述を加えただけです。

#imagewidget img {
	width: 90px;
	height: 90px;
	float: left;
	padding: 0px;
	box-shadow: 0px 0px 7px #bbb;
}

これでスマートフォンでも問題なく表示されるようになりました。

でも、こんな面倒な事しないでも良いのではないか?

ここまで来て大きな疑問が出てきました。LP Designerで結構苦労しているけど、Simplicityでは何故何もしないでスマートフォンでうまく表示されるのだろうか?恐らく、Simplicityではサイドバーが本文の下に来ても画像が横に伸びない設定になっているのだろう。同じことをすればLP Designerもこんな苦労をしなくて良いかも・・・・・・今後はそれを確かめてみよう。

広告
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>