TOP

リンクコード、メニューテキスト表示例まとめ

フリースペースでの見出し表示や位置替えなど、ささやかなカスタマイズをまとめています
デフォルトで簡単に記事とか外部サイトへのリンク配置とかできる優れものですが、普段あまり
気が付かないような表示法をいくつかまとめて見ました

 

2カラムサイドバーでは、フリースペース3、4をデフォルトで2つ標準で表示させることが
できますね

 

そして、フリースペース5、6をHTMLに追加すれば、さらに二つ追加できます
追加方法は、こちらに記載
フリースペースを二つ追加する方法

 

では、ここから.....


 

● フリースペースで見出し付きのブロック分けをする

 

フリースペースの全体設定画面では、メニューテキストを追加する際、見出しの記入欄が
ございまして、一つのフリースペースの頭に見出しは、一つだけつけることができます

 

ですが、フリースペース内でリンク列を多く置き、コンテンツを分けるための仕切り的
意味合いでブロック分けしたいと思われることもあろうかと....

 

ま、別段難易でもなく...できますね

 

メニューの仕切り、分けたい箇所に、h4タグでテキストを囲むだけ

 

こんな感じ...

 

シリウス
<h4>見出し</h4>
シリウス

 

 

シリウスの他テンプレートの場合、フリースペースに、h4タグで見出しを配置すると
デフォルト見出しより幅が狭くなるという表示でしたが、ことレスポンシブテンプレートでは
その障害も見られず、きれいに表示されます

 


 

● 見出しの位置調整

 

見出しの左スペースを開けたい場合は、少し開けてください

 

<h4>   見出し</h4>

 


 

● テキストのリンクカラーを消し去る
● フォントサイズを変える
● 仕切り線、ボーダーラインは?

 

フリースペース内に置いたメニューテキストにリンクを含ませれば、リンクであるとの
指令でリンクカラーで表示されますが、記事内と同じ色合いで見せるならカラーコードを
張り付けます

 

また、フォントサイズは記事と同サイズですが、やや小さめにするならサイズ指定も
書き加えます

 

仕切り線のボーダーラインですが、シリウス機能で表示できるボーダーを採用

 

以下に、例記載を表していますので参照ください

 

テキスト位置は、何もせずでは左端により過ぎましてスペース開ける際は、
一ます開けてください

 

<h4>見出し</h4>                  
 <a href="http://リンクURL/"><span style="color:#333333"><span style="font-size:13px;">テキスト</span></span></a>
<hr style="width:280px" "border-bottom:solid 1px #ccc" border="0" />

 

 

フォントカラー color:#333333
フォントサイズ font-size:13px;

 

ボーダーライン
<hr style="width:280px" "border-bottom:solid 1px #ccc" border="0" />

 


 

● フリースペース1.2をサイドバーに移動

 

フリースペースの1.2は、標準で記事上部と記事下段に表示されますが、
運営者の好みか何かで使わないことも多くあるかと思います

 

仮にグーグルアドセンスであれば、フリースペースを使わずともHTML内に配置すれば
上段下段に一斉表示もできますので....

 

で、何かの趣向でサイドバーにフリースペースの1.2をどちらかでも移動したい場合の参考記事

 

HTML内に置かれるフリースペース記述を
<% freeSpace1 %> <% freeSpace2 %>
以下の箇所に置き換えすれば完了します

 

<!-- ★ブログモードここまで★ -->
<% /AQNewEntries %>
<% /if %>
</div>
<div id="menu">

 

 

HTML内に置かれるフリースペース記述を
<% freeSpace1 %> <% freeSpace2 %>

 

以下の箇所に置き換えすれば完了します

 

HTML内に置かれるフリースペース記述を
<% freeSpace1 %> <% freeSpace2 %>

 

以下の箇所に置き換えすれば完了します(デフォルトに置いた例)

 

<!-- ★ブログモードここまで★ -->
<% /AQNewEntries %>
<% /if %>
</div>
<div id="menu">

 

 

こことか
<% freeSpace3 %>
<% siteMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% subMenu | tag_replace(div class="menubox",div class="menubox menulist") %>
<% freeSpace4 %>
ここに配置可能

 

</div>
<br class="clear" />

 

置く場所により、段差が理解できますので、<% freeSpace3 %>や<% freeSpace4 %>と
置き換えて調整してください

 


 

●トップページで フリースペース 2を表示させない方法

 

フリースペース1は、記事上部に、フリースペース 2は記事最下部に表示されるが、
初期設定で、カテゴリー、フリースペースで個別表示の指定が簡単にできますね

 

フリースペース1はさておいて、フリースペース 2を何かしらの事情でページごとに
表示するしないは、指定ができます....が、トップページでは、他ページで表示するよう
指定しておけば、操作上では非表示にはできません

 

というより、トップ全体設定には選択画面さえ備え無し...

 

しかし、HTML指定で対応はできます

 

カテゴリー、エントリーではフリースペース 2を表示するが、トップページでは表示させない、
まれに構築の事情で指定替えをする場合は、ご参照ください

 

トップページHTMlを開いて以下位置に到達

 

<% textTitle10 %>
<% textBody10 %>
<% freeSpace2 %> (ここを削除してください)
<!-- ★コンテンツここまで★ -->
<% if:siteMode(normal) %>

 

 

<% freeSpace2 %>を削除すれば、非表示となります
トップページにリンク、広告など多く置きすぎて2重配置などになる場合に対処ください

 


 

●h2、3見出し内に横ライン

 

見出しの左端に縦ラインは自動挿入されますが、横ラインは?
デフォルトの縦幅を狭く見せる、スマートなイメージ演出でしょうか?

 

(検索エンジン様、これ見本です 不明なh3と勘違いしないで....)

見出し シリウス横ライン見本

 

単にh3内にテキストプラスボーダーライン入れただけ...自動でラインはテキスト下に配置されます

 

参考コード(念のため borderは、リボンバー緑ボタン5ですぜ.... )
<h3>見出し シリウス横ライン見本<hr style="border-bottom:solid 1px #CCC" border="0" /></h3>

 

お励みください

 

フリースペースで見出し、テキストを表示する方法、いくつかまとめ
トップページ

 

更新履歴

2017/01/04 20:29:04 | フリースペースで見出し、テキストを表示する方法、いくつかまとめ
デフォルトレスポンシブテンプレートではサイドバーの表示できるフリースペースは3、4までですねですが、レイアウト枠を使用して横2列表示などにする、もしくはページを増やす、リンクを多く配置するなどとする場合はやや不足かもしれませんで、HTML起...