WebDesign Dackel

WordPressで一からテーマを作る時に設定したいCSSセレクタ一覧

WordPressで一からテーマを作る時に設定したいCSSセレクタ一覧

Hatena0
Google+0
Pocket0
Feedly0

WordPressで一からテーマを作っていくと、ついつい設定し忘れてしまうセレクタが出てきてしまうので、そのためのメモです。

多くの場合、the_content()で吐き出すコンテンツは何らかの要素で囲むかと思います。下記コードでは.post-contentで囲むことを前提としています。ここは各サイトによって調整が必要になりそうです。

CSS

/* Base */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
}

.post-content h1 {
}

.post-content h2 {
}

.post-content h3 {
}

.post-content h4 {
}

.post-content h5 {
}

.post-content h6 {
}

.post-content p {
}

.post-content a {
}

.post-content strong {
}

.post-content em {
}

.post-content del {
}


/* Ordered List */
.post-content ol {
}

.post-content ol li {
}

.post-content ol li ol {
}

.post-content ol li ol li {
}

.post-content ol li ul {
}

.post-content ol li ul li {
}


/* Unordered List */
.post-content ul {
}

.post-content ul li {
}

.post-content ul li ol {
}

.post-content ul li ol li {
}

.post-content ul li ul {
}

.post-content ul li ul li {
}


/* Quote */
.post-content blockquote {
}


/* Horizontal Rule */
.post-content hr {
}


/* Media - Position */
.post-content .alignnone {
}

.post-content .alignleft {
}

.post-content .alignright {
}

.post-content .aligncenter {
}


/* Media - Size */
.post-content .size-thumbnail {
}

.post-content .size-medium {
}

.post-content .size-full {
}


/* Media - Caption */
.post-content .wp-caption {
}

.post-content .wp-caption img {
}

.post-content .wp-caption-text {
}


/* Code */
.post-content code {
}

.post-content pre {
}

.post-content pre code {
}


/* Table */
.post-content table {
}

.post-content table tr {
}

.post-content table td,
.post-content table th {
}

.post-content table thead {
}

.post-content table thead tr {
}

.post-content table thead th {
}

.post-content table thead td {
}

.post-content table tbody {
}

.post-content table tbody tr {
}

.post-content table tbody th {
}

.post-content table tbody td {
}

Sass(Scss)

.post-content {

  // Base
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
  }

  h1 {
  }

  h2 {
  }

  h3 {
  }

  h4 {
  }

  h5 {
  }

  h6 {
  }

  p {
  }

  a {
  }

  strong {
  }

  em {
  }

  del {
  }


  // Ordered List
  ol {
    li {
      ol {
        li {
        }
      }
      ul {
        li {
        }
      }
    }
  }


  // Unordered List
  ul {
    li {
      ol {
        li {
        }
      }
      ul {
        li {
        }
      }
    }
  }


  // Quote
  blockquote {
  }


  // Horizontal Rule
  hr {
  }


  // Media - Position
  .alignnone {
  }

  .alignleft {
  }

  .alignright {
  }

  .aligncenter {
  }


  // Media - Size
  .size-thumbnail {
  }

  .size-medium {
  }

  .size-full {
  }


  // Media - Caption
  .wp-caption {
    img {
    }
  }

  .wp-caption-text {
  }


  // Code
  code {
  }

  pre {
    code {
    }
  }


  // Table
  table {
    tr {
    }
    td,
    th {
    }
    thead {
      tr {
      }
      th {
      }
      td {
      }
    }
    tbody {
      tr {
      }
      th {
      }
      td {
      }
    }
  }

}

まとめ

<ul><ol>のネストは必要無い気もしましたがなんとなく入れてみました。

とりあえずコンテンツ部分に関しては、最低限これで問題無さそうです。あとはエディタ周りにプラグインを導入していたり、独自のクラスなどを入れている場合は別途調整をしていきましょう。

こうやってみると、Sassの方がスッキリと書けるなぁ〜と改めて思いました。