TOPIC
0223
共有テンプレート・simplest01_2c
---確認環境---
Windows7
IE・Firefox:最新版
無駄のないシンプルな2カラムテンプレート。
始めて質問するときは最初にこちらを読んで下さい。
利用規約はこちらです。
- パソコン用テンプレートの関連記事
-
- 共有テンプレート・refreshing01_2c (2012/03/10)
- 共有テンプレート・simplest01_2c « «
- 共有テンプレート・length03_1c (2012/01/19)
Posted on 2012/02/23 Thu. 23:50 [edit]
category: パソコン用テンプレート
thread: FC2ブログ共有テンプレート - janre: ブログ
tag: 右２カラム« 共有テンプレート・refreshing01_2c | 共有テンプレート・length03_1c »
コメント
このテンプレートを使わせていただいています。
コメントの
URL | ○○ #-----
2012/××/×× ●●:●● | edit
の部分のフォントサイズが極端に大きいのですが、
私のカスタマイズミスでしょうか？
http://control.blog.fc2.com/control.php?mode=design&process=download&no=38962でプレビューしてみてもその部分だけ大きいです。
よろしくおねがいします。
akiさんへ
テンプレートをお使い頂きありがとうございます。
テンプレート自体は特に問題はないと思います。
カスタマイズされたのであればスタイルシートから下記部分のフォントサイズを確認してみてください。
------------------------------
p.com_state {
font-size: 90%;
text-align: right;
margin: 5px 0 20px;
padding: 0 20px;
}
------------------------------
>れんさん
直りました!!
ありがとうございます!!!
こちらのテンプレートを使わせていただいています。
とても気に入っております。
最新記事、最新コメント、月別アーカイブのフォントを小さくしたのですが、
行頭に付いている黒いマルが欠けて半円になってしまいました。
このマルを全て消してしまいたいのですが、そういったことは可能でしょうか？
よろしくお願いいたします。
yayoiさんへ
テンプレートをお使い頂きありがとうございます。
リストマークの削除は可能です。
スタイルシートの編集から下記部分を青字のように変更してください。
------------------------------
.menutext ul li {
margin: 0 0 5px 15px;
padding: 0;
list-style: none;
}
------------------------------
なお今後ご質問の際にはURLの記載をお願いします。
れんさんへ
ご回答有難うございます。
また、URLを記載せず申し訳ありませんでした。
リストマークの削除、早速やってみたらできたのですが、
マークがないとやっぱり何だか解りづらくなってしまい、
取り敢えず元に戻しました。
リストマークが欠けずに丸いままで小さくしたいのですが、
可能でしょうか？
もしくは、れんさんのこのページのように、＞ ←このマークでも
構いませんので、教えて頂けたらと思います。
更にもう2つほど質問させて下さい。
categoryが現状は一番左下ですが、各記事タイトルの
すぐ下辺りに持ってくることは可能でしょうか？
また、ブログタイトル部分には画像は入っていませんが、
小さい画像を入れることは可能ですか？
タイトルの背景という訳ではなく、左端にロゴマークを1つ
入れれたら嬉しいです。
以上、ブログ初心者でいくつも申し訳ありません。
どうぞよろしくお願いいたします。
れん様
こちらのテンプレートをカスタマイズして使用させて頂いています。
質問なのですが、このテンプレートに縦カレンダーを挿入する事は可能でしょうか？
（ちょうど現在のこのブログのように）
自分なりに試行錯誤してみたのですが、どうも上手くいかず……。
もし可能であれば、是非とも方法を教えて頂きたいです。よろしくお願い致します。
Noahさんへ
テンプレートをお使い頂きありがとうございます。
ご質問の件ですが可能です。
記事とプラグインの間に表示させるという形でご説明します。
まずhtmlの編集から青字部分を追加してください。
------------------------------
</div>
<!-- calendar -->
<div id="line-cal">
<div class="now-month"><%now_year>-<%now_month></div>
<ul>
<li class="prev-month-calendar"><a href="<%prev_month_link>" title="<%prev_year>/<%prev_month>">«</a></li>
<!--calender2-->
<li class="day"><%days></li>
<!--/calender2-->
<li class="next-month-calendar"><a href="<%next_month_link>" title="<%next_year>/<%next_month>">»</a></li>
</ul>
</div>
<!-- /calendar -->
<div id="right">
------------------------------
次にスタイルシートに以下を追加します。
------------------------------
#line-cal {
float: left;
width: 20px;
margin-left: 15px;
padding: 0;
}
.now-month { display: none;}
#line-cal ul { text-align: center;}
#line-cal li { list-style-type: none;}
#line-cal a { display: block; width: 20px;}
li.day { margin: 15px 0;}
#line-cal li a:link, #line-cal li a:visited { color: #; text-decoration: ;}
#line-cal li a:hover, #line-cal li a:active { color: #; text-decoration: ;}
------------------------------
テンプレートの仕様上リンクが分かりづらいので必要に応じてcolorやtext-decorationを指定するといいと思います。
＞れん様
ご回答ありがとうございます。無事作成出来ました。
私信（？）ですが、FC2ブログではずっとれん様のテンプレートを使用させて頂いております。
これからもクールなテンプレートを作り続けていって下さい。
はじめまして。
こちらのテンプレートが とってもシンプルで素敵だったので
これから使わせて頂こうと思っています。
写真の周りのラインを無くす事は出来ますでしょうか？
それと 記事のタイトルの文字の色も変更したいのですが
どのようにすれば良いのでしょうか？
お手数ですが よろしくお願い致します。
凛ママさんへ
テンプレートをお使い頂きありがとうございます。
画像の枠に関してはスタイルシートの編集から下記部分を赤字のように変更、backgroundは削除して下さい。
------------------------------
.entrytext img {
margin: 5px;
padding: 0px;
border: none;
background: #FFF;
}
------------------------------
次に記事タイトルだけを変更する場合は同じくスタイルシートへ下記を追加して下さい。
（追加場所はどこでも構いません）
------------------------------
h3.entrytitle a:link { color: #カラーコード;} /* 未訪問のリンク */
h3.entrytitle a:visited { color: #カラーコード;} /* 訪問済みのリンク */
h3.entrytitle a:hover { color: #カラーコード;} /* ポイント時のリンク */
h3.entrytitle a:active { color: #カラーコード;} /* 選択中のリンク */
------------------------------
なおカラーコードに関してはネット検索にてお調べください。
早速のご回答ありがとうございます。
無事にカスタマイズすることができました＾＾
シンプルで、尚且つ可愛らしいテンプレートで
とってもお気に入りになりました♪
こちらのテンプレートがとてもシンプルでスッキリしていて
大変気に入って使わせていただいております
質問なのですが
ブログタイトルのフォントと色の変更方法について
教えていただけませんでしょうか
お忙しいところ 恐れ入ります
どうぞよろしくお願いします
しま法華さんへ
テンプレートをお使い頂きありがとうございます。
ブログタイトルのフォント及びリンク色に関しては青字部分をスタイルシートに追加し、お使いになるフォントとカラーコードを指定してください。
------------------------------
h1 {
font-size: 160%;
font-weight: normal;
margin: 10px 0 0;
padding: 0 10px;
font-family: フォント;
}
h1 a:link {color: #カラーコード;} /* 未訪問のリンク */
h1 a:visited {color: #カラーコード;} /* 訪問済みのリンク */
h1 a:hover {color: #カラーコード;} /* ポイント時のリンク */
h1 a:active {color: #カラーコード;} /* 選択中のリンク */
------------------------------
なお、フォントやカラーコードに関してはネット検索にてお調べください。
「CSS カラーコード」「CSS font-family」等でヒットするhtml関係のサイトに詳しく書かれています。
ヘッダ部分の画像について
れんさん
はじめまして、keyと申します。
このシンプルなテンプレートがとても気に入って、使わせていただいています。ありがとうございます。
さっそくなのですが…。
このテンプレートのヘッダ部分に920px x 300pxの画像を入れたところ、画像が縦横に拡大されて表示されてしまいました。
画像を少し大きくしたり、小さくしたり、と微調整してみましたが、どうもうまくいきません…。
お手数ですが、アドバイスいただけると幸いです。
どうぞよろしくお願いいたします。
keyさんへ
テンプレートをお使い頂きありがとうございます。
ご質問の件ですがブログを複数のブラウザで拝見した限りでは問題ないように見えますが、例えば違う画像であったり特定のブラウザでの問題でしょうか？
ヘッダーへの画像挿入はスタイルシートへ青字部分を追加して頂ければ問題なく表示されると思います。
------------------------------
.header {
margin: 0 0 20px;
padding: 0;
height: 300px;
width: 920px;
background-image: url(画像URL);
}
------------------------------
上記の方法で解決できない場合は、お手数ですが詳細を添えてご返信頂ければ改めて検証したいと思います。
れんさん
さっそくのご回答をありがとうございます。
> ご質問の件ですがブログを複数のブラウザで拝見した限りでは問題ないように見えますが、
はい、その通りでした…。
ご指摘を受けて再度アレコレ試した後、試しにSafariのキャッシュをクリアしたところ、解決いたしました…。貴重なお時間をとらせてしまい、申し訳ありません。
これに懲りず、どうぞ今後ともよろしくお願いいたします。
はじめまして。
こちらのテンプレートがシンプルで
素敵でしたので
お借りしカスタマイズしようとしております。
画像と文章の行間が空きすぎているを
縮めたいのですが
どうしたらよいでしょうか？
ＣＳＳ編集はあまりしたことがないのに
カスタマイズなどやっているので・・・
よろしくお願いします。
あんずミャミャさんへ
ご質問の「画像と行間が空きすぎ」との事ですが、このテンプレートでは特別な設定はしてません。
ブログを拝見すると改行を多く使われている様ですが、それを狭めたいという事でしょうか？
とりあえず以下の方法で可能だと思いますのでスタイルシート末尾に追加してください。
数値は適当にお願いします。
------------------------------
.entrytext br { line-height: 0.5em;}
------------------------------
なお当方の勘違いでしたら、お手数ですが再度詳細にご質問願います。
れんさま
さっそくのお返事ありがとうございました。
私の書き方が下手だったようです。
画像（写真）のすぐ下に説明のよう感じで
文章を入れたいのですが
画像の周りに余白があるのでしょうか？
行間を縮めても
画像との間に余白ができてしまうのです。
これをなくすにはどうしたよいのでしょうか？
あんずミャミャさんへ
記事中の画像に関しては、下記の設定を赤字の様に変更すればお望みの形になるかと思います。
------------------------------
.entrytext img {
margin: 0px;
padding: 0px;
border: none;
background: none;
}
------------------------------
れんさま
ありがとうございました！
おかげさまで理想の形にすることができました。
お忙しいところ
丁寧に教えてくださり助かりました。
無事にテンプレ変更できます（＾＾
質問があります。
れんさま
はじめまして。mijjeと申します。
テンプレートを9月から使わせていただいています。
シンプルで使いやすくて、嬉しいです。
ありがとうございます。
今までは、プライベートで利用していましたが、
公開してみることにしました。
どういう方が訪問されるか知りたくて
アクセス解析を試みているのですが、うまくできません。
<body>を探したのですが、見つからず
</body>の上に解析用HTMLタグ張り付けましたが、
ページの最初にアイコンも表れず、解析も全くされません。
どのようにしたらよいのか、ご教示いただきたいです。
よろしく、お願いもうしあげます
mijjeさんへ
テンプレートをお使い頂きありがとうございます。
ご質問の<body>が見つからないとの事ですがhtmlの上部にありますので今一度ご確認ください。
下記の青字部分のようにhtmlタグを挿入すれば問題なく動作するはずです。
------------------------------
<body>
～タグ挿入位置～
<div id="wrap">
<div id="admenu">
------------------------------
一応ブログを拝見したところFC2アクセス解析のバナーが表示されてますので</body>の直前でも動作しているように見受けられます。
htmlタグの挿入に問題がなければ解析するにあたっての手順をマニュアルで確認された方が良いかと思います。
お返事ありがとうございます
お忙しい中、お返事そしてCHECKしていただき、ありがとうございます。
ブログは、まだ不慣れですので、教えていただいた通り、
手順を再度確認いたします。
また、bodyも探してみます。
（今、目を皿のようにして確認いたしましたが、やはりわかりませんでした；；）
ありがとうございました。
理解できました
アクセス解析の使い方が理解できました。
きちんと、働いていました。
（だた、現在は 個人的事情でプライベート設定にしています。）
丁寧に教えてくださり、ありがとうございました。
これからも、よろしくお願いいたします。
コメント欄の表示について
れん様、こんにちは。michiと申します。
とても心に響いたテンプレートなので、利用させていただいております。
「コメント欄の表示について」教えていただきたい事があります。
１．Subject（コメント欄の１行目）だけ文字をコメント本文より大きくする方法
２．Subject（コメント欄の１行目）だけ文字色を変更する方法
３．各コメントの下部に罫線を引く方法
現在の画面でコメントの文字の下にある罫線よりも細くて短い線。
（コメント本文の頭からeditの終わり位までの長さの線で
右端まで太さは同じ線。）
最近になって、コメントを初めていただいて、コメントごとに仕切りがあればいいなと思いました。
それぞれのコメントを枠で囲んでしまうという方法は、れん様の洗練されたデザインをダメにしてしまいそうなので、上記の１～３の方法、またはその併用でコメントを区切る事ができればと思っています。
最後にとても初歩的な質問なのですが、併用する場合は、お教えいただいた変更を重ねてすれば、よろしいのでしょうか？
現在のブログのコメント欄以外の部分には、影響はありませんか？
お借りした当初は、全くの初心者なのに何か勢いで文字色を変えたりしたのですが、公開前だったので後先あまり考えずにやってしまいました。
今は、公開してしまっているので、すこしビビっています。
年末のお忙しい時に長々と申訳ございません。
ご教示よろしくお願いいたします。
申訳ありません!!
コメントする所を間違えてしまいました。
お借りしているのは、「共有テンプレート・fb07_2c 」です。
すみません。
michiさんへ
テンプレートをお使い頂きありがとうございます。
ご質問の件ですが全て可能です。
スタイルシートの下記箇所に青字を追加して下さい。
コメントタイトルの文字サイズ及び色の変更
------------------------------
p.com_title {
font-size: 120%;
color: #FF0000;
padding: 0 0 5px 5px;
}
------------------------------
コメント毎の仕切り線
------------------------------
p.com_state {
font-size: 90%;
text-align: right;
margin: 5px 0 20px;
padding: 0 20px;
border-bottom: 1px #CCC solid;
}
------------------------------
となります。
色及びサイズは自由に変更して下さい。
>現在のブログのコメント欄以外の部分には、影響はありませんか？
これに関しては回答全般として、他に影響が出る場合は出ない様なカスタマイズを回答させて頂いてますので問題ありません。
ありがとうございました
れん様
年末のお忙しい時に本当にありがとうございました。
さっそく、線で仕切ってみました。
この線の長さは調整可能でしょうか？
両端を少し短くと思っていたのですが、いかがでしょうか？
全く急ぎませんので、お暇な折にお教えください。
それでは、よいお年をお迎えくださいませ。
これからもいろいろとお尋ねするかと思いますが、どうぞよろしくお願いいたします。
今度はコメントの場所を間違えません!!
michiさんへ
構造上、罫線の長さだけの変更は出来ません。
ただし青字部分の様に変更すれば多少は変わると思います。
------------------------------
p.com_state {
font-size: 90%;
text-align: right;
margin: 5px 30px 20px;
padding: 0 5px;
border-bottom: 1px #CCC solid;
}
------------------------------
れん様へ
ありがとうございました。
今後ともよろしくお願いいたします。
ブログタイトルとカテゴリーの位置変更
れん様
はじめまして。
とてもシンプルで見やすいテンプレートでしたのでお借りしました。
タイトル部分にワンポイント画像を入れたら タイトルとブログ説明分が重なってしまいました。
タイトルと説明文の位置を画像に重ならず 少し右下（Welcomeの下ぐらい）にずらしたいです。
タイトルと説明文のフォントも もう少し小さくしたいです。
記事タイトル・記事・写真・を中央揃えにしたいです。
カテゴリをトラックバック・コメントと同じ位置に揃えることは無理でしょうか？
たくさん質問してすみません・・・
お時間に余裕のある時で結構ですので教えていただけないでしょうか。
よろしくお願いいたします。
まみこさんへ
テンプレートをお使い頂きありがとうございます。
ブログタイトル及び説明文については赤字部分のように変更して下さい。
（細かい位置調節はpaddingを修正して下さい）
------------------------------
h1 {
font-size: 120%;
font-weight: normal;
margin: 0;
padding: 150px 0 0 250px;
}
h2 {
font-size: 100%;
font-weight: normal;
padding: 0 0 0 250px;
}
------------------------------
カテゴリ等の位置調節にはまずhtmlの編集から青字部分を追加します。
（<!--/relate_list_area-->を検索すれば見つかると思います）
------------------------------
<!--/relate_list_area-->
<div class="entryinfo">
<p>category: <a href="<%topentry_category_link>" title="<%topentry_category>"><%topentry_category></a></p>
～省略～
<!--/topentry_tag-->
</div>
</div>
------------------------------
記事タイトル及び本文の中央寄せも併せてスタイルシートの一番最後で構わないので以下を追加して下さい。
------------------------------
h3.entrytitle, .entrytext {text-align: center;}
.entryinfo {text-align: right;}
------------------------------
れんさま
とても早くお返事くださりありがというございます。
説明も丁寧でわかりやすく教えてくださってありがとうございます。
嬉しかったです。
もうちょっとこうしたいんだけど～・・・って事が出来て とてもうれしいです。
ずっと使わせていただきます。
お忙しい中 本当にありがとうございました。
カテゴリの文字
れんさま
なんどもすみません・・・
記事内のカテゴリの文字をもう少し小さくしたいと思ってます。
ＨＴＭＬから.entryinfoだと思ったので
前回教えていただいたところに下記のサイズを加えてみたのですが小さくなりませんでした。
h3.entrytitle, .entrytext {text-align: center;}
.entryinfo {text-align: right; 色付きの文字font-size: 85%;}
何度もお手数おかけして申し訳ありません。
お暇なときで結構ですので教えていただけますと嬉しいです。
よろしくお願いします。
まみこさんへ
文字サイズですが仰ってる箇所で問題ありません。
当方でもいくつかのブラウザで確認しました。
------------------------------
.entryinfo {text-align: right; font-size: ○○%;}
------------------------------
同じ箇所で違うカスタマイズをしていればそれを除いた状態で確認をお願いします。
れんさま
何度も何度もありがとうございます。
お返事頂いた箇所を改めてコピぺし直したら小さくなりました！！
原因はわかりませんが わたしの記述方法に問題があったのかもしれません…
本当に本当にありがとうございました♪
れんさま
シンプルなデザインに惚れ込み愛用させてもらっております。
1点質問させてください。
改行せずに記事を書くと、ずっと右の方まで文字がいってしまいます。
適当な所で自動的に改行させることは出来ますか？
kotapapaさんへ
テンプレートをお使い頂きありがとうございます。
ご質問の件ですが、全てのテンプレートにおいて規定の幅に達すれば自動で改行されます。
記事幅が可変タイプであっても同様です。
仮に意図的に短く改行したいとしても写真があるとカスタマイズは難しいです。
ただし記事ごとに一手間掛かりますが一つの方法として下記を参考にして下さい。
記事を書くときに青字のタグで文章を挟みます。
写真を載せるとなると文章ごとに必要となります。
------------------------------
<p class="text">文章</p>
<img src="" />
<p class="text">文章</p>
------------------------------
スタイルシートの最後に以下を追加します。
（width値は適宜変更）
------------------------------
p.text {width: 500px;}
------------------------------
これである程度意図した位置での改行は可能と思われます。
ただし古い記事は修正しない限り対応しません。
カテゴリタイトルを画像に
れんさま
初めまして。
スンプルでスタイリッシュなデザインが気に入り、使用させて頂く事となりました。
ありがとうございます。
早速質問なのですが、
「最新コメント」や「カテゴリ」などのタイトル部分を、
ヘッダー同様、画像データに差し換えたいのですが
カテゴリの場合、どの箇所を編集したら良いかが分かりません。
お忙しい中申し訳ございませんが、ご回答の程宜しくお願い致します。
no5さんへ
テンプレートをお使い頂きありがとうございます。
ご質問の件ですが、可能ですがカスタマイズとしては複雑な方なので複製は必ずお取り下さい。
まずhtmlへ青字部分を追加します。
（ソースが長くなるため必要箇所のみ抜粋します）
------------------------------
<!--plugin_first-->
<h4 class="plugtitle" id="no<%plugin_first_no>" style="text-align:<%plugin_first_talign>"><%plugin_first_title></h4>
<!--/plugin_first-->
<!--plugin_second-->
<h4 class="plugtitle" id="no<%plugin_second_no>" style="text-align:<%plugin_second_talign>"><%plugin_second_title></h4>
<!--/plugin_second-->
<!--plugin_third-->
<h3 class="entrytitle" id="no<%plugin_third_no>" style="text-align:<%plugin_third_talign>"><%plugin_third_title></h3>
<!--/plugin_third-->
------------------------------
次にテンプレートをプレビューしブラウザでソースを確認します。
（例えばInternetExplorerだと右クリックメニューの「ソースの表示」です）
ソースを確認すると（間違いがなければ）青字部分のような個別の数字が割り振られています。
例えばプラグインが3つなら以下のような感じです。
------------------------------
<h4 class="plugtitle" id="no111111" style="text-align:left">カテゴリ</h4>
<h4 class="plugtitle" id="no222222" style="text-align:left">リンク</h4>
<h3 class="entrytitle" id="no333333" style="text-align:left">最新コメント</h3>
------------------------------
最後にスタイルシートにそれぞれの指定を追加します。
背景を指定したいという事ですと以下の様な感じになると思います。
------------------------------
#no111111 {
background-image: url(画像URL);
background-repeat: none;
background-position: top left;
}
------------------------------
no222222、no333333も同様で、これが10箇所なら10必要となります。
なおbackgroundの仕様については解説サイトなどでお調べ下さい。
コメントの投稿
トラックバック
« p r e v | h o m e | n e x t »
