2010年12月20日

【第11回】「自由形式」にタイトルと枠線を表示する

Seesaaブログには様々なコンテンツが用意されていますが、その中でも非常に自由度が高いコンテンツとして自由形式というコンテンツがあります。

第2回で説明したコンテンツ画面で選択・編集することができます。

SD_011_01.jpg

管理画面で@デザイン⇒Aコンテンツ とクリックして、左側の「コンテンツ」の中の下の方にある「自由形式」がそれにあたります。

これを右側のブログコンテンツの欄にドラッグ&ドロップして、編集して使います。

例えばこのブログでは、左上にある「ブログノウハウ」というボタン、これに自由形式を使用しています。
(あ、気が向いた方はクリックして応援、よろしくお願いします!)

SD_011_02.JPG

今回は、この自由形式のコンテンツに枠線を付けてみます。
また、この自由形式コンテンツはタイトルも表示されていないので、それも表示させてみましょう。


さて、今回の修正ですが、今までとは異なり、HTMLの方を修正します。

まずは、上記コンテンツ画面自由形式のコンテンツを右側にドラッグ&ドロップし、さらにそれをクリックして設定画面を開いて下さい。
下記のような画面が表示されたでしょうか。

SD_011_03.jpg

この画面で、表示したい@タイトルとA内容を記入して下さい。
上図の例では、私はタイトルに「ブログ村ランキング」、内容にブログ村へのランキングボタンを記入しています。
が、ここでは何でも良いので、とりあえず@とAに何かを記入して下さい。

@とAの記入が終わったら、一旦B保存する ボタンを押下して、記入した内容を保存しておきます。


ここまでは宜しいでしょうか。


そして、今回一番実施したいのは、CコンテンツHTML編集のところです。
この先の画面で、今回作成した自由形式コンテンツのHTMLを修正することになります。

ということで、CコンテンツHTML編集を押してみてください。

SD_011_04.jpg

このような画面が表示されたでしょうか。

この中のDの欄に、タイトルと枠線を表示するHTMLを書き込んでいきます。


それでは、どのようなHTMLを書き込んでいくかです。

タイトルを表示したい場合は、以下のHTMLを追加して下さい。

  <div class="sidetitle"> <% content.title %> </div>

これで、タイトルが表示されるようになります。

ところで、上記HTMLの中の<div class="sidetitle">に注目して下さい。
class="sidetitle"の箇所です。
これは、「クラスはsidetitleを使用する」というHTMLの文章になります。

sidetitleというと・・・

そうです、今まで第6回などでスタイルを修正してきた、あの.sidetitleクラスです。
あの.sidetitleクラスのCSSを適用して、自由形式のタイトルを表示するようにするというのが、この修正のキモになるわけです。

  ●CSSは、書式を定義する
  ●HTMLは、定義されたCSSの書式を適用する

CSSとHTMLの役割は、ざっくりと以上のように覚えておいて頂ければ良いと思います。

ちなみに、サイドタイトルのコンテンツは<% content.title %>ですが、これはSeesaaのサイトのプログラムで定義されている変数ですので、我々には変更できません。
Seesaaでは<% content.title %>はタイトルを表すと覚えておけば良いでしょう。


さて、次はコンテンツの枠線の表示です。

上記サイドタイトルの設定を見ればお分かりの通り、コンテンツの枠線も、今まで定義した.sideクラスを適用すれば表示されるようになるわけです。


以上によって、自由形式コンテンツにタイトルと枠線を表示するための修正は、以下のようになります。

★自由形式コンテンツにタイトルと枠線を表示する方法★

<手順1>
コンテンツ画面で自由形式のコンテンツHTML編集画面を開く。

<手順2>
表示されるコンテンツHTMLに、サイドタイトルと.sidetitleクラスで表示するHTMLを追加すると共に、コンテンツに.sideクラスを適用する。

▼▼▼ 変更前 ▼▼▼
<% content.header -%>
<% content.free.text %>
<% content.footer -%>

▼▼▼ 変更後 ▼▼▼
<div class="sidetitle"><% content.title %></div>
<div class="side">

<% content.header -%>
<% content.free.text %>
<% content.footer -%>
</div>

<手順3>
コンテンツHTML編集画面のE保存ボタンを押下する。

この変更によって、この自由形式コンテンツはご覧のように変更されます。

▼▼▼ 変更前 ▼▼▼
SD_011_02.JPG

▼▼▼ 変更後 ▼▼▼
SD_011_05.JPG

今回の修正のポイントは、CSSで書式を変更するのではなく、すでに定義されているCSSをHTMLで適用することでした。

なお、今回の修正は、修正したコンテンツにのみ適用されます。
これによって、自由形式というコンテンツ全てがこの書式に変更されるわけではありません。
自由形式でコンテンツを作成する度に、上記のような変更が必要な場合は修正していきましょう。

HTMLの修正が失敗してしまった場合は、初期値に戻すのチェックボックスをチェックしてE保存を押下すると、初期状態に戻すことができます。

お試しください。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(1) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
はじめまして。
このブログの内容を参考にさせていただいて、文字のサイズの大きさを変えたり、サイドのコンテンツに枠をつけたりすることができました。詳しいことは全くわからない初心者でしたので、ブログのカスタマイズも時間がかかると思っていましたけど、おかげさまで助かりました♪
一言、お礼を言いたくて、コメントしました。
ありがとうございました!!
Posted by スマイル at 2013年02月08日 15:34
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

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