loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [Wordpress] > 【WordPress】サイドメニューのカテゴリーに投稿記事数を表示させると数字だけが改行されてしまうときの対処法
この記事は約4分で読めます。
この記事は最終更新日から2年以上経過しているため現状にそぐわない可能性もあります。

【Wordpress】サイドメニューのカテゴリーに投稿記事数を表示させると数字だけが改行されてしまうときの対処法

投稿日:2015.5.13

ワードプレスにお気に入りのテーマを見つけてインストールしたものの、
サイドメニューのカテゴリーに”投稿数を表示”させたら
投稿数の部分だけ改行されてしまって困ったなんていう経験はないですか?

それはおそらくテーマ特有の CSSの設定が原因かもしれません。

↓↓↓簡単にサイトが作れる次世代ツール↓↓↓

SIRIUSレビューイメージ画像

なぜかデフォルトで改行される仕様?

自作テーマなら話は別ですが、ワードプレスの有料・無料テーマを使う場合、
ウィジェットを利用してサイドメニューにカテゴリーを表示させる機能が一般的かと思われます。

ウィジェットにドラッグ&ドロップするだけでカテゴリーの表示ができちゃうんですから
ホント便利ですよね。

この時、テーマによっては”カテゴリーに含まれる記事数”も表示させることができます。

こんな↓感じで『投稿数を表示』にチェックを入れるだけ。
簡単&お手軽ですね。

キャプチャ画像

ただしテーマによっては、
記事数を表示させるオプションにチェックを入れると記事数のみ改行されてしまって
1行で表示されないケースもまれにあったりします。

たとえば「クールでかっこいいWordPressテーマ Ver.9」の場合もこれに該当します。

上記テーマの場合、デフォルトでは『My Category Order』というプラグインを入れないとカテゴリーそのものの表示ができないので先に同プラグインをインストールする必要があります。

My Category Orderをインストールした後、
ワードプレス管理画面のウィジェットで”カテゴリー”を表示させると
ブラウザではこちら↓のように表示されます。

キャプチャ画像

ここで「投稿数を表示」に該当する『My Category Order』ウィジェット設定画面の
”Show Count”にチェック↓を入れてみます。

キャプチャ画像

その結果をブラウザで見てみると……
表示数の部分だけ改行されてしまってなんとも間抜けな状態になっちゃいました。

キャプチャ画像

この現象の原因は CSSで「display:block;」が設定されている可能性が高いです。

そのため解決法としては
「display:inline;」「display:inline-block;」に変えてやれば
1行で表示されるはずです。

 

スポンサーリンク

修正作業の一例

それはわかったけど実際にどこを直せばいいんだよ!という方のために
もう少し突っ込んで書いてみますね。

「display:block;」がどこに設定されているかですが、
まずはソースを開いて該当する部分の HTMLがどうなっているかを調べてみます。

今回の場合を例にとれば、直前の画像の中のいくつかのテキスト、
たとえば『最近の投稿』『カテゴリー』『未分類』という単語をヒントに
ソースを調べていきます。

その結果、以下の部分が見つかりました。
(見やすくするため若干の整形&加工を加えてます)

キャプチャ画像

ここから赤枠で囲った”sidebar-wrapper”というクラス名が怪しいと推測されます。

 

今度はワードプレスがインストールされたサーバーの FTPをブラウザで開き、
テーマフォルダ内の「style.css」を開きます。
(ワードプレス管理画面の「外観」→「テーマの編集」でもいいですが個人的にはおススメしません)

その中から”sidebar-wrapper”で検索してみます。

ただ実際の作業としてはカテゴリーの場合、
一般的にはリスト形式(ul li)のリンクテキスト(a要素)になるので、
『”sidebar-wrapper”というクラスでさらに ”(ul)li a”が付いている』
ブロックを探すことになります。

するとこんな感じで↓条件にあてはまるスタイルが見つかりました。
予想通り”display:block;”が付いてます。

キャプチャ画像

この”display:block;”を今回は”display:inline-block;”に変えて保存し直してみます。

その後、ブラウザに戻ってリロード(F5)してみると、、、
ちゃんと 1行で表示されるようになりました。

キャプチャ画像

”display:inline-block;”のメリットとしては、『幅と高さが指定できる・上下左右の margin や padding が指定できる・vertical-align が指定できる』などがあり、かなり使えます。

ただテーマによっては”display:inline;”でないと他の部分が正常に表示されないこともありえます。

このあたりはテーマによって使い分ける必要があります。

以上です。

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「ORION (TCD037)」

コメント(2件)

  • ちょこぶ より:

    こんにちは。
    ブログランキングからきました。

    ワードプレスの設定勉強になりました。
    またお邪魔させて下さい。

    ポチっと応援していきますね。

    • cuisine より:

      ちょこぶさん、きゅじんです。
      ブログご覧いただき、ありがとうございます。
      これからもどうぞよろしくです。

コメントをどうぞ

入力いただいたメールアドレスは公開されません。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

先頭へ