« 電源交換 その後 | トップページ | 悲しくてやりきれない »

2017年7月24日 (月)

CSSファイルを書き換えた

 今更ではありますが……。
 コイツの為に作った「背景画像一覧(試)」を完成させて、(試)を消しました。
”取り敢えず作ったからね”状態が長く続いていたけど、ちゃんと設定しようと思ったキッカケは「ウェブページの更新」です。

 ここから、備忘録も兼ねて。

 ウェブページ自体はココログの仕様で、つまりブログのテンプレートで表示されますが、ウェブページ内の「男子寮云々」のコンテンツは自作HTMLで表示させています。

 過去のHTMLファイルです。
Html_007

 と過去のCSSファイル。
Css_008

 これでコンテンツをブラウザ表示させると、こうなります。

sample1
005

 このままでもイイっちゃあイイんですけど、幅(一行の文字数)を指定していないので、画面を例えば1920×1080に広げるとテキスト文字も画面いっぱいに広がって表示されます。
 それでは読みにくいので、体裁を整えました。

 CSSファイルに、記事の表示部分「.content」と、それを載せる「#container」を書き足します。名前は何でもいいのですが、ここはココログに合わせて同じ名前にしました。「#container」の右上と右下を角丸設定。「.content」の四隅を角丸設定し、右と下に影を付けます(赤丸部分)。

 角丸の詳しい設定は下のサイト様で。
 border-radius …… 角丸をまとめて指定する
 影の付け方はこの記事で。
 影を慕いて

009

 で、個々のHTMLファイルに「#container」と「.content」を呼び出すタグを書き加えます(赤丸部分)。

Html_009

 コレをブラウザで表示させるとこうなります。

sample2
006

 sample1と比べると多少は見映えが良くなったでしょうか?

 ついでに、本家本元このブログに使用中のテンプレートのカスタムCSSにも、バーナー背景画像の右下角丸設定を書き加えました。

#banner{
    padding: 0px;
    margin: 0px 0px 2px 0px;
    height: 150px;
    background: url("http://arcadia3.cocolog-nifty.com/blog/bg_13.jpg") no-repeat left #555;
    border: 0;
        border-bottom-right-radius: 10px;
        text-shadow: 5px 10px 5px black;
}

 これまでは、個々の背景画像を「Photoshop Elements」で開き、新規レイヤーを作成して、レイヤーの右下を背景色で塗り、

Adobe_photoshop_elements_010

 隅を残して消しゴムで消します。

Adobe_photoshop_elements_011

 後はレイヤーを結合させて保存。

Adobe_photoshop_elements_012

 という、何とも面倒な事をしていました。これで簡単に背景画像を変更することが出来ます。もっと早く気づけばよかったです。
 で、その時思い出したのが「背景画像一覧」です。コレは、取り敢えず作ったものなので、CSSで背景画像の右下を角丸にするようには設定していません。こっちのCSSも変更しなくてはいけません。
 ウェブページで表示するコンテンツは外部に置いたCSSファイルをHTMLファイルで呼び出すようになっていますが「背景画像一覧」は、HTMLファイル内にCSSを書き込んであります。以下、そのHTMLファイルです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>背景画像一覧</title>
<style type="text/css">
<!--
body    {
    font-family : "メイリオ", Meiryo, 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif;
    font-size : small;
    background-color : #555555;
    }
h1     {
    font-family: "メイリオ", Meiryo, 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif;
    font-size : large;   
    color: #ffffff;
    }
h2     {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size : medium;   
    }
(h3略)
-->
</STYLE>

<META name=GENERATOR content="MSHTML 8.00.6001.18783"></HEAD>
<BODY>
<P>
<H1>背景画像一覧</H1>
<P></P>
<P>
<H2>bg_1</H2>
<P></P>
<P><IMG src="http://arcadia3.cocolog-nifty.com/blog/bg_1.jpg"></P>

(中略)

<P>

<H2>bg_13</H2>
<P></P>
<P><IMG src="http://arcadia3.cocolog-nifty.com/blog/bg_13.jpg"></P>
<P>
<div align="center"><a href="http://arcadia3.cocolog-nifty.com/blog/"><font color=#ffffff>ブログのトップへ</font></a></div></P>

</BODY>
</HTML>

 ここに、角丸の指定を書き加えます。

Html_013

 しかし……これをどこで呼び出せば良いのか判りません。試行錯誤した結果、「IMG」タグ内に直接書き込めばいい事が解りました。

Html_014

 バナーの背景画像はJava-scriptで12枚の画像をランダム表示させていますが、Java-scriptをオフにしてあるブラウザでは別画像を表示させる様になっています。試しにJava-scriptをオフにしたGoogle Chromeで表示させると、指定した画像が右下角丸で表示されました。

Arcadias_blog_google_chrome_004

 これで、完成です。おーい、Sよー、そっちで見てくれたかーい? 
 遅くなってごめんよ。
 あれから何年も経ったけどやっと完成したよ。

|

« 電源交換 その後 | トップページ | 悲しくてやりきれない »

ウェブログ・ココログ関連」カテゴリの記事

コメント

コメントを書く



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


コメントは記事投稿者が公開するまで表示されません。



トラックバック

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

この記事へのトラックバック一覧です: CSSファイルを書き換えた:

« 電源交換 その後 | トップページ | 悲しくてやりきれない »