サイト作成ソフトシリウス｜ボックススクロールHTML

サイト作成ソフトシリウス｜ボックススクロールHTML

旧シリウスの使い方動画解説

CSS記述不要！ボックススクロールをHTMLだけで作る

HTMLボックススクロール

ボックススクロールHTML

 

メインコンテンツで更新履歴などを記述する場合、その要素が多くなると縦に長くなり見づらくなります。ホームページ作成ではこのような時にボックスの中にテキストを入れ、縦幅を固定して見えない部分を右のスクロールバーで表示させる方法があります。

 

一般にボックススクロールと呼ばれますが、その記述方法について解説します。一般的にはCSSを使って表示させるのですが今回は[ディブタグ]を使ってHTMLのみで表示させてみます。

 

10-HTMLでボックススクロールさせる方法　[この動画は7分で見れます]

 

 

チャンネル登録 Please click

ユーチューブチャンネル登録

 

チャンネル登録をして頂きますとホームページ作成に役に立つ最新動画のアップロードをお知らせします。

 

表示例-1

 

---What’s New---

 

  • (2020/10/19)
    [不可欠なリンク] を更新しました
  • (2020/10/16)
    アフィリエイトの労働の質を更新しました
  • (2020/10/10)
    テーブル作成ツールの使い方を更新しました
  • (2020/09/18)
    第9章 アフィリエイトの考え方を更新しました
  • (2020/09/18)
    第8章 アクセスアップ編を更新しました
  • (2020/09/18)
    第7章 ライティング編を更新しました
  • (2020/09/18)
    第6章 サイト作成編を更新しました
  • (2020/09/18)
    第5章 サイト作成準備編を更新しました
  • (2020/09/18)
    第4章 ASP編を更新しました
  • (2020/09/18)
    第3章 商品編を更新しました
  • (2020/09/17)
    第2章 媒体編を更新しました
  • (2020/09/16)
    第1章 概要編を更新しました
  • (2020/09/16)
    序章 アフィリエイトスタートガイドを更新しました

 

HTMLの記述

すべてコピーしてサイト作成画面に貼り付けてご確認下さい。その後「太字部分」の数値やコマンドを変更して、自分の好みの表示を作成してください。

<div style="margin:0px;padding:0px;" align="center">
<div style="margin:0px;padding:0px;line-height:1.3;width:100%;background-color:#ffffff;">
<div style="margin:0px;padding:10px;line-height:1.8;overflow:auto;border: 2px solid #c0c0c0;color:#000000;text-align:left;height:180px;">
<b>---What’s New---</b>
<p class="border1">&nbsp;</p>
<ul>
<li>テキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキスト</li>
・
・
・
・
・
</ul>
</div></div></div>

 

表示例-2

 

---What’s New---

 

  • (2020/10/19)
    [不可欠なリンク] を更新しました
  • (2020/10/16)
    アフィリエイトの労働の質を更新しました
  • (2020/10/10)
    テーブル作成ツールの使い方を更新しました
  • (2020/09/18)
    第9章 アフィリエイトの考え方を更新しました
  • (2020/09/18)
    第8章 アクセスアップ編を更新しました
  • (2020/09/18)
    第7章 ライティング編を更新しました
  • (2020/09/18)
    第6章 サイト作成編を更新しました
  • (2020/09/18)
    第5章 サイト作成準備編を更新しました
  • (2020/09/18)
    第4章 ASP編を更新しました
  • (2020/09/18)
    第3章 商品編を更新しました
  • (2020/09/17)
    第2章 媒体編を更新しました
  • (2020/09/16)
    第1章 概要編を更新しました
  • (2020/09/16)
    序章 アフィリエイトスタートガイドを更新しました
 

※ 上記のボックス内ではリストタグを灰色背景のボックスで囲っています。

 

この状態で枠線のborder: 2pxをborder: 0pxに変更すると灰色背景のボックスだけが表示され下記のように表現できます。

 

ボックススクロールHTML

 

---What’s New---

 

  • (2020/10/19)
    [不可欠なリンク] を更新しました
  • (2020/10/16)
    アフィリエイトの労働の質を更新しました
  • (2020/10/10)
    テーブル作成ツールの使い方を更新しました
  • (2020/09/18)
    第9章 アフィリエイトの考え方を更新しました
  • (2020/09/18)
    第8章 アクセスアップ編を更新しました
  • (2020/09/18)
    第7章 ライティング編を更新しました
  • (2020/09/18)
    第6章 サイト作成編を更新しました
  • (2020/09/18)
    第5章 サイト作成準備編を更新しました
  • (2020/09/18)
    第4章 ASP編を更新しました
  • (2020/09/18)
    第3章 商品編を更新しました
  • (2020/09/17)
    第2章 媒体編を更新しました
  • (2020/09/16)
    第1章 概要編を更新しました
  • (2020/09/16)
    序章 アフィリエイトスタートガイドを更新しました

 

 

HTMLの記述

すべてコピーしてサイト作成画面に貼り付けてご確認下さい。その後「太字部分」の数値やコマンドを変更して、自分の好みの表示を作成してください。

 

太赤文字の部分が変更可能で次の「ソースの説明」でコマンドの意味を解説します。

<div style="margin:0px;padding:0px;" align="center">
<div style="margin:0px;padding:0px;line-height:1.3;width:100%;background-color:#ffffff;">
<div style="margin:0px;padding:10px;line-height:1.8;overflow:auto;border: 1px solid #696969;color:#000000;text-align:left;height:180px;">
<div class="graybg">
<ul>
<li>テキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキスト</li>
・
・
・
・
・
</ul>
</div>
</div></div></div>

 

ソースの説明

align="center"

width:100%ではコンテンツの幅いっぱいにボックスが表示されます。しかし下記の例のように横幅をPXで表示した場合にボックス枠をどちらに寄せるか指示できます。

 
  • width:250px
  • align="center"

 

 

(2020/09/11)
・会社概要を更新しました
(2020/08/25)
・カテゴリーページの使い方を更新しました
(2020/08/22)
・[記事1〜記事10] の使い方を更新しました
(2020/08/03)
・超便利！3っの文章挿入方法を更新しました
(2020/08/01)
・リンクが飛ばない？を更新しました
(2020/07/15)
・シリウスのSEO性能を更新しました
(2020/05/04)
・サーチコンソールの使い方を更新しました
(2020/04/12)
・サイト説明文を書いてますか？を更新しました

  • width:350px
  • align="left"

 

    (2020/03/14)
    ・「継続脳」でホームページ作成を更新しました
    (2020/03/13)
    ・検索結果でノートン安全マークを表示させる方法！を更新しました
    (2019/12/19)
    ・サーチコンソール登録を更新しました
    (2019/11/23)
    ・アナリティクス登録を更新しました
    (2019/10/31)
    ・サイト作成ソフトシリウスVer1.5初心者さんでも解る！解説動画を更新しました
    (2019/09/21)
    ・郵便番号入力で住所自動表示を更新しました
    (2019/07/17)
    ・劣悪な環境の子供たちを更新しました

  • width:400px
  • align="right"

 

(2019/06/16)
・ホームページＶ4を更新しました
(2019/06/16)
・SEOブログテンプレート賢威を更新しました
(2019/06/16)
・最短HPテンプレートを更新しました
(2019/06/16)
・サイト作成ソフトシリウスを更新しました
(2019/06/13)
・アクセス解析情報公開を更新しました
(2019/06/04)
・画像の扱い方の基本を更新しました
(2019/06/04)
・ホームページの階層を更新しました
(2019/06/04)
・リンクについてを更新しました

 

 

width:100%

width:100%はコンテンツの幅いっぱいにボックスを表示。（width:80%に変更）

 

(2019/05/28)
・外部SEOマイナスを更新しました
(2019/05/28)
・内部SEOマイナスを更新しました
(2019/05/28)
・外部SEOプラスを更新しました
(2019/05/28)
・内部SEOプラスを更新しました
(2019/05/05)
・SEO対策とサイトの更新を更新しました
(2019/05/05)
・内部ＳＥＯ対策を更新しました
(2019/05/05)
・外部ＳＥＯ対策を更新しました
(2019/05/05)
・脅威のグーグルアルゴリズムを更新しました
(2019/04/29)
・トップバナー用画像素材を更新しました

 

 

background-color:#ffffff

color:#ffffffはボックスの背景色。（ffffff[ホワイト]をfafae1[薄い黄系色]に変更）

 

(2019/06/04)
・HPのカラムについてを更新しました
(2019/06/04)
・ホームページの構成と名称を更新しました
(2019/06/04)
・ホームページの仕組みを更新しました
(2019/06/04)
・グーグル無料ツールのすべてを更新しました
(2019/06/03)
・法表記/プライバシーを更新しました
(2019/06/03)
・インフォトップ動画解説を更新しました
(2019/06/02)
・初心者さんに、お勧めしない作成ソフト２を更新しました

 

 

overflow:auto

autoはブラウザに合わせて表示させる。縦方向のボックスに入りきらない部分がある場合に自動でスクロールバーを表示する。横方向にはスクロールバーを出さない方がよいので、シリウスの場合はautoが一番良いでしょう。横方向に文章がはみ出た場合は文章を折り返します。

 

(2019/06/02)　ホームページビルダー体験記を更新しました
(2019/06/02)　初心者さんに、お勧めしない作成ソフト１を更新しました
(2019/06/02)　絶対に！使ってはいけない！作成ソフトとシステムを更新しました
(2019/06/01)　カスタマイズ性能ランキングを更新しました
(2019/06/01)　低価格ランキングを更新しました
(2019/06/01)　アフィリ性能ランキングを更新しました
(2019/06/01)　ＳＥＯ対策ランキングを更新しました
(2019/06/01)　スマホ対応性能ランキングを更新しました
(2019/06/01)　初心者さん向けランキングを更新しました
(2019/06/01)　店舗・企業サイトにお勧めの作成ソフトランキングを更新しました

 

auto以外の値にscroll/visible/hidden/no-display/no-displayなどがありますが、作成ソフトシリウスの場合、実用的ではないので今回は省略します。

 

 
border: 1px solid #696969

border: 1px は枠線の太さ。（2px に変更）
solid #696969は枠線の色。（ピンク色#ff1493に変更）

 

(2019/05/28)
・外部SEOマイナスを更新しました
(2019/05/28)
・内部SEOマイナスを更新しました
(2019/05/28)
・外部SEOプラスを更新しました
(2019/05/28)
・内部SEOプラスを更新しました
(2019/05/05)
・SEO対策とサイトの更新を更新しました
(2019/05/05)
・内部ＳＥＯ対策を更新しました
(2019/05/05)
・外部ＳＥＯ対策を更新しました
(2019/05/05)
・脅威のグーグルアルゴリズムを更新しました
(2019/04/29)
・トップバナー用画像素材を更新しました

 

 

color:#000000

colorは文字色。（茶色#8b4513に変更）

 

(2019/05/28)
・外部SEOマイナスを更新しました
(2019/05/28)
・内部SEOマイナスを更新しました
(2019/05/28)
・外部SEOプラスを更新しました
(2019/05/28)
・内部SEOプラスを更新しました
(2019/05/05)
・SEO対策とサイトの更新を更新しました
(2019/05/05)
・内部ＳＥＯ対策を更新しました
(2019/05/05)
・外部ＳＥＯ対策を更新しました
(2019/05/05)
・脅威のグーグルアルゴリズムを更新しました
(2019/04/29)
・トップバナー用画像素材を更新しました

 

 

text-align:left

align:leftは文字を左寄せ。（中央寄せalign:centerに変更）
※ 右寄せはalign:right

 

(2019/04/29)
・お問い合わせを更新しました
(2019/04/27)
・メールの概要を更新しました
(2019/04/24)
・ＦＴＰソフトとサイト公開を更新しました
(2019/04/22)
・ドメイン取得会社比較を更新しました
(2019/04/20)
・無料レンタルサーバーを更新しました
(2019/04/15)
・レンタルサーバー比較を更新しました
(2019/04/13)
・レンタルサーバー基礎知識を更新しました
(2019/04/13)
・有料サーバーと独自ドメインを更新しました
(2019/04/12)
・アップロード 動画解説を更新しました
(2019/02/26)
・強いホームページ作成を更新しました
(2019/02/26)
・市場調査の基本を更新しました

 

 

height:180px

height:100pxはボックスの高さ。（50pxに変更）

 

(2019/02/26)
・グーグル検索の仕組みを更新しました
(2019/02/26)
キーワードとマーケティングを更新しました
(2019/02/19)
動画解説！初めてのホームページをどんな方法で作成するべきか！を更新しました
(2018/07/24)
必須の無料ソフト/便利サイトを更新しました
(2018/07/09)
基本的な操作方法を更新しました
(2018/07/07)
スパムを防止する方法を更新しました
(2018/07/07)
youTube動画の最適化を更新しました
(2018/07/07)
問い合わせフォームの設置を更新しました
(2018/07/07)
ページ数を増やす方法を更新しました
(2018/07/07)
基本的な画像の扱い方を更新しました
(2018/07/07)
表示崩れを防止する方法を更新しました
(2018/07/07)
テンプレートの基本構成を更新しました
(2018/07/07)
アイフォン/スマホ対応！電話番号タップで簡単発信リンクを更新しました

 

 

ボックス内のテキストはリンクを付ける事ができる

※ その他の装飾タグも挿入可能

 

(2018/07/06)
・YouTube動画を携帯端末に最適化させる方法を更新しました
(2018/07/06)
・文字装飾機能の使い方を更新しました
(2018/07/06)
・タグチェック機能を更新しました
(2018/07/06)
・HTMLエスケープを更新しました
(2018/07/06)
・テキストの操作を更新しました
(2018/07/06)
・パーツの挿入を更新しました
(2018/07/06)
・モジュールの挿入を更新しました
(2018/07/06)
・改行無視エリアを更新しました
(2018/07/06)
・QRコードの設置を更新しました

 

 

 
テーブル作成ツール←前のページ
次のページ⇒リンクテクスト変化

 

シリウスカスタマイズカテゴリートップ
シリウス使い方カテゴリートップ