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

2020年5月12日2023年12月28日

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

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

押せる目次

追加：syntax-highlighter　Prismatic

Prismaticから、Prism.jsにアクセスして、ソースコードハイライトを表現。

/* javascript sample */
window.onload = function() {
  setInterval(function() {
    var d = new Date();
    document.getElementById("TODAY").innerHTML = d.toLocaleString();
  }, 100);
}

/*　css sample */
div[role="presentation"] {
display:none;
}

<!-- html sample -->
<ol id="breadcrumb">
<li><i class="fas fa-home"></i><a href="https://tech2.kimihiko.jp/?ref=pankuzu" data-nodal="">ホーム</a><i class="arrow">></i></li><li><i class="far fa-file"></i><a href="https://tech2.kimihiko.jp/material-sample/?ref=pankuzu" data-nodal="">ブログの全部要素入りページのサンプル</a></li>
</ol>

/*** php sample ***/ 
if( isset( $luxe['head_band_visible'] ) ) {
	if( isset( $luxe['amp'] ) ) {
		ob_start();
		get_template_part( 'head-band' );
		$band = ob_get_clean();
		echo thk_amp_not_allowed_tag_replace( $band );
	}
	else {
		get_template_part( 'head-band' );
	}
}

メディアの埋め込み

twitterの埋め込み

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

仕事上がり、業務用ふりかけおいしい(*´ω｀*) pic.twitter.com/JA8TL9YdEQ

— ねこはち (@nekoneko888) June 3, 2019

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の記事！

新しい要素

囲み系タイトル

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

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

無指定必見！女性からのめつぶめつぶしを回避する7つの方法
必見！女性からのめつぶめつぶしを回避する7つの方法。長文の関連リンクが入ってしまうイメージ。長文の関連リンクが入ってしまうイメージ。
へんな講義に出ないほうがよい理由とは

参考（fas fa-book）必見！女性からのめつぶめつぶしを回避する7つの方法
必見！女性からのめつぶめつぶしを回避する7つの方法。長文の関連リンクが入ってしまうイメージ。長文の関連リンクが入ってしまうイメージ。
へんな講義に出ないほうがよい理由とは

注意（fas fa-exclamation-triangle）必見！女性からのめつぶめつぶしを回避する7つの方法
必見！女性からのめつぶめつぶしを回避する7つの方法。長文の関連リンクが入ってしまうイメージ。長文の関連リンクが入ってしまうイメージ。
へんな講義に出ないほうがよい理由とは

メモ（fas fa-pencil-alt）必見！女性からのめつぶめつぶしを回避する7つの方法
必見！女性からのめつぶめつぶしを回避する7つの方法。長文の関連リンクが入ってしまうイメージ。長文の関連リンクが入ってしまうイメージ。
へんな講義に出ないほうがよい理由とは

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

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

ここにタイトル

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

ここにタイトル

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

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

デバイス

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

スマホ
PC
タブレット

要素一覧

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

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

目次（H2～H4階層は必要）

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

一階層目タイトル

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

二階層目タイトル

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

三階層目タイトル

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

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

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

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

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