カテゴリー: スタイルシート

次の2行ですが、普通に右寄せにするとこうなります。

ひと目　ひと目　手を動かして何かを編んでいると、
時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。

これはスタイルシートならtext-alignで、
スタイルシートがわからなくても、ブログの編集画面で右寄せのマークを押せば簡単に出来ます。

でも、レイアウトによっては下のサンプル（これは「手芸部」の最新記事です）の赤字部分みたいに
右寄せなんだけど行の始まりを同じ位置にしたい時があります。そういった時の解決方法です。

下のサンプルでは、青文字が普通の右寄せ（text-align:right）、
赤文字が、これから説明するfloat:rightを使っています。

手編みするあったかい冬時間。大切なあの人へ。。あったかい冬をおくろう。
Isn’t warm winter presented to the important man?

ポイントは「作り目」と「編み方」と「伏せ止め」だけです！
これだけで、誰でも、簡単にマフラーが編めちゃいます！

末尾で合わせる普通の右寄せ

ひと目　ひと目　手を動かして何かを編んでいると、
時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。

この方法は、以前このブログの記事「枠の中の背景に画像を使いたい！ 」で説明していますが、
もう一度書きます。

文章の配置にはスタイルシートのtext-alignを使います。

文字を右に寄せたいときはtext-align:right;と指定します。

文字を左に寄せたいときはtext-align:left;と指定しますが、普通は書かなくて構いません。
通常は指定しなければ自動でtext-align:left;とみなされるからです。

文字を真ん中に合わせたいときはtext-align:center;と指定します。
下がtext-align:center;のサンプルです。

ひと目　ひと目　手を動かして何かを編んでいると、
時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。

スタイルシートの書き方は以前の記事「で、スタイルシートはどこに書くのか？」に書いています。
今回はインラインでの書き方だけ説明します。

普段はブログの編集画面に文章を書くだけなので、知らない人もいるかもしれません。
説明すると、HTMLでは<p>から</p>の間に文章を書きます。

自分はそんなことした覚えはない。という方も自分のブログのソースを見るとそうなっています。
それは文字を書いて公開すると、ブログが勝手にHTMLに変換してくれるからです。

この最初の<p>の中にスタイルシートを書き込む事ができます。これがインラインでの記述方法です。具体的には下のように書きます。

<p style="text-align:right;">ひと目　ひと目　手を動かして何かを編んでいると、<br/>時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。</p>

<pのpの後に半角スペースを1文字入れてからstyle=”text-align:right;”と書きます。その後に>と書いてから文章。文章が終わったら、</p>と書きます。<p>から</p>までが一つの文章です。

<pの後は半角スペースです。全角スペースはエラーです。同じように<から>の間のアルファベットや記号は半角で書きます。ちゃんと書いたのに出来ないというときは、半角で書いているかを確認します。

文中に<br />とあるのは改行の印です。

HTMLでは<br />が出てこない限り改行とみなされません。文章を書いているときに何回Enterキーを押して改行しても、それはHTML上では改行とみなされていません。<p>や</p>と同じようにブログが自動で、Enterキーを押す度に<br />を挿入しているから改行して表示されるだけです。

確認：末尾で合わせる普通の右寄せの書き方

<p style="text-align:right;">ひと目　ひと目　手を動かして何かを編んでいると、<br/>時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。</p>

行の始まりを左に合わせた右寄せ

ひと目　ひと目　手を動かして何かを編んでいると、
時間がたつのも忘れ、充実感のある最高に贅沢なひとときが味わえます。

全体をまとめて右や左に寄せるに時はfloatを使います。

右寄せにするにはfloat:right;と書きます。
左寄せにしたければfloat:left;と書きますが通常は必要ありません。

またtext-alignの時のcenterのように真ん中合わせはできません。右寄せか、左寄せだけです。

行の始まりを左に合わせた右寄せの具体的なソースは下のようになります。

text-alignは指定しなければ、text-align:left;と同じと先ほど書きました。
つまり上のコードは左合わせの、改行した2行の文章を右側に配置ということです。

これで右側に配置されますが、floatを使う場合は気をつけないといけないことがあります。

“字数の違う右寄せ2行の先頭を揃える” の続きを読む

ひとつ前の記事「サイドバーにもサムネイルモジュール」ですが、
スタイルシートの注釈記法を間違えていました。

勘太さんがスクリプトを使ってくれたらしいので見に行ったんですが、
こちらの思っている通りに表示されていない。

勘太さんのページのソースを確認したんですが、スクリプトは正常に動いている。
スタイルシートのPATHも（CSSの場合はなんて呼ぶんですかね、入れ子の順序も）
あっている。

ローカルでのテストは正常だったのに、ブログに上げると動かない。
あるいは違った表示がされてしまうということは（特にファンブログの場合は）
よくあるのですが、今回は単純にスタイルシートに書いた注釈の記法が
間違っていたのでした。どうもすいません。

スタイルシートの注釈表記法はC形式らしい。

つまり、/* この間が注釈 */　となる。
それをC++などで使う、　// 行末までが注釈

と書いてしまった。それが原因で思ったとおりにCSSが適用されなかったようです。
注記方法を訂正したら、正しく反映されるようになりました。

では、何故今回こんな間違いを犯したのか？

それは、普段CSSに注釈など書かないからです。

つまり、ローカルで完全にテストを終えた後に、
ブログでの説明用に普段書かない注釈を書き足した。

その記法が間違っていたので散々テストした後でアップしたにもかかわらず
正しく動かなかった。というわけです。

注釈に限らず、コードのエンティティ変換など、ソースが出来てから後、
Webに上げるためにはいろいろな手順を踏まなければいけません。

挙句公開したら「ソースを貼ったらアフィリエイトが表示されなくなった。
これってソースのせいなのかなあ」とか質問されれば頭に来ますわ。

「ソースのせいじゃねえよ！お前のアフィリの貼り方が悪いんだよ！」と
怒れば、怒ったこっちが叩かれ、質問した人物は擁護される。

「わからないから聞いているのに」
「怒らずに、わかるまで教えてあげるべきなんじゃないですか」

これってどうなんですかね？

おかしいと思ったら、貼り付けたソースコードを剥がしてみる。
それだけでそのソースが原因かどうかわかるのに、それさえせずに質問してくる。

それで遂にひとりブログをやめましたけど。

画像が表示されているのを見るだけで心が痛むらしいので前記事のモジュールは
公開しませんでしたが、やめたので、ソース書きました。

質問する前に、自分で出来ることをやりさえすればよかったのに。
それさえせずに質問するのが当然という風潮が最近のファンブログにはありました。

そんなんじゃ誰もソースなんか公開しなくなると思いますよ。

Twitter愛のリレー小説
「セルヴーズの雨傘」

新しいスタイルシートのCSS3を使うと画像を使わないでも簡単に文字に影がつけられます。

ただし、このCSS3は全てのブラウザで対応しているわけではありません。
Internet Explorer 9では上の文字に影がついて見えますが、Internet Explorer 8では
影がついていません。

これはバージョンの問題です。ただし、Windows XPではInternet Explorerは8までしか

インストールできません。

Window7を買わせたいマイクロソフトの意地悪ではなく、ハードウェアに関わる技術的な問題が
原因のようです。

もし、あなたがWindows7をお使いなら、Internet Explorer9が入っています。
でもあなたが自分のブログをお持ちの場合「私はInternet Explorer9だから大丈夫」という考えは間違いです。

あなたには影がついて見えていても、あなたのブログの読者には影がついて見えないかもしれない。いや、影がついて見えない読者も確実にいる。

このことを念頭においてデザインしないと失敗します。

今回の記事はそういう制約があることを承知した上でお読みください。

“文字に影をつけるスタイルシート” の続きを読む

今回は、このバナーを題材に、透明画像の背景に色をつける方法。

バナーの場所は「あげはコーナー | パート派遣主婦のぐーたら子育て生活」です。

“透過バナーに好きな背景色をつける” の続きを読む

ケース１

ブログを改造したらサイドバーがない！

いや、あった！記事の下に。

ケース２

サイドバーのタイトルに背景画像を指定したが、画像の上下が切れている！

そうなってしまうのはなぜか？どうやれば直るのか。

“サイドバートラブル解決法” の続きを読む