ロボット研究開発、ソフトウェア開発、コンテンツ制作配信

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 で
関連記事(一部広告含む)

コメント

  • こちらのソースをまるっとコピーしたのですが、なぜかウィジェットが表示されません。。。

  • コメントありがとうございました。
    こちらで再度ソースコードを確認したところ、WordPress4.9.6でウィジットは表示されました。
    確認ですが、WordPress管理画面のメニューから「外観」→「ウィジェット」に入り、サイドバー1と表示されているエリアにウィジットを登録していますでしょうか?
    WordPress管理画面からのウィジット登録方法については、ブログ内であまり説明していなかったので、もしかしたら登録されていない可能性があると思いました。
    申し訳ありませんが、宜しくおねがいします。

コメントを残す

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

CAPTCHA


ページトップボタン