WPテーマ自作への道（２）スタイルシートの編集【FC2→WordPress移行レポ14】

今回はスタイルシートの編集をしてみます。

スタイルシートを編集画面

まずはWordPressの管理画面（ダッシュボード）に入り、「外観」→「テーマ編集」を選択します。
次に画面右側の『テンプレート』の中から『style.css』ファイルを選択します。

すると上記のような画面が表示されます。

ここからスタイルシートの編集ができます。

ヘッダー部分のスタイルを指定する

今回はとりあえずヘッダー部分のスタイルを指定します。

スタイルシートに以下のように記述します。

/*
Theme Name: Testtheme
Theme URI: http://manabi-r.com/
Description: テストテーマ
*/

/* ヘッダー */
div#header h1 {font-size: 30px;
?????????????? margin: 0}

div#header h1 a {text-decoration: none;
???????????????? color: #ff8c00}

div#header p#dec {font-size:12px;
????????????????? color: #808080;
????????????????? margin: 0}

div#header {border-bottom: solid 5px #1e90ff;
??????????? padding-bottom: 10px;
??????????? margin-bottom: 20px}

青字部分はタイトルのデザインを指定する記述です。
タイトルは30pxの大きさで、文字の周りの余白（maargin）はゼロにしました。

text-decorationというのは、リンクの下に線を表示するかどうか、colorは文字の色を表しています。

赤字部分はブログの説明に関する部分です。

緑字の部分はヘッダー下に表示する罫線に関する表示です。

記述が終わったら『ファイルを更新』ボタンを押して終了。

さて、本日の作業の成果はいかに？

今日の作業の成果

＜Before＞

＜After＞

タイトルに色が付き、ヘッダー下に下線が入りました。

参考書はこれがイイ！！

この記事は下記の本を参考にして書きました。何冊もWordPressの参考書を読んでみたが、ダントツにわかりやすい本。

エビスコム ソシム 2010-09-08 売り上げランキング : 2448 Amazon 楽天ブックス 7net by ヨメレバ

この工程でかかった時間

・ソースの記述･･･１０分

これまでのまとめ

前回までのレポートは↓のNAVERまとめをご覧ください。
初心者でもできる！FC2からWordPressに移行する方法まとめ – NAVER まとめ
WordPressがなんなのかすらよくわかっていない私が、８月までにFC2からWordPressに完全移行することを目指す奮闘記です。内容はブログ移行作業の進行に伴って徐々に追加していきます。 …

Tweet