ブログの全部要素入りページのサンプル

ブログの全部要素入りページのサンプルです。

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文

メディアの埋め込み

twitterの埋め込み

そのままツイート詳細URLを置くと…。

Youtubeの埋め込み

YouTubeぱすをそのまま置くと…。

口コミレビュー風の装飾

ここに文章はいります。ここに文章はいります。ここに文章はいります。ここに文章はいります。

口コミ・評判

あれそれさん(30代男性)
★☆☆☆☆ 1
この製品はここがこれくらいよかったですね。ただ、あれがそれだったらよかったかなと。でも総合的にそれな感じでしたね。

ここに文章はいります。ここに文章はいります。ここに文章はいります。ここに文章はいります。

口コミ・評判

あれそれさん(40代女性)
★☆☆☆☆ 1
この製品はここがこれくらいよかったですね。ただ、あれがそれだったらよかったかなと。でも総合的にそれな感じでしたね。

ここに文章はいります。ここに文章はいります。ここに文章はいります。ここに文章はいります。

コードの掲載方法

モダンな掲載方法はcodeタグで囲みます。

codeで囲んだだけ

囲まれる部分。囲まれる部分。囲まれる部分。囲まれる部分。囲まれる部分。囲まれる部分。囲まれる部分。

codeとblockquoteで囲む

codeタグが改行の自動タグ化などと干渉することが判明。 blockquote.code でいくことに。

囲まれる部分。囲まれる部分。囲まれる部分。囲まれる部分。囲まれる部分。囲まれる部分。

codeとblockquoteで囲む

codeタグが改行の自動タグ化などと干渉することが判明。 blockquote.code でいくことに。

囲まれる部分。囲まれる部分。囲まれる部分。囲まれる部分。囲まれる部分。囲まれる部分。囲まれる部分。囲まれる部分。囲まれる部分。囲まれる部分。囲まれる部分。

写真の扱い方

スピード重視で扱うには、quicktag 登録した 通常画像(shadowつきポートレイト画像)、もしくは、溶け込ませ画像、をとりあえず、アテで貼ってしまう。記事ができたら、さいごに、プレビューで画像を選択した状態で、左上の メディアを追加 からイメージを選択することで、かんたんに差し替えができるぞ!

デバイス確認には、chromeのリサイザー機能拡張を使うと便利ですよ。

イメージは、Pタグで単体で囲むか、Pタグでテキストも含めて囲んでBRタグでスキマを作るか、のいずれかとする。

理由は、すでにテキストも含めてPタグで囲んでいるもので、BRタグで空白調整してるものが多数あると予想されるため、BRを削除して回るのが現実的でないため。
もうひとつの理由。画像のコピーライト(C)朝日新聞 とかいれる場合に画像キチキチのほうがよいので。

そのため画像とイメージのあいだが、きちきちのものが出てくるが、その場合はBRを入れるか、イメージ単体P囲みに変更するかで、対応すればよいので。

また最近、IMGタグをブロックにしてmargin 0 autoで、どのような構成の記事でも、記事内イメージはセンタリングされるようにした。

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文

非ポートフォリオ的な画像、背景に溶け込ますような白背景の画像は、ドロップシャドウをかけるとおかしい。

class shadow_off をつけて、シャドウを無効化するCSSを追加した。

CSS調整した際に見るべきページ種別

  • トップ
  • 個別&記事ページ
  • カテゴリページ
  • おすすめ一覧
  • ランキングページ

上記の、スマホ、PC、タブレットを見るのが望ましいが
とりいそぎ、スマホPCだけでも良いです。

テーブルのサンプル

引用して、引用内でテーブルを記述するパターン。

ワイヤレス規格一覧

上位ほど高速で最新の規格。

無線LAN規格 通信速度(最大) 周波数帯
IEEE802.11ad 6.7Gbps 60GHz帯
IEEE802.11ac 6.9Gbps 5GHz帯
IEEE802.11n 300Mbps 2.4G帯/5GHz帯
IEEE802.11a 54Mbps 5GHz帯
IEEE802.11g 54Mbps 2.4GHz帯
IEEE802.11b 11Mbps 2.4GHz帯

出展:https://www.iodata.jp/product/network/info/base/kikaku.htm

通常のテーブル

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。

無線LAN規格 通信速度(最大) 周波数帯
IEEE802.11ad 6.7Gbps 60GHz帯
IEEE802.11ac 6.9Gbps 5GHz帯
IEEE802.11n 300Mbps 2.4G帯/5GHz帯
IEEE802.11a 54Mbps 5GHz帯
IEEE802.11g 54Mbps 2.4GHz帯
IEEE802.11b 11Mbps 2.4GHz帯

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。

コンバージョンボタンの開発

コンバージョンボタン単体

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。


↑SPANの前にBR明示入力が正解、マイクロコピーのspanはブロック化して改行してる↑

CVボタンの取り扱い中は色々。

pタグにclass cv_btn を忘れずに! 記事内imgセンタリングするためのdisplay blockのアフィリコード1pxの影響を打ち消すために作成したので必ず入れる。

マイクロコピーまですべてにおいてソース上で改行をいれてはいけない。スマホビューだけで改行されたりもする原因になる。

実装イメージの詳細は、夫婦におすすめのVODの記事!

新しい要素

囲み系タイトル

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。

ここにタイトルここに文章。ただ文章が入るイメージ。ただ文章が入るイメージ。ただ文章が入るイメージ。ただ文章が入るイメージ。ただ文章が入るイメージ。ただ文章が入るイメージ。ただ文章が入るイメージ。ただ文章が入るイメージ。ただ文章が入るイメージ。ただ文章が入るイメージ。ただ文章が入るイメージ。

上記、リンクの前にiタグをカラでいれていただければOKです。

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。

ここにタイトル

  • 野球
  • バスケ
  • 帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。長くなるイメージ。
  • 卓球

ここにタイトル

  1. 野球
  2. バスケ
  3. 帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。長くなるイメージ。
  4. 卓球

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。

デバイス

要素一覧は後述しますがが、次の3デバイスで確認が必要。

  • スマホ
  • PC
  • タブレット

要素一覧

  • 目次(H2~H4階層は必要)
  • 番号無しリスト
  • 番号ありリスト
  • topics囲み
  • notice囲み
  • blockquote
  • 吹き出し
  • ブログカード

それぞれ詳しく解説します。

目次(H2~H4階層は必要)

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。

一階層目タイトル

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。

二階層目タイトル

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。

三階層目タイトル

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。

一階層目タイトル。ながいながいタイトルのつもり。ながいながいタイトルのつもり。ながいながいタイトルのつもり。

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。

二階層目タイトル。ながいながいタイトルのつもり。ながいながいタイトルのつもり。ながいながいタイトルのつもり

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。

三階層目タイトル。ながいながいタイトルのつもり。ながいながいタイトルのつもり。ながいながいタイトルのつもり

本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。

一階層目タイトル

階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。

一階層目タイトル

階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。

一階層目タイトル

階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。

二階層目タイトル

階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。

二階層目タイトル

階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。

二階層目タイトル

階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。

三階層目タイトル

階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。

三階層目タイトル

階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。

三階層目タイトル

階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。

番号無しリスト

  • りんご
  • みかん
  • パイナップル
  • りんご。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ
  • みかん。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ
  • パイナップル

番号ありリスト

  1. あかいろ
  2. おれんじいろ
  3. きいろ
  4. あかいろ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ
  5. おれんじいろ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ
  6. きいろ

topics囲み

本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。

囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。

本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。

notice囲み

本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。

囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。囲まれます。

本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。

blockquote

ぶろっくくおーとです。ぶろっくくおーとです。ぶろっくくおーとです。ぶろっくくおーとです。ぶろっくくおーとです。ぶろっくくおーとです。

吹き出し

kimihiko
kimihiko
★★★
★★★
hiro
hiro
pusuke
pusuke
★★★長くしゃべるイメージ。長くしゃべるイメージ。長くしゃべるイメージ。長くしゃべるイメージ。
★★★長くしゃべるイメージ。長くしゃべるイメージ。長くしゃべるイメージ。長くしゃべるイメージ。長くしゃべるイメージ。
困る人
困る人
ものすごく困る人
ものすごく困る人
★★★

本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。

pusuke
pusuke
★★★長くしゃべるイメージ。長くしゃべるイメージ。長くしゃべるイメージ。長くしゃべるイメージ。
★★★長くしゃべるイメージ。長くしゃべるイメージ。長くしゃべるイメージ。長くしゃべるイメージ。長くしゃべるイメージ。
困る人
困る人

本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。

ブログカード

本文が前に入り。。

サンプルは以上です。