ruzyu.com_PC_In_main_top_468_60

ruzyu.com_SP_In_head_320_100

WordPressでブログを構築する際の設定・カスタマイズ例:【4】テーマ(外観)の設定からページ調整まで(本ブログの場合)

投稿日:2014/12/29 更新日:

本記事は、シリーズ企画『WordPressでブログを構築する際の設定・カスタマイズ例』の【4】です。

今回はブログの見た目(外観)を司る「テーマ」の設定から、ロゴや文字のサイズなどのページ調整についてご紹介します。

シリーズの記事はこちらです。

WordPressでブログを構築する際の設定・カスタマイズ例(本ブログの場合)
【1】サーバー契約から基本設定まで
【2】WordPressのプラグイン設定13種
【3】ウェブマスターツール、Googleアナリティクスの設定
【4】テーマ(外観)の設定からページ調整まで(本記事)
【5】TwitterやFacebookなどのSNS設定

【4】-1:テーマの設定

本ブログでは、無料のWordPressテーマである『Simplicity』を利用させていただいております。

Simplicityを選んだ理由は、その名の通り、シンプルでカスタマイズがしやすそうであったことと、標準の機能で、必要なものが揃っていることが主な理由です。

また、カスタマイズに関する情報も豊富で掲示板もあり、困ったことがあった時は対応がしやすそうであったこともポイントが高かったです。

Simplicityの特長やインストール方法、カスタマイズ等の詳細については、配布元サイトをご覧ください。
Simplicity | SEO最適化済みのシンプルな無料Wordpressテーマ

なお、後述のカスタマイズが前提となるため、カスタマイズをしやすいように本ブログでは「子テーマ」を導入しています。

Simplicityではいくつかの子テーマが用意されていますが、本ブログでは「子テーマ(サイドバー336px)[sidebar-336]」を適用しました。

サイドバーの幅は後ほど300ピクセルに変更しましたが、サイドバーの幅を今後も336ピクセルにしたり、これら以外の幅にする可能性があるため、この子テーマとしました。

子テーマについての詳細は、配布元の以下の記事をご覧ください。
Simplicityの子テーマ

【4】-2:ページの各種調整

WordPressのインストール時に、ブログ名や副題(サイトの説明文)を入力されていると思いますが、これら以外で本ブログのカスタマイズした内容は以下の通りです。

※今後、細かい変更や修正は多々していくことになると思います。今回ご紹介するのは公開時点の内容となります。

1. サイトのロゴ設定

Simplicityでは、画面上部のサイト名や副題部分をまるごと画像に変更できる機能があります。

ただ、本ブログではテキストのサイト名(るーじゅのブログ)や副題を残し、サイトのアイコンを追加したかったのでHTMLソースを直接変更しました。

困った点としては、スマホで見た時に、サイトロゴの大きさや配置がずれることでした。

Simplicityはレスポンシブデザインで作られていますが、レスポンシブデザインはPC用の画像やテキストをスマホ用に変更したり、画像やテキストの配置や並びを変えるデザイン手法です。

そのため、サイトロゴもスマホ用に小さい画像を用意するか、CSS(スタイルシート)で小さく表示させる、また、配置もスマホの場合のみ、スマホに適した配置にする必要があります。

これらのカスタマイズはWordPressの管理画面ではできないため、関連するファイルを直接修正して対応しています。

2. 見出しタグの調整

トップページの副題部分(サイト名の下にあるサイト説明文)の見出しタグが、デフォルトだとH2になっています。

完全にダメとも思わないのですが、トップページの本文部分に新着記事が表示され、その記事タイトルがH2なので、副題と同列ではないんじゃないかという細かい考えのため、関連するファイルを直接編集して、副題部分のタグを「h2」から「p」タグに変更しました。
※pタグは見出しではなく、段落の意味です。

なお、前述のサイトロゴを追加した際に、ロゴ画像の分だけ、ブログタイトルと副題が右側にずれ、副題部分が2行になってしまいました。

ただ、h2タグからpタグに変更することで、1行に戻りました。h2タグにスタイルシートで横幅指定があったためと思われます。

余談ですが、記事本文を執筆する際は、記事のタイトルがH1なので、記事本文で見出し要素を付与する際はH2から付与していくのが自然なHTML構造になります。

H1はそのページの大見出しにあたるため、H1は1ページにつき、1つになるのが自然です。

この辺はSEO対策の話にもなってきますが、詳細は別途ご紹介したいと思います。

3. 文字サイズの調整

Simplicityはデフォルトだと文字サイズが全体的に大きく感じるので、少し小さくなるように修正しました。

本文は15ピクセルです。本文の文字サイズの変更はWordPressの管理画面から「外観→カスタマイズ」で「 レイアウトの設定(投稿・固定ページ)」の「本文文字サイズ(全角文字数)」から「15px(1列45文字くらい)」を選択することで変更が可能です。

その他、サイドバーやスマホ用ページ等の文字サイズは、直接スタイルシートを修正しています。

4. 文字の位置調整

トップページの記事一覧部分などで「記事を読む」ボタンの位置がデフォルトだと左揃えだったので、自分の好みで右揃えに変更しました。これも直接スタイルシートを修正しています。

5. 色の調整

5-1. リンクの色

デフォルトだと淡い青緑っぽい色なので、もう少し青を強めに調整しました。こちらも直接スタイルシートで修正しています。

一般的にYahoo! JAPANと同じリンクの青色がクリックされやすいという話がありますが、ちょっときつすぎる青だという印象があり、Yahoo! JAPANよりは青色を弱めてあります。

ちなみにYahoo! JAPANのトップページだと主なテキストリンクの色は「#1D3994」という色指定になっています。本ブログでは「#0f7fbc」です。

テキストリンクの色変更は、前述の文字サイズの調整と同様、WordPressの管理画面から「外観→カスタマイズ」で「 色」の「リンク色」で変更が可能です。

5-2. ブログの背景色

こちらは完全に自分の好みで、本ブログの場合は薄いグレーに近い薄い茶色を指定しています。ちなみに色指定は「#f2f1e8」です。

こちらも前述のリンクの色の調整同様に、WordPressの管理画面から「外観→カスタマイズ」で「 色」の「背景色」で変更が可能です。

6. 広告の配置を調整

Simplicityのデフォルトの広告の配置位置は、私が試したい配置ができないため、関連ファイルをゴリゴリ修正しています。

本ブログでは、今のところ広告はGoogle AdSense(アドセンス)を利用していますが、PCとスマホで表示される広告の大きさを変えています。

また、広告を配置するページにも気をつかっており、カテゴリページはサイドバーのみに広告を表示させています。

広告の配置については、特にGoogle AdSenseは中身の薄いページ、例えば記事がひとつしかないタグページなどが大量にある場合、警告を受け、最悪アカウントが停止になる可能性がゼロではありません。

また、配置場所や設定によって、クリックされる確立が変わり、収益も全然変わってくるため、この辺については別途ご紹介したいと思います。

 

テーマ(外観)の設定からページ調整までの解説は以上です。

シリーズ記事をアップしました。

WordPressでブログを構築する際の設定・カスタマイズ例(本ブログの場合)
【1】サーバー契約から基本設定まで
【2】WordPressのプラグイン設定13種
【3】ウェブマスターツール、Googleアナリティクスの設定
【4】テーマ(外観)の設定からページ調整まで(本記事)
【5】TwitterやFacebookなどのSNS設定

ruzyu.com_PC_In_main_bottom_336_280

ruzyu.com_PC_In_main_bottom_336_280

-WordPress

© 2014-2017 WordPress