CSS

2011年6月11日 (土)

タイトルのcssを変更する

タイトルもカスタマイズ

うまくいくと、ついつい調子にのって、いろいろやりたくなります。とはいえ、ちょっと本題からはずれてしまったので、明日からはまたubuntuに戻ることにして、仕上げにタイトルどおりにblogの記事の「タイトル」を自分なりのcssでカスタマイズすることにしました。

ソースを見よう

自分のblogのソースを見てみましょう。Internet Explorerなら、メニューの「表示」から「ソース」です。そこから自分の記事のタイトルを検索すると、タイトルのタグにcssのクラスが書いてあることが分かります。タイトルのクラスはentry-headerですから、この名前の頭にピリオドをつけてクラスを表記して、cssを書けばいいわけです。

ちなみに、私は次のようにしました。(まだ、ちょっと気にいりませんが。)

.entry-header {
 margin: 1.5em 0em;
 border-top: thick double #999999;
 border-bottom: thin solid #999999;
 border-width: thick;
 font-family: "MS P明朝", "細明朝体";
 font-size: x-large;
 font-style: normal;
 font-weight: bold;
 background-color: #FFFFFF;
 width: 680px;
 padding-top: 1em;
 padding-bottom: 1em;
 padding-left: 1em;
}

これをブログの作成画面の「デザイン」タグから「カスタムcss」の最後に付け加えて、反映させれば、記事のタイトルが変わります。今回は、既に[entry-header]クラスは使われているので、タイトルは一斉にスタイルが変更されることになります。だから、少々気にいらなくても、とりあえず作っておいて、後からどんどん変更もできます。まあ、他のcssについても同様ですが。

2011年6月10日 (金)

ubuntu 11.04 firefoxにはcssは全く反映されず

マッチポンプですが、ubuntu11.04のFireFox(4.0.1)で見たら、何も装飾がついておりませんでした。

いやはや、いまだにこういう世界なんですね。前途多難です。

フリーで配布されているcssファイルがどうなっているのか、検証してみたくなりますね。

なんかとても残念な本日でした。

・・・・

あ~、しかし、Windows7のFireFox(4.0.1)には、しっかり反映しています。

Web作成者の方は大変な思いをなさっていることが、良くわかりました。ふ~。

原因はタイプミスと判明

タイプミスを直したら、Win7のIE、FireFox、UbuntuのFireFoxと全て意図したとおりとなりました。 結局は私のタイプミスが原因。反省しきりです。

とりあえずCSSを作ってみました

まずは最初の一歩!

なんでも、とりあえずチャレンジしてみなければ始まらないということで、cssの設定も行ってみました。

手順は次のとおりです。

cssをエディタで作る

参考書を片手に、こんな感じの装飾があるといいなとエディタでcssファイルを作りました。クラスとして作って、多くのタグに使えるようにしました。できあがった内容は次のとおりです。

.kita1 { 
 width: 500px;
 border-color: #cccccc;
 border-style: none none solid solid;
 padding: 5px 0em 0em 1em;
 border-bottom-width: 5px;
 border-left-width: 1.5em;
 }

.kita2 {  
 width: 400px;
 border-color: #cccccc;
 border-style: solid none solid none;
 padding: 5px 0em 0em 1em;
 border-bottom-width: 5px;
 border-left-width: 1em;
 }

.kita3 {
 width: 300px;
padding: 0em 0em 0em 0.5em; border-color: #CCCCCC; border-style: none none dotted solid; border-bottom-width: thin; border-left-width: thick} .kitaq { width: 500px; border-color: #CCCCCC; border-style: dotted; border-width: thin; padding: 0.5em 0em 0.5em 0.5em; } .kitaq2 { width: 500px; border-width: thin; padding: 0.5em 0.5em 0.5em 0.5em; background-color: #CCCCFF; border: #CCCCCC; border-style: none } .kitaqg { width: 500px; border-width: thin; padding: 0.5em 0.5em 0.5em 0.5em; background-color: #CCCCCC; border: #CCCCCC; border-style: none; }

上記の内容を登録する

管理ページの「デザイン」タブから「カスタムCSS」を出して、そこに貼り付けます。

htmlのタグにclass="クラス名"を追加する

例えばh1タグなら

<h1 class="kita2">これはh1にCSSを使ってます</h1>

などと書く。

以下は上の例を実際にh2タグとpタグに使った例です。

h2 kita1

p kita1

h2 kita2

p kita2

h2 kita3

p kita3

h2 kitaq

p kitaq

h2 kitaq2

p kitaq2

h2 kitaqg

p kitaqg

少しずつ、カスタムなcssを増やしていきたいものですね。

ココログの設定されているスタイルシートの確認

blogというものが流行っていると見聞きし、非常に簡単にWebページが作成できるので、多くの方が情報発信に使われているのだろうと推測していた。
5月の半ばから、自分でもblogを作ってみて分かったことだが、blogを作成することの不便さに辟易している。
「何故、Webページ作成ツールで作成した内容を一括アップロードできないのだろうか?」「画像をひとつずつアップロードしなくてはいけないのは何故?」「リンクを貼るのが面倒だ」等々いくらでも不満が出てくる。
こんな不便なものなら、きっと誰かが一括アップロードツールとか、作成してくれているだろうとGoogleで検索をいろいろしてみたが、画像の一括アップロードツールはあるものの、気の利いた感じのツールが見つからない。
これは「ココログ」だけのことなのだろうか?
不便な「ココログ」を作るのに時間をとられて、ツールを作る時間が取れないのかもしれないと悲しくなる。
そうやって、検索に時間を割いていると、予想もしないことが分かるのが常であるが、「ココログ」では外部cssファイルを利用でき、cssファイルの無料ダウンロードサービスを行っているサイトもあると分かった。

「ココログ」の中ではどんなスタイルシートを使っているのかが気になって、htmlのソースを見てみると、
(自分のブログのurl)/blog/styles.css
(自分のブログのurl)/.shared-cocolog/js/multibox/multibox/multibox.css
の二つがあり、
上記のstyles.cssでは、
(自分のブログのurl)/.shared-cocolog/themes/common/base-weblog.css
(自分のブログのurl)/.shared-cocolog/nifty_managed/themes/common/base.css
http://theme.cocolog-nifty.com/themes/vox/neue-haas-grey/screen.css  <・・・(A)
(自分のブログのurl)/.shared-cocolog/nifty_managed/themes/vox/neue-haas- grey/screen.css
の4つのcssファイルをインポートしていることが読み取れた。
とりあえずcssファイルなので、直接urlを指定するとダウンロードも行えた。(A以外)

base-weblog.cssの中で、H1~H6を冒頭で同じスタイルに定義しているようにも見えたので試してみたい。

H1

H2

H3

H4

H5

H6

さて、どうなることやら、結果はアップロードして確認のつもりである。なお、自分で作成した外部cssファイルについては、ブログ作成のページのファイルアップロードで行うとのことらしいが、追って試してみたいと思う。

(以下、アップロード後の追加)

結果を見て、「なんだ、普通じゃないか」と苦笑い。

作成画面で確認すると、H2がアンダーラインがあったりして、なかなかだったが・・・

とりあえず、ブログ名やタイトルや日付で使われているクラスを試してみたが、予想通りの結果が示せない(笑)

やはり、俄か仕込では無理があることが分かったので、この項の展開は後日改めてとしたい。m(__)m

2014年11月
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            
無料ブログはココログ