「ほっ」と。キャンペーン
 

カテゴリ:│├サイドバー( 3 )

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
 

サイドバーで遊ぶ(excite初心者向け練習問題)

はじめに

exciteブログの初心者ユーザ向けの問題を考えてみました。できるだけ答えを見ないで、自分で考えて解いて下さいね。ちょっと難しいと思うかもしれませんが、じつは以外と簡単です^^

問題

図1のように、サイドバーに文字を追加する方法を試みて下さい。通常は”カテゴリ”と表示されますが、あることをすると”カテゴリです”と表示することができます。
a0031863_1505430.gif

図1 サイドバーの文字を追加する

注意:背景画像を指定してありますが、画像の表示は必要ありません。

ヒント


  • HTML編集のみで解決できます。(HTMLの編集って言えるのかな?)


    難易度:★

    答えが分からなくても、ちょっとだけ頑張ってね




    答え>>
    [PR]
    記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
    by potto37 | 2005-09-10 15:03 | │├サイドバー | Trackback | Comments(2)
     

    サイドバーの1ポイント(バックグランドイメージはそのまま)


    3列スキンのサイドバーのバックグランドを指定している方が、ワンポイントのイメージを追加したい場合の技です。
    よろしかったら試して下さいね。


    a0031863_7515295.jpg

    図1 設置例


    HTML編集でワンポイントの追加


    HTML編集でワンポイントのイメージを指定します。今回の例は3列スキンですが、皆さんのスキンに合わせてご利用下さい。

    HTML編集左側


    a0031863_2046431.jpg



    HTML 左側

    <DIV CLASS=MNTTL_L><img src="イメージURL"><$mntitle$></DIV>
    <DIV CLASS=MN_L><$mnbody$></DIV>




    HTML編集右側


    a0031863_2046526.jpg


    HTML 右側

    <DIV CLASS=MNTTL_R><img src="イメージURL"><$mntitle$></DIV>
    <DIV CLASS=MN_R><$mnbody$></DIV>



    CSS編集部分





    CSS編集

    /*左側*/
    DIV.MNTTL_L{
    /*------------------ ここから追加 ---------------*/
    background-image:url(イメージURL);
    background-repeat:no-repeat;
    background-position:left;
    /*------------------ ここまで --------------------*/
    }

    /*右側*/
    DIV.MNTTL_R{

    /*------------------ ここから追加 ---------------*/
    background-image:url(イメージURL);
    background-repeat:no-repeat;
    background-position:left;
    /*------------------ ここまで --------------------*/
    }






    今日のポイント
    • CSS編集とHTML編集を使用してイメージを2つ重ねています。



    background-repeat

      repeat    縦横にイメージを繰り返す
      no-repeat イメージを繰り返さない
      repeat-x   横方向にイメージを繰り返す
      repeat-y 縦方向に 〃

    background-position
     画像の表示位置を指定します。値を横方向と縦方向の順に入力しスペースで区切ります。値の指定方法方はpxや%などで指定も可能です。今回の指定は横方向を左側に表示するように指定しています。



    難易度:★

    ぽっと

    [PR]
    記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
    by potto37 | 2004-12-11 08:46 | │├サイドバー | Trackback | Comments(8)
     

    右側2列スキンの小窓の設置方法

    質問がありましたので記事にします。右側2列のスキンには適応可能です。

    Q.
    はじめまして。
    最新のコメント欄,exblogのリンク集を小窓に入れちゃう方法ってありますか?
    メモ帳は1個しかできないのに 小窓だとどんどんできちゃうのでしょうか?小窓自体の貼り方がよくわからないので もう一度お願いします。


    A.
    エキサイト関連のコメントやリンクは、すべてに小窓(スクロール窓)ができてしまいますが、
    方法はあります。右側2列ですとこの方法で設置可能です。


    回答はこちら>>
    [PR]
    記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
    by potto37 | 2004-08-01 19:02 | │├サイドバー | Trackback(1) | Comments(11)
    掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。