ワードプレスの設定が必須の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を通じて顧客の事業を加速させるために日々奮闘中。
関連する記事
May I help you? のグーグル翻訳
Japan Tour Guide から垣間見る日本の未来は「深刻」
コラム
NO IMAGE
apple store って対応が悪い、、と思いきや!?
コラム
篠塚つぐみ300試合連続出場記念セレモニー
仕事が出来ない人が絶対に達成できないたった一つのコト
コラム
NO IMAGE
電車内でのマナーモードがなぜ常識?マナー違反な理由に迫る。
コラム
スタバでノマド
リスクを取って新しいことに挑戦出来るようになる3つの方法
コラム
NO IMAGE
「◯日の夜空いてない?」という人間には近づくな!
コラム
駆け出しWebデザイナーに教えたい!デジタル庁のデザインシステム
コラム
photo
2016年の振り返りと2017年の決意表明
コラム
NO IMAGE
ビジネスマンが知っておきたい「ロジカルに簡潔に話すコツ」
コラム
NO IMAGE
フォントサイズ一覧
コラム
マーケティングとWeb制作で
貴社の経営課題を解決します

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