「自由形式−1−」ですが、タイトルも表示されないし、文字の配置も不恰好です。
自由形式−2−
「自由形式−2−」です。
タイトルは出せましたが、半分しか出ていません。
自由形式−3−
少し見栄えが変わりますが、きちんと幅に合ったタイトルが表示されました。

2010年05月14日

サイドバーのコンテンツをセンターに置く−3−

このデザイン、「シンプル茶色:両」のサイドバーの背景は画像で出来ているので、横幅が伸びてもそれに伴って伸びてくれません。
そこで、スタイルシートの背景色と、ボーダラインだけで対応してみましょう。
影の部分の見栄えが、少し変わりますが、我慢しましょう。

「デザイン」−「デザイン一覧」から、「シンプル茶色:両」を選び、スタイルシートを編集します。
どの場所でもいいですから、つぎのブロックを追加します。

.centertitle{
background-color: #c8a07b;
border-bottom: 3px solid #b4906f;
border-right: 3px solid #b4906f;
color:#fff;
text-align:center;
height:20px;
padding-top:4px;
}

 
さて今度は、「デザイン」−「コンテンツ」から、目的のコンテンツの「コンテンツHTML」を、つぎのように編集します。

<div class="centertitle">
<% content.title -%>
</div>
<div class="side">
<% content.header -%>
<% content.free.text %>
<% content.footer -%>
</div>

 
これで、「自由形式−3−」のようなコンテンツが、センターに表示できるはずです。
 
posted by わいずふぁくとりい at 23:29 | Comment(0) | TrackBack(0) | コンテンツをセンターに置く | edit | このブログの読者になる | 更新情報をチェックする

2010年05月12日

サイドバーのコンテンツをセンターに置く−2−

「コンテンツHTML」を下記のように編集すると、「自由形式−2−」のように、タイトルを表示させることが出来ますが・・、あれっ、タイトルが半分しか表示されていません。
 
「自由形式−2−」のコンテンツHTMLは、つぎのようになっています。

<div class="sidetitle">
<% content.title -%>
</div>
<div class="side">
<% content.header -%>
<% content.free.text %>
<% content.footer -%>
</div> 

posted by わいずふぁくとりい at 23:35 | Comment(0) | TrackBack(0) | コンテンツをセンターに置く | edit | このブログの読者になる | 更新情報をチェックする

サイドバーのコンテンツをセンターに置く−1−

さて、おさらいから始めましょう。
自由形式のコンテンツを置いても、「自由形式−1−」のように、タイトルも表示されないし、文字の配置も不恰好です。
 
posted by わいずふぁくとりい at 22:54 | Comment(0) | TrackBack(0) | コンテンツをセンターに置く | edit | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。