*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

TOP > Template > カスタマイズ > lace-gr2(wh2)記事カラム広めCSS

2008-05-26 (Mon) 17:25 ✎

lace-gr2(wh2)記事カラム広めCSS

当テンプレートをDL頂いた方、コメント・メール等を頂いた方、誠に有り難うございます。
本日、レース模様（グリーンと白）の2カラムテンプレ（lace-gr2/lace-wh2）が共有化されました。
前作（lace-pk2/lace-be2）と同様に、lace-gr2とlace-wh2の記事カラムを広くしたCSSと、メニューカラムを左から右に変更したCSSをupいたします。
記事カラムが狭くて写真が載せ難い・メニューカラムが逆の方が使い勝手が良い、という方は是非使ってみて下さい。

使い方↓
ReadMoreをクリックし、欲しいCSSのリンクをクリック。
CSSの書かれたテキストが別窓で開きますので、
テンプレートの設定画面でDLしたテンプレートのCSS部分を全て貼り替えて下さい。

lace-gr2（グリーンのレース）記事カラム広め
lace-gr2（グリーンのレース）記事カラム広め＋メニュー右

lace-wh2（白のレース）記事カラム広め
lace-wh2（白のレース）記事カラム広め＋メニュー右

適用後、不具合が有りましたらご連絡を。宜しくお願い致します。m(_ _)m

関連記事

* Category : カスタマイズ

* Comment : (11) * Trackback : (0) * △

更新日順

カテゴリ:［カスタマイズ］

リンク文字の色変更

sumika様、お返事が遅くなりまして申し訳ございません。
ご質問の件ですが、サイドカラムのリストリンクでは無くって、その他の記事部やカレンダーとかのリンク、という事でご説明致します。

先ず、サイドカラム以外のリンク全般は、
スタイルシート編集画面の上部付近に

a {
color: #B0B0B0;
text-decoration:none;
}

a:hover {
color : #B0B0B0;
text-decoration:underline;
}

こんな部分が有ると思います。
a {　はリンクが有る部分で、color : #B0B0B0; が色コードです。
ここを変えると変更できます。
その下の
a:hover {　はリンクにカーソルが乗ったときの部分で、color :　～はカーソルを乗せた時に変わる文字色、
text-decoration: underline;　はカーソルを乗せた時に文字にアンダーラインが出る設定です。

横カレンダーのリンク部分の変更は、

.yoko_calender a:link, .yoko_calender a:visited {
font-weight:bold;
color:#E0E0E0;
text-decoration:none;
}

.yoko_calender a:hover {
color:#999999;
font-weight:bold;
text-decoration:underline;
}

この部分です。
.yoko_calender a:link, .yoko_calender a:visited {　は a:link （リンク文字）、a:visited （訪問済み）の事で、日記の記述が有った日付・及び読んだ後の日付の色です。
color:#E0E0E0;　の部分を変更してください。
.yoko_calender a:hover {　は、記述の有った日付にカーソルを載せた時の文字色です。
color:#999999;　の部分を変更してください。
両方に共通する font-weight:bold; は太字という事です。
太字にしたくない場合は外してください。

ズラズラ書いてしまい、分かりにくかったらごめんなさいね。
ご不明な点がございましたら、またコメントして下さい。(^_^)

2008-06-23-14:36 * aki [ 返信 * 編集 ]▲

先日はありがとうございました!

無事、メニューを右に変更できました。
丁寧にお教え下さって、ありがとうございます。

もう一つお尋ねしたいのですが、リンク文字の色を変更したいのです。
5/29のコメント記事やFC2ブログの歩き方などを参考に、タグとにらめっこしていたのですが、分かりませんでした。
何度も申し訳ございませんが、教えていただけますでしょうか。どうぞよろしくお願いいたします。

2008-06-21-18:33 * sumika [ 返信 * 編集 ]▲

ありがとうございます。

stella様　はじめまして。DL及びコメント、有り難うございます。m(_ _)m

携帯用テンプレ…ですが、今のところ残念ながら予定はございません。
と言うか、作った事が無いのです。。

取り敢えず素材サイトの更新やテンプレ作成で頑張っておりますので、近日中には難しいです。
携帯用テンプレは今後の課題とさせて頂きますね。
貴重なご意見、有り難うございました。(^_^)

2008-06-10-23:39 * aki [ 返信 * 編集 ]▲

はじめまして(´∀｀*)

上品で素敵なテンプレート、お借りしました(ﾉ´∀｀*)

ところで・・・携帯用ﾃﾝﾌﾟﾚｰﾄの方は予定などあるのでしょうか？

あったらなおうれしいですー(*´д`*)

2008-06-10-14:03 * stella [ 返信 * 編集 ]▲

メニューを右に変更の件

sumika様　はじめまして。コメント有り難うございます。

ご質問の件ですが、管理画面のテンプレート設定画面、スタイルシート編集（下段）を変更して下さい。

編集画面の
/* Main contents */
#contents {
float: right;
width: 455px;
margin: 0px 5px 0px 5px;
～～
の赤字部分を
right → left
0px 0px 0px 10px;
青文字のように変更して下さい。
すると、メニューカラムが右になります。（marginの変更部分は見栄えの微調整です）

どうも上手くいかない！という場合はまたコメント下さい。m(_ _)m
色々カスタマイズして末永く使ってやって下さいね♪

2008-06-02-19:53 * aki [ 返信 * 編集 ]▲

はじめまして。

シンプルでいて可愛いテンプレートに感激しました♪
早速お借りしています。
お尋ねしたいのですが、
lace-wh2の記事カラムはそのままで、メニュー右に変更する場合は、どのようにしたらよろしいのでしょうか。
お手数をおかけして申し訳ありませんが、どうぞよろしくお願いいたします。

2008-06-02-18:56 * sumika [ 返信 * 編集 ]▲

ありがとうございます。

ご丁寧にありがとうございます♪
いつまでも使っていきたいでーす。

2008-05-30-13:07 * リス [ 返信 * 編集 ]▲

有り難うございます m(_ _)m

hiro*様はじめまして。DL有り難うございます。m(_ _)m
かなり自分の趣味趣向に走ってしまい、レースばっかりになってます。(^^;
これから作るテンプレもこの傾向が続くと思いますが、お気に召しましたら当方にお付き合い下さいませ。
hiro*様がお使いのテンプレは全4カラーございます。
季節や気分で切り替えられるよう、是非♪他のカラーもDLしてみて下さい。
勿論、記事カラム幅広タイプCSSもブログに掲載してますのでこちらもどうぞ。(^_^)
今後とも *Essence のテンプレを宜しくお願い致します。

2008-05-30-12:53 * aki [ 返信 * 編集 ]▲

はじめまして。

素敵なテンプレート、いつも拝見してました。
今回記事を広めにするカスタマイズを記載してくださったので
新しい白のテンプレをお借りしました♪
いつもレースのテンプレをお借りしたいなぁと思ってたのですが
写真がいつも大きいのであきらめてたのですが
これで使わせていただけることができました！
ありがとうございます（＊＾＾＊）
これからも素敵なテンプレを作っていってくださいね。
では、失礼しました。

2008-05-30-07:02 * hiro* [ 返信 * 編集 ]▲

DL有り難うございます。

リス様はじめまして。DL有り難うございます。m(_ _)m
本文の文字色を色変更したい場合は、管理画面のテンプレート設定画面、スタイルシート編集（下段）にて行います。

文字色の変更箇所は以下の部分を好きな色に変更してください。

（タイトル下のブログ説明部分）
#header div#description {　の
color: #999999; →例えば #666666

（横カレンダー）
.yoko_calender {　の
color:#999999; →例えば #666666

（記事本文）
#contents {　の
color: #8d8d8d; →例えば #666666

（コメントタイトル部分）
#contents h3 {　の
color: #ABABAB; →例えば #666666

（引用文部分）
#contents blockquote {　の
color: #999999; →例えば #666666

（記入日付）
.entry_state {　の
color: #D8AFAE; →例えば #666666

（サイドカラム部分）
.sidebar {　の
color: #8d8d8d; →例えば #666666

（サイドカラムのプラグインタイトル）
.sidebar h4 {　の
color: #999999; →例えば #666666

（サイドカラムのリンク付きリスト部分）
.sidebar li a {　の
color: #8d8d8d; →例えば #666666

（サイドカラムのリスト部分）
.sidebar li {　の
color: #8d8d8d; →例えば #666666

（プラグインのカレンダー日付部分）
.calender td,tr {　の
color: #8d8d8d; →例えば #666666

（テキストエリアなどの文字色）
textarea,input,select {　の
color: #8d8d8d; →例えば #666666

（フッター部分）
#footer {　の
color: #8d8d8d; →例えば #666666

長くなりましたが、文字色自体は color: #xxxxxx; になっているのでCSSを見ると大体分かると思います。
例として挙げている #666666 は変更前の文字色を16進数で一ランクほど暗くした場合ですので、お好きなように変えてくださいね。

上でも書きましたがもう一度。(^^; 本文の文字色を暗くする場合は
#contents {　の
color: #8d8d8d;　という部分を変えてください。

色々カスタマイズして、末永く使ってやってくださいね♪

2008-05-29-23:31 * aki [ 返信 * 編集 ]▲