レスポンシブ対応のテーマを使用していてもモバイル表示にした場合、どうしてもはみ出してしまう部分や、見やすくするために非表示にしたい部品が出てくると思います。
そんな時はスクリーンのピクセル別にｃｓｓを設定しましょう。

「style.css」にコードを追加

ダッシュボード→「外観」→「テーマの編集」で「style.css」を選択し、エディタの画面を開きます。
割と下の部分に「@media screen and (min-width: 9999px)」の記述がありますので、スクリーンの大きさ別にcssのコードを追加します。
ちなみにカッコの中のピクセルの数値より小さい場合、ブロック内のスタイルが適用されます。

例）モバイル表示の場合、サイドバーを非表示にする

スクリーン幅が1008pxより小さいモバイル画面の場合に適用

@media screen and (min-width: 1008px) {

  #content-sidebar {
    visibility: hidden; /* 非表示 */
  }

.......

同じような感じコードを追加すれば幅を調整したり画像サイズを変更したりの出来ます。

例）モバイル画面の表示確認

それぞれの機種により画面サイズも違ってきますので、テスト機を機種別に用意するのは難しいでしょう。
表示テストにはブラウザの「Google Chrome」を使用すると便利です。
右上のボタンから「その他ツール」→「デベロッパーツール」を選択します。

モバイルのアイコンをクリックしリストから機種を選択すると、その機種での画面表示に切り替わります。

レスポンシブ対応のテーマは初期値でワードプレスに入っている「Twenty」の付く名前の「Twenty …」は対応しています。
気になるテーマを実際にインストールしてみて表示を確認してみるとよいでしょう。

テーマの選択

ダッシュボード→「外観」→「テーマ」で使用するテーマを「有効化」します。

選択したテーマがレスポンシブ対応か確認

テーマの説明文に書いていれば、すぐわかりますが「レスポンシブ対応」と書いていないテーマが殆どです。
ネットでインストールしたテーマが対応しているか調べることも出来ますが、すべてのテーマの情報が載っているわけではないですので、実際に表示を確認してみると簡単に判別できます。
ブラウザのウィンドウ幅を狭くしたときに表示が変われば使用しているテーマはレスポンシブに対応しています。

プラグインでお勧めなのが「WPtouch Mobile Plugin」です。
初めにデメリット部分を説明しておきますが、スマホ用の画面に表示されるのは投稿の記事のみで、フレームのデザインやメインコンテントにスライダーを埋め込んだりした場合のデザインも表示されません（有償版は未確認ですのでわかりませんが）。
ですのでブログを目的としたホームページには使用できそうですが、会社などのホームページには不向きです。
自分で作ったデザインを反映させるためにはレスポンシブ対応のテーマを選択したほうが、手っ取り早いです。

「WPtouch Mobile Plugin」のインストール

ダッシュボード→「プラグイン」→「新規追加」で「WPtouch Mobile Plugin」を検索してインストールします。（詳細は省きます）

WPtouchの設定

インストール後にダッシュボードに「WPtouch」が追加されます。
インストールして有効化するだけでスマホ用の画面が表示されますが設定画面でヘッダー画像やタイトルなどの設定が出来ます。

レスポンシブ・ウェブデザインとは何かという所から説明しますとウィンドウサイズに合わせて、自動的にページのデザインを最適化して表示させるデザインのwebページのことを言います。

メリットは、スマートフォンやタブレット端末でホームページを見たときに画面サイズに合わせて表示変化させるのでモバイル用の小さい画面でも見やすい表示となります。

レスポンシブにするには以下の以下方法があります。

• プラグインを使用する
• レスポンシブに対応したテーマを選択する