ロゴ

CSSスタイル移行

2025/12/17 かてごり１

このページの目次
  1. ブログ本体のマークアップ変更
  2. 現在　h2.stick をH2標準スタイルに
  3. 現在　H4.side2color を　H3（H4→H3)標準スタイルに
  4. 現在ｈ3.c-header blueをH3の別バージョン
  5. H5.stickを標準H4（H5→H4）にする
  6. この記事は前回の記事の続きです
  7. H4バルーン見出し
  8. 現在　H5.check を標準H5
  9. お客様との関係性を自動で分類と可視化出来る
  10. class=sb-box　会話ふきだし左
  11. 【006】見出し＋灰色ボード（class="box-title-gray
  12. 記事抜粋
  13. 箇条書き　強調スタイル
  14. ステップスタイル
  15. おすすめリンク
  16. 囲み線
  17. 青色背景のリスト見出しあり
  18. ■ブログの関連商品の表示を　下記のように　３列で表示する
  19. ■ブログのサイドバーの　記事を写真付きにする
  20. ■タグクラウドの追加
  21. ■文章の下のタグ：文章の始まりのカテゴリー
  22. 青色背景のリスト
  23. 文章最後の書いた人の欄
  24. サイドメニュー自動追従
ブログ本体のマークアップ変更
記事のタイトル部分をH1に変更（現在H2)

記事のタイトル部分をH1に変更（現在H2)

サイドメニューのタイトルをH2から他に変更

SEO的に　サブメニューのタイトルがH2が良くないと思うので、他に変更 一般的なブログの構造マークアップ参考はこちら→

現在　h2.stick をH2標準スタイルに

Lステップとエルメッセージの全体まとめ

<h2 class="stick">Lステップとエルメッセージの全体まとめ</h2>

現在　H4.side2color を　H3（H4→H3)標準スタイルに

構築代行業者を使わない場合は両者それほど大きな差は出ない。

<h4 class="side2color">構築代行業者を使わない場合は両者それほど大きな差は出ない。</h4>
現在ｈ3.c-header blueをH3の別バージョン

iPhone SEからiPhone 8/7に乗り換えるメリット

<h3 class="c-header blue">iPhone SEからiPhone 8/7に乗り換えるメリット</h3>

H5.stickを標準H4（H5→H4）にする
この記事は前回の記事の続きです

<h5 class="stick">この記事は前回の記事の続きです</h5>

H4バルーン見出し

LINEコールを禁止されている業種

<h4><span class="baloon_midashi demerit">LINEコールを禁止されている業種 </span></h4>

現在　H5.check を標準H5
お客様との関係性を自動で分類と可視化出来る
<h5 class="check">お客様との関係性を自動で分類と可視化出来る</h5>

class=sb-box　会話ふきだし左
class=sb-box　会話ふきだし左
LINEマーケターかいたに
よく頂く質問なので、私なりの見解をお話しします！
とりあえず無料ツールで導入をお勧めします
<div class="sb-box"> <div class="icon-img icon-img-left"><img src="/cms/img/profile_s70.webp" /></div> <div class="icon-name icon-name-left">LINEマーケターかいたに</div> <div class="sb-side sb-side-left"> <div class="sb-txt sb-txt-left">よく頂く質問なので、私なりの見解をお話しします！<br />とりあえず無料ツールで導入をお勧めします</div> </div> </div>

会話葺きだし右　（img src で画像を変えている）
すでにLINE登録者も100人程度いる。もしくは店舗などで友だち登録の施策ができるから、LINE拡張ツールを使って売り上げを上げようと思いました
<div class="sb-box"> <div class="icon-img icon-img-right"><img src="/cms/img/user4.webp" /></div> <div class="icon-name icon-name-right"></div> <div class="sb-side sb-side-right"> <div class="sb-txt sb-txt-right">すでにLINE登録者も100人程度いる。もしくは店舗などで友だち登録の施策ができるから、LINE拡張ツールを使って売り上げを上げようと思いました</div> </div> </div>

会話葺きだし右　（img src で画像を変えている）
まだ今からビジネスを始めようと思っているところで・・売り上げが経ってないので費用を抑えたい・・
<div class="sb-box"> <div class="icon-img icon-img-right"><img src="/cms/img/user5.webp" /></div> <div class="icon-name icon-name-right"></div> <div class="sb-side sb-side-right"> <div class="sb-txt sb-txt-right">まだ今からビジネスを始めようと思っているところで・・売り上げが経ってないので費用を抑えたい・・</div> </div> </div>

【006】見出し＋灰色ボード（class="box-title-gray
LINE公式アカウント単体での欠点
  • 友だち登録した人に対して相手からアクションしてもらわない限り友だち情報が取得できない（友だちの興味・関心を把握できない）
  • 手動での運用が基本になり、時間と手間をかけ続ける必要がある
  • 関係性が薄い（アクティブでない）友だちに配信コストがかかり続ける
<div class="box-title-gray"> <div class="box-title">LINE公式アカウント単体での欠点</div> <ul class="list-011"> <li>友だち登録した人に対して相手からアクションしてもらわない限り友だち情報が取得できない（友だちの興味・関心を把握できない）</li> <li>手動での運用が基本になり、時間と手間をかけ続ける必要がある</li> <li>関係性が薄い（アクティブでない）友だちに配信コストがかかり続ける</li> </ul> </div>
記事抜粋
Lステップとエルメッセージ比較④（コスパ費用で比較編）
気になる費用を機能とのバランスで各ツール比較しました。
<dl class="extract"> <dt><img src="https://shinsetsu.marketing/cms/files/resize/elm_lstep4.png" /></dt> <dd class="title"><a href="https://shinsetsu.marketing/blog/article/lstep_elmessage4">Lステップとエルメッセージ比較④（コスパ費用で比較編）</a></dd> <dd class="text">気になる費用を機能とのバランスで各ツール比較しました。</dd> </dl>
箇条書き　強調スタイル
このプログラムの対象者はこんな方です！
  • ブログで集客し、商品が売れるようになりたい。
  • 記事のネタ切れが起こりやすいので、解消したい。
  • ブログの方向性が定まらない。
<div class="su-box su-box-style-default" style="border-color:#1a5abd;border-radius:3px">
<div class="su-box-title" style="background-color:#2071ec;color:#ffffff;border-top-left-radius:1px;border-top-right-radius:1px">このプログラムの対象者はこんな方です！</div>
<div class="su-box-content su-clearfix" style="border-bottom-left-radius:1px;border-bottom-right-radius:1px">
<ul>
<li>ブログで集客し、商品が売れるようになりたい。</li>
<li>記事のネタ切れが起こりやすいので、解消したい。</li>
<li>ブログの方向性が定まらない。</li>
</ul>
</div>
</div>

ステップスタイル
Bluetoothスピーカーのペアリングモードをオンにする
Alexaアプリでデバイスを選択
Bluetoothデバイスを選択
<div class="point1">Bluetoothスピーカーのペアリングモードをオンにする</div>
<div class="point2">Alexaアプリでデバイスを選択</div>
<div class="point3">Bluetoothデバイスを選択</div>

おすすめリンク
おすすめリンク1つ

おすすめりんくテスト

<p class="osusume-link"><a href="">おすすめりんくテスト</a></p>
おすすめリンク複数行（リンク2つ以上）

リンク先タイトル１
リンク先タイトル２

<div class="emphasize-link">
<p><a href="リンク先URL１">リンク先タイトル１</a></p>
<p><a href="リンク先URL２">リンク先タイトル２</a></p>
</div>

囲み線
囲み線　自由に項目見出しあり(11-2とタイトルh4入れる区別）

製品構成

  • Amazon Echo 本体
  • AC アダプター
  • 説明書
  • 使い方の例
<div class="boxed">
<h4 class="title">製品構成</h4>
<ul>
<li>Amazon Echo 本体</li>
<li>AC アダプター</li>
<li>説明書</li>
<li>使い方の例</li>
</ul>
</div>

囲み線　項目見出しなしリスト
  • Amazon Echo 本体
  • AC アダプター
  • 説明書
  • 使い方の例
<div class="boxed">
<ul>
<li>Amazon Echo 本体</li>
<li>AC アダプター</li>
<li>説明書</li>
<li>使い方の例</li>
</ul>
</div>
青色背景のリスト見出しあり
LINE拡張ツールを導入する基本的メリット（各社共通）
  • アンケート（回答フォーム）で お客様の属性と興味を把握（お客様と関係性を深める）
  • お客様のアクション(反応)を起点にして、シナリオ配信シナリオ分岐できる。（つまり自動化対応ができる）
  • アクティブでないお客様を可視化。配信除外できる。「配信コストの削減」
  • +アルファでLINE予約機能や分析等の特別な機能が使える
<div class="box-title-sky"> <div class="box-title">LINE拡張ツールを導入する基本的メリット（各社共通）</div> <ul class="list-011"> <li>アンケート（回答フォーム）で お客様の属性と興味を把握（<span style="font-weight: bold;">お客様と関係性を深める</span>）</li> <li>お客様のアクション(反応)を起点にして、シナリオ配信シナリオ分岐できる。（つまり<span style="font-weight: bold;">自動化対応ができる</span>）</li> <li>アクティブでないお客様を可視化。配信除外できる。<span style="font-weight: bold;">「配信コストの削減」</span></li> <li>+アルファでLINE予約機能や分析等の特別な機能が使える</li> </ul>
■ブログの関連商品の表示を　下記のように　３列で表示する


<aside><div id="entrylist" class="thumblist"><h4><span>関連ページ</span></h4> <dl><!-- block:id="relative_article" cms:count="12" --> <div> <dt><span class="entry_thumb"><!-- cms:id="amazon_image_large_is_empty" --><!-- cms:id="is_thumbnail" --><a href="./category4/entry8.html" cms:id="entry_link"><img cms:id="thumbnail" src="./img/015f76c0c42010e4b8413b892ac825efa3598f93a3.jpg" /></a><!-- /cms:id="is_thumbnail" --><!-- /cms:id="amazon_image_large_is_empty" --><!-- cms:id="amazon_image_large" /--> </span><span class="entry_title"><a href="../category4/entry8.html"><!-- cms:id="title" -->龍勢（りゅうせい）初しぼり無濾過生原酒<!-- /cms:id="title" --></a></span><p><small><!-- cms:id="content" cms:length="30" /--></small></p></dt> </div><!-- /block:id="relative_article" --> </dl> </div> </aside> </div>

■ブログのサイドバーの　記事を写真付きにする

日付は不要です


<h4>最新記事</h4> <div class="menubox recent"> <ul id="newEntry"> <!-- b_block:id="recent_entry_list" --> <li> <small><!-- cms:id="create_date" cms:format="m/d"-->03/17<!-- /cms:id="create_date" --></small> <div> <!-- cms:id="is_thumbnail" --><a cms:id="entry_link"><img cms:id="upload" /></a><!-- /cms:id="is_thumbnail" --> <a cms:id="entry_link*"><!-- cms:id="title_plain" -->テスト4<!-- /cms:id="title_plain" --></a> </div> </li> <!-- /b_block:id="recent_entry_list" --> </ul> </div>

■タグクラウドの追加

タグクラウドのCSSイメージ　→カスタマイズ例　https://web-ashibi.net/archives/2146



<h4>タグクラウド</h4> <div class="menubox tagcloud"> <!-- block:id="tag" cms:label="1" cms:count="10" --> 表示したい内容のcms:idを追加 <!-- /block:id="tag" --> <!-- cms:module="common.tag_cloud" cms:count="10" --> <ul> <!-- p_block:id="tag_cloud_word_list" --> <li><a cms:id="tag_link"><!-- cms:id="tag" -->タグ<!-- /cms:id="tag" --></a></li> <!-- /p_block:id="tag_cloud_word_list" --> </ul> <!-- /cms:module="common.tag_cloud" --> </div>     <!-- cms:module="html.sideads" --> <!-- /cms:module="html.sideads" -->

■文章の下のタグ：文章の始まりのカテゴリー

を文末にこんな風に

<!-- b_block:id="entry*" --> <!-- cms:id="is_tag_cloud" --> <div class="news-tag"> <ul> <!-- cms:id="tag_cloud_tag_list" --> <li><a cms:id="tag_cloud_tag_link"><!-- cms:id="tag_cloud_tag_word" /--></a></li> <!-- /cms:id="tag_cloud_tag_list" --> </ul> </div> <!-- /cms:id="is_tag_cloud" --> <!-- /b_block:id="entry*" -->
青色背景のリスト
青色背景のリスト見出しあり
LINE拡張ツールを導入する基本的メリット（各社共通）
  • アンケート（回答フォーム）で お客様の属性と興味を把握（お客様と関係性を深める）
  • お客様のアクション(反応)を起点にして、シナリオ配信シナリオ分岐できる。（つまり自動化対応ができる）
  • アクティブでないお客様を可視化。配信除外できる。「配信コストの削減」
  • +アルファでLINE予約機能や分析等の特別な機能が使える
<div class="box-title-sky"> <div class="box-title">LINE拡張ツールを導入する基本的メリット（各社共通）</div> <ul class="list-011"> <li>アンケート（回答フォーム）で お客様の属性と興味を把握（<span style="font-weight: bold;">お客様と関係性を深める</span>）</li> <li>お客様のアクション(反応)を起点にして、シナリオ配信シナリオ分岐できる。（つまり<span style="font-weight: bold;">自動化対応ができる</span>）</li> <li>アクティブでないお客様を可視化。配信除外できる。<span style="font-weight: bold;">「配信コストの削減」</span></li> <li>+アルファでLINE予約機能や分析等の特別な機能が使える</li> </ul>
青色背景のリスト
  • 構築代行業者を使わない場合は両者それほど大きな差は出ない。
  • LINE拡張ツールの導入を先延ばしにすることの方が損失が大きい。
  • LINE施策には先行者利益がある事に気づく
  • 後で拡張ツールは乗り換えが出来る
<div class="boxblue"> <ul class="list-011"> <li>構築代行業者を使わない場合は両者それほど大きな差は出ない。</li> <li>LINE拡張ツールの導入を先延ばしにすることの方が損失が大きい。</li> <li>LINE施策には先行者利益がある事に気づく</li> <li>後で拡張ツールは乗り換えが出来る</li> </ul>
文章最後の書いた人の欄

ページャーの前に配置

イメージ画像 参考URL→　記事の下

サイドメニュー自動追従
メニュー見出し自動追従
<div class="sticky" data-sticky-wrap="true" data-margin-top="16" data-sticky-for="768"> <div class="title">メニュー見出し自動追従</div> <div class="menubox"><div id="space4"><img src="https://shinsetsu.marketing/cms/files/swell_pr_banner_202111.jpg" width="900" height="750" alt="" /> </div></div> </div>
櫂谷 大寛
櫂谷 大寛
プロフィールテキストプロフィールテキストプロフィールテキストプロフィールテキストプロフィールテキストプロフィールテキストプロフィールテキストプロフィールテキストプロフィールテキストプロフィール
広告

記事検索

Keyword

キーワード１キーワード１キーワドキーワード１キーワード１キワキーワード１キーワード１１１１１

最新記事

アーカイブ

カテゴリー

前の記事 ブログ一覧へ 次の記事
セミナー依頼・取材・
パートナー契約はこちら

関連ページ

TOP