【WordPressプラグイン「Newpost Catch」でCSSを使って見た目を整える方法】画像は左、記事タイトルは右にさせる

WordPressプラグイン「Newpost Catch」で、最近の記事に簡単にサムネイルをつけることができます。プラグインをインストール（有効化）すると、その後は「自分のサイトにあったデザインにしたいな！」と思う方もいらっしゃると思います。

デザインをキレイにするには、スタイルシート（CSS）を使ってキレイに整える方法を私はおすすめしています。今回は、よく寄せられる質問の中でも最も多い「CSSを使って画像とテキストを左右に並べて表示させる方法」をご紹介します。

まず、プラグインフォルダ内には「Newpost Catch」CSSファイルがあります

こんな前提があります

「Newpost Catch」プラグインフォルダ内には、CSSファイル「style.css」が入っています。

この「style.css」ファイルは、サンプルのcssファイルです。「プラグインを有効にした（インストールした）直後に、崩れて表示されたらちょっとな～」と思いまして、用意されたものです。

そして、とても大事なことなんですが、プラグインフォルダ内に用意されている「style.css」ファイルはすべてのWordPressサイトのデザインにきっちりハマるとは限りません。

さらに大きな前提があります。WordPressを使う環境は様々ということです

ここでご想像いただきたいのですが、WordPressを使う環境は様々だと思います。サイトによって全体のデザインを決める「テーマ」ももちろん違いますし、ご使用になっている「プラグイン」によっても環境は違うと思います。また、それらのテーマやプラグインを独自にカスタマイズされていたりすることもあるでしょう。

簡単に表現しますと、いろいろなWordPressで作られたサイトが存在しているので、同じ環境で作られたものは「ほぼ存在しない」と思います。その場合には、やはりデフォルトで用意された「style.css」ファイルのデザインを適用しただけではうまいことデザインが適用できない（表示が崩れたりする）と思います。

実際私も、このブログ以外の新しいサイトをWordPressで作る場合には「Newpost Catch」プラグインを導入することもあるのですが、プラグイン導入後は、必ず「オリジナルのデザインをCSSで整えて」います。

上記を必ず前提として読み進めてください。それでは、以下が本題です。

ウィジェット側の設定

「Newpost Catch」プラグインを有効化（インストール）すると、以下のようにウィジェットが設置できるようになります。もし、プラグインのインストール方法がわからない場合は、以下のプラグイン専用ページをご参考ください。

ウィジェットの設定は以下のようにします。

上の画像のように、表示させたいサムネイルの幅と高さを決めます。

また、プラグインフォルダ内のデフォルトCSS（チェックすると適用）をはずします。

次は、スタイルをスタイルシート（CSS）に書きます。

スタイルシート（CSS）はこう書いてます

以下は書き方の一例です。cssファイルに書きます。

#npcatch{
	margin:0px;
}

#npcatch li{
	font-size:12px;
	overflow:hidden;
	clear:both;
	margin:0px 0px 5px;
	vertical-align:top;
}

#npcatch img{
/*サムネイルのスタイル*/
	float:left;
	padding:0px;
	box-shadow:0px 0px 7px #bbb;
}

#npcatch .title{
/*記事タイトルのスタイル*/
	width:170px;
	float:right;
	padding:0px;
}

CSSに慣れていない方にとっては、これだけだとわけがわからないと思います。

そこで。

上に書いたCSSが具体的にどの部分に対応しているのか。画像付きで重要なところを説明します。

サムネイルは「#npcatch img」でスタイルを整えています

サムネイル部分のスタイルを整えているのが「#npcatch img」のところです。ウィジェットの設定の時に幅と高さを設定しました。画像一つ一つは、幅120px、高さ80pxの大きさにしていましたね。

記事のタイトルは「#npcatch .title」でスタイルを整えています

タイトル部分のスタイルは「#npcatch .title」で整えています。タイトルの表示は幅170pxにしています。

「画像が上、タイトルが下」になってしまう原因と対策

「画像が上、タイトルが下」になってしまう理由のほとんどは「表示幅」にあります

お問い合わせをいただく多くの方が「画像が上、タイトルが下にあって、私のブログのように左に画像、右にタイトルにならない」といったものです。そうなってしまうほとんどの理由は、画像とタイトルの表示幅の調整がうまくいっていないからです。

なぜ「表示幅の調整がうまくいかないか」ですが、私のブログの例ですと、下のようにウィジェットの表示幅を全体で300pxにしています。

300pxの幅にしています。いい感じで画像が左、タイトルが右になってる

200pxにしました。画像が上、タイトルが下。これは・・・きつい

よく寄せられる問い合わせは、だいたいはこうなっていると想像します。

・・・

幅が重要！！

• 画像が120px
• タイトルが170px
• ウィジェットの表示幅は200px

200pxの入れ物に、120px+170pxで1セットになっているものをキレイに並べられないです。「窮屈だわ・・・！表示しきれないよ～」と言って、改行されて表示している状態です。

対策

うまく表示させたい。これを修正する方法は以下の3つがあります。

• １．ウィジェットの設定画面でサムネイルの幅を調整する
• ２．CSSで「#npcatch .title」の「width」の数字を調整する。（170pxにしたいなら「width:170px;」と書きます）
• ３．ウィジェットの表示幅を調整する。大きくするとか

上記のどれかを採用してもいいですし、ウィジェットの表示幅は変えたくない場合は1と2を調整するのもいいかと思います。（だいたいこれでいけます）

とにかく大事なのは「画像とタイトルとウィジェットの幅をうまく調整しよう！」ってことです。

CSSを書く場所は、どこにすればいいですか？

CSSの適用方法については大きく2パターンあります。これは、プラグイン専用ページにも書いてあります。

１．テーマフォルダ内の「style.css」に追記する

テーマフォルダ内に「style.css」があるので、そこに追記する。

２．「newpost-catch.css」ファイルを新しく作って、そこに書く

「テーマフォルダ/css/newpost-catch.css」ファイルを作って、そこに追記する。

どちらか、管理しやすい場所にCSSを書きましょう。

まとめ

細かく書くともっと注意しないといけないこともあります。が、まずは今回ご紹介した方法をお試しください。何度も書きますが、だいたいはウィジェットの表示幅に対して、画像+タイトルの幅が大きすぎるから、というのが原因なことがとても多いです。

私が作ったプラグイン「Newpost Catch」はそろそろ15000ダウンロードを迎えるということで、最近発売されたWordPressプラグイン100選という書籍にも取り上げて頂いて、また、公開当初から現在まで、様々なところでご紹介くださった方々のおかげで、ご利用いただいている方も増えています。同時に、プラグインに関するお問い合わせも増えています。

よくあるお問い合わせが、ウィジェットを設置すると「サムネイルが上、記事タイトルが下に表示されてしまう」というものです。ですので、そういった状況の方の為だけに書きました。何かのご参考となりましたら幸いです。

「Newpost Catch」プラグイン専用ページはこちら