2006.07.20
rounded
角丸です。本文とか中のほうはサッパリしすぎかも。
各部に指定されている背景色を変えることで簡単に雰囲気を変えることも出来ます。
*ライブドアからの移植作品です。
上のプレビュー画像はWinIE6で表示させたときのものです。
他のブラウザでは表示が若干違うかもしれません。
» PREVIEW
7/23追記：絵文字に背景色がついてしまっていたので修正しました。
このテンプレートの使用上の注意
それぞれの幅は全体幅900px固定、コンテンツ(記事)部分600px固定、サイドバー部分300px固定です。
全体幅が900pxありますのでSVGA(800x600)の画面の方にはあまりやさしくないです。
おすすめカスタマイズ。
記事のはじめにも書いてありますが、ヘッダ部(黒色)、横カレンダー部(桃色)、コンテンツ部(水色)、サイドバー部(黄色)、フッタ部(緑色)のそれぞれの背景色を変更する事で簡単に雰囲気を変えることが出来ます。
CSSの修正箇所も少なくて簡単なので、配布しているままの色が気に入らなかったり個性を出したい方は挑戦してみてください。
ヘッダ部(黒色)
#banner {
～
background-color: #333;
～
}
横カレンダー部(桃色)
#calendar {
～
background-color: #ece;
～
}
コンテンツ部(水色)
#content {
～
background-color: #cee;
～
}
サイドバー部(黄色)
#links {
～
background-color: #eec;
～
}
フッタ部(緑色)
#footer {
～
background-color: #cec;
～
}
以上に記述したCSSのそれぞれの赤い文字部分をお好みのカラーコードに変更してみてください。 コードについては「カラーコード」「色見本」などで検索すれば参考サイトがたくさん引っ掛かりますのでそちらを参照して下さい。 他の文字色やリンク文字色などは適宜お好きな色へどうぞ。
横カレンダーを消したい場合は #calendar { }中に
display: none;
という一文を入れると消せます。消した方がスマートかも。
使用条件、カスタマイズや加工などについて。
このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。
画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。
このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。
制作環境。
OS：WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ：Firefox1.5.0.4、Opera9、InternetExplorer6、Netscape8.1
IE使用時の文字サイズ：中
スポンサーサイト
この記事へのトラックバックURL
http://cie.blog11.fc2.com/tb.php/34-703ed637
この記事へのトラックバック
ひさびさにブログのデザインを変更したみた。
●変更動機
・旧テンプレートは実はHTML 4.01
・新テンプレートのシンプルさにほれた。
●...
ブログのデザインを変更してみた | 「そん」の気ままなLOG at 2009.06.27 12:56
この記事へのコメント
初めまして。
コメント欄について質問します。
コメントにタイトルを入力できるようにしたいのですが、どうすればいいでしょうか？
そして、最近のコメント欄にタイトルを表示させたいのですが。。。
どうがよろしくお願いします。
コメント欄について質問します。
コメントにタイトルを入力できるようにしたいのですが、どうすればいいでしょうか？
そして、最近のコメント欄にタイトルを表示させたいのですが。。。
どうがよろしくお願いします。
Posted by chissayuki at 2006.08.01 12:54 | 編集
chissayukiさん初めまして。
> コメントにタイトルを入力できるようにしたい
> 最近のコメント欄にタイトルを表示させたい
少しわかりづらくてむずかしいかもしれませんが・・・
まずHTMLテンプレート部分の
<input type="hidden" id="subject" name="comment[title]" value="Re: <!--topentry--><%topentry_title><!--/topentry-->" />
という記述をまず消します。
次に
<tr>
<td valign="top"><label for="url">URL: </label></td>
<td><input id="url" name="comment[url]" accesskey="6" tabindex="5" value="<%cookie_url>" /></td>
</tr>
このすぐ下に
<tr>
<td valign="top"><label for="subject">SUBJECT: </label></td>
<td><input type="hidden" id="subject" name="comment[title]" value="" /></td>
</tr>
これを入力します。
（これでコメントタイトルの入力欄が表示されます）
つぎに
<!--comment-->
<div id="comment<%comment_no>" class="comments-body"><%comment_body></div>
ここを
<!--comment-->
<div class="comments-title" id="comment<%comment_no>"><%comment_title></div>
<div class="comments-body"><%comment_body></div>
という風に変更します。
(これでコメント本文の上にコメントタイトルが表示されます)
続いてCSS部分に
input#subject {width: 300px;}
と
.comments-title {
font-size: 1em;
font-weight: bold;
color: #444;
padding: 1em 0.8em 0.5em;
}
を入力します。
#CSSは適当に調節してください。
（これで入力欄とコメントタイトル表示部分のスタイルを設定しました）
つぎにサイドバーにコメントタイトルを表示させるには(プラグイン無効の場合です)
HTMLテンプレート部分の
<!--rcomment-->
<li>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_body>"><%rcomment_etitle></a> <span>(<%rcomment_name>)</span>
</li>
<!--/rcomment-->
ここを
<!--rcomment-->
<li>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_body>"><%rcomment_etitle></a> :<%rcomment_title> <span>(<%rcomment_name>)</span>
</li>
<!--/rcomment-->
このように変更してください。
プラグイン有効の場合はプラグインの「最新のコメント」の「HTMLの編集」から編集してみてください。
長くなりましたが以上です。
難しいかもしれませんが、ゆっくり確認しながら慎重に作業してくださいね。
> コメントにタイトルを入力できるようにしたい
> 最近のコメント欄にタイトルを表示させたい
少しわかりづらくてむずかしいかもしれませんが・・・
まずHTMLテンプレート部分の
<input type="hidden" id="subject" name="comment[title]" value="Re: <!--topentry--><%topentry_title><!--/topentry-->" />
という記述をまず消します。
次に
<tr>
<td valign="top"><label for="url">URL: </label></td>
<td><input id="url" name="comment[url]" accesskey="6" tabindex="5" value="<%cookie_url>" /></td>
</tr>
このすぐ下に
<tr>
<td valign="top"><label for="subject">SUBJECT: </label></td>
<td><input type="hidden" id="subject" name="comment[title]" value="" /></td>
</tr>
これを入力します。
（これでコメントタイトルの入力欄が表示されます）
つぎに
<!--comment-->
<div id="comment<%comment_no>" class="comments-body"><%comment_body></div>
ここを
<!--comment-->
<div class="comments-title" id="comment<%comment_no>"><%comment_title></div>
<div class="comments-body"><%comment_body></div>
という風に変更します。
(これでコメント本文の上にコメントタイトルが表示されます)
続いてCSS部分に
input#subject {width: 300px;}
と
.comments-title {
font-size: 1em;
font-weight: bold;
color: #444;
padding: 1em 0.8em 0.5em;
}
を入力します。
#CSSは適当に調節してください。
（これで入力欄とコメントタイトル表示部分のスタイルを設定しました）
つぎにサイドバーにコメントタイトルを表示させるには(プラグイン無効の場合です)
HTMLテンプレート部分の
<!--rcomment-->
<li>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_body>"><%rcomment_etitle></a> <span>(<%rcomment_name>)</span>
</li>
<!--/rcomment-->
ここを
<!--rcomment-->
<li>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_body>"><%rcomment_etitle></a> :<%rcomment_title> <span>(<%rcomment_name>)</span>
</li>
<!--/rcomment-->
このように変更してください。
プラグイン有効の場合はプラグインの「最新のコメント」の「HTMLの編集」から編集してみてください。
長くなりましたが以上です。
難しいかもしれませんが、ゆっくり確認しながら慎重に作業してくださいね。
ありがとうございました。
さっそくやってみましたが、なかなかうまくいきません。
コメント記入時にＳＵＢＪＥＣＴとは表示されるのですが、記入欄が表示されないため記入できません。
何度かやってみましたが、同じ結果です。
もう一度ちょうせんしてみますが、何か原因がわかりましたら教えていただけませんか？
よろしくお願いします。
さっそくやってみましたが、なかなかうまくいきません。
コメント記入時にＳＵＢＪＥＣＴとは表示されるのですが、記入欄が表示されないため記入できません。
何度かやってみましたが、同じ結果です。
もう一度ちょうせんしてみますが、何か原因がわかりましたら教えていただけませんか？
よろしくお願いします。
Posted by chissayuki at 2006.08.02 10:47 | 編集
大変失礼いたしました。
1つ目の青文字の部分を
<tr>
<td valign="top"><label for="subject">SUBJECT: </label></td>
<td><input id="subject" name="comment[title]" value="" /></td>
</tr>
このようにして下さい。
原因はinputタグ内の type="hidden" を消すのを忘れていたことでした。
これで入力欄も表示されるはずです。
1つ目の青文字の部分を
<tr>
<td valign="top"><label for="subject">SUBJECT: </label></td>
<td><input id="subject" name="comment[title]" value="" /></td>
</tr>
このようにして下さい。
原因はinputタグ内の type="hidden" を消すのを忘れていたことでした。
これで入力欄も表示されるはずです。
おはようございます。
入力欄、無事に表示でき、タイトルの入力もできました。
ありがとうございました。
しかし、サイドバーにコメントタイトルが表示されません。
上の指示通りに変更したのですが。。。
できれば、本文はナシでタイトルを表示させたいのですが。
何度も申し訳ありませんが、よろしくお願いします。
入力欄、無事に表示でき、タイトルの入力もできました。
ありがとうございました。
しかし、サイドバーにコメントタイトルが表示されません。
上の指示通りに変更したのですが。。。
できれば、本文はナシでタイトルを表示させたいのですが。
何度も申し訳ありませんが、よろしくお願いします。
Posted by chissayuki at 2006.08.03 07:38 | 編集
chissayukiさんこんばんは。
「プラグインの設定」から「最新のコメント」の欄、「HTMLの変更」を選択します。
表示されたページの枠の中は
<ul>
<!--rcomment-->
<li &align>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>"><%rcomment_name>:<%rcomment_body> (<%rcomment_month>/<%rcomment_day>)</a>
</li>
<!--/rcomment-->
</ul>
こんな感じになっていると思いますので、ここを
<ul>
<!--rcomment-->
<li &align>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>"><%rcomment_name>:<%rcomment_title> (<%rcomment_month>/<%rcomment_day>)</a>
</li>
<!--/rcomment-->
</ul>
このように変更してみてください。
「プラグインの設定」から「最新のコメント」の欄、「HTMLの変更」を選択します。
表示されたページの枠の中は
<ul>
<!--rcomment-->
<li &align>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>"><%rcomment_name>:<%rcomment_body> (<%rcomment_month>/<%rcomment_day>)</a>
</li>
<!--/rcomment-->
</ul>
こんな感じになっていると思いますので、ここを
<ul>
<!--rcomment-->
<li &align>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>"><%rcomment_name>:<%rcomment_title> (<%rcomment_month>/<%rcomment_day>)</a>
</li>
<!--/rcomment-->
</ul>
このように変更してみてください。
お陰様でうまくいきました。
大変お世話になりました。
ありがとうございました。
大変お世話になりました。
ありがとうございました。
Posted by chissayuki at 2006.08.04 13:24 | 編集
初めまして。こちらのテンプレートが気に入って利用させて頂いております。
お伺いしたい内容ですが、画像の表示の際に自動的に枠が表示されるかと思いますが
これを表示されないようにすることは可能ですか？
また自分の意図に合わせて普通の枠を表示したりすることも出来ますか？
（自動的に表示される枠はグレーの薄い枠ですがこれを黒で表示したい・・・など）
わかりづらい説明で申し訳ございません。
宜しくお願い致します。
お伺いしたい内容ですが、画像の表示の際に自動的に枠が表示されるかと思いますが
これを表示されないようにすることは可能ですか？
また自分の意図に合わせて普通の枠を表示したりすることも出来ますか？
（自動的に表示される枠はグレーの薄い枠ですがこれを黒で表示したい・・・など）
わかりづらい説明で申し訳ございません。
宜しくお願い致します。
Posted by リス at 2006.09.25 23:00 | 編集
リスさんはじめまして。
テンプレートをご利用くださりありがとうございます。
画像に自動で枠を表示させず、尚且つ表示させたい時は表示させるようにするには。
スタイルシートの
.main img,
.mainmore img {
padding: 4px;
background: #eee;
border: 1px solid #ddd;
margin: 0 3px 3px 0;
}
この部分を
.main .pict,
.mainmore .pict {
padding: 4px;
background: #eee;
border: 1px solid #ddd;
margin: 0 3px 3px 0;
}
とすれば、基本的に画像に枠はつきません。
枠を表示させたい時は画像タグに
<img src="uri" class="pict" />
このようにclassを指定してから、投稿されると表示されるようになります。
枠の色をグレーから黒にしたい場合は上の
background: #eee;
の部分を
background: #000;
に変更するとかして下さい。
テンプレートをご利用くださりありがとうございます。
画像に自動で枠を表示させず、尚且つ表示させたい時は表示させるようにするには。
スタイルシートの
.main img,
.mainmore img {
padding: 4px;
background: #eee;
border: 1px solid #ddd;
margin: 0 3px 3px 0;
}
この部分を
.main .pict,
.mainmore .pict {
padding: 4px;
background: #eee;
border: 1px solid #ddd;
margin: 0 3px 3px 0;
}
とすれば、基本的に画像に枠はつきません。
枠を表示させたい時は画像タグに
<img src="uri" class="pict" />
このようにclassを指定してから、投稿されると表示されるようになります。
枠の色をグレーから黒にしたい場合は上の
background: #eee;
の部分を
background: #000;
に変更するとかして下さい。
早々とご丁寧に有難うございました。
早速やってみたところ、枠を非表示にすることが出来ました。
ただ意図的に表示したいときの<img src="uri" class="pict" />についてはよくわからず、出来ませんでした。
今まで別のテンプレを使用してましたが、その時は普段は非表示（border="0"）で
自分が表示したいときは画像タグにborder="2"という風にやってました。
当方あまり詳しくはわからないのでご面倒お掛けし申し訳ございません。
宜しくお願い致します。
早速やってみたところ、枠を非表示にすることが出来ました。
ただ意図的に表示したいときの<img src="uri" class="pict" />についてはよくわからず、出来ませんでした。
今まで別のテンプレを使用してましたが、その時は普段は非表示（border="0"）で
自分が表示したいときは画像タグにborder="2"という風にやってました。
当方あまり詳しくはわからないのでご面倒お掛けし申し訳ございません。
宜しくお願い致します。
Posted by リス at 2006.09.26 00:02 | 編集
ちょっと説明省きすぎてましたね。すみません。
<img src="uri" class="pict" />
がいわゆる画像タグなので
いつも枠をつける時には
border="2"を入れているように
これからは枠をつける時には画像タグに
class="pict"を入れるだけでいいんです。
今まで投稿された記事については、かなり面倒ですがそれぞれ編集していかなくてはなりません。
<img src="uri" class="pict" />
がいわゆる画像タグなので
いつも枠をつける時には
border="2"を入れているように
これからは枠をつける時には画像タグに
class="pict"を入れるだけでいいんです。
今まで投稿された記事については、かなり面倒ですがそれぞれ編集していかなくてはなりません。
度々有難うございました！
教えていただいたとおりにしたら出来ました。
色々お手数お掛けし申し訳ございませんでした。
有難うございました。
教えていただいたとおりにしたら出来ました。
色々お手数お掛けし申し訳ございませんでした。
有難うございました。
Posted by リス at 2006.09.26 00:39 | 編集
このコメントは管理人のみ閲覧できます
Posted by at 2006.10.20 00:50 | 編集
匿名の方はじめまして。返信が遅くなってしまい大変申し訳ありません。
文字装飾と絵文字に関しましては、こちらを参考にされると良いかと存じます。
http://blog.blog2.fc2.com/blog-entry-18.html
アドバイスですが、上の記事をしっかり読みじっくり確認しながら作業すればうまく行くと思いますよ。
テキストエディタ（メモ帳など）に一度HTMLテンプレートをコピーして、エディタ上で作業された方がやりやすいかもしれません。
文字装飾と絵文字に関しましては、こちらを参考にされると良いかと存じます。
http://blog.blog2.fc2.com/blog-entry-18.html
アドバイスですが、上の記事をしっかり読みじっくり確認しながら作業すればうまく行くと思いますよ。
テキストエディタ（メモ帳など）に一度HTMLテンプレートをコピーして、エディタ上で作業された方がやりやすいかもしれません。
はじめまして。
シンプルなところと、いろいろ配色を変えて楽しめるところが気に入って、利用させていただきました。
ところで質問なのですが、一番上のタイトルバナーの部分にカウンターを設置することはできるのでしょうか？
以前使っていたテンプレートでは、HTMLを編集してタイトルの下にカウンターを表示させていたので、もしこちらのテンプレートでも可能だったらやってみたいと思うのですが･･･
ちなみに、HTMLのバナー部分にカウンターのHTMLを挿入してみたのですが、うまくいきませんでした＾＾；
タイトルの下に、右寄せで表示させる方法がありましたら、教えていただけると嬉しいです。
長々とすみません。よろしくお願いします。
シンプルなところと、いろいろ配色を変えて楽しめるところが気に入って、利用させていただきました。
ところで質問なのですが、一番上のタイトルバナーの部分にカウンターを設置することはできるのでしょうか？
以前使っていたテンプレートでは、HTMLを編集してタイトルの下にカウンターを表示させていたので、もしこちらのテンプレートでも可能だったらやってみたいと思うのですが･･･
ちなみに、HTMLのバナー部分にカウンターのHTMLを挿入してみたのですが、うまくいきませんでした＾＾；
タイトルの下に、右寄せで表示させる方法がありましたら、教えていただけると嬉しいです。
長々とすみません。よろしくお願いします。
ありゅーるさんはじめまして。
返信が大変遅くなってしまい申し訳ありません。[しゅん]
いろいろとありましたもので遅れてしまいました。[さけび]
問題どうやら解決されてるようですので大丈夫ですかね。
#なんかコメント投稿する時に確認の画面が出るようになったんですねぇ。わずらわしいな。
返信が大変遅くなってしまい申し訳ありません。[しゅん]
いろいろとありましたもので遅れてしまいました。[さけび]
問題どうやら解決されてるようですので大丈夫ですかね。
#なんかコメント投稿する時に確認の画面が出るようになったんですねぇ。わずらわしいな。
こんにちは、質問をお願いします。
スクロールバーを自分の好みの色に設定したいと思ってるのですが、スタイルシートを使って試したのですが変わりませんでした。
ソースの挿入場所が間違っていたのかもしれませんが、どうすればいいのかわからなかったので教えてください。
宜しくお願い致します。
スクロールバーを自分の好みの色に設定したいと思ってるのですが、スタイルシートを使って試したのですが変わりませんでした。
ソースの挿入場所が間違っていたのかもしれませんが、どうすればいいのかわからなかったので教えてください。
宜しくお願い致します。
Posted by リス at 2007.01.23 20:26 | 編集
リスさん初めまして。
テンプレートのご利用ありがとうございます。[にこっ]
スクロールバーの色に関してはこちらを参考にしてみてください。
http://blog.livedoor.jp/cie/archives/6241191.html#i4
HTMLに直接書くのではなくスタイルシートに記述する方が管理が楽ですよ。
テンプレートのご利用ありがとうございます。[にこっ]
スクロールバーの色に関してはこちらを参考にしてみてください。
http://blog.livedoor.jp/cie/archives/6241191.html#i4
HTMLに直接書くのではなくスタイルシートに記述する方が管理が楽ですよ。
このコメントは管理人のみ閲覧できます
Posted by at 2007.01.27 00:03 | 編集
はじめましてｍ（＿）ｍ
ＨＴＭＬを１週間前から勉強しはじめたウッチと申します。
（２７歳です＾＾）
ところで僕は、cieさんのこのテンプレートのセンスの良さに感動しております。
特に、ＸＨＴＭＬ、ＣＳＳの文法（？）の美しさとブログデザインのセンスの良さににです。
他の方のテンプレートにＸＨＴＭＬで書かれたものは少なく、こんなにセンスが良いものは見たことがありません。
本当に素晴らしです（＾＾）
さて、今回コメントさせて頂いたのは、感動をお伝えする為と、素人の僕から『質問』をさせていただきたかったのです。
その内容ですが、まず、ｈ２タグを機能させるにはどこにテキストを書き込めばいいのでしょうか？
例えばｈ１タグは、ブログの環境設定の中になるタイトル欄にテキストを書けば、それがｈ１として機能します。
でもｈ２を機能させる場所がわかりません。
素人なので全く分かりません
（＾＾；）
もしお時間ありましたら教えていただけたら嬉しいです。
僕もcieさんのような、こんなセンスのいいブログ、ＨＰが作れるようにがんばります。
失礼致します。
ウッチ
ＨＴＭＬを１週間前から勉強しはじめたウッチと申します。
（２７歳です＾＾）
ところで僕は、cieさんのこのテンプレートのセンスの良さに感動しております。
特に、ＸＨＴＭＬ、ＣＳＳの文法（？）の美しさとブログデザインのセンスの良さににです。
他の方のテンプレートにＸＨＴＭＬで書かれたものは少なく、こんなにセンスが良いものは見たことがありません。
本当に素晴らしです（＾＾）
さて、今回コメントさせて頂いたのは、感動をお伝えする為と、素人の僕から『質問』をさせていただきたかったのです。
その内容ですが、まず、ｈ２タグを機能させるにはどこにテキストを書き込めばいいのでしょうか？
例えばｈ１タグは、ブログの環境設定の中になるタイトル欄にテキストを書けば、それがｈ１として機能します。
でもｈ２を機能させる場所がわかりません。
素人なので全く分かりません
（＾＾；）
もしお時間ありましたら教えていただけたら嬉しいです。
僕もcieさんのような、こんなセンスのいいブログ、ＨＰが作れるようにがんばります。
失礼致します。
ウッチ
Posted by ウッチ at 2007.03.07 15:53 | 編集
ウッチさんはじめまして。
色々とありがとうございます。大した事無いのになんかこそばゆいです……[汗2]
えーと……機能させる場所というのがちょっとよくわからないのですけれども
Hnタグは Heading＝見出し という意味を持ったタグですから
H2タグはブログタイトル(H1)の次、記事タイトルなんかで使われるとよいのではないでしょうか。
#ウチのテンプレでも記事タイトルにH2タグが設定されています。
んーちょっと質問とずれてますかね……
色々とありがとうございます。大した事無いのになんかこそばゆいです……[汗2]
えーと……機能させる場所というのがちょっとよくわからないのですけれども
Hnタグは Heading＝見出し という意味を持ったタグですから
H2タグはブログタイトル(H1)の次、記事タイトルなんかで使われるとよいのではないでしょうか。
#ウチのテンプレでも記事タイトルにH2タグが設定されています。
んーちょっと質問とずれてますかね……
ウッチです。
お忙しい中、質問に対してお時間をとってくださってありがとうございます。[さけび]
とても嬉しいです[にこっ]
質問がわかり辛いですよね[汗2]
実は今ＳＥＯの勉強をしないといけなくなりまして、ＳＥＯで有名なサイト『Su-Jine』さんのサイトで自分のブログでいろいろ試し、実験して慣れようとしていました。
そんな時にＳＥＯで重要タグh1,h2,h3
がどのキーワードにスポットがあたっているかを調べていたら、質問させてもらったようにh1タグ以外機能していないのです。
何の事やらわからないと思いますので、実際にこちらの『Su-Jine』さんのツールで試してみて頂けませんでしょうか？？
http://www.su-jine.com/sujine_seo_virtualgoogle.php
h1以外なぜかスポットがあたっていないのです。
なぜでしょうか？
そもそもこのツールを信用しすぎが良くないのでしょか（＾＾；）
お手数ですがヨロシクお願いします（＞＜）
お忙しい中、質問に対してお時間をとってくださってありがとうございます。[さけび]
とても嬉しいです[にこっ]
質問がわかり辛いですよね[汗2]
実は今ＳＥＯの勉強をしないといけなくなりまして、ＳＥＯで有名なサイト『Su-Jine』さんのサイトで自分のブログでいろいろ試し、実験して慣れようとしていました。
そんな時にＳＥＯで重要タグh1,h2,h3
がどのキーワードにスポットがあたっているかを調べていたら、質問させてもらったようにh1タグ以外機能していないのです。
何の事やらわからないと思いますので、実際にこちらの『Su-Jine』さんのツールで試してみて頂けませんでしょうか？？
http://www.su-jine.com/sujine_seo_virtualgoogle.php
h1以外なぜかスポットがあたっていないのです。
なぜでしょうか？
そもそもこのツールを信用しすぎが良くないのでしょか（＾＾；）
お手数ですがヨロシクお願いします（＞＜）
Posted by ウッチ at 2007.03.09 17:29 | 編集
なるほど。[うんうん]
そうですねー。こういう類のツールに関してはあまり信用しすぎない方が良いかもしれません。他に似たようなツールがあるならいくつか試してみると良いかと思います。
とりあえず上のツールをここと本サイトで試してみましたけど、確かに記事タイトルにH2タグを指定しているのにうまく行ってませんね。
記事本文中のH2やH3には反応しているのでなんともいえないんですけれども、もしかするとHnタグにclassやidを設定しているとうまく行かないのかもしれません。
SEOに関しては無料で情報を出してくれるようなサイトは少ないようなので、いろいろと大変かもしれませんががんばってください。[さむあっぷ]
そうですねー。こういう類のツールに関してはあまり信用しすぎない方が良いかもしれません。他に似たようなツールがあるならいくつか試してみると良いかと思います。
とりあえず上のツールをここと本サイトで試してみましたけど、確かに記事タイトルにH2タグを指定しているのにうまく行ってませんね。
記事本文中のH2やH3には反応しているのでなんともいえないんですけれども、もしかするとHnタグにclassやidを設定しているとうまく行かないのかもしれません。
SEOに関しては無料で情報を出してくれるようなサイトは少ないようなので、いろいろと大変かもしれませんががんばってください。[さむあっぷ]
お時間とらせてすみません（＾＾；）ありがとうございます。
ところで、cieさんのようなオシャレなブログやＨＰを作れるようになるには一体何から勉強すればよいのでしょうか？
cieさんは１番はじめはどんな勉強されましたか（＾＾）
良かったら初心者の僕にご教授下さいｍ（＿）ｍ
ウッチ
ところで、cieさんのようなオシャレなブログやＨＰを作れるようになるには一体何から勉強すればよいのでしょうか？
cieさんは１番はじめはどんな勉強されましたか（＾＾）
良かったら初心者の僕にご教授下さいｍ（＿）ｍ
ウッチ
Posted by ウッチ at 2007.03.11 22:14 | 編集
何からか？といわれると難しいのですけど、今は(X)HTML→CSSの順番で勉強するのが基本になってると思います。
#私も完璧に覚えて使いこなせているわけではないので日々精進です。
それらが大体使いこなせるようになれば、グラフィックソフトで画像を作れるようにすること。
画像をCSSと組み合わせてあげればもっと凝ったデザインにする事が出来ますよ。
#私はそれほど凝った画像は作れません……[しゅん]
あとはjavascriptとかFlashでしょうかね。
#場合によってはPerlやPHPなども覚えないといけないかも。
ちなみに私の場合、HP自体は5年くらい前、ブログは3年ほど前から手を出しています。
特に書籍を購入したわけでは無いのですけれど、色々なサイト(最初は"とほほのWWW入門"さんだったかな)を巡ったり、参考にしたりして、なんとか中級者くらいにはなれたかなと思います。
そんな感じなのであまり参考にはならないかと思いますけど……一つ言える事は、とにかくどんどん検索して、どんどん試して、どんどん失敗することでしょうか。
#私も完璧に覚えて使いこなせているわけではないので日々精進です。
それらが大体使いこなせるようになれば、グラフィックソフトで画像を作れるようにすること。
画像をCSSと組み合わせてあげればもっと凝ったデザインにする事が出来ますよ。
#私はそれほど凝った画像は作れません……[しゅん]
あとはjavascriptとかFlashでしょうかね。
#場合によってはPerlやPHPなども覚えないといけないかも。
ちなみに私の場合、HP自体は5年くらい前、ブログは3年ほど前から手を出しています。
特に書籍を購入したわけでは無いのですけれど、色々なサイト(最初は"とほほのWWW入門"さんだったかな)を巡ったり、参考にしたりして、なんとか中級者くらいにはなれたかなと思います。
そんな感じなのであまり参考にはならないかと思いますけど……一つ言える事は、とにかくどんどん検索して、どんどん試して、どんどん失敗することでしょうか。
cieさんこんばんは。ウッチです。
丁寧にたくさんアドバイスありがとうございます。
僕も早速その順序で勉強してみますね。
とにかく目標は、読者の方が
「読んで楽しく、見て美しく！」なんてサイトをつくれるようになる事です（＾＾；）
ガンバります！
cieさんお忙しい中、僕に時間をさいて下さいました事、感謝致します。
まだ三寒四温で体調の方崩しやすいですので、お仕事の方も体調管理にお気をつけて頑張って下さい。
ウッチ
丁寧にたくさんアドバイスありがとうございます。
僕も早速その順序で勉強してみますね。
とにかく目標は、読者の方が
「読んで楽しく、見て美しく！」なんてサイトをつくれるようになる事です（＾＾；）
ガンバります！
cieさんお忙しい中、僕に時間をさいて下さいました事、感謝致します。
まだ三寒四温で体調の方崩しやすいですので、お仕事の方も体調管理にお気をつけて頑張って下さい。
ウッチ
Posted by ウッチ at 2007.03.12 23:35 | 編集
初めまして。テンプレート使用させていただきます。
大幅にカスタマイズさせていただいたのですが、お気に障ってしまったらすみません。
ところで、エラー報告をさせてください。内容のないプラグインの表示がおかしくなってるようなんです。
具体的には、うちにはまだコメントが1つもなく、するとサイドバーの「最新のコメント」の領域が下に延びたような、次のプラグインの上とかぶったような形になります。環境はWindowsXP IE6です。Firefox2.0では正常なのですが。カスタマイズ前の状態でも同じくエラーに。cieさんの環境ではいかがでしょう。
大幅にカスタマイズさせていただいたのですが、お気に障ってしまったらすみません。
ところで、エラー報告をさせてください。内容のないプラグインの表示がおかしくなってるようなんです。
具体的には、うちにはまだコメントが1つもなく、するとサイドバーの「最新のコメント」の領域が下に延びたような、次のプラグインの上とかぶったような形になります。環境はWindowsXP IE6です。Firefox2.0では正常なのですが。カスタマイズ前の状態でも同じくエラーに。cieさんの環境ではいかがでしょう。
軟骨キョウ さん、はじめまして。テンプレートのご利用ありがとうございます。
カスタマイズに関しては特に制限しておりませんので、どんどんしていただいてまったく問題ありません。[にこっ]
えーと、問題の件ですがうちのIE6でも同じように表示されています。
IEの互換モードとの兼ね合いでCSSの解釈などが変わってくるため、起こっているのだと思います。
この現象を回避するにはHTMLテンプレートの先頭行の
<?xml version="1.0" encoding="EUC-JP"?>
この記述を削除してみてください。
(X)HTML文法的には若干問題あるのですけれども、IEを標準モードで動作させるにはこれが手っ取り早い方法です。
(X)HTML文法などを気にされるのでしたら、コメントされるまでお待ちになるのが良いかと存じます。
カスタマイズに関しては特に制限しておりませんので、どんどんしていただいてまったく問題ありません。[にこっ]
えーと、問題の件ですがうちのIE6でも同じように表示されています。
IEの互換モードとの兼ね合いでCSSの解釈などが変わってくるため、起こっているのだと思います。
この現象を回避するにはHTMLテンプレートの先頭行の
<?xml version="1.0" encoding="EUC-JP"?>
この記述を削除してみてください。
(X)HTML文法的には若干問題あるのですけれども、IEを標準モードで動作させるにはこれが手っ取り早い方法です。
(X)HTML文法などを気にされるのでしたら、コメントされるまでお待ちになるのが良いかと存じます。
やはりそうでしたか。
迷いましたが、一時的に非表示にしておくことにしました。
ありがとうございました。
迷いましたが、一時的に非表示にしておくことにしました。
ありがとうございました。
初めまして。こちらのシンプルでステキなテンプレートを
先日から使わせて頂いています。
テンプレートをいじった事がほとんどない初心者なのですが
何点かお伺いしたい件があります。
・元デザインの背景(ホワイト)部分の色変更する方法。
・背景以外のタイトルやカレンダーや記事部分のサイズを全体的に縮小する方法。
・コメントのフォントサイズを変更する(本文と同じに)方法。
以上です。初歩的なもので申し訳ありません；
またお手すきな時にでもご教授頂ければ幸いです。宜しくお願い致します。
先日から使わせて頂いています。
テンプレートをいじった事がほとんどない初心者なのですが
何点かお伺いしたい件があります。
・元デザインの背景(ホワイト)部分の色変更する方法。
・背景以外のタイトルやカレンダーや記事部分のサイズを全体的に縮小する方法。
・コメントのフォントサイズを変更する(本文と同じに)方法。
以上です。初歩的なもので申し訳ありません；
またお手すきな時にでもご教授頂ければ幸いです。宜しくお願い致します。
Posted by 葵 at 2007.09.27 02:39 | 編集
葵 さん、はじめまして。
テンプレートのご利用ありがとうございます。[にこっ]
> ・元デザインの背景(ホワイト)部分の色変更する方法。
テンプレートで使っている画像を直接修正すれば可能です。
ダウンロードするにはスタイルシート内の
background: url('～～～')
この赤いところにアクセスして直接ダウンロードしてあげてください。
透過色と白しか使っていませんので、白のところをお好きな色に変更してください。
あとは保存した後、FC2ブログのメニューからアップロードしてもらえればOKです。
> ・背景以外のタイトルやカレンダーや記事部分のサイズを全体的に縮小する方法。
こちらも画像を直接修正してください。
ただ縮小したサイズ分だけ、スタイルシートの
#container, #calendar, #content, #links, #footer のそれぞれの width 値の調整が必要になってきます。
> ・コメントのフォントサイズを変更する(本文と同じに)方法。
スタイルシートの .comments-body { } の中にある
font-size: 0.9em;
の数値を 1em に変更してテンプレートを保存してください。
テンプレートのご利用ありがとうございます。[にこっ]
> ・元デザインの背景(ホワイト)部分の色変更する方法。
テンプレートで使っている画像を直接修正すれば可能です。
ダウンロードするにはスタイルシート内の
background: url('～～～')
この赤いところにアクセスして直接ダウンロードしてあげてください。
透過色と白しか使っていませんので、白のところをお好きな色に変更してください。
あとは保存した後、FC2ブログのメニューからアップロードしてもらえればOKです。
> ・背景以外のタイトルやカレンダーや記事部分のサイズを全体的に縮小する方法。
こちらも画像を直接修正してください。
ただ縮小したサイズ分だけ、スタイルシートの
#container, #calendar, #content, #links, #footer のそれぞれの width 値の調整が必要になってきます。
> ・コメントのフォントサイズを変更する(本文と同じに)方法。
スタイルシートの .comments-body { } の中にある
font-size: 0.9em;
の数値を 1em に変更してテンプレートを保存してください。
はじめまして。
今日このテンプレートをダウンロードさせていただきました田畑と申します。
長い間すばらしいテンプレートを探し、それをやっとみつけることができてうれしいです。
本題ですが、このテンプレートのフォントは変えることができますか？
CSSやHTMLがよくわからないもので困っています。
たとえばメイリオフォントに変えたりしたいのですが、よろしければ方法を教えていただけないでしょうか？
お忙しいところこのような質問をすることをお許しください。
今日このテンプレートをダウンロードさせていただきました田畑と申します。
長い間すばらしいテンプレートを探し、それをやっとみつけることができてうれしいです。
本題ですが、このテンプレートのフォントは変えることができますか？
CSSやHTMLがよくわからないもので困っています。
たとえばメイリオフォントに変えたりしたいのですが、よろしければ方法を教えていただけないでしょうか？
お忙しいところこのような質問をすることをお許しください。
田畑 さん、はじめまして。
ご利用ありがとうございます。
メイリオフォントを指定する場合は、スタイルシートの
body { } の中にある
font-family: Verdana, sans-serif, (省略);
ここを
font-family: Meiryo, Verdana, sans-serif, (省略);
このように編集して保存してあげてください。
ご利用ありがとうございます。
メイリオフォントを指定する場合は、スタイルシートの
body { } の中にある
font-family: Verdana, sans-serif, (省略);
ここを
font-family: Meiryo, Verdana, sans-serif, (省略);
このように編集して保存してあげてください。
アドバイスありがとうございます。
無事メイリオフォントにすることができました。
大変恐縮ですが、まだ伺いたいことがあります。
画像を表示すると、画像の周りに色（灰色）と枠（黒）がついています。
この色を消したり、枠をけしたりすることはできますか？
重ね重ね質問してすいません。
無事メイリオフォントにすることができました。
大変恐縮ですが、まだ伺いたいことがあります。
画像を表示すると、画像の周りに色（灰色）と枠（黒）がついています。
この色を消したり、枠をけしたりすることはできますか？
重ね重ね質問してすいません。
スタイルシートの
.main img,
.mainmore img {
padding: 4px;
background: #eee;
border: 1px solid #ddd;
margin: 0 3px 3px 0;
}
こちらを削除してください。
マージンは残しておいてもいいかもですが。
.main img,
.mainmore img {
padding: 4px;
background: #eee;
border: 1px solid #ddd;
margin: 0 3px 3px 0;
}
こちらを削除してください。
マージンは残しておいてもいいかもですが。
ありがとうございます！
どんどん理想のブログに近づいてきて非常にうれしいです。
本当に恐縮なのですが、まだ質問があります（しつこくて申し訳ありません）
リンクの色はどうやって変えるのでしょうか？全体のイメージを明るくしたいのでリンク色を変えてみたいです。
それから背景の色も変えることができるのでしょうか？
解答よろしくお願いします。
どんどん理想のブログに近づいてきて非常にうれしいです。
本当に恐縮なのですが、まだ質問があります（しつこくて申し訳ありません）
リンクの色はどうやって変えるのでしょうか？全体のイメージを明るくしたいのでリンク色を変えてみたいです。
それから背景の色も変えることができるのでしょうか？
解答よろしくお願いします。
リンクの色だけではどこのリンクの色を変えたいのかわからないのですが、スタイルシートのあちこちに
a, a:link, a:active, a:visited, a:hover, a:focus
このような記述がありますので、その中の color プロパティを変更してください。
背景の色というのは白地のところでしょうか？
それならば、使用している画像の関係上少し難しいかもしれません……
まず、テンプレートで使われている各画像をダウンロードして直接グラフィックソフトで編集してください。その後、アップロードしなおして、スタイルシートの各部分に設定してあげてください。
a, a:link, a:active, a:visited, a:hover, a:focus
このような記述がありますので、その中の color プロパティを変更してください。
背景の色というのは白地のところでしょうか？
それならば、使用している画像の関係上少し難しいかもしれません……
まず、テンプレートで使われている各画像をダウンロードして直接グラフィックソフトで編集してください。その後、アップロードしなおして、スタイルシートの各部分に設定してあげてください。
使わせていただきました！
3年前にリリースされたテンプレなんですね。
スバラシイです。ありがとうございます
3年前にリリースされたテンプレなんですね。
スバラシイです。ありがとうございます
このコメントは管理者の承認待ちです
Posted by at 2010.05.05 10:45 | 編集
この記事へコメントする
| HOME |
