Simplicityのヘッダー部分を編集してタイトルの位置を変更する方法

https___www.pakutaso.com_assets_c_2015_06_PAK93_toukyoueki20150112184649-thumb-1000xauto-18050

レポート部長です。

Simplisityを使っているブロガーの様のためにちょっとしたカスタマイズ方法を解説します。

タイトルの色はカスタマイズ機能を使って変更できますが、位置の調整はできません。

今回のWebレポ!は SEO対策済みで有名なテーマ。

“Simplicityでのタイトル位置の変更方法”を解説したいと思います。

スポンサードリンク

SimplicityのHTMLを編集する

タイトル位置を変更するには”SimplicityのHTMLソースコードを変更”する必要があります。

順番に解説してきましょう。

style.cssの選択

Word Pressの左メニューより「外観」→「テーマの編集」を選択します。

右側のソースファイル名の中の「style.css」を選択します。

11

Simplosityのソースファイルは沢山ありますが、style.cssは最後の近くに表示されているので見つけやすいと思います。

タイトルの位置の変更

style.cssを探し終えたらソースコード内を編集していきます。

早速、始めて行きましょう。

style.cssの中から”#site-title”を探し内容を変更する

style.cssの中から”#site-title”を探します。

この”#site-title”の内容を変更することでタイトルの位置を指定することができます。

12

margin-topとmargin-bottomの変更して上下の位置を変更

margin-topとmargin-bottomを好きな数値に変更してください。

書き方の例としては”ソースコードの例”を参考にしてください。

margin-top:?px とは?

タイトルの文字の上の空白を?px空けますよ、という意味

margin-bottom:?とは?

タイトルの文字の下の空白を?px空けますよ、という意味

margin-leftとmargin-rightの追加して左右の位置を変更

margin-leftとmargin-rightを追加することで左右の位置を指定することができます。

書き方の例としては”ソースコードの例”を参考にしてください。

margin-left:?とは?

タイトルの文字の左の空白を?px空けますよ、という意味

margin-right:?とは?

タイトルの文字の右の空白を?px空けますよ、という意味

ソースコードの例

以下のソースコードを貼り付けて使って貰っても問題ありません。

それぞれの説明については以下を御覧ください。

ソースコードの説明

margin-topで上の空白を16px開けています。

margin-bottomで下の空白を10px開けています。

margin-leftで左の空白を40px開けてタイトルを少し右寄りにしています。

タイトルを左に少し寄せたい場合はmargin-leftをmargin-rightにすることで右に空白を付け

てタイトルを左寄りにすることができます。

タイトルエリアの縦幅を変更する

タイトルを表示する場所の縦幅も変更したいという方に。

これはSimplisityで用意されているカスタマイズ機能から変更が可能です。

ヘッダーの高さの指定

Word Press左メニューより「外観」→「カスタマイズ」を選択します。

カスタマイズ機能の「ヘッダー画像」→「ヘッダーの高さ」の数値を変更します。

13

タイトル概要部分の位置の変更

タイトルの概要部分も先程と同じ方法で位置の調整を行います。

早速、やっていきましょう。

sytle.cssの中から”#site-description”を探し内容を変更する

style.cssの中から”#site-description”を探しましょう。

この”#site-description”の内容を変更することで概要の位置を指定することができます。

14

先程と同じように”margin-top、margin-bottom、margin-left、margin-right”の数値を変更

することによって概要の位置を変更することができます。

ソースコードの例

以下のソースコードを貼り付けて使って貰っても問題ありません。

それぞれの説明については以下を御覧ください。

ソースコードの説明

margin-topで上の空白を0px開けています。

margin-leftで左の空白を40px開けています。

margin-bottomで下の空白を10px開けています。

タイトルを左に少し寄せたい場合はmargin-leftをmargin-rightにすることで右に空白を付け

てタイトルを左寄りにすることができます。

まとめ

marginを使うことで文字の位置を簡単に調整することができます。

何か質問等ありましたらコメント欄よりお待ちしてます。

今回のWebレポ!は”Simplicityでのタイトル位置の変更方法”をお届けしました。