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

投稿日:  カテゴリ: ブログ&IT
このエントリーをはてなブックマークに追加
LINEで送る
Share on Facebook

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

medium_3008912290


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

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

 

csshensyu1

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

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


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

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

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

/*
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>
testtheme3_thumb[1]


<After>
testtheme4

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


参考書はこれがイイ!!

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

エビスコム ソシム 2010-09-08
売り上げランキング : 2448
by ヨメレバ



この工程でかかった時間

・ソースの記述・・・10分


これまでのまとめ

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

このエントリーをはてなブックマークに追加
LINEで送る
Share on Facebook