PCテンプレ【ayu-tp3_13】
2007年07月01日(日曜日)
【ayu-tp3_13】*白・薄茶色系 *３カラム
*超々シンプル *線はドット使用
［見本］
［動作確認］
IE6.0。FireFox2.0。Netscape 7.1。
［鮎から一言］
以前に鮎が使ってたテンプレートを少し変えて、登録してみました。
今は、自分で作成したテンプレートをお披露目＆見本のつもりでブログで使っていますが、鮎的には、こ～ゆ～ノッペリした飾り気のないシンプルなのが好きなのぉ～～(^^)/
背景は、双葉模様を、右下固定してあります。
左がプラグイン「１」で、右がプラグイン「２」で、記事上がプラグイン「３」です。
画像の大きさで、罫線に文字が入らない場合もあります。
絵文字の使用も同様です。
［画像アップ］
記事横幅は「430px」です。
この範囲に収まる画像横幅でお願いします。
［お願い］
ダウンロードされた方で、使用に不具合があった方は、この記事下に書き込んでください。
お尋ね頂いた内容＋解決法は、今後のために、内容のみブログに別記事掲載させて頂くこともありますので、ご了承ください。
原因究明に時間がかかることもあり、お返事が遅れたり、後の書き込みの方の返事が先になったりすることもあると思います。
スポンサーサイト
トラックバックURL
|
Copyright (C) 2006 ＊TENTEN★くらぶ＊ rights reserved.
Template&Material : TENTEN★くらぶ
わんこ写真：Digital Image Studio 410319【ふぉとさいく】
コメント
★ はじめまして！
こちらのテンプレートに一目惚れして使用させていただいていたのですが
プラグイン3に長めの広告を入れると、右のプラグインが落ちてしまうので
現在はayu-tp3_17を利用させていただいています。
（こちらも、もちろん気にっていますが、記事下にテーマが表示されるといいのですが）
ずうずうしいお願いなんですけど、
このシンプルなテンプレートが気に入っていて
こちらのテンプレートの記事横幅は「500px」の
タイプがあればと、密かに願っております。
記事の下に選んだテーマが表示されるのも気にっています。
ご検討いただけると嬉しいです。
★ ちびころ☆さんへ
「13」ですが、記事横幅を長くすることは可能ですが、変更しても、再登録することも、新規登録することもできませんので、ちびころ☆さんに変更作業（カスタマイズ）して頂くことになりますが、それでもよろしいですか？
それでよろしければ、方法を書かせて頂きます(^^)
★ ありがとうございます
カスタマイズなんてまったく分からない初心者ですが
このテンプレートが使用できるなら、がんばります！
よろしくご指導ください。
★ ちびころ☆さんへ
変更場所を書き出しましたが、書き漏れがあるかも知れませんので、変更されたら、お知らせください。
チェックさせて頂きます。
一回では書き込めないので、３回に分けますね。
「HTMLの編集」内、
<!--▼トラックバックここから▼-->
<!--trackback_area-->
<table width="500" class="trackback_table" border="0" CELLPADDING="0" CELLSPACING="0">
<tr>
<td background="http://blog85.fc2.com/z/zuttoissyodayo2/file/ayu-tp03-c.gif" width="500" height="50" border="0">
<div class="trackback_header"><a name="trackback" id="trackback-top">トラックバック</a></div></td></tr>
と、その下方の、
<img src="http://blog85.fc2.com/z/zuttoissyodayo2/file/ayu-tp02-b.gif" width="500" height="9" border="0">
</td>
</tr>
</table>
<!--/trackback_area-->
<!--/トラックバックここまで-->
★ ちびころ☆さんへ
/* 全体の大枠 */
div#container {
background-color : transparent;
text-align : center;
width:940px;
margin:0 auto;
padding:0;
}
/* タイトル部分 */
div#branding {
width : 500px;
height : 100px;
}
/* primary-columnとsecondary-columnの回り込み */
div#wrapper {
float : right;
width : 730px;
}
/* 本文部分ブロック */
div#primary-column {
float : left;
width : 520px;
padding : 0px;
voice-family : "\"}\"";
voice-family : inherit;
width : 520px;
}
html>body div#primary-column {
width : 520px;
}
div.entry-header {
color : #664f3c;
margin : 5px 15px 5px 15px;
height : 100px;
width : 500px;
background : url(http://blog85.fc2.com/z/zuttoissyodayo2/file/ayu-tp01-a.gif) ;
background-repeat : no-repeat;
background-position : center;
font-weight : normal;
voice-family : "\"}\"";
voice-family : inherit;
}
/* 記事本体部分 */
div.entry-body {
font-family :Georgia,Osaka;
text-align : left;
padding : 15px 5px 10px 5px;
margin : 5px 8px 5px 8px;
line-height : 20px;
background : url(http://blog85.fc2.com/z/zuttoissyodayo2/file/line-dot.gif);
voice-family : "\"}\"";
voice-family : inherit;
}
/* フッター部分（コメントやトラックバックなど） */
div.section ul.entry-footer {
height : 25px;
width : 500px;
padding : 20px 0px 0px 0px;
background : url(http://blog85.fc2.com/z/zuttoissyodayo2/file/ayu-tp02-b.gif) center bottom no-repeat;
list-style-position : inside;
}
/* コメントトップ */
h3#comment-top {
font-family :"HGP創英角ﾎﾟｯﾌﾟ体",Osaka;
height : 50px;
text-align : left;
padding : 13px 0px 0px 50px;
color : #664f3c;
font-size : 13pt;
background : url("http://blog85.fc2.com/z/zuttoissyodayo2/file/ayu-tp03-c.gif") top center no-repeat;
font-weight : normal;
voice-family : "\"}\"";
voice-family : inherit;
}
★ ちびころ☆さんへ
h3.comment-post {
font-family :"HGP創英角ﾎﾟｯﾌﾟ体",Osaka;
height : 50px;
text-align : left;
padding : 13px 0px 0px 50px;
color : #664f3c;
font-size : 13pt;
background : url(http://blog85.fc2.com/z/zuttoissyodayo2/file/ayu-tp03-c.gif) no-repeat top center;
font-weight : normal;
voice-family : "\"}\"";
voice-family : inherit;
}
h3.comment-edit {
font-family :"HGP創英角ﾎﾟｯﾌﾟ体",Osaka;
height : 50px;
text-align : left;
padding : 13px 0px 0px 50px;
color : #664f3c;
font-size : 13pt;
background : url("http://blog85.fc2.com/z/zuttoissyodayo2/file/ayu-tp03-c.gif") top center no-repeat;
font-weight : normal;
voice-family : "\"}\"";
voice-family : inherit;
}
/* コメントのタイトル */
h4.comment-header {
font-family :"HGP創英角ﾎﾟｯﾌﾟ体",Osaka;
padding : 0px 10px 5px 20px;
font-weight : normal;
font-size : 11pt;
text-align : left;
background : url(http://blog85.fc2.com/z/zuttoissyodayo2/file/ayu-tp08-d.gif) ;
background-repeat : no-repeat;
voice-family : "\"}\"";
voice-family : inherit;
}
/*********** トラックバック部分の設定 ***A*/
.trackback_table{
width : 500px;
margin : 60px 0px 50px 0px;
voice-family : "\"}\"";
voice-family : inherit;
}
/* トラックバックURI */
h5 {
font-family : "HGP創英角ﾎﾟｯﾌﾟ体",Osaka;
font-weight: normal;
font-size: 11pt;
text-align : left;
margin : 15px 0px 0px 0px;
padding : 0px 30px 0px 30px;
background : url("http://blog85.fc2.com/z/zuttoissyodayo2/file/ayu-tp08-d.gif") top center no-repeat;
voice-family : "\"}\"";
voice-family : inherit;
}
/* トラックバックのタイトル */
.trackback_title{
font-size: 11pt;
font-family : "HGP創英角ﾎﾟｯﾌﾟ体",Osaka;
text-align : left;
font-weight : normal;
margin : 35px 0px 0px 0px;
padding : 0px 30px 5px 30px;
background : url("http://blog85.fc2.com/z/zuttoissyodayo2/file/ayu-tp08-d.gif") top center no-repeat;
voice-family : "\"}\"";
voice-family : inherit;
}
/* トラックバック先の概要 */
.trackback_text {
text-align : left;
margin : 5px 25px 25px 25px;
line-height : 150%;
}
★ ありがとうございます
ちょっと時間かかるかも知れませんが、がんばって挑戦してみます。
分からないことが出てきたら、また質問してもいいでしょうか？
無事、完了しましたら、また報告に伺いますね。
お手数かけて済みませんでしたm(_ _)m
★ 変更しました。
とっても分かりやすい説明のおかげで、無事変更できました♪
理想的なブログになりました。
本当にありがとうございました。
末永く利用させていただきたいと思います。
★ ちびころ☆さんへ
（私の書き漏れ）不備もなく、変更ＯＫ。
使っていて、不具合がありましたら、また教えてくださいね。
★ 全体の色
シンプルで気に入ってお借りしています。
が、全体の枠色を変えたいのですが何処を触れば良いのでしょうか、教えていただけますでしょうか？
お願いします。
まはぉ、
★ Kalakaさんへ
「全体の枠色」とありますが、こちらは全体枠では囲ってないのですが、両サイドメニューの枠のことをおっしゃってみえるのでしょうか？
それだと、「スタイルシートの編集」内、
div.plugin_header {
margin : 10px 0px 10px 0px;
border : 2px dotted #c8b693;
voice-family : "\"}\"";
voice-family : inherit;
}
の赤太文字の数字を変えれば、枠色は変更できます。
お知りになりたいのがこれの事でなければ、お知らせください。
★ まはろ！
★ Kalakaさんへ
だとすると、記事部の日付と記事タイトル、記事中の罫線、フッターの線は、すべて画像ですので、色を変えることはできません。
（コメント・ＴＢのところも画像です）
同じような画像をお作りになれば、変更できますが。
色だけで変えられるのは、サイドメニューの枠と、中の仕切線、１番下のリンクの枠点線、コメントの投稿の点線くらいです。
★
質問なんですけど、初心者なんで、すみません(^_^;)
毎記事下に、アドセンスを設置したいんですけど、
どこに、コードを入れたらいいんでしょうか？
教えていただけると嬉しいんです、よろしくお願いしますm(__)m
★ 罫線内へ文字が納まらない場合について
「やっと理想のテンプレートに出会えた
『PC：テンプレート』の説明にもありましたが、画像をUPしたら、文字が罫線内に納まりません。
『Ｑ＆Ａ』も拝見しましたが、解決しませんでした。やはり、『Ｑ＆Ａ』にあるように、諦めるしかないでしょうか？ それとも、ピッタリくる画像のサイズがあったり、何か別のカスタマイズ方はないでしょうか？
もし解決策がありましたら、ご伝授下さい。
よろしくお願いします。m(__)m
★ Yukakoさんへ
「13」は、シンプル過ぎるから使ってくれる方もいないだろうな～と思ってUPしたので、思いの外、気に入って頂ける方が多くて、嬉しいです♪
質問ですが、絵文字は携帯会社に寄って大きさが違うので無理ですが、画像だけなら、もう一個、使える手があります。
画像imgに、「align="left"」を追加する方法です。
これを入れると、画像の横に文字が入ってしまいますが（参照・テンプレート一覧のような感じ）、行幅には関係なくなりますので、文字が罫線からずれません。
方法は、「記事を書く」画面で、通常の方法で記事内に画像タグを取り込み、上記タグを入れ（赤文字）、緑文字打ち消し部分は削除してください。
<a href="http://貴方のブログ画像URL.jpg" target="_blank"><img src="http://貴方のブログ画像URL.jpg" alt="画像説明文" border="0" align="left"></a>
<br clear="all">画像の横に文字が入るのがイヤなら、書き込み時に、画像の縦幅分（行幅が20pxなので、画像が200pxなら、200÷20＝10で、１０行くらい）ほど改行すると画像横から文字が外れるはずです。
（式は大体の目安です）
「align="left"」は、画像が左に来ます。
右が良いなら「right」に変更してください。
パソコン機能の『単語登録』などに「align="left"」を入れて、簡単な「読み」（私は、「あ」を押すだけ）で出るように登録しておけば、いちいち全部のタグを入れなくても良いから簡単ですヨ。
他にも方法があるのかも知れないけど、鮎の知識で判るのは、これくらいです(>_<)ゞ
★ ありがとうございます！
（なぜか、"center" ではダメでした）
単語登録のワザもありがとうございます。
これからもよろしくお願いします。
お世話になりました。
★ テンプレートに画像を入れたいのです。
ayu-tp3_13を利用させていただいてます。
かなり気に入っていて、他にいいテンプレートが見当たらないので、
ずっと利用させていただきたいと思っています。
さて、ちょっと慣れてきたところで、少しカスタマイズをしたくなってきました。
（ちょっとだけ画像をいじってしまいました。よかったですか？）
この３カラムのデザインは幅も文字の大きさも全てGOODなのですが、
一番上に画像を入れたくなりました。
（ヘッダーというものかな？）
タイトルまわりは、真ん中のカラムに収まっているので
それを、動かすのはレベルが高そうで、難しそうなので
画像を貼り付けるだけでもできないかと思っています。
サイズは幅870高さ100ぐらいを想定しています。
もし変更できるようでしたら、ご伝授下さい。
よろしくお願いします。
★ 新之介さんへ
> ちょっとだけ画像をいじってしまいました。よかったですか？
双葉画像の色のことかしら？
はい、ご自身のブログ内で使われるのですから、構わないですよ（変更した画像の再配布は×です）。
そうですね。
ブログ名欄を横長にして背景に画像を使うよりは、ヘッダーに画像を入れるだけの方が楽は楽です。
方法は、「ＨＴＭＬの編集」内の、下記の位置に赤太字のタグを入れて、中身のimgに用意した画像ＵＲＬを記入してください。
<body>
<a name="pagetop"></a>
<div id="container"><!-- container -->
<img src="表示したい画像のＵＲＬ">
<div id="wrapper">
<div id="primary-column" class="column"><!-- primary-column -->
もし、ブログタイトル背景に画像を入れる方がよろしければ、その方法も書きますので、またお知らせくださいね。
★ 早速テストしてみました
ありがとうございます。
早速テストしてみたのですが、真ん中のカラムの上にのみ
縮小された状態で配置されてしまいました。
左右のカラムも含めた左右いっぱいまで画像が配置できるとうれしいのですが。
画像は全体幅の870に合わせて870×高さ１００の画像でテストしています。
よろしくお願いいたします。
追伸、ブログタイトルを背景画像の上に表示できるのなら、それがベストです。
もしお手間でなければおしえていただけますか。
それと、カスタマイズは双葉の色とバックの右下に固定されてる丸い画像を
いじらせていただきました。
★ ごめんなさい。できました。
もう一度ためしてみたらできました。
画像をアップするときのミスだとおもいます。
ありがとうございます。
いろいろ苦労していたのですが、この一行でできるとは、
目から鱗です（笑）
★ 新之介さんへ
素敵な画像ですね。
新之介さんのブログにぴったり。
ご自分で作られたんですか？
だとすると、この画像の中にブログ名やブログ説明文を入れ込んでひとつの画像にして、先の方法でＵＰしても良いですね。
（ＨＴＭＬのブログ名表示タグは消して）
ブログタイトル背景に画像を入れる方法は以下のように変更してください。
「ＨＴＭＬの編集」内、
【旧】
<div id="container"><!-- container -->
<div id="wrapper">
<div id="primary-column" class="column"><!-- primary-column -->
<div id="branding"><!-- branding -->
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<div class="site_intro"><%introduction></div>
</div><!-- /branding -->
<!--index_area-->
↓↓↓
【新】
<div id="container"><!-- container -->
<div id="branding"><!-- branding -->
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<div class="site_intro"><%introduction></div>
</div><!-- /branding -->
<div id="wrapper">
<div id="primary-column" class="column"><!-- primary-column -->
<!--index_area-->
「スタイルシートの編集」内、
【旧】
/* タイトル部分 */
div#branding {
width : 470px;
height : 100px;
}
↓↓↓
【新】
/* タイトル部分 */
div#branding {
width : 画像の横幅px;
height : 画像の縦幅px;
background : url(画像のＵＲＬ) ;
background-repeat : no-repeat;
background-position : center;
margin : 10px 0px 0px 0px; ←画像の上部に空白を空ける場合のみ。上にぴったり付けるなら「0px」か、タグを削除
}
以上を変更すると、ブログタイトルとかの位置が変わるので、下記の場所で位置変更してください。
/* ブログタイトル */
div#branding h1 {
padding : 30px(上) 10px(右) 0px(下) 10px(左);←ここで、タイトルの位置を変更
margin : 0px 15px 0px 15px;
font-size : x-large;
voice-family : ""}"";
voice-family : inherit;
font-size : xx-large;
font-weight : normal;
font-family :"HGP創英角ﾎﾟｯﾌﾟ体",Osaka;
}
/* サイトの説明文 */
.site_intro {
padding : 0（上下） 10px（左右）;←説明文の位置はここで。上のように四つにしてもＯＫ
font-size : 10px;
voice-family : ""}"";
voice-family : inherit;
font-size : 10px;
font-weight : normal;
font-family :"HGP創英角ﾎﾟｯﾌﾟ体",Osaka;
}
で、できると思います(*^-^)b
★ ありがとうございます。
ありがとうございます。
家の帰ってからテストしてみます。（今は会社なので…）
スタイルシートの本とかを見ていろいろやってみたんですけど
うまくいかなかったのです。
最初からこちらにコメントをしておけがよかった…（笑）
また報告させていただきます。
追伸、
画像は自分でつくっていますよ。
でも、テンプレートを色々見ましたけど
鮎さまのテンプレートが一番完成度が高いと思いました。
細かいところまで配慮されているし…
私のブログは歴史モンなので鮎さまの作られたデザインのトーンと
ブログの内容がアンバランスな感じがするのですが、
そこが結構気に入っています。
これからも素敵なテンプレートを発表してくださいね。
★ できました。
画像にタイトルをはめれました。
完璧です。
ありがとうございます。
バックの画像はタイトルを生かしたデザインに
変更してからアップしようと思います。
ますますこのテンプレートに愛着が湧いてきました。
アップしたときには連絡いたします。
いろいろありがとうございました。
★ 何度もごめんなさい。
何度もごめんなさい。
ブログタイトルとサイト説明文の色を変更するには
どうすればいいですか。
ちなみにそれぞれを白くしたいのです。
リンクの色はいまのままでいいです。
よろしくお願いします。
★ 新之介さんへ
色コードは自由に変更してください。
/*ブログタイトル名 リンクの設定 */
div#branding h1 a {text-decoration : none;}
div#branding h1 a:link {color : #ffffff !important;}
div#branding h1 a:visited {color : #ffffff !important;}
div#branding h1 a:hover {color : #993333 !important;}
div#branding h1 a:active {color : #ffffff !important;}
サイト説明文は、リンクはかかってませんので、フォントカラーのタグを入れるだけでＯＫです。
/* サイトの説明文 */
.site_intro {
color : #ffffff;
padding : 0 10px;
font-size : 10px;
voice-family : "\"}\"";
voice-family : inherit;
font-size : 10px;
font-weight : normal;
font-family :"HGP創英角ﾎﾟｯﾌﾟ体",Osaka;
}
お試しください(*^-^)b
★ できました！
わかりやすい解説ありがとうございます。
まようことなくタイトル文字の色変更もできました。
完璧です(^-^)b
新年のタイミングから新しいトップページに
変えようと思います。
いろいろありがとうございました。
★ 久遠たむさんへ
秘コメ投稿ご質問ですが。
> テンプレート「ayu-tp3_13」を使用させていただいているのですが、記事内における半角英数字の表記の変更について質問させてください。
> 上記のテンプレート（記事内）の半角文字指定(Osaka?)は、おそらくアーカイブや記事の投稿日時とは違った指定になっていると思います。
> これらの半角文字をアーカイブや投稿日時と同じフォントに統一したいと考えているのですがどうしたら良いのでしょうか。
「スタイルシートの編集」内、
/* 記事本体部分 */
div.entry-body {
font-family :Georgia,Osaka;
text-align : left;
padding : 15px 5px 10px 5px;
margin : 5px 15px 5px 15px;
line-height : 20px;
background : url(http://blog85.fc2.com/z/zuttoissyodayo2/file/line-dot.gif);
voice-family : "\"}\"";
voice-family : inherit;
}
の赤太文字を削除してみてください。
どうかしら？
★ 管理人のみ閲覧できます
★ コメントのツリー化
こんにちは。
またまたわがままなご相談です。
コメントをツリーにしたいのです。
で、簡単にプラグインでやってみたら
フタバのアクセントがなくなっちゃいました。
それはまだいいのですが、ツリーの項目の数が限られていました。
私のブログではコメントを大切に扱いたいので
いっぱいだしたいのです。
（わがままな希望として）
○コメントのツリー化でできるだけたくさんコメントをだしたい。
○できることなら、フタバを残したい。
すみません。
よろしくお願いいたします。
★ 新之介さんへ
（規約とかわからないので、想像ですが…）
まずは、登録元の作成者さんにお訊ね頂く方がいいと思います。
★ 言葉たらずでごめんなさい
言葉たらずでごめんなさい。
プラグインはあきらめて
HTMLでツリーにできないかという
わがままなお願いなのです。
★ 新之介さんへ
検索で探せば、ヒントになるサイトさんがあるのだとは思いますが、それらを勉強するのに時間がかかるだろうし、今のとこ、それらに取り組むゆとりがないです…。
申し訳ございませんm(_ _)m
★ ありがとうございます
ごめんなさい。いろいろいっちゃってm(_ _)m
がんばって、試行錯誤してみますね。o(^-^)o
ありがとうございました。
★ NO TITLE
「ayu-tp3_13」のテンプレートを使わせていただきたいと思っています。
本文内(記事部分)だけ、リンクの色を変えたいのですが、いろいろやってみたのですが、わかりません。
CSSのどの部分を変更すればよいのでしょうか？
教えてください♪
★ ちゃまろさんへ
ご質問の際には、ＵＲＬを明記ください（質問の心得）。
「13」には、記事内リンク変更のタグは入れてありません。
ブログ全体の指定タグが適用されてますので、記事だけのリンクタグを追加する必要があります。
ＣＳＳのどこでも良いので、以下のタグを追加し、お好きな色コードに変更してください。
div.entry-body a:link {color : #色コード;}
div.entry-body a:visited {color : #色コード;}
div.entry-body a:hover {color : #色コード;}
div.entry-body a:active {color : #色コード;}
★
お礼が遅くなってすいません。
できました。
ありがとうございました。
★ 初めまして
素敵なテンプレートなので、とても気に入りました。
是非ブログで使わせて頂きたいのですが、全体の横幅を「740px」にすることはできますでしょうか？
よろしくお願い致します。
★ hanaさんへ
こちらのテンプレートの全体幅は「870px」です。
「740px」ということは、130pxも幅が狭くなります。
できる・できないで言うなら、作業的には「できます」、が。
3カラムで、「-130px」は表示的に無理があるかも、です…
（それぞれの幅が狭くなりますので）
右メニュー・本体・左メニューの幅数値は、いくつをお考えですか？
★
やっぱり740ｐｘではそれぞれの幅がかなり狭くなってしまうので無理ですね。
でもこのテンプレートがすごく気に入ってしまったので、何とかしたいと思い800pxでカスタマイズしてみました。
幅が狭くなって若干欠けてしまっているところもあるのですが、すごく気に入ってます。
末永く使わせてもらおうと思っています。
ありがとうございました。
コメントの投稿