クリア系テンプレの左メニューでメニューにmax-heightを適用してましたが、max-heightがIEに未対応だったので、クリア系左右メニューで左メニューを表示せず、右メニューを左メニューに変更してみました。 . . . 本文を読む
過去の記事が増えてきて、非常に見づらくなってきましたのでスクロールバーを追加しましたよ。
なぜ、今更って?
それは、スタイルシートを良く知らなかったからです(爆)
いや、正確にはLeftyさんのコチラの記事やじゃすみんさんのコチラの記事のやり方は知っていて、一度はチャレンジしていたんですが、全てが一律の高さになってしまうので、カレンダーやgooメニューなど高さが無い物が間延びしてしまって満足 . . . 本文を読む
クリア系左右テンプレは可変タイプなのですが、ブラウザの表示幅を760px以下にしてしまうと記事部の投稿ボタンが消えてしまいます。
CSSを編集する前の状態でも投稿ボタンが隠れてしまいますので、コチラの件とともに是非修正していただきたいですね。
他の可変タイプのテンプレートだと、コメントエリアが引っかかるように処理されるのですが、クリア系テンプレは右メニューの下に隠れるように処理されてしまいます . . . 本文を読む
さっきから、テンプレートの選択やCSSの編集ができなくなったと思ったら、テンプレートの不具合が修正されたみたいですね。
それと多分関係があるとおもいますが、不具合が出ています。
テンプレート一覧の不具合
早速、CSSのバックアップをとって、テンプレートの選択をやり直そうと思ってシンプルを開いたところ
クリアブルーとクリアホワイトがごちゃ混ぜになってます。
修正よろしくお願いします。
クリアブ . . . 本文を読む
タイトルに画像を入れる手順をご紹介。基本的にクリア系テンプレートでの方法です。
まず、最初に私のテンプレートのタイトル部分をご紹介。
/* ヘッダーの指定 */
#header {
background-color: #79B6F9;
padding: 35px;
border-bottom: 1px solid #B6CEE7;
background-color: #CAEDF5;
. . . 本文を読む
見た目は殆ど変わっていないと思いますが、記事タイトル部と画像部の処理を小変更しました。
記事タイトル部
/* エントリータイトル囲み */
.etTitleKazari {
border-top: 1px solid #57ACD5;
padding: 5px;
border-bottom: 1px dotted #57ACD5;
margin: 0px 0px 0px 0px;
}
. . . 本文を読む
見た目を変更するわけではないのですが、タグの処理に関して修正。
今までHTMLタグの処理をCSSに記述してきましたが、範囲を限定したいと思います。
見出しタグ<h>や引用タグ<q>、<blockquate>をBLOG全体で指定。
テーブルタグ<table>、イメージタグ<img>を1記事(エントリー)内「.oneEntry」で指定。
していましたが、実際これらのHTMLタグを使用するのは記事 . . . 本文を読む
よく、考えたら自分のCSSを公開してませんでしたね。まあ、参考になるかどうかはわかりませんがとりあえず公開します。
BLUE_SKY_BLOGのCSS
IEをお使いの方
上記のリンクを右クリックして「対象をファイルに保存」を選択して任意のフォルダに保存してください
その後、EUCに対応したテキストエディター(HeTeMuLu CreatorとかWordなど)で開けばちゃんと日本語が表示されま . . . 本文を読む
画像と同様に背景画像が固定だと表が見づらいので、背景色を指定しました。
こちらも、ブログ全体に指定してしまうと大変なことになってしまいましたので、本文のみに指定しました。
/* エントリー内テーブル(表)レイアウト用 */
.oneEntry table {
background-color:#F4F7FF;
}
ここでも、統一性を出す為、メニューなどに使っている、ちょっと青い白を使ってい . . . 本文を読む
アレンジの仕方がわかってきて楽しくなってきましたよ。
さて、今回の変更ですが、ちょっとした小変更を加えてみました。というのも、私のテンプレートだと、背景が固定されているので画像が見づらいなぁと感じていたんです。んで、CSSを覗いていると画像に関する部分があったのでチョコチョコっといじってみました。
.thumbnail は、ブログをトップページの記事表示タイプ を「書き出しのみ表示す」を選んだ . . . 本文を読む
スタイルシートってちゃんとした記述方法があるんですね(爆)訳もわからず触ってましたよ(おぃ
んで、記述方法がわかりやすく説明したホームページは無いものか?と探してみたところ
HTMLクイックリファレンス
と言うのを見つけました。
この中のスタイルシートリファレンス(目的別)とスタイルシートリファレンス(ABC順)がシンプルで且つわかりやすかったので紹介します。
私は、Operaというブラウ . . . 本文を読む
CSSをいじりだす前にえっけんさんのところで見ていたのですが、ようやく意味がわかりました。
むだづかいにっき♂:CSSにこれを書き足そう +
これは便利ですねぇ。引用文を強調表示というか独立表示させるとかなりわかりやすくなります。
それとYahooブログを使っていて、見やすいなぁと感じたの「見出し」
各項目に背景色を当てはめるので非常に見やすくなりますね。
例)Yahoo!ブログ - BLU . . . 本文を読む
「プレーンブルー」と「空」テンプレートを融合させたようなテンプレートを作成中です。
しばらく見づらい状態が続くかもしれませんがご了承くださいませ。
とりあえず、終了。
ベースにしたのは「クリアブルーの左メニュー」
メニューの配色がイマイチだなぁ。
メニューバーとメニュー背景のバランスがどうもしっくりきてませんよ。
まあ、とりあえずこのまま行きます。
本当にデザインと言う物は難しい…。
. . . 本文を読む
次はタイトル部分の編集ですね。
それでは、いつものようにCSS(スタイルシート)の使いかたを開いて早速、やってみましょう。
【ブログのタイトル編集】
◆ブログタイトルの背景色を変更するには
まずは背景色を変更するようですね。
/* ブログのタイトル部上 */
.headerLight {
background-image: url();
background-repeat: . . . 本文を読む
背景を変更した後は、文字の色を変更です。
それでは、CSSの使い方の4ページ目を読んでみたいと思います。
【ページ全体のテキスト色を設定するには】
フムフム、ブログで使用されている文字色と大きさを変更するんですね。変更される箇所は下記の画像の赤枠の部分ですね。主にリンク以外の文字色というところでしょうか?
それでは、早速、編集画面のをクリックしてCSSの編集画面を出してみたいと思います . . . 本文を読む