MeaCulpa : [template] kenon

このコメントは管理人のみ閲覧できます

I really like your blog templates ! They're really simple but they have a very good design and they're really awsome ! Very good job !

このコメントは管理人のみ閲覧できます

3番めのコメントの方への返信です★
（返信先が見つからなかったので、こちらで返信させていだいただきますm(_ _)m）

例示されていたような基本的な修正・カスタマイズは全く問題ありませんので、ご自由にどうぞ(*'-')ｂ
細かい規約がないのは、使用者側にあまり制限を加えたくないためで、一般常識の範囲内ならばお好きなように、というのがボクの基本的な考え方となっています。
よほどのことがない限りはボクが口出しすることはないと思うので、安心して好き勝手いじっちゃってくださいませm(_ _)m

このコメントは管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

こんにちわ。初めましてミドリと申します。

先日からこの『kenon』のテンプレートを使わせていただいてるのですが。
本文で、フォントサイズ『１』の文字を使おうとしたんですが、
投稿したら、フォントサイズ『２』になってしまいました。
リアルタイムプレビューで見てる時は、ちゃんと『１』になっていました。

説明が下手ですいません。
出来たら対処法を教えてください。

このコメントは管理人のみ閲覧できます

8番めのコメントの方への返信ですー
（返信先が見つからなかったので、こちらで返信させていだいただきますm(_ _)m）

テンプレートのカスタマイズは今のところ制限は全くしていないので、自由にしちゃって結構ですよ(*'-')ｂ
ただ、画像を変えたりするときは、著作権などが絡んでくるのでお気をつけて。それによって生じた問題はこちらでは一切関知しません。

詳しいカスタマイズの方法などが分からなければ、もう一度コメントに書き込むか、メールフォームからちょこちょこと送って頂ければ対応出来ますので、お気軽にどうぞ★あ、その際は返信先などを忘れないようにしてくださいねm(_ _)m

はじめまして(*'_')さん。イシイと申します。
テンプレートをお借りしました。
No.9のコメントだとカスタマイズ○と解釈致しましたので、原型を崩さない程度にカスタマイズさせて頂きましたが、よろしかったでしょうか？
自分が使っているOSがマックなのでウィンの方にはレイアウトが崩れて表示されているのでは？とヒヤヒヤしています(^_^;A
これからも、素敵なテンプレの作成応援しております。
ではでは、暑い日が続きますがお体ご自愛して下さいませ。

イシイさん初めまして★kenonをお使い頂きありがとうございます！
カスタマイズはご自由になさってOKです(*＾-')b自分もカスタマイズ後のデザインを見て色々と勉強させてもらったりしています。
Winでお邪魔させていただきましたが、デザインはきちんと整っていたので大丈夫ですよ！

テンプレートを使っていて何か疑問に思うことがあれば、お気軽にコメントなりメールなりしてくださいね。それでは失礼しますm(_ _)m

このコメントは管理人のみ閲覧できます

えっと、8番目のコメントをしたものなんですが
テンプレートのサイズ（幅）の変更と
タイトル部分の画像のため高さを変更したのですが
ボクのPCでは問題なく表示されるのですけど
他のPCだとタイトル画像の両端が切れるみたいです
あと、サイドメニューの部分も崩れちゃうみたいで・・・
これはどうすればいいでしょうか？（汗

ゆうさんこんにちは！

タイトル画像の両端が切れるのは、画像の位置が中央(center)に設定されているからです。kenonのレイアウト幅は％指定のため、ブラウザのウィンドウサイズによって可変です。そのため、ウィンドウサイズが小さければ、画像を全部表示しきれずに左右が切れて見えてしまいます。
これは可変レイアウトの難しいところの一つなので、画像をきっちり表示させたい、という場合は、レイアウト幅をピクセル指定にしたほうが良いと思いますー。

サイドメニューが崩れるのは、ゆうさんのページを見させていただいたのですが、bodyのmarginをピクセルで指定しつつ、widthが％指定というのが大きな要因だと思います。marginをピクセルで指定してしまうと、この場合ではウィンドウサイズが小さいときに表示が崩れやすくなるので、%指定にした方が良いかと思います。
もう一つ細かい要因として、コンテンツ部分やサイドメニューの部分に大きめの画像を使用すると、各要素に割り当てられている表示域に収まらなくなってしまい、表示が崩れてしまうことがあります。
応急処置的なやり方ですが、スタイルシートの#page{...}の中に、「 overflow : hidden; 」という一行を追加すると、コンテンツ部分に収まりきらない要素が有った場合でもレイアウトが悲惨な状況になることを避けられます。ただしこれは、はみ出した部分を無視する、という意味の記述なので写真などが全部表示されないという難点もあります（出来れば画像はサムネイルを使って頂きたいなと思ってます…m(_ _)m）

パーセントではなく
一通りピクセルで指定してみました〜
ボクのPCからは正常で知り合いのも
まぁ、いい感じに写ってはいますが
製作者様からみて、書式がヤバイぞ！
ってとこはないでしょうか？（汗

さらりとしか見てませんが、ちょっとだけ。
#titleのなかの background-position:center;は、先に記述されているのbackground内で一括指定されているので必要ないと思います〜。

なるほど〜
早速削減しておきます
ありがとうです〜＾＾

はじめまして。
kenonを今日ダウンロードして使わせて頂いてます。
背景色など少しだけ変えてみたんですが、コメントフォームの「送信」部分の文字と、コメント編集の「編集」「削除」の文字部分が表示されなくなってしまいました＞＜
どうすれば元の通りに表示されるんでしょうか？

あと、背景を黒にしてしまったのがたぶん原因だと思うのですが、サイドメニューの右側の白い余白部分をなくす方法がわかりません。（ボーダーの色と太さを揃えたいです）

初歩的な質問ですが返信よろしくお願いします。

Madderさん初めまして！

早速回答していきたいと思います〜。
まず一つめ、「送信」や「編集」などのボタン系の文字が表示されなくなってしまうという問題について。
これは、デフォルトの状態でボタンなどの要素に対して背景色を白と設定していることが原因です。Madderさんのデザインでは、ページの文字色が白に設定されているため、ボタンなどでは背景色と文字色が一緒になってしまい、文字が見えなくなっているのだとおもいます。
解決策としては、ボタンの背景色を設定するか、ボタンなどの要素に対して文字色を設定することが考えられます。
編集する場所は、どちらも
.submit .form{
　.
　.
}
のところです。
背景色を変える場合には、この中に
　background : #fff;
という行があるので、#fffのところを変更してください。
文字色を変える場合には、
　color : 文字色 ;
を追加してください。


続きまして二つめ、サイドメニューのボーダーに関してですが、実はこの白い余白は、「背景」で設定してあります。それなので、そこを修正しないといけません。
ここは説明するのがめんどくさかったので、修正済みのスタイルを作ってみました。
/*---サブメニュー表示(左側)------------------------------------*/
という記述があるので、そこを探し、以下のもので上書きしてみてください〜。

/*---サブメニュー表示(右側)------------------------------------*/
div#sub-box{
float : left;
position : relative;
margin : 0px;
left : -1px;
width : 30%;
background : #000;
border : 1px solid #9999ff;
border-top : 0px;
}
div#sub{
position : relative;
padding : 1em 2em;
}

ちゃっかり「（右側）」に直してあるのは気のせいです！（使い回していたのを修正するの忘れてましたー）


長々となってしまいましてすみません。
あと、かなりカスタマイズしにくいテンプレートで申し訳ないですー。もっと汎用性のあるテンプレート目指して精進していきます(;'-')ノ

丁寧な説明＆修正済みスタイルのおかげで、無事希望どおりのデザインに変更できました！
ありがとうございました＾＾

いえいえ！初心者のわたしでもわかりやすいように整理されたスタイルシートだったので助かりました。
デザイン（他のテンプレも）もシンプルで使いやすいので、すごく気に入ってます！
素敵なテンプレを使わせて頂き感謝感謝です＾＾

はじめまして。

画像を本文に載せると、画像に枠ができてしまうのですが解消する方法ってありますでしょうヵ？

つくつくさんはじめまして★

本文中の画像のボーダーを取り除くには、次の処理を行ってください。
まず、テンプレートの編集からスタイルシートの編集をひらき、「本文中の各種要素の設定」というところを見つけてください。
そのなかに、
.entry img{
　　border : 1px solid #333;
}
という部分があるので、ここをさくっと消してしまってください。これで枠が消えるはずです。
お手数おかけして申し訳ありませんm(_ _)m

すばやいご返答ありがとうございます＾＾
試してみます。
ありがとうございました♪

このコメントは管理人のみ閲覧できます

24番目のコメントの方への返信です(返信先が無かったのでコチラで…)

タイトルの画像をランダムで替えるということですが、タイトルで使っている背景画像をランダムで替えるのか、タイトル部分自体を画像にしようとしているのかがちょっと分からなかったので、とりあえず両方のやり方を考えてみました。
。

まず最初に、使っているテンプレートが最新かどうかを確認します。
とりあえずテンプレートの編集を開いてください。
HTMLの先頭部分に、<!-- Design [ kenon ] 2006/08/29 -->というのがあるか確認してください。2006/08/29でない場合、最新の物ではないのでダウンロードし直してください。
CSSには、INFOの部分にupdateという項目があります。ここが2006/08/30であることを確認してください。これも、2006/08/30でない場合、最新の物ではないのでダウンロードし直してくださいm(_ _)m


それでは、前者の背景画像を変更する場合についてです。
編集するのはHTMLの方です。
HTMLの最初の方に、
　<div id="title">
という一行があります。ここを書き換えます。書き換えるといってもちょっと長いので、コピー&ペーストで次のものに置き換えてください。

<script type="text/javascript">
<!--
var img=new Array()
img[0]="画像のurl"
img[1]="画像のurl"　
img[2]="画像のurl"
var r=Math.floor(Math.random()*img.length)
document.write('<div id="title" style="background-image:url('+img[r]+') !important;">');
//-->
</script>
<noscript><div id="title"></noscript>

後は「画像のurl」という部分を使いたい画像のurlに置き換えてください。
ここでは0〜2まで勝手に書いていますが、これは2以降も増やせるので、足りないときは増やしてあげたり、そんなにいらないというときは使わない行を消してあげてください。


次に、後者の画像自体を使う場合についてです。
こっちは、HTMLとCSSのどちらも編集する必要があります。
まず、HTMLは、
　<div id="title">
　　<h1><a href="<%url>" title="トップページへ戻る"><%blog_name></a></h1>
　　<h2><%introduction></h2>
という部分を、
<!--
var img=new Array()
img[0]="画像のurl"
img[1]="画像のurl"　
img[2]="画像のurl"
var r=Math.floor(Math.random()*img.length)
document.write('<div id="randomtitle"><h1 id="randomh1"><a href="<%url>"><img src="'+img[r]+'" alt="<%blog_name>"></a></h1>');
//-->
</script>
<noscript>
<div id="title">
<h1><a href="<%url>"><%blog_name></a></h1>
<h2><%introduction></h2>
</noscript>
に置き換えてください。
また、CSSの最後尾に、次の記述を追加してください。

#randomtitle{
border-bottom : 1px solid #333;
border-left : 1px solid #333;
border-right : 1px solid #333;
}
h1#randomh1{
width : 100%;
overflow : hidden;
padding : 0px !important;
}
h1#randomh1 img, h1#randomh1 a{
margin : 0px !important;
padding : 0px !important;
border : none !important;
}

h1#randomh1の中にあるoverflow : hidden;というのは、横方向に画像のサイズが大きいとデザインが崩れてしまうので、それを防ぐためにあるのですが、この記述のせいで画像が全部表示されない、というコトがあるかもしれません。
この作業によって一応画像のランダム表示は出来るようになるとは思うのですが、細かい調整が必要になると思うので、何かあればまた連絡して頂きたいです。


長くなりましたが以上です…。久しぶりに疲れました(´ω｀)

このコメントは管理人のみ閲覧できます

初めまして。ひなまともうします。
横幅可変のテンプレがとても嬉しいです。

「kenon」を使用させて頂くのですが，
タイトル部分の高さを半分くらいにして，
記事がもっと上に上がるようにしたいのですが
どのようにしたらよろしいでしょうか。

お時間があるときにでも教えてくださると嬉しく思います。

ひなまさん初めまして。
kenonをお使い頂きありがとうございます！

タイトル部分の高さの変更ですが、CSSの編集を行います。
テンプレートの編集画面をひらき、スタイルシートの編集からお手数ですが次の記述を探してくださいm(_ _)m

/*---タイトル部分-----------------------*/
#title{
　border-bottom : 1px solid #333;
　border-left : 1px solid #333;
　border-right : 1px solid #333;
　background : #36f url("http://blog55.fc2.com/m/meaculpa/file/style_kenon_title.jpg") no-repeat left top;
　color : #fff !important;
　padding-top : 90px;
　padding-bottom : 80px;
}

このなかの、
　padding-top : 90px;
　padding-bottom : 80px;
この部分でタイトル部分の高さが大体決まっています（上下の余白を設定する記述なのです）。
よって、90pxや80pxとなっている部分の値を小さくすれば高さを小さくすることが出来ます〜。
この辺は好みによって差があると思うので、色々と値を変えて丁度良い大きさを探ってみてくださいm(_ _)m

丁寧にお答えくださりありがとうございました！
おかげさまでタイトルの高さをかえることができました。
これからも素敵なテンプレートを作られるのを期待しています。
頑張ってください。