ワードプレスの設定が必須のCSSまとめ

西荻窪と下北沢の美容室ROSSOのスマホサイト

ワードプレスの更新時にBとかIとかマークがありますが、それらはCSSの設定が必須ですね。

必須しなきゃいけないCSSをまとめておきます。

必須CSS

b, strong, i, em, blockquote, del, .alignleft, .aligncenter, .alignright

この辺りは必須ですね!

おすすめCSS

b,
strong {
  font-weight: bold
}

i,
em {
  font-style: italic
}

blockquote {
  padding: 8px;
  background: #eee;
}

ul {
  list-style: disc inside;
}

ol {
  list-style: decimal inside;
}

del {
  text-decoration: line-through
}

img {
  margin-bottom: 8px;
  max-width: 100%;
  height: auto;
}

.alignleft {
  margin-right: 8px;
  float: left;
}

.aligncenter {
  margin: 0 auto 8px;
  text-align: center;
  display: block;
}

.alignright {
  margin-left: 8px;
  float: right;
}

 

基本的にスマホサイトを想定しているので、メディアクエリでPC対応してあげると良いでしょう!

アプリから更新時のサンプル

「B」を使った時

ダミーテキスト

「I」を使った時

ダミーテキスト

「”」(引用)を使った時

ダミーテキスト

リストを使った時

  • ダミーテキスト
  • ダミーテキスト

番号付きリストを使った時

  1. ダミーテキスト
  2. ダミーテキスト

リンクを使った時

ダミーテキスト

管理画面からの更新時

「B」を使った時

ダミーテキスト

「I」を使った時

ダミーテキスト

打ち消し線を使った時

ダミーテキスト

リストを使った時

  • ダミーテキスト
  • ダミーテキスト

番号付きリストを使った時

  1. ダミーテキスト
  2. ダミーテキスト

「”」引用を使った時

ダミーテキスト

「−」(罫線)を使った時


 

左寄せを使った時

ダミーテキスト

中央寄せを使った時

ダミーテキスト

右寄せを使った時

ダミーテキスト

リンクを使った時

ダミーテキスト

下線を使った時

ダミーテキスト

両端揃えを使った時

ダミーテキスト

インデントを使った時

ダミーテキスト

画像(配置:なし)

sample

ダミーテキスト

画像(配置:左)

sampleダミーテキストダミーテキストダミーテキストダミーテキスト

 

ダミーテキストダミーテキスト

 

 

 

 

ダミーテキストダミーテキスト

画像(配置:中央)

sampleダミーテキストダミーテキスト

画像(配置:右)

sample

ダミーテキストダミーテキストダミーテキスト

三上 龍志
この記事を書いた人
三上 龍志
2005年からWeb制作に従事。システム開発ベンチャーでエンジニアとしてWeb開発、Webコンサルティング会社でマーケター・新規事業開発を経て2015年に当社を創業。顧客の成果に顧客よりも本気になることをテーマに、Webを通じて顧客の事業を加速させるために日々奮闘中。
関連する記事
NO IMAGE
メイウェザー VS マクレガーを見て感じた4つのこと
コラム
NO IMAGE
完璧主義者は生産性が低い!8割で妥協のススメ。
コラム
NO IMAGE
アイドルに学ぶギブアンドテイクの作法
コラム
NO IMAGE
フォントサイズ一覧
コラム
駆け出しWebデザイナーに教えたい!デジタル庁のデザインシステム
コラム
なぜ「深い質問」が重要なのか?
コラム
ブックオフ
本の宅配買取の査定額ってどれくらい?230冊送ってみた悲しい現実
コラム
photo
2016年の振り返りと2017年の決意表明
コラム
NO IMAGE
apple store って対応が悪い、、と思いきや!?
コラム
ネガティブ感情を理解して自分の感情と上手く付き合う方法
コラム
マーケティングとWeb制作で
貴社の経営課題を解決します

市場調査や競合調査を始め、企業やサービスの優位性を理解した上で、UI/UX設計やコンテンツマーケティング、SEO・ネット広告を中心としたWebマーケティングを通じて、ビジネスを加速させるご提案をしています。