WordPressテーマ自作(1)|スタイルシート作成


 

テーマの名前を「mytheme」として以下のようなstyle.cssを作成します。
スタイルの中身は適当です。

/*
Theme Name: MyTheme
Description: A custom WordPress theme.
Author: Your Name
Version: 1.0
*/

/* Body styles */
body {
    background-color: #f5f5f5;
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 1em;
    font-weight: bold;
    line-height: 1.2;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.17em;
}

h4 {
    font-size: 1em;
}

h5 {
    font-size: 0.83em;
}

h6 {
    font-size: 0.67em;
}

/* Links */
a {
    color: #0073aa;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Lists */
ul, ol {
    margin: 0 0 1em;
    padding: 0 0 0 2em;
}

li {
    margin: 0 0 0.5em;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
}

/* Forms */
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 0.5em;
    margin: 0 0 1em;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
}

input[type="submit"] {
    background-color: #0073aa;
    color: #fff;
    padding: 0.5em 1em;
    border: none;
    border-radius: 3px;
    box-sizing: border-box;
}

input[type="submit"]:hover {
    background-color: #005d82;
}

このCSSでは、以下のようなスタイルを定義しています。

  • Body要素に背景色、文字色、フォント、フォントサイズ、行間を設定
  • 見出しタグ(h1〜h6)にマージン、フォントウェイト、行間を設定
  • 見出しタグのフォントサイズを段階的に小さく設定
  • リンクに色と下線を設定。hover時に下線を表示
  • リストにマージン、パディングを設定
  • リストアイテムにマージンを設定
  • 画像の最大幅を100%に、高さを自動調整する
  • テキスト入力欄とテキストエリアに幅、パディング、マージン、枠線、角丸を設定
  • 送信ボタンに背景色、文字色、パディング、ボーダー、角丸を設定。hover時に背景色

WEBプログム、WEBデザインなどの制作については、以下を御覧ください。

WEBプログム、WEBデザインなどの制作