WordPressで自作テーマ作り(第6回:スタイルシートを読み込ませる)

スポンサーリンク


WordPress(ワードプレス)の使い方がわからない初心者向けにテーマ作りを解説しながら仕組みを学ぶ長期連載をお送りしています。第6回は、記事のデザインの指定方法を紹介します。記事の装飾は最初に作ったstyle.cssを利用して、投稿ページを指定します。

必要最低限なHTMLの初期設定

本文のデザインを担当するのはスタイルシートです。第1回で作ったstyle.cssを投稿ページ(ここではindex.php)に読み込ませる必要があります。必要なHTMLも含めて設定しましょう。

//サンプル
</pre>
こちらがHTMLの設定も含めたindex.phpになります。念のためおさらいしますと、まず
<div class="point">
<h4>articleタグの使い道は?</h4>
<article>タグはHTML5から誕生したタグです。見た目に変化を感じないため不要だと思う方もいるかもしれませんが、iOSのsafariではarticleタグに囲まれた部分のみを抽出することができる「リーダー機能」が搭載されています。このような機能を利用したいユーザーのことを考えれば、articleタグにもちゃんとした使い道があるのです。

</div>
<h2>スタイルシートを読み込ませる</h2>
続いてタグに以下のコードを記述しましょう。
<pre>
  //スタイルシートの指定
</pre>
これだけで、style.cssのURLを読み込む設定ができました。<!--?php echo get_stylesheet_uri();?&gt;<!--?php echo get_stylesheet_uri();?-->もワードプレスのテンプレートタグの一種で、ページ生成の際にstyle.cssのURLを出力します。現段階ではスタイルシートには何も記述していないため、見た目には何の変化もありません。</p>
<h3>サイトで表示させるフォントを指定する</h3>
<p>今度はスタイルシートに日本語フォントを読み込ませましょう。</p>
<p>「外観>Theme Editor」からstyle.cssを選んで「body」に使う標準フォントを指定します。</p>
<div class="mceTemp"><dl id="attachment_1770" class="wp-caption aligncenter" style="width: 510px"><dt class="wp-caption-dt"><img class="wp-image-1770" src="https://banabo.net/wordpress/wp-content/uploads/2016/08/3aa0498412ae0f50d4fb822133eda784.png" alt="フォントを指定" width="500" height="228" ?-->フォントを指定

windowsなら角ゴシックの和文フォント「メイリオ」、Mac OSXであれば「Hiragino kaku Gothic Pro」を指定するのが一般的です。ただ、パソコンやスマホのブラウザ環境によってはこれらのフォントが無い可能性もあります。このため「sans-serif」のようなゴシック系フォントも指定しておくと良いでしょう。

&nbsp;

一方、アップルが開発したブラウザ「safari」ではデフォルトのフォントが明朝となっています。このように、ブラウザ間によってページの見た目が大きく変わることがありますから、フォントの指定は重要な要素です。

<img class="size-large wp-image-1773" src="https://banabo.net/wordpress/wp-content/uploads/2016/08/ed2f41c54b3dc865777b3403c70f529a-1024x192.png" alt="safariは明朝体" width="747" height="140" /> safariは明朝体に変化する

ちなみに、ブラウザで表示できるフォントは上記だけではありません。変わり種としては欧文風の「Papyrus」「Apple Chancery」が挙げられます。文字でちょっとおしゃれに装飾したい方は挑戦してみるのもよいかもしれません。しかし、やはりブラウザ環境によっては表示できないものもありますから注意が必要です。

<img class="wp-image-1771" src="https://banabo.net/wordpress/wp-content/uploads/2016/08/808e4f3d891d57e072e363276bad8a87.png" alt="フォントにApple chanceryを指定してみた" width="500" height="330" /> フォントにApple chanceryを指定してみた

<img class="size-large wp-image-1772" src="https://banabo.net/wordpress/wp-content/uploads/2016/08/18f4a10555043741bbabf13497ba456f-1024x144.png" alt="Apple chanceryを指定" width="747" height="105" /> Apple chanceryを指定した場合

<div class="attention">スタイルシートの文頭には「@charset "UTF-8"」と指定しておきましょう。日本語を記述すると文字化けを引き起こす可能性があるため、対応する文字コードを打ち込んでおけば安心です。</div>
<h3>見出しや記事のスタイルを指定する</h3>
続いて記事内容のデザインも整えていきましょう。指定するのは「article」です。最初に見出しの大きさを指定します。
<pre>

/*記事*/
article h1 {margin:0;
font-size:32px;
font-weight:normal}

文字も大きくなり、font-weightでゴシックの質感が少し軽くなりましたね。

スポンサーリンク

見出しのサイズと質感を指定

見出しのサイズと質感を指定

文章のフォントサイズについては、指定が無い場合は標準サイズが16ピクセルです。文字の大きさを変化させたい場合は、スタイルシートに以下のように記述しましょう。


article p {font-size: xx px}

以上で、ワードプレスの自作テーマにおけるスタイルシートの読み込み方と基本的なスタイルの指定について終わります。次回は記事の投稿日やカテゴリーを表示させる方法を紹介します。

スポンサーリンク


コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

新聞社の記者をしています。仲間との起業を夢見て、これまでに学んできたノウハウを記しておきます。現在、主に結婚新聞や企業・団体向けの広報紙を制作していますが「こんな紙面をつくってほしい」とのご要望にも随時お応えしています。