[PR]
Posted on Wednesday, Dec 04, 2024 21:42
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
Clear Oneのメニュー
Posted on Monday, Sep 07, 2009 22:07
Clear Oneのメニュー部分のカスタマイズについて。
既存メニューを取り除きたい場合
例）カレンダーを取り除きたい場合
HTMLの<!--▼カレンダー-->～<!--▲カレンダー-->内を削除する。
注意：既存のメニューを削除した場合、メニューの内容の出る位置がズレる場合があります。
既存メニューの内容の位置を変更したい場合を見て修正して下さい。
既存メニューの内容の幅を変更したい場合
まずCSSの中から以下のように書かれている箇所を探して下さい。
/*--メニューの中身の幅----------------------------*/
ul.calendar { width: 195px; }
ul.entries { width: 180px; }
ul.categories { width: 140px; }
ul.archives { width: 100px; }
ul.comtb { width: 180px; }
ul.links { width: 140px; }
ul.other { width: 160px; }
見て分かるとは思いますが、ul.calendarがカレンダー、ul.entriesが最新記事一覧、ul.categoriesがカテゴリー一覧、ul.archivesが月別アーカイブ一覧、ul.comtbが最新コメント＆最新トラックバック一覧、ul.linksがリンクリスト、ul.otherがその他です。
変更したいプラグインのwidth値をお好みに編集して下さい。
既存メニューの内容の位置を変更したい場合
CSSの中から以下のように書かれている箇所を探して下さい。
/*--メニューの出る位置----------------------------*/
#menu ul.other { left: -120px; }
マイナス値を増やせば左に、減らせば右に移動します。
ここに書かれていない既存メニューの位置を移動させたい場合は、
#menu ul.entries { left: -0px; }
といった具合に、該当するクラス名を書き足していって下さい。
どのメニューがどのクラス名か分からない場合は、上記の既存メニューの内容の幅を変更したい場合を参考にして下さい。
注意：ul.entriesだけではなく、#menuも忘れずに、#menu ul.entriesと書くこと。
新たにメニューを追加したい場合
HTMLの<!--▲その他-->の下（</ul>との間）に、以下のように追記します。
<li class="menu_title"><a href="#>追加したいメニューの名前</a> <ul class="other"> <li>ここに内容</li> </ul> </li>
新たに追加したメニューの中身の幅を変更したい場合
追加したメニューの<ul class="other">のotherの部分を（other2とかblog_partsとか英語で）書き直して保存。
とりあえずここではblog_partsにしたとします。
次にCSSに以下の内容を追加して保存して下さい。
#menu ul.blog_parts { left: -120px; /*メニューの内容が出る位置の値*/ } ul.blog_parts { padding: 5px 10px 10px; width: 200px; /*メニューの内容の幅の値*/ } ul.blog_parts li { margin-top: 5px; }
メニューの内容が出る位置は、マイナス値が増えるほど左に移動します。
以上。
なるべく分かり易く書いたつもりですが、分からないところがあればコメント欄にて受け付けます。
Comment
nito
2009.10.07 at 15:21 | Edit
はじめまして。Clear One のテンプレートに惚れ込んで是非利用したいと思っている者です。CSSの知識がまったくなくくだらない質問で恐縮ですが、Top タイトルのフォントサイズを変更したいのですが、方法がわかりません。。既存のブロック(?)を編集すればよろしいのでしょうか、あるいは特定のクラス(っていうんですか？)を追加する必要があるのでしょうか。ご教示よろしくお願いします。
初めまして。とっても嬉しいお言葉ありがとうございます！
Topタイトルとは、ブログのタイトルのことでしょうか？それとも記事のタイトルのことでしょうか？
ブログのタイトルでしたら、CSSに
/*==================================================
HEAD
==================================================*/
h1 {
}
と書かれているところをまず見つけて頂き、そこに
font-size: ○px;
と追加して書けばフォントサイズをいじることができます。
例えばこんな感じに。
h1 { font-size: 16px; }
記事のタイトルでしたら、
/*==================================================
CONTENTS
==================================================*/
/*--------------------------------------------------
記事
--------------------------------------------------*/
のちょっと下の
h2 {
margin: 0 22px;
padding: 4px 0 0;
font-size: 12px;
}
この部分のfont-size: 12px;をいじれば好みの大きさに変化します。
好きなようにカスタマイズしたいという思う気持ちはとてもよく分かるので、どんどん質問して下さい。
私の分かる範囲でしたらいくらでもお答えしますので、またお気軽にいつでもどうぞ(`・ω・´)
From Master | 2009.10.07 at 21:26
nito
2009.10.08 at 13:45 | Edit
こんにちは。早速のご回答どうもありがとうございます！
おかげで思い通りにブログ タイトルのサイズを変更することができました。
またまた別件で申し訳ないのですが、メニューの位置に関する質問がございます。
ブログのタイトルおよび説明文をページ中央に配置しようと思いそちらはできたのですが、その下の CALENDER、ENTRIES、CATEGORIES... など一連のメニューを
それに合わせて中央配置できないかと四苦八苦しております。
浅学ながら、"レイアウト" にある #menu の position をうまいこと
いじればいいのかなと思いいろいろ試したのですが、メニューの一部が折り返されてしまったり、
記事のタイトルに重なってしまったりで挫折してしまいました。。
もしこのようなことが可能であればヒントなど教えていただけると助かります。
どうぞよろしくお願いします。
今日台風凄かったですねー。外に出していたハンガーが全部どっかに飛んでしまって、泣く泣く今日新しいのを買って帰りました('A`)ﾉ
そんなことはどうでもよくて。
本題ですが、メニューの位置は"レイアウト"にある#menuのpaddingをいじるのが一番簡単じゃないかなーと思います。
#menu {
position: relative;
list-style: none;
margin: 0 2px;
padding: 0 5px; ←ここを padding: 0 30px;など
メニュー部分が落ちてしまったりしないよう上手く中央寄せ出来たら、0を2つ増やしてpadding: 0 0 0 ◆px;にしてあげてください（◆は中央寄せした時の値）。そうすると他のブラウザで見てもフォントの関係等でメニュー部分が落ちてしまうのを防げると思います。
勝手に中央寄せしてくれるようにするには、一つ一つのメニュータイトルの横幅を計って、htmlでそれぞれのメニュータイトル部分にそのクラスを指定してあげ、更に#menuにtext-align:center;を指定し、#menu_titleの部分にmargin: auto 0;を指定して～…とかなり面倒臭い事になってしまいます。
もしそちらの方が良い！って事でしたら、またコメントに書いてくださればhtmlとcssをtxt化したものをアップしますー。
From Master | 2009.10.08 at 21:15
nito
2009.10.09 at 11:09 | Edit
こんにちは。台風すごかったですね。電車が全滅でした。カツラもふっとびました。
またまた迅速でわかりやすいご回答どうもありがとうございました！
padding の値を変更することで問題なくメニューの位置を変更することができました。
もう一方の方法は複雑そうなのでいつかまたにします。
これからもちょくちょく質問させていただくかもしれませんが、どうぞよろしくおねがいします。
ちゃんと位置変更出来たみたいでよかったです！
コメントに気づくのがちょっと遅くなる時もありますが、質問はいつでも受け付けているのでまたお気軽にどうぞー。
From Master | 2009.10.09 at 20:39
nito
2009.10.15 at 17:34 | Edit
こんにちは、先日はメニューの位置変更について教えていただきありがとうございました。
またまたメニュー部分に関する質問がありお邪魔させていただきました。
#menuのpaddingの値を変更することによって位置を調整することができたのですが、
IE7で表示すると、メニューの文字列の一部が隠れてしまうという現象が起きています。
テンプレートでいうと、'COM&TB'、'LINKS'、'OTHER' が、
それぞれ 'CO'、'LI'、'OT' のようになってしまいます (その他のメニューは問題なし)。
なお、メニューの中身については正常に表示されております。
IE6、Google Chrome、または FireFox では同様の問題は起こらないのです。。
なぜ IE7 だけで発生してしまうのでしょうか。。
これは、各メニューの幅を固定したりして解決できることなのでしょうか。
よろしくお願いします。
返事が遅れてしまって申し訳ありません。
もしかしたらもう解決しちゃったかもしれませんね…(´・ω・`)
#menuのpaddingを変更すると、メニューの文字列が一部隠れてしまう～…との事ですが、私の方では問題ありませんでした。
もし宜しければ該当URL、又はhtmlとcssをアップして見せて頂けると対処出来ると思います。
IE7のバグかなー？と思って色々調べてみたもののそれらしきものは出てこなかったので、多分htmlやcssを変更した際に他の箇所も間違って変更してしまった、というのが一番有り得ると思います。
From Master | 2009.10.17 at 00:18
MYZK
2009.10.26 at 22:12 URL | Edit
はじめまして。テンプレアワードで見つけ、使わせていただいております。洗練されたデザインとプラグインの素晴らしさに惚れ込んでおります。
一つご教示願いたいのですが、貼った画像の外枠（黒い線）を消すにはどうしたら良いでしょうか？
初心者質問で大変恐縮ですが宜しくお願い致します。
初めまして、返信が遅くなってしまって申し訳ありません。
画像の外枠を外すには、CSSの275行目あたり、
/*--記事内画像------------------------------------*/
div.entry img {
margin: 5px;
padding: 1px;
border: 1px solid #ccc;
}
と書いてあるところを見つけて下さい。
そこのborder: 1px solid #ccc;を削除すれば画像の外枠が消えます。
外枠を削除するとなると画像の内側の余白もいらないと思うので、padding: 1px;も同じく削除してしまって下さい。
また何かあればどうぞー。
From Master | 2009.10.31 at 18:24
nito
2009.11.09 at 13:50 URL | Edit
Masterさんこんにちは。
IE7 でメニューの文字列の一部が欠損する問題ですが、こちらはあきらめることにしました。
またまたご相談させていただきたい別の問題が浮上してしまいました。
フォントやフォントサイズやらいじくっていたら、メニュー内のカレンダーのレイアウトが崩れてしまいます。。
日付を仕切るマス目(?)が均等でなくなってしまうのです。。
水曜日と木曜日がビローンと広がってしまったのですが、
水曜日と木曜日は特別な曜日ではないので、強調する必要がないのです。
何か間違った値を触ってしまったのだと思いますが、対応策がわかりません。
お手数をおかけしますが、診察お願いできますか。
CSS拝見させて頂きました。
カレンダーの件は、CSSの224行目～228行目の
#menu ul li table.calendar td a {
display: block;
width: 24px;
background: none #fafafa;
}
にpadding: 0;を追加してあげて下さい。
#menu ul li table.calendar td a {
display: block;
padding: 0;
width: 24px;
background: none #fafafa;
}
こんな感じに。
あと文字列の一部が欠損する～っていうのは、CSSの97行目～104行目
#menu {
position: relative;
list-style: none;
margin: 0 2px;
padding: 0 170px;
height: 30px;
background: url(画像のURL) repeat-x;
}
のpadding: 0 170px;をpadding: 0 0 0 170px;にすれば直ると思います。
もしまだ直らないようでしたら、お手数ですが再度コメントお願いします。
From Master | 2009.11.15 at 14:24
nito
2009.11.17 at 12:25 | Edit
こんにちは。
おかげさまで問題の個所を修正することができました。
本当にありがとうございます！