ワードプレスの設定が必須の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

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

三上 龍志|株式会社シンシエイト
この記事を書いた人
三上 龍志|株式会社シンシエイト
【受けた恩を世の中へ】株式会社シンシエイト代表取締役|恩を繋いで世の中へ笑顔を増やす|IT業界18年|マーケティングに強いWeb制作会社|アイドルシティ開発・運営|元パンパースモデル|お受験全国模試で1位になり青山学院に入学するも高校留年・大学中退|ITベンチャーでエンジニア・マーケターを経て2015年創業
関連する記事
NO IMAGE
あなたの会社をダメにする必殺技11選
恩返し社長コラム
スタバでノマド
リスクを取って新しいことに挑戦出来るようになる3つの方法
恩返し社長コラム
NO IMAGE
いい加減もう「ダメなとこ探し」は終わりにしようぜ
恩返し社長コラム
NO IMAGE
完璧主義者は生産性が低い!8割で妥協のススメ。
恩返し社長コラム
NO IMAGE
「◯日の夜空いてない?」という人間には近づくな!
恩返し社長コラム
NO IMAGE
メイウェザー VS マクレガーを見て感じた4つのこと
恩返し社長コラム
NO IMAGE
蓮舫議員と居酒屋でグチるダメリーマンは重なるところがある
恩返し社長コラム
May I help you? のグーグル翻訳
Japan Tour Guide から垣間見る日本の未来は「深刻」
恩返し社長コラム
ハワイで黒人と英会話
なんで英語を話せるの?勉強せずにアウトロー英会話を始めよう。
恩返し社長コラム
NO IMAGE
「◯日の夜空いてない?」という人間には近づくな!
恩返し社長コラム
マーケティングとWeb制作で
貴社の経営課題を解決します

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