トップページ
blog
WordPress
WordPress 必ず指定しておきたいネイティブCSSで今までのイライラが解決

WordPress 必ず指定しておきたいネイティブCSSで今までのイライラが解決

公開日:2016/06/22

ライター：attrip

いままでなぜこのCSSを入れて置かなかったのか・・・ととても後悔しました。
それは、こちらのCSSです。

/* editor */
 
p {
    display: block;
    margin: 1em 0;
}
strong { font-weight: bold; }
em { font-style: italic; }
blockquote {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}
 
/* img */
 
.aligncenter {
    display: block;
    margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }
 
img[class*="wp-image-"],
img[class*="attachment-"] {
    height: auto;
    max-width: 100%;
}
 
/* clearfix */
 
.clearfix {
    overflow: hidden;
    zoom: 1;
}
.clearfix:after {
    content: ""
    display: block;
    clear: both;
}

なにをやっているのかというと画像を入れる時に中央揃えを指定するWordPress独自のクラスが有るのにもかかわらずうまく動いていなかった。
このCSSを追記することで画像を挿入した時に中央を指定すればちゃんと真ん中に入るようになります。

ブログを書くのを楽にしたいのであればちゃんとこれを入れておくべきです。

このソースは、こちらのサイトでちゃんと説明されていますのでよく読んでから自分が必要だと思うものを入れてみてください。
例えば、

が自動で入らないようにfunction.phpで指定しているなどカスタマイズしている場合などはそれを辞めるなど自分のサイトにあったものを使ってみてください。

紹介サイト
WordPress テーマ作成時には必ず指定しておきたいネイティブCSS | hijiriworld Web