ブログの全部要素入りページのサンプル
ブログの全部要素入りページのサンプルです。
本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文
追加: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ぱすをそのまま置くと…。
口コミレビュー風の装飾
ここに文章はいります。ここに文章はいります。ここに文章はいります。ここに文章はいります。
ここに文章はいります。ここに文章はいります。ここに文章はいります。ここに文章はいります。
ここに文章はいります。ここに文章はいります。ここに文章はいります。ここに文章はいります。
コードの掲載方法
モダンな掲載方法は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つの方法。長文の関連リンクが入ってしまうイメージ。長文の関連リンクが入ってしまうイメージ。
へんな講義に出ないほうがよい理由とは
必見!女性からのめつぶめつぶしを回避する7つの方法。長文の関連リンクが入ってしまうイメージ。長文の関連リンクが入ってしまうイメージ。
へんな講義に出ないほうがよい理由とは
必見!女性からのめつぶめつぶしを回避する7つの方法。長文の関連リンクが入ってしまうイメージ。長文の関連リンクが入ってしまうイメージ。
へんな講義に出ないほうがよい理由とは
必見!女性からのめつぶめつぶしを回避する7つの方法。長文の関連リンクが入ってしまうイメージ。長文の関連リンクが入ってしまうイメージ。
へんな講義に出ないほうがよい理由とは
上記、リンクの前にiタグをカラでいれていただければOKです。
本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。
ここにタイトル
- 野球
- バスケ
- 帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。長くなるイメージ。
- 卓球
ここにタイトル
- 野球
- バスケ
- 帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。帰宅部でした。長くなるイメージ。
- 卓球
本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。
デバイス
要素一覧は後述しますがが、次の3デバイスで確認が必要。
- スマホ
- PC
- タブレット
要素一覧
- 目次(H2~H4階層は必要)
- 番号無しリスト
- 番号ありリスト
- topics囲み
- notice囲み
- blockquote
- 吹き出し
- ブログカード
それぞれ詳しく解説します。
目次(H2~H4階層は必要)
本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。
一階層目タイトル
本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。
二階層目タイトル
本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。
三階層目タイトル
本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。
本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。
一階層目タイトル。ながいながいタイトルのつもり。ながいながいタイトルのつもり。ながいながいタイトルのつもり。
本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。
二階層目タイトル。ながいながいタイトルのつもり。ながいながいタイトルのつもり。ながいながいタイトルのつもり
本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。
三階層目タイトル。ながいながいタイトルのつもり。ながいながいタイトルのつもり。ながいながいタイトルのつもり
本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。
一階層目タイトル
階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。
一階層目タイトル
階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。
一階層目タイトル
階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。
二階層目タイトル
階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。
二階層目タイトル
階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。
二階層目タイトル
階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。
三階層目タイトル
階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。
三階層目タイトル
階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。
三階層目タイトル
階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。階層タイトルの重なり見るよう。
番号無しリスト
- りんご
- みかん
- パイナップル
- りんご。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ
- みかん。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ
- パイナップル
番号ありリスト
- あかいろ
- おれんじいろ
- きいろ
- あかいろ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ
- おれんじいろ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ。長くなるイメージ
- きいろ
topics囲み
本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。
本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。
notice囲み
本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。
本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。本文のつもり。
blockquote
ぶろっくくおーとです。ぶろっくくおーとです。ぶろっくくおーとです。ぶろっくくおーとです。ぶろっくくおーとです。ぶろっくくおーとです。
吹き出し
本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。
本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。本文かもしれない。
ブログカード
本文が前に入り。。
サンプルは以上です。