弐条海月の とはずがたり

そこはかとなく書き綴るブログなるもの

» 2012-12-07の日記

サイドバーの表示不具合が解消…

このサイト「弐条海月の とはずがたり」はWordPressを利用しております。現在、サイトのテーマをサーバー上でリアルタイムに変更中です(笑)。それゆえに見苦しかったりするのだけれど、なかなかパソコンにじっくりと向かう時間が取れず作業があまり進んでおりませんでした。そんななか、今日はふたつのサイドバー(左と右)でスタイルに違いが出る理由が分からず難儀していた問題が解決。ようやく前に進めそうな気がして…少しだけ気分がよいです。そんなお話。

以前から書いておりますように、スマートフォン、タブレット、パソコンのどれで見ても最適な表示がされるようこのサイトに「レスポンシブ・レイアウト」を取り入れているところです。スマートフォン(縦)では1カラムの縦長のページとなり、スマートフォン(横)とタブレット(縦)ではサイドバーをひとつ表示する2カラムのレイアウトにします。そしてタブレット(横)とパソコンではサイドバーをふたつ表示して3カラムのレイアウトにします。html5とCSS3を使います。古いブラウザでは表示が崩れるのではなく、CSSが読み込まれずブラウザのデフォルト表示になるようなので特に意識して対応しなくてもよさそうです。

さて話を戻して…。ふたつのサイドバーの見出しの表示に違いが出てしまう問題を解決したのでした。CSS的には違いがないはずなのに、右側では<h3>の見出しが100%で表示されているのに、左側ではpadding-leftが適用されているな表示になるのです。それがどうやってもそれが解消しなかったのです。

で、その問題が解決しました。それは結論から言えば…CSSではなくテンプレートの問題でした(笑)。ふたつのサイドバーを呼び出す方法がなぜか違っておりまして…左側はWordPressデフォルトの呼び出し方法をとっていて、右側はfunction.phpを使って自分で制御しておりました。そのためデフォルトのサイドバーを呼び出しているほうで、サイドバー全体に<ul>タグが適用されていて、それが左側にアキが生まれる原因となっておりました。

生成されたhtmlのソースを表示し、サイドバーのあたりを見比べていてようやく気付くことができました。これでずっと悩んでいた問題が解決。パソコンでの表示を調整することにします。


固定ページ

最近の投稿

カテゴリー





カレンダー

2012年12月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

過去の日記はこちら

キーワードで検索