親ページでは、記事行や画像をＰＣ、スマートフォンで切り替える説明でしたが、
ここでは以外の箇所、シリウスのＨＴＭＬテンプレートを操作してスマートフォン
レイアウトを構築するにはについての（例）お話しで進めてまいります

当解説は、親サイトの延長解説となりますので、直接入られた方には意味不明？
詳細は親サイトからご確認ください...でないとお話しが通じません
パソコンとスマートフォンでコンテンツ構成を切り替えるCSS指定

ですが、ＨＴＭＬ内で発動させるため、あくまでトップページでのみで採用
他で、実行するとカテゴリー、エントリー全体に作動してしまう...が事情

例とするもので作用可否は自己判断でお願いします

記事内を分類表示、もしくは別構成に切り替えする趣旨はご理解できたと思いますが、
次は、サイドバーメニューについて....

イチカラムはさておいて2カラムは、レスポンシが作動すると記事巻末へ押しやられますね
それでよいという方....には不要なお話です

例
スマートフォン画面では、簡潔なメニュー構成にしたい

トップページでいえば
記事内に手動のサイトメニューリンク置いて、記事巻末でサイドバーを非表示にしたい

そんなレイアウトをよく見かけるもので....2重ファイルの切り替え表示でしょう

しかし、シリウスのＨＴＭＬテンプレートで要素を囲めばスマートフォン画面でサイドバー
一覧は非表示と指定化できるのです

......
では、ここから...サイドバーすべてをスマートフォンで非表示とする例
こちらは、親サイトで記載済みのｃｌａｓｓ指定記述で記事内使用例

<div class="pcon">スマホで非表示　パソコンで表示
パソコン画面では表示されますが、画面サイズ640px以下では、
消え去る範囲です
</div>

で、このｃｌａｓｓ指定をＨＴＭＬ内でmenu　freeSpace3 freeSpace4　の項目を囲むのです

<div class="pcon">

<div id="menu">
<% freeSpace3 %>
<hr style="border-bottom:solid 1px transparent" border="0" />
<% siteMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% subMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% siteNewEntry | tag_replace(h4,div class="title") | tag_insert_inner(div class="title",span) %>
<% freeSpace4 %>
</div>

</div>

上記例でサイドバーは、スマートフォンでは現れなくなります

フリースペースだけをっ表示する際は、以下のように単独で二つ囲んでください
<div class="pcon">
<% freeSpace3 %>
</div>

<div class="pcon">
<% freeSpace4 %>
</div>

どちらかだけを分別表示する際は、一方を囲む....

後ほど他の手法も追記いたします

ＨＴＭＬテンプレート内で要素の切り替え表示を指示する
パソコンとスマートフォンでコンテンツ構成を切り替えるCSS指定
トップページ

関連ページ

レスポンシブ縮小に合わせて変化する記事内横並び画像の縦配列

シリウスのフレームではなく記事内でレスポンシブ縮小に合わせて変化する記事内置き場の横並び画像縦配列改変指示方法..（今回はレイアウトの指示改行で進めています）