fc2ブログ
スキン編集 の記事一覧

メイン 古い記事一覧へ≫

2006年05月04日

タイトルの下にブログの説明を表示しましょう♪

エキサイトブログでは、タイトルの下に、ブログのURLが表示されていますが、これを他のブログのようにブログの説明に変更しましょう♪

  1. [ブログ設定]?[スキン変更]?[現在使用中のスキン]の「編集」をクリックして「■ CSS編集」の中でクリックします。（「■ CSS編集」の中であればどこでも構いません。）

  2. [Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにDIV.URL(小文字でdiv.urlとしてもＯＫ)と入力して、検索してください。


  3. DIV.URLの上の行に.description{?}のコードを追加しましょう。
    必ずバックアップしましょう！
    いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょうね。失敗しても、「css_bk.txt」の内容をコピペすれば、元にもどせますよ♪

    .description{
    padding-top: 5px;←上の行との間隔
    color:#cd5c5c;←文字色
    text-align: left;←leftは左揃え　※
    padding-left: 50px;←左端からの間隔
    }

    DIV.URL{
    ･･･････････････････････省略･･･････････････････････
    ※leftは左揃え　中央揃えはcenter　右揃えはrightです。


  4. 「■ HTML編集」(HTML-全体)の中でクリックします。（「■ HTML編集」の中であればどこでも構いません。）

  5. [Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにblogurlと入力して、検索してください。


  6. 下のように<$blogurl$>の部分を削除して、<$description$>のコードを追加しましょう。

    必ずバックアップしましょう！
    いつも書いてますが、編集する前に、必ずHTMLのコードをコピーして、「html_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「html_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪

    <div class=HEADER><$header$></div>
    <div class=URL><$blogurl$></div>
    <div class="description"><$description$></div>

  7. 「プレビュー」で確認してから、「保存」してください。


<yozoからのお願い>

私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「スキン（テンプレート）改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。もし、この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければコメントやトラックバックしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m


人気blogランキング ←ぼちっと応援お願いします♪ m(_ _)m

スポンサーサイト



Admin | Posted at 18:51 | スキン編集 | | Comments [8] | Trackbacks [0]
2006年05月03日

コメント表示部分の背景色を変えましょう♪

記事の下のCommentsをクリックして開くコメント表示部分の背景色を変えて、記事とコメントの区別をつけやすくしましょう♪

  1. [ブログ設定]?[スキン変更]?[現在使用中のスキン]の「編集」をクリックして「■ CSS編集」の中でクリックします。（「■ CSS編集」の中であればどこでも構いません。）

  2. [Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにDIV.COMMENT(小文字でdiv.commentとしてもＯＫ)と入力して、検索してください。


  3. DIV.COMMENTの｛　｝の中のBACKGROUNDのカラーコードを変更するだけです。
    必ずバックアップしましょう！
    いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょうね。失敗しても、「css_bk.txt」の内容をコピペすれば、元にもどせますよ♪

    DIV.COMMENT{
    BORDER : 1px solid #D3D3D3;
    BACKGROUND :#F9F0BA;
    PADDING : 10px 5px;
    margin-top: 20px;
    }
    ※BACKGROUND :#F9F0BA;は色カラーコードです。
    この数値はお好みで変更してくださいね。
    また、BACKGROUNDは小文字でbackgroundでも問題ありませんし、background-colorと書いても同じですよ。background-colorと書いた方が見やすいコードになりますね。
    background-image: url("http://pds.exblog.~省略~/□☆○1.gif");として、画像を設置してもおもしろいですよね。


  4. 「プレビュー」で確認してから、「保存」してください。


<yozoからのお願い>

私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「スキン（テンプレート）改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。もし、この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければコメントやトラックバックしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m


人気blogランキング ←ぼちっと応援お願いします♪ m(_ _)m

Admin | Posted at 13:13 | スキン編集 | | Comments [6] | Trackbacks [0]
2006年05月02日

記事タイトルにワンポイント画像を設定する♪

記事のタイトルにアクセントとして、ワンポイント画像をつけましょう。
まずは、どんな画像を使うのか、素材屋さんをめぐって、結局いつもお世話になっている1キロバイトの素材屋さんよりダウンロードさせていただいたものを使用します。
1キロバイトの素材屋さんはコチラからどうぞ♪
なおyozoは左サイドの素材屋さんからお借りしています。必要な分だけダウンロードさせていただいています。もちろん、掲示板やコメントに一言、使用報告とお礼のカキコしています。


  1. まず、使用したい画像をアップロードします。
    アップロードの方法の説明はコチラ

    　　http://pds.exblog.~省略~/□☆○1.gif


  2. [ブログ設定]?[スキン変更]?[現在使用中のスキン]の「編集」をクリックして「■ CSS編集」の中でクリックします。（「■ CSS編集」の中であればどこでも構いません。）

  3. [Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにDIV.POST_TTLと入力して、検索してください。


  4. DIV.POST_TTLの｛　｝の中に赤字のコードを追加してください。
    必ずバックアップしましょう！
    いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょうね。失敗しても、「css_bk.txt」の内容をコピペすれば、元にもどせますよ♪

    DIV.POST_TTL{
    color: #A86900;
    font: bold 14px/130% "Verdana", "ＭＳ ゴシック", "Osaka?等幅";
    background-image: url(http://pds.exblog.~省略~/□☆○1.gif);
    padding-left:20px;
    background-repeat:no-repeat;
    }
    ※padding-left:20px;で、タイトル文字と画像が重ならないように、文字の左に20pxの間隔をあけています。この数値は好みで変更してください。
    また、background-repeat:no-repeat;は、画像を繰り返し表示しない設定です。


  5. 「プレビュー」で確認してから、「保存」してください。


<yozoからのお願い>

私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「スキン（テンプレート）改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。もし、この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければコメントやトラックバックしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m


人気blogランキング ←ぼちっと応援お願いします♪ m(_ _)m

Admin | Posted at 16:00 | スキン編集 | | Comments [12] | Trackbacks [0]
2006年04月29日

背景を変更する♪

CSSの編集で背下の３点の背景を変更してみました。
  1. ページの背景に画像を使ってみる♪

  2. ブログタイトルの背景に画像を使ってみる♪

  3. ブログの背景に画像を使ってみる♪


  1. まず、使用したい画像をアップロードします。
    アップロードの方法の説明はコチラ

    http://pds.exblog.~省略~/□☆○1.gif
    http://pds.exblog.~省略~/□☆○2.gif
    http://pds.exblog.~省略~/□☆○3.gif

    なおyozoは左サイドの素材屋さんからお借りしています。必要な分だけダウンロードさせていただいています。もちろん、掲示板やコメントに一言ですが、お礼のカキコしています。


  2. [ブログ設定]?[スキン変更]?[現在使用中のスキン]の「編集」をクリックして「■ CSS編集」のそれぞれのセレクタ（BODYやDIV.TOPやDIV.CONTENTSのことです。)の｛　｝のbackgroundのurlの部分にURLを貼り付けるだけです。｛　｝の中のコードは使用しているスキンによって変わります。１回ずつ、「プレビュー」で確認するようにしましょう。編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょうね。失敗しても、「css_bk.txt」の内容をコピペすれば、元にもどせますよ♪

    1. ページの背景に画像を使ってみる♪の場合
      BODY{
      MARGIN : 0PX;
      PADDING : 0PX;
      background: url("http://pds.exblog.~省略~/□☆○1.gif");
      background-repeat:repeat;
      }
      なお、この画像は1キロバイトの素材屋さんよりダウンロードさせていただきました。


    2. ブログタイトルの背景に画像を使ってみる♪の場合
      DIV.TOP{
      width: 780px;
      border-right: 1px solid #CCCCCC;
      border-left: 1px solid #CCCCCC;
      height: 165px;
      background-image:url("http://pds.exblog.~省略~/□☆○2.gif");
      background-repeat:repeat;
      }
      なお、ここの画像はまったりほんぽよりダウンロードさせていただきました。


    3. ブログの背景に画像を使ってみる♪
      DIV.CONTENTS{
      border-left: 1px solid #CCCCCC;
      border-right: 1px solid #CCCCCC;
      padding-bottom: 10px;
      border-bottom: 1px solid #CCCCCC;
      width: 780px;
      background-image:url("http://pds.exblog.~省略~/□☆○3.gif");
      background-repeat:repeat;
      }
      なお、ここの画像は『chai*』よりダウンロードさせていただきました。


  3. 「プレビュー」で確認してから、「保存」してください。



4/29　23：20　追記
下の『柴成＠NNユーザー』様のコメントにありますように、CSS編集はブラウザによって表示のしかたが変わることもあります。
今回yozoの設定したbackgroundは、｛　｝の中に同じ文字backgroundの設定を残していると、IEでは表示されますが、他のブラウザでは反映されないのですね。そのことをうっかり忘れていたわけです。

DIV.TOP{
width: 780px;
background: #FFFFFF;←この行が残ってました
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
height: 165px;
background-image:url("http://pds.exblog.~省略~/□☆○2.gif");
background-repeat:repeat;
}

この追記を書くにあたり、下のコメントにて、助言くださった私の大切な友人webでお絵かきのまこさんに心より感謝いたします。



<yozoからのお願い>

私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「スキン（テンプレート）改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。もし、この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければコメントやトラックバックしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m



人気blogランキング ←ぼちっと応援お願いします♪ m(_ _)m

Admin | Posted at 20:16 | スキン編集 | | Comments [14] | Trackbacks [0]
2006年01月06日

メモ帳を増設する！

12/23に続いて、BLOG改良第16弾！

実は、昨年の12/25くらいにメモ帳を増設したのですが、

つい「クリスマスだー」


続けて「年末だー」


さらには「お正月ー」


っという具合に浮かれてしまって記事にするのをサボっていました。　m(_ _)m
それでは、遅まきながらはじめさせていただきます。
まず、† CrossMoon †　初心者スキン編集記の雅さんの記事を参考にさせていただいております。いつもありがとうございます。m(_ _)m

(16)メモ帳を増設する！
デフォルトのメモ帳だけでは物足りない人にお勧めです。

＜方法＞
１.[ブログ設定]?[スキン変更]?[現在使用中のスキン]の「編集」を
クリックします。
２．「■ CSS編集」でわかりやすいところにに下記のコードを貼り付けます。

div.menu{
width:150px;/*メモ帳の幅*/
height:100px;/*メモ帳の高さ*/←これは好みで変えましょう！
overflow:auto;
overflow-x:hidden;
overflow-y:auto;
text-align:left;
padding:0px;
margin:0px;}

overflow:auto;　←自動的にスクロールをつける設定
overflow-x:hidden;　←横方向スクロールなし
overflow-y:auto;　←縦方向スクロールが自動的につく
スクロールバーが必要なければ、この３行を削除してください。

２つ以上、メモ帳を増設したい方は、
div.menu1{
width:150px;/*メモ帳の幅*/
?　省略　?
margin:0px;}

div.menu2{
width:150px;/*メモ帳の幅*/
?　省略　?
margin:0px;}

このように、必要数だけ記述してください。

３．「■ HTML編集」の「メイン画面編集」でご自身で壁紙を設定したい部分に下記のコードを貼り付けるだけです。

左側に設置する場合には、<$menuleft$>を探します。
これが左側メニューを作成しているタグなので、これのすぐ上か下に以下のタグを書き加えてください。（メモ帳を増設したい場所が上なら上に、下なら下に書き加えてください。）

<div class="MNTTL_L">メモ帳の題名</div>
<div class="menu">メモ帳の内容</div>

右側に設置する場合には、<$menuright$>を探します。
これが右側メニューを作成しているタグですので、これのすぐ上か下に以下のタグを書き加えてください。

<div class="MNTTL_R">メモ帳の題名</div>
<div class="menu">メモ帳の内容</div>

なお、２つ以上、メモ帳を増設した方は、
<div class="menu">メモ帳の内容</div>のmenuをmenu1,menu2とするだけです。

４．一番下の「プレビュー」で確認し、よければ「保存」します。

<yozoからのお願い>

私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「スキン（テンプレート）改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。もし、この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければコメントやトラックバックしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m


人気blogランキング ←ポチッと応援お願いします♪ m(_ _)m

Admin | Posted at 22:05 | スキン編集 | | Comments [2] | Trackbacks [0]

メイン Old≫