wordpressの使い方WordPress(ワードプレス)の使い方は用途によって異なります。ホームページとして使うのか、ブログとして使うかの?WordPressの使い方について、サーバーの設定、テンプレート。プラグインの選び方などをまとめています。»スタイルシート(style.css)の編集例WordPressの便利なところは、テーマを変更することで簡単にデザインを変更できることです。テーマは無料で配布されているものがほとんどであり、またレスポンシブWebデザインに対応したテーマも多くあります。自分の好みとぴったりのレイアウトを探すのは難しいので、細かい設定変更は自分でしたいところです。そこで、このページでは、レスポンシブWebデザインで作られた無料テーマである「Bloggie」のスタイルシートを例に編集の仕方をご紹介します。タイトルに入力したアルファベットが全部大文字になってしまうのを防ぐスタイルシート編集画面を開く「外観-テーマ編集」でスタイルシート(stlye.css)を開きます。編集して一番したのボタン「更新」で更新することができます。編集しても構いませんが、おかしくなったらすぐに元に戻せるように1世代前をバックアップしておくのが得策です。バックアップの方法は、編集エリアにある文字を全て選択(Gtrl+Aなど)して、テキストエディタに貼り付けて保存します。テキストエディタには「メモ帳」でなく、一般的に使われているテキストエディタ(秀丸、TeraPadなど)を使います。Wordは使わない方がいいと思います。全体のフォントを変える海外のテーマ(「Bloggie」も海外のテーマです)は、フォントが欧文フォントのみ指定されているため、日本語のサイトを作っている場合にはこの箇所を変更したいところです。★以下は138行目付近ですが、編集画面で「Ctrl+F」でワード検索できますので”Framework”などで検索して見つけてください。#666;background:white;background-image:url(images/bg.png);background-repeat:repeat;}「font」行を以下のように変更すると、日本語フォントが変わります。sans-serif;見出し行のフォントを変える見出しのフォントファイルも同様に変更します。#5A5A5A;}「font-family」箇所を以下のように変更します。38px;}h4{font-size:20px;line-height:24px;}h5{font-size:18px;line-height:34px;}h6{font-size:16px;line-height:24px;}一例として「h2」なら、以下のように数字を変えるとフォントサイズが変更され、”color”行を加えるとカラーを変更できます。20px;}デフォルトでは行下のマージンだけ設定されていますが、左にもマージンを追加し、下マージンを少し値を小さくします。(数字は左から、上、右、下、左の順番でマージンの値を設定しています。5px;}リンクにアンダーラインを付ける最近のWordPressの無料テーマの傾向として、リンク文字にアンダーラインが付いていないケースが多いのですが個人的には分かりにくいので付けるようにしています。a:active{text-decoration:none;}「text-decoration」2箇所を以下のように変更すると、リンク文字にアンダーラインが付きますtext-decoration:underline;1text-decoration:underline;固定ページの上部パディングの値を変更する固定ページの上部にあるパディングの値が多いので小さくします。both;overflow:hidden;}「padding-top」の箇所を以下のように変更すると、大きかったパディングの値を小さくできます。10px;ヘッダーのマージンを調整するテーマ「Bloggie」に限らず、全般的に海外のテーマはマージンが間延びしている感じがあるため値を小さくします。auto;ヘッダーの段落の文字サイズなどを変更する海外テーマのアルファベットを前提にしたテーマは、日本語の表記には文字が大きすぎると感じているので、文字サイズを変更します。0;}「font-size」、「line-height」、「margin」の値を以下のように変更します。0;}固定ページのフォントサイズ、マージンを変更する固定ページのフォントサイズが小さく感じたのでサイズを変更します。マージンが左にしか設定されていないので右側にも設定します。18px;color:#545658;padding-left:20px;}以下のように変更します。16px;}「line-height」、「font-size」を以下のように変更します。22px;}サイトタイトルのマージンを変更するサイトタイトルの下部マージンも間延びして広いので幅を調整します。0;}「margin-bottom」を以下のように変更します。0;}リストの体裁を整えて、スタイルを追加する「Bloggie」は、リストについての設定がされていないので体裁を整えて追加します。decimal;}「margin」を変更して、以下のように「li」の設定を追加します。0;font-style:normal;}ウィジェットのリストの下部マージンの幅が狭くて詰まっているためスマートフォンなどで表示した場合はタップができません。そのため「margin-bottom」の値を変更して下部マージンを大きくします。ウィジェットのタイトルを目立たせるために文字カラーを追加します。0;font-style:normal;}スマートフォン表示の際の右パディングを追加する規定値では、スマートフォンなど幅が狭い画面での表示の際の右側のパディングが設定されていないため、無駄に余白があるため見にくいと感じたため、右側パディングに0を設定して詰めます。}}「.post-content」の行に以下のように設定します。}タイトルに入力したアルファベットが全部大文字になってしまうのを防ぐ海外テンプレートの場合は、CSSに以下の設定がされていることが多い用です。text-transform:uppercase;1text-transform:uppercase;この設定がされていると、編集の段階でアルファベットの大文字小文字を意識して入力しても全て大文字になってしまいます。そこで、CSSで上記の設定がされている箇所を探し、text-transform:none;1text-transform:none;に書き換えるようにします。このページは最終更新日から1年が経過しています。情報が古い可能性がありますのでご注意願います。新しい情報があるかもしれませんのでこちらから検索してみてください。検索:既存サイトをWordPressへ移行する方法HTMLで作成された既存サイト(ホームページ)をWordPress化する方法を動画にまとめました。移行に必要な手順を順を追って丁寧に解説した動画です。あなたの既存サイトをWordPressに移行したいとお考えでしたらご覧ください。こちらからご登録ください。1分以内にご覧いただくことができます。