« Mozilla XUL Moz2ch と Googlebar をインストール、ステータスバー、画面の表示領域が狭くなる | トップページ | 「雑木林ボランティア」の7月の活動の写真を掲載 »

2004.08.20

ココログベーシック(無料コース)のテンプレート/スタイルの幅を大きくする。(変更/カスタマイズ)

8/20 デフォルトのテンプレート「タイプパッド風」の幅が狭かったので広げる。(同様の方法でサイドバーの幅も変更できます。)

デフォルト

  • ページの幅:600px(ピクセル)
  • 本文の幅:400px

だったのを、100px(ピクセル)広げて

  • ページの幅:700px(ピクセル)
  • 本文の幅:500px

とする。手順は以下の通り。

  1. 「タイプパッド風」のスタイルシートをダウンロードして、styles.css の中の以下の2箇所を変更。/* */でくくった部分はデフォルトでコメントにした。

    #container {
    /*
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN-LEFT: auto; WIDTH: 600px; LINE-HEIGHT: 140%; MARGIN-RIGHT: auto; PADDING-TOP: 0px; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: left
    */
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN-LEFT: auto; WIDTH: 700px; LINE-HEIGHT: 140%; MARGIN-RIGHT: auto; PADDING-TOP: 0px; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: left
    }

    #center {
    /*
    FLOAT: left; OVERFLOW: hidden; WIDTH: 400px
    */
    FLOAT: left; OVERFLOW: hidden; WIDTH: 500px
    }

  2. 変更したスタイルシートをアップロード

    画像をアップロードするのと同じ手順でアップロード。アップロード先は私は自分のBlogフォルダの直下(例:blog/)にした。

    「このファイルを使って新規投稿」と「HTMLを表示」は、「HTMLを表示」を選択。

    アップロードをした際に、ポップアップウインドウにスタイルシート(styles.css)のURLアドレスのHTMLのコード(例:href="http://d-k.cocolog-nifty.com/blog/style.css" )が表示されるので、次の手順で使うのでメモしておく。

  3. アップロードしたスタイルシートを参照する。

    自分のココログの「基本情報」を設定するページで、 「ウェブログのサブタイトル(キャッチフレーズ)」欄で自分が記入したサブタイトルの上に1行、先ほどアップロードしたスタイルシートを参照するように以下のようなHTMLを1行追加。URLアドレスは2.でメモしたアドレス。

    <link rel="stylesheet" href="http://d-k.cocolog-nifty.com/blog/style.css" type="text/css" />

    (まさに裏技!)

以上で、ページの幅を広げたスタイルシートがアップロードされ、表示されるようになる。

参考)詞織: 自作スタイルシートの適用
http://siolli.cocolog-nifty.com/blog/2003/12/post_1.html
…ありがとう!自分でスタイルシートをアップロードできる方法があるなんて知らなかったので、無料の「ココログベーシック」コースでは無理だとあきらめるところでした。

|

« Mozilla XUL Moz2ch と Googlebar をインストール、ステータスバー、画面の表示領域が狭くなる | トップページ | 「雑木林ボランティア」の7月の活動の写真を掲載 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/49099/1236702

この記事へのトラックバック一覧です: ココログベーシック(無料コース)のテンプレート/スタイルの幅を大きくする。(変更/カスタマイズ):

« Mozilla XUL Moz2ch と Googlebar をインストール、ステータスバー、画面の表示領域が狭くなる | トップページ | 「雑木林ボランティア」の7月の活動の写真を掲載 »