ワードプレスの設定が必須の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
恩を返すたった一つの方法は。。。?
コラム
NO IMAGE
夢なき者に成功なし。 by 吉田松陰
コラム
NO IMAGE
行きたくなる美容室ってこんな美容室だよね
コラム
2023年、株式会社シンシエイトは経営理念をリニューアルしました。
コラム
人を苦しめて喜びを得るという事
コラム
NO IMAGE
いい加減もう「ダメなとこ探し」は終わりにしようぜ
コラム
NO IMAGE
「継続は力なり」?いやいや、継続が全てでしょ!
コラム
ブックオフ
本の宅配買取の査定額ってどれくらい?230冊送ってみた悲しい現実
コラム
SEOでWeb集客する方法を社長に聞いてみた Googleサーチコンソールの編
コラム
NO IMAGE
大好きなあの人と付き合う方法を考えよう
コラム
マーケティングとWeb制作で
貴社の経営課題を解決します

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