トップページにコンテンツ「更新情報」を設置する【後編】

 「トップページにコンテンツ「更新情報」を設置する【中編】」のつづき。
前編】で1〜3、【中編】で4・5【後編】で6・7を掲載します。
  1. コンテンツ「最近の記事」をメインに設置する
  2. トップページのみ表示する設定にする
  3. タイトル・表示件数の設定
  4. コンテンツHTML編集
  5. 保存⇒再構築で確定する
  6. スタイルシートを設定する
  7. 使用した画像素材

6.スタイルシートを設定する

 「4.コンテンツHTML編集」で変更したセレクタ「.topnew01」と「.topnew02」の内容(宣言)は以下の通りです。

 スタイルシート編集ページは 「デザイン」 → 「デザイン一覧」 → 「使用しているテンプレートのタイトル」をクリック で開きます。

 このスタイルシート編集欄の一番下辺り書き加えます。

書き加えたセレクタの内容

/*--トップに更新情報--*/  ←何処に書いたか整理するための記載

.topnew01{ ←「更新情報」のタイトルに設定したセレクタ
margin:10px 25px 0px 25px;  ←枠外余白:上10px 右25px 下0px 左25px
border-bottom:1px solid #666666;  ←枠線下側:1px、実線、グレー
background-image:url(http://背景画像のアドレス.gif);  ←背景画像のアドレス
background-position:top left; ←背景画像の配置:上寄せ、左寄せ
background-repeat:no-repeat; ←背景画像の繰り返し設定:繰り返さない
padding:4px 0px 2px 25px; ←枠内余白:上4px 右0px 下2px 左25px;
text-align:left; ←文字の配置(横方向):左寄せ
color:#ffffff; ←文字色:白
font-weight:bold; ←文字の太さ:太い
font-size:12px;
}

.topnew02{ ←「更新情報」の本文に設定したセレクタ
margin:0px 25px 0px 25px;  ←枠外余白:(横は「.topnew01」に合わせる)
border-bottom:1px solid #666666;
background-color:#ffffcc;  ←背景色:薄い黄色
padding:3px 10px;  ←枠内余白:上下3px 左右10px
text-align:left;
line-height:1.5em;  ←行の高さ:1.5文字分
font-size:12px;
}

背景画像のアドレス

 背景画像のアドレスは直リンク防止のためここではアドレスを記載していませんが、実際は、
『 http://(サブドメイン).up.seesaa.net/image/画像の名前.拡張子 』
といった形で記載されると思います。

画像のアドレスの確認は、「記事投稿」→「ファイルマネージャ」→アップロードした画像の名前をクリック→「元ファイル」と書かれたところを見ればわかります。

アドレスの文字が見切れている場合は、クリックしてページを開けばブラウザのアドレス欄に表示されます。


スタイルシートが反映されない?

上のスタイルを設定した後、IE6で確認した限りでは本文の「line-height:1.5em;」の宣言が反映されていませんでした。firefoxでは反映されています。

宣言の並び順は特に決められていないはずなのですが、並び順が変わると反映される宣言と反映されない宣言があったりして結構不安定になってしまいます。

また、ブラウザによって反映されたりしなかったりするのでかなり厄介です。

私の場合はIE(インターネットエクスプローラー)とfirefoxの2つのブラウザを確認して妥協点を見出して納得させています。

7.使用した画像素材

 「更新情報」の作成で使用した背景画像とボタン画像を以下に掲載します。稚拙な画像ですが、よろしかったら使ってみてください。

フリー素材です。使用条件などは特にありません。使用される場合は、一度ダウンロード(画像を保存)してご自身のファイルマネージャ/サーバー内で使用してください。加工しても構いません。

tag-silver.gif tag-blue.gif tag-green.gif tag-red.gif tag-yellow.gif yaji06-red.gif yaji06-blue.gif yaji06-green.gif yaji06-orenge.gif
 文字サイズが多少大きくても画像が切れないようにするため、タグ画像は表示させたい高さよりも縦長に作成しています。
×

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