このブログの運営主である迫佑樹さんが発信されている「スキルをつけて人生の自由度をあげる」をテーマにしたLINEのマガジンを紹介します。
プログラミングやブログ運営、ビジネスのことなどを知りたい方は登録必須です。
こんにちは、相原 有希です。
今回の記事では、Wordpessテーマ「Xeory」のサイドバーウィジェット「カテゴリー」の投稿数を改行させず横に表示するにするカスタマイズを紹介します。
HTML・CSS初心者でも2〜3分で完了するので、記事を読みながら挑戦してみてください！
Xeoryのカテゴリーの「投稿数」は、デフォルトでは改行されてしまう ……
バズ部の「Xeory Base」は非常にシンプルで軽量なWordpressテーマなので気に入っているのですが、デザイン面で一箇所だけ気に入らない部分が ……。
それがこのカテゴリーウィジェット。投稿数の数字が改行されて、なんとも不恰好になっていますよね。
このデフォルトの状態のまま運営されているブロガーの方もいらっしゃいますが、僕は神経質なほうなので気になってしまいます ……。
そこで、今回は「Xeory」テーマのstyle.cssをほんの少しだけいじって、カテゴリーの「投稿数」を改行させず真横に表示されるようにカスタマイズしてみようと思います。
とは言え、2〜3分で終わるぐらいの単純な作業なので、HTML・CSS初心者でもご安心を。
ちなみに完成予想図はこのような感じdesu。
Xeoryのカテゴリーウィジェットの「投稿数」を改行させず、真横に表示させる方法
それでは、早速「Xeory」のCSSを編集していきます。以下の2つのステップを踏めば簡単に修正できるので、一つずつ見ていきましょう。
1子テーマ側のスタイルシート（style.css）をひらく
WordPressのスタイルシート（style.css）をいじるときには、親テーマのオリジナルファイルではなく、必ず子テーマに複製したコピーファイルを編集するようにしましょう。
また、親テーマにあるファイルをそのまま編集すると、万が一ファイルが破損した場合にWordpressにアクセスできなくなる可能性もあります。バックアップは必ず取っておいてくださいね。
2スタイルシート（style.css）に、次のコードを追記するだけ
デフォルトの設定では、サイドバーウィジェット（カテゴリー、アーカイブ等）の投稿数には「block」という属性が当てられています。
blockというのは、要素が横までいっぱいに広がり、縦に並んでいくという属性。だから、投稿数という要素が改行されてしまうんですね。
そこで、カテゴリーの投稿数に関する記述のdisplay属性を、block → inline-block に変えてやりましょう。
.widget_categories a{
display: inline-block;
}たったこれだけで編集完了です！ ファイルを上書き保存をして、style.css を閉じます。
外観 → テーマの編集 → style.css で追記しても大丈夫です。
補足1. カラースキームによって追記するコードが変わります
Wordpressの管理画面 → 初期設定 → その他の設定
からテーマのベースカラーを設定できます。デフォルト、緑、赤、オレンジ、ピンクの5種類があります。
注意しなければならないのが、デフォルトカラー以外のベースカラーを設定している場合には、前述した追記コードが若干変わるということです。
デフォルトの場合
デフォルトカラーの場合は、先ほどの追記コードのままで大丈夫。
.widget_categories a{
display: inline-block;
}緑の場合
緑色のカラースキームには、「01」という番号が設定されています。追記コードは以下になります。
body.color01 .widget_categories a{
display: inline-block;
}赤の場合
以下同様に、数字の部分を変えていくだけでオーケー。
body.color02 .widget_categories a{
display: inline-block;
}オレンジの場合
body.color03 .widget_categories a{
display: inline-block;
}ピンクの場合
body.color04 .widget_categories a{
display: inline-block;
}
補足2. 同様のやり方で、アーカイブの投稿数も横並びにできます。
やり方は簡単で、追記コードの categories → archive に変えるだけ。
.widget_archive a{
display: inline-block;
}こちらもカラースキームの番号に合わせて、修正してみてください！
Xeoryのカテゴリーウィジェットの「投稿数」を改行させず、真横に表示させることができました！
当初の狙い通り、カテゴリーの投稿数の数字をきちんと横に並べて表示させることができました！
今回のカスタマイズはstyle.cssにコードを追記するだけで簡単に済むので、気になる方は是非やってみてください。
ご精読ありがとうございました。
現在お使いのWordpressブログテーマに不満はありませんか？
ほんとうに使いやすいブログテーマが見つかれば、生産性もケタ違いに上がりますしモチベーションも高まります！
これまでに無料・有料あわせて15種類以上のWordpressテーマを使用してきたぼくが、「これは！」と本気で惚れ込んだ3つのテーマを厳選しました。
「今よりもブログを楽しみたい！」という方は、以下のボタンからレビュー記事へどうぞ！
広告: 無料のLINEマガジン
このブログの運営主である迫佑樹さんが発信されている「スキルをつけて人生の自由度をあげる」をテーマにしたLINEのマガジンを紹介します。
プログラミングやブログ運営、ビジネスのことなどを知りたい方は登録必須です。
人生を変えるきっかけが欲しい方、ぜひチェックしてみてくださいね！
