デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

WordPressオリジナルテーマを作ってみよう シンプルなブログサイト

スポンサーリンク

4.CSSでデザインする

最後にCSSでデザインを整えます。
前章まででブログの基本構成は組み立てたので、デザインは自分好みに自由に設定しましょう。
今回は、一例として以下のようなデザインでCSSを設定してみました。

index.php

cssでデザインを指定するには、各要素にidやclassを指定していきます。
以下コードの黄色でハイライトされている部分をindex.phpに追加しましょう。

【コード解説】
■6行目:viewport
レスポンシブデザインに対応するため、viewportの設定をしています。
・width=divice-width:表示領域の幅を端末画面の幅に合わせます。
・initial-scale=1.0:初期のズーム倍率を1.0に設定しています
⇛コンテンツの横幅をデバイスの横幅に設定し、ページを開いた瞬間は表示倍率を1倍に設定することで、スマホサイズの画面になっても見易い画面となります。

■7行目:Font Awesome
Font Awesomeというアイコンフォントを使用するため、linkタグでスタイルシートを読み込んでいます。これでアイコンフォントが使えるようになります。
使い方は、以下のアイコン一覧で使用したいアイコンをクリックし、クラス名を確認します。そのクラス名をソースコードに指定します。
Font Awesomeアイコン一覧
今回の例では、42行目の「fa fa-clock-o」、75行目の「fa fa-chevron-circle-left」などで指定しています。

style.cssは、以下のように記載します。一応、スマホサイズの時は、2カラムから1カラムに可変するレスポンシブデザイン対応です。
参考までに活用ください。

style.css

【コード解説】
■404行目:メディアクエリ
・media only screen and (min-width:769px)
スクリーンサイズが768px以上の時に、404行目以降のCSSが適用されます。すなわち398行目までは、スマホ用サイト、またはスマホ、PC共通のスタイルを定義し、404行目以降はPC向けだけに適用したいスタイルを記載しています。
今回の例では、PC向けのみ2カラムに設定したいので、414行目や439行目などで、float:leftを設定して横並びにしています。
floatで要素を綺麗に整列させるポイントを以下の記事で紹介していますので、参考までにどうぞ。
CSS floatで要素を綺麗に整列させる2つのポイント

まとめ

いかがでしたか?
HTML,CSSの基本知識が多少必要ですが、WordPressのテンプレートタグの使い方さえ理解すれば結構簡単に作れます。
今回紹介した各ステップ毎のソースコードを以下からダウンロードできますので、うまく実装できなかった方やサイトのベースとして活用したい方は、ダウンロードしてみてください!

また、今回紹介したWordPressのテンプレートタグは、以下WordPress Codex日本語版で使い方を調べることができますので、参考にしてみてください。
WordPress Codex日本語版

それでは!!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン