Wordpressのズレについて。

Question

Wordpressのサイト作成について質問です。
当方、初心者ですのでわかりやすく教えていただけると幸いです。
トップページの記事一覧の各記事のタイトルについてです。
・PC版ではタイトルの文字数が多いとずれてしまう。
・スマホ版では文字数関係なくいつもずれている。
こちらのサイトです。
http://comicreviewer.com/

Float rightを使用してみましたが上手くいきません。
タイトル部分を動かす関数などありましたら教えてください。

追記
慣れないもので情報不足申し訳ありません。 トップページで5個の枠を縦に並べその中にサムネイルとタイトルを表示させています。 PC版では記事タイトルが6文字で改行されてしまうため、タイトルが長いと枠内に収まりきりません。なので10文字で改行されるようにしたいです。 スマホ版では記事タイトルが投稿日付の左側に表示されているため枠内に収まりきりません。なので投稿日付の上に表示されるようにしたいです。 駄文で申し訳ないですが宜しくお願いします。

Comments

[Kuroda_Hiroki]

何をどうしたいのか教えていただけますか？ずれるとは何がどうずれますか？スマホで見たときにどうしたいのですか？

[beginner.]

慣れないもので情報不足申し訳ありません。
トップページで5個の枠を縦に並べその中にサムネイルとタイトルを表示させています。
PC版では記事タイトルが6文字で改行されてしまうため、タイトルが長いと枠内に収まりきりません。なので10文字で改行されるようにしたいです。
スマホ版では記事タイトルが投稿日付の左側に表示されているため枠内に収まりきりません。なので投稿日付の上に表示されるようにしたいです。
駄文で申し訳ないですが宜しくお願いします。

Answer 1

ブロック要素の構造がおかしい。
特定の文字列が長くなった時にボックスがどうなればいいのかを適切に解釈していない。

スタイルシートのmarginとpaddingの使い方がおかしい。
マイナスの数値を与えたら、そりゃ重なってしまうでしょ。
ブロック要素が重ならないよう適切に設計し直さないと。

私はFirefoxにFirebugという開発ツールを組み込んで、
スタイルシートがどう機能しているかをチェックしています。
このh3がまずおかしいってわかりますよね。

Comments

[beginner.]

ご丁寧にありがとうございます。
恥ずかしながらお見せいただいた部分を見てもおかしい部分がわからないくらい無知なので基礎から学んでいこうと思います。
ありがとうございました。

[退会済みユーザー]

学ぶのも大切ですが、動作を確認する手段を確立することも忘れないで下さい。
FirefoxではFirebug、ChromeではWeb Developerあたりをインストールして、
これらを使えばスタイルシートのパラメータをツール内で書き換えることで、
（アップロードしなおさなくとも）動作をすぐに確認することが出来ます。
web開発するならマストです。

Firebug :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/firebug/

Web Developer - Chrome ウェブストア
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm