WordPress(ワードプレス)の使い方は用途によって異なります。ホームページとして使うのか、ブログとして使うかの?WordPressの使い方について、サーバーの設定、テンプレート。プラグインの選び方などをまとめています。

スタイルシート(style.css)の編集例

  • HOME »
  • スタイルシート(style.css)の編集例

WordPressの便利なところは、テーマを変更することで簡単にデザインを変更できることです。

しかも、テーマは無料で配布されているものがほとんどであり、またレスポンシブWebデザインに対応したテーマも多くあります。

ただ、自分の好みとぴったりのレイアウトを探すのは難しいので、細かい設定変更は自分でしたいところです。

そこで、このページでは、レスポンシブWebデザインで作られた無料テーマである「Bloggie」のスタイルシートを例に編集の仕方をご紹介します。

free-footer600x120

スタイルシート編集画面を開く

「外観-テーマ編集」でスタイルシート(stlye.css)を開きます。

直接編集して一番したのボタン「更新」で更新することができます。

注意があります。

いきなり編集しても構いませんが、おかしくなったらすぐに元に戻せるように1世代前をバックアップしておくのが得策です。

バックアップの方法は、編集エリアにある文字を全て選択(Gtrl+Aなど)して、テキストエディタに貼り付けて保存します。

なお、テキストエディタには「メモ帳」でなく、一般的に使われているテキストエディタ(秀丸TeraPadなど)を使います。また、Wordは使わない方がいいと思います。

全体のフォントを変える

海外のテーマ(「Bloggie」も海外のテーマです)は、フォントが欧文フォントのみ指定されているため、日本語のサイトを作っている場合にはこの箇所を変更したいところです。

★以下は138行目付近ですが、編集画面で「Ctrl+F」でワード検索できますので”Framework”などで検索して見つけてください。

「font」行を以下のように変更すると、日本語フォントが変わります。

見出し行のフォントを変える

見出しのフォントファイルも同様に変更します。(153行目付近)

「font-family」箇所を以下のように変更します。

見出しのフォントサイズ、カラーを変更する

159行目付近

一例として「h2」なら、以下のように数字を変えるとフォントサイズが変更され、”color”行を加えるとカラーを変更できます。

段落行のマージンを変更する

186行目付近

デフォルトでは行下のマージンだけ設定されていますが、左にもマージンを追加し、下マージンを少し値を小さくします。
(数字は左から、上、右、下、左の順番でマージンの値を設定しています。)

リンクにアンダーラインを付ける

最近のWordPressの無料テーマの傾向として、リンク文字にアンダーラインが付いていないケースが多いのですが個人的には分かりにくいので付けるようにしています。(189行目付近)

「text-decoration」2箇所を以下のように変更すると、リンク文字にアンダーラインが付きます

固定ページの上部パディングの値を変更する

固定ページの上部にあるパディングの値が多いので小さくします。(217行目付近)

「padding-top」の箇所を以下のように変更すると、大きかったパディングの値を小さくできます。

ヘッダーのマージンを調整する

テーマ「Bloggie」に限らず、全般的に海外のテーマはマージンが間延びしている感じがあるため値を小さくします。(236行目付近)

「margin」の値を以下のように変更する

ヘッダーの段落の文字サイズなどを変更する

海外テーマのアルファベットを前提にしたテーマは、日本語の表記には文字が大きすぎると感じているので、文字サイズを変更します。ここでの段落は前述の段落とは別の設定です(ヘッダー内の段落だけ)(243行目付近)

「font-size」、「line-height」、「margin」の値を以下のように変更します。

固定ページのフォントサイズ、マージンを変更する

固定ページのフォントサイズが小さく感じたのでサイズを変更します。また、マージンが左にしか設定されていないので右側にも設定します。(505行目付近)

以下のように変更します。

サイトタイトルの文字サイズを変更する

567行目付近

「line-height」、「font-size」を以下のように変更します。

サイトタイトルのマージンを変更する

サイトタイトルの下部マージンも間延びして広いので幅を調整します。(579行目付近)

「margin-bottom」を以下のように変更します。

リストの体裁を整えて、スタイルを追加する

「Bloggie」は、リストについての設定がされていないので体裁を整えて追加します。(635行目付近)

「margin」を変更して、以下のように「li」の設定を追加します。

ウィジェットのリストの下部マージンとタイトル文字カラーを追加する

800行目付近

ウィジェットのリストの下部マージンの幅が狭くて詰まっているためスマートフォンなどで表示した場合はタップができません。そのため「margin-bottom」の値を変更して下部マージンを大きくします。

また、ウィジェットのタイトルを目立たせるために文字カラーを追加します。

スマートフォン表示の際の右パディングを追加する

規定値では、スマートフォンなど幅が狭い画面での表示の際の右側のパディングが設定されていないため、無駄に余白があるため見にくいと感じたため、右側パディングに0を設定して詰めます。(1445行目付近)

「.post-content」の行に以下のように設定します。

タイトルに入力したアルファベットが全部大文字になってしまうのを防ぐ

海外テンプレートの場合は、CSSに以下の設定がされていることが多い用です。

この設定がされていると、編集の段階でアルファベットの大文字小文字を意識して入力しても全て大文字になってしまいます。

そこで、CSSで上記の設定がされている箇所を探し、

に書き換えるようにします。

free-footer600x120

このページは最終更新日から1年が経過しています。
情報が古い可能性がありますのでご注意願います。
新しい情報があるかもしれませんのでこちらから検索してみてください。

既存サイトをWordPressへ移行する方法

既存サイトをWordPressへ移行する方法

HTMLで作成された既存サイト(ホームページ)をWordPress化する方法を動画にまとめました。

移行に必要な手順を順を追って丁寧に解説した動画です。

もし、あなたの既存サイトをWordPressに移行したいとお考えでしたらご覧ください。⇒ こちらからご登録ください。1分以内にご覧いただくことができます。

PAGETOP