3カラムのメニューは、記事の右横に表示されます..

 

informationのボックスは、HTML内においており、読み込みはスタイルシートで指示していますが、
表示するための記述置き場は、フリースぺースにおいてございます。

 

ご注意
当サイトは一番下にアドセンスがございますが、そこだけはぺージ記載では不作動なのでHTMLTP
に置いてます..
HTMLないのboxをこちらに移動しても使えます…

 

導入後、記事内に何も記載無ければ、追加した3カラムメニューの一番下が、左位置に
移動してますが、記事を入れ込めば記事カラム右に移動します..

 

置き場所はいくつか試したんですけれど、作動を確認するとここが一番良い場所でしたので...

 

以下配置例を記載しておきますので、フリースペースのサブメニュー上段に入れ込んでください..

 

設定は、改行する..スタイルなしに指定してください..

 

boxコードはスタイルシートに合わせてございます..

 

 

ここから...

 

<div class="sample-box-gazou1"><img src="<% pageDepth %>img/woman-1320810_1920ww.jpg" style="width:100%;" alt="" />画像 </div>
<div class="ample-box-41"> 　　関連メニュー</div>

 

<div class="ample-box-21">

 

リンクもテキストも書き換えてください
<a href="https://www.affiliateno1.com/ＳＮＳ投稿ボタンまとめて取り付け/"><span style="color:#333333">メニューテキスト</span></a>

 

<a href="https://www.affiliateno1.com/プルダウン式コンテンツメニューを作る方法_アーカイブにつかえるかも？/"><span style="color:#333333">メニューテキスト</span></a>

 

<a href="https://www.affiliateno1.com/スクロールバーがついているカラー枠/"><span style="color:#333333">メニューテキスト</span></a>

 

<a href="https://www.affiliateno1.com/画像リンクを変色させるホバーカラー/"><span style="color:#333333">メニューテキスト</span></a>

 

<a href="https://www.affiliateno1.com/見出しの付いたボックス枠取り付け解説/"><span style="color:#333333">メニューテキスト</span></a>

 

 

 

<a href="https://www.affiliateno1.com/お気に入りにファビコン画像を表示させましょう/"><span style="color:#333333">メニューテキスト</span></a>

 

<a href="https://www.affiliateno1.com/シリウスにページピールを設置する方法/"><span style="color:#333333">メニューテキスト</span></a>

 

<a href="https://www.affiliateno1.com/順送りぺージネーション1/"><span style="color:#333333">メニューテキスト</span></a>

 

<a href="https://www.affiliateno1.com/シリウスサイトをパララックス仕様にカスタマイズ/"><span style="color:#333333">メニューテキスト</span></a>

 

</div>

 

<div class="ample-box-31">
<a href="https://www.affiliateno1.com/ＧＩＦアニメ_動く画像をシリウスサイトに設置する方法/"><span style="color:#333333">メニューテキスト</span></a>

 

<a href="https://www.affiliateno1.com/画像の背景枠を半透明化｜ぼかす加工/"><span style="color:#333333">メニューテキスト</span></a>

 

<a href="https://www.affiliateno1.com/ボタン画像作成無償のフリーソフト/"><span style="color:#333333">メニューテキスト</span></a>

 

<a href="https://www.affiliateno1.com/画像編集ソフト/"><span style="color:#333333">メニューテキスト/span></a>

 

<a href="https://www.affiliateno1.com/フォトサイト/"><span style="color:#333333">メニューテキスト</span></a>

 

</div>

 

 

 

box内に入れるもののサイズによりけり...枠の上下が衝突したりすることがございますが、中身を
短くするとか、長くするとかで調整します..

 

それでもうまくいかないときは、スタイルシートの以下の箇所..から、２１　３１の
top: -46px;...数値調整で位置を上げ下げする...

 

 

.sample-box-1 {
font-size: px;
line-height: 14px;
background-color: #FF4E81;
font-color: #fff;

 

top: -15px;
margin: 1em 0;
padding:14px;

 

 

width:300px;
height:12px;
border: 0.1px double #FF4E81;

 

overflow: hidden;
position: relative;
left: 4px;
background-position: right11px;
}

 

 

 

.sample-box-gazou1 {
line-height: 14px;
top: -32px;
margin: 1em 0;
padding:4px;
width:328px;
overflow: hidden;
position: relative;
background-position: center;
}

 

 

 

.ample-box-41{
font-size: 13px;
line-height: 1.0;

 

background-color: #ｆｆｆ;
top: -45px;
margin: 0.5em 0;
padding:10px;
width:309px;

 

border: 0.1px double #FF4E81;
overflow: hidden;
position: relative;
left: 4px;
background-position: right11px;

 

}

 

 

 

 

.ample-box-21 {
font-size: 13px;
line-height: 1.0;

 

background-color: #FBF8FB;
top: -46px;
margin: 0.5em 0;
padding:10px;
width:309px;
border: 0.1px double #FF4E81;
overflow: hidden;
position: relative;
left: 4px;
background-position: right11px;

 

}

 

 

 

.ample-box-31 {
font-size: 13px;
line-height: 1.0;

 

background-color: #FBF8FB;
top: -47px;
margin: 0.5em 0;
padding:10px;
width:309px;
border: 0.1px double #FF4E81;
overflow: hidden;
position: relative;
left: 4px;
background-position: right11px;

 

}
.ample-box-51 {
font-size: 13px;
line-height: 1.0;
background-color: #FBF8FB;
top: -40px;
margin: 0.5em 0;
padding:10px;
width:309px;
border: 0.1px double #888;
overflow: hidden;
position: relative;
left: 4px;
background-position: right11px;

 

}

 

 

 

以上ですが、気が付いたことあれば追記いたします。

 

---

 

3カラムの設定..その3

 

3カラム特異指定..スタイルシート記述..その2
トップTP3カラム組み込み済みHTMLソース..その1
当サイトレイアウト3カラムバージョンソース公開..

関連ページ

トップTP3カラム組み込み済みHTMLソース..その1

トップTPを3カラムバージョンにカスタマイズ済みの ソースを記載しております。

3カラム特異指定,,スタイルシート記述..その2

動的ヘッダーテキストの追加方法

当サイトご案内の改変レスポンシブテンプレートに 開いた時..スクロールオンでと2作動する動的ヘッダーテキストを追加するご案内です。

ヘッダ-h1、タイトルテキストの切り替えとフォントカラー変更

当サイトの配布テンプレートでは、ヘッダーテキストは、h1デフォルトですが、テキストも表示は可能で切り替えができます...又、フォントカラーはCSS指示となります...説明はサイトで．．．．．．