Last Update : 2008/03/08
Type : PC用テンプレート
Column : 2
曜日ごとにアイコン変わります。
このテンプレートに使用しているアイコンは七ッ森さんの素材を使わせていただきましたので、再配布・加工・自作発言は禁止いたします。
【アイコンを替えたい場合】
別のアイコンに替えたい場合はcssの記事設定部(142行目付近)に曜日ごとのクラスがあります。
そこの .曜日名{background:url('この部分') no-repeat 0% 0%;} ; を表示させたい画像アドレスに変えてください。
また、アイコンの大きさは66×66が一番適当なサイズです。
html記述フォームの117行目付近の <div class="EntryTitle
次に、CSS記述フォームの142行目付近の曜日クラスを削除(これはお好きにどうぞ)し
/*各記事タイトル部分の設定*/
.EntryTitle {
text-align: left;
height:66px;
padding:0px 10px 5px 75px;
line-height:20px;
}
を削除線の部分は削除(※しなくても問題はありませんが必要もありません)、下線は下記に書き換えてください。text-align: left;
padding:0px 10px 5px 75px;
line-height:20px;
}
/*各記事タイトル部分の設定*/
.EntryTitle {
text-align: left;
padding:0px 10px 5px 5px;
line-height:20px;
}
.EntryTitle {
text-align: left;
padding:0px 10px 5px 5px;
line-height:20px;
}
PR
この記事にコメントする
しつもんです
2008/04/22 (Tue)
はじめまして。いつも素敵なテンプレートをありがとうございます!!
１つ質問がありまして、コメントさせていただきます。
曜日ごとにアイコンが変わる、というところを
カテゴリごとにアイコンが変わる、ように変更はできませんか？
ある程度、css・htmlはいじれる人間なのですが、どうしてもわからなかったもので…
お時間があるときにでも解答いただけると嬉しいです。
よろしくお願いいたします。
１つ質問がありまして、コメントさせていただきます。
曜日ごとにアイコンが変わる、というところを
カテゴリごとにアイコンが変わる、ように変更はできませんか？
ある程度、css・htmlはいじれる人間なのですが、どうしてもわからなかったもので…
お時間があるときにでも解答いただけると嬉しいです。
よろしくお願いいたします。
Re:しつもんです
はじめまして、193さま。
ご質問の件ですが、まずhtml部のどこかに
<div class="EntryTitle <!--$entry_wday-->">
という一文がありますのでこれの <!--$entry_wday--> を <!--$entry_category--> に書き換えてください。
次にcss部に「.カテゴリ名{background:url('画像アドレス') no-repeat 0% 0%;}」をどこでも良いので記述してください。
これは例えば「日常」「雑談」「メモ」「note」の4つのカテゴリがあれば
.日常{background:url('画像アドレス') no-repeat 0% 0%;}
.雑談{background:url('画像アドレス') no-repeat 0% 0%;}
.メモ{background:url('画像アドレス') no-repeat 0% 0%;}
.note{background:url('画像アドレス') no-repeat 0% 0%;}
のようになります。
注意点として、クラス名に使えない文字を含んだカテゴリ名は避けてください。例えばカテゴリ名に空白や.(ドット)、#(シャープ)が入っていたりすると多分正しく表示されません。多分。
また、アルファベットを使う場合は大文字・小文字・全角・半角を区別しますのでAppleというカテゴリ名があったとして、.appleというクラスとは別のものと判断されます。
最後に、既存のクラスとかぶらないようにすれば、193さまが意図されたようになるかと思います。
それでは、参考になれば良いのですが試してみてくださいませ。
ご質問の件ですが、まずhtml部のどこかに
<div class="EntryTitle <!--$entry_wday-->">
という一文がありますのでこれの <!--$entry_wday--> を <!--$entry_category--> に書き換えてください。
次にcss部に「.カテゴリ名{background:url('画像アドレス') no-repeat 0% 0%;}」をどこでも良いので記述してください。
これは例えば「日常」「雑談」「メモ」「note」の4つのカテゴリがあれば
.日常{background:url('画像アドレス') no-repeat 0% 0%;}
.雑談{background:url('画像アドレス') no-repeat 0% 0%;}
.メモ{background:url('画像アドレス') no-repeat 0% 0%;}
.note{background:url('画像アドレス') no-repeat 0% 0%;}
のようになります。
注意点として、クラス名に使えない文字を含んだカテゴリ名は避けてください。例えばカテゴリ名に空白や.(ドット)、#(シャープ)が入っていたりすると多分正しく表示されません。多分。
また、アルファベットを使う場合は大文字・小文字・全角・半角を区別しますのでAppleというカテゴリ名があったとして、.appleというクラスとは別のものと判断されます。
最後に、既存のクラスとかぶらないようにすれば、193さまが意図されたようになるかと思います。
それでは、参考になれば良いのですが試してみてくださいませ。
質問させてください
2008/06/04 (Wed)
初めまして。
シンプルなデザインがとても気に入り、
Iconテンプレートを使わせて頂いております。
早速ですがお聞きしたい事があります。
記事内の下線（アンダーライン）を消去したいのですが、
どのようにすれば消すことができるでしょうか？
お手数おかけして申し訳ございませんが、
宜しくお願いいたします。
シンプルなデザインがとても気に入り、
Iconテンプレートを使わせて頂いております。
早速ですがお聞きしたい事があります。
記事内の下線（アンダーライン）を消去したいのですが、
どのようにすれば消すことができるでしょうか？
お手数おかけして申し訳ございませんが、
宜しくお願いいたします。
Re:質問させてください
はじめまして、こんばんは菅野さま。
テンプレートのご利用ありがとうございます。
ご質問の件ですが、文章の下線は背景を表示させております。
ですのでCSS編集エリアの
/*記事本文が記載される部分*/
.EntryText {
line-height:23px;
background:url('http://blog.cnobi.jp/v1/blog/user/3e6440cdb19bd974e9b14f16f5e075f1/1203162878');
}
という記述の中の背景を決める一文を抜いて
/*記事本文が記載される部分*/
.EntryText {
line-height:23px;
}
このようにしてください。
ちなみにline-height:23px;というのは文章の行間を決めるのもですので、文章間の空白が気になれば変更したり、消してくださっても問題はございません。
以上よろしくお願いします。
テンプレートのご利用ありがとうございます。
ご質問の件ですが、文章の下線は背景を表示させております。
ですのでCSS編集エリアの
/*記事本文が記載される部分*/
.EntryText {
line-height:23px;
background:url('http://blog.cnobi.jp/v1/blog/user/3e6440cdb19bd974e9b14f16f5e075f1/1203162878');
}
という記述の中の背景を決める一文を抜いて
/*記事本文が記載される部分*/
.EntryText {
line-height:23px;
}
このようにしてください。
ちなみにline-height:23px;というのは文章の行間を決めるのもですので、文章間の空白が気になれば変更したり、消してくださっても問題はございません。
以上よろしくお願いします。