ヤプログでテンプレートを編集するにはどうすればいいですか？

Question

テンプレートに好きな画像を入れて、自分なりのスキンを作りたいのですが、やり方がイマイチよく分かりません。
テンプレート編集画面を開くと

<html>
<head>
<title>{$BlogName$}</title>

・・・・・・・・・・・・・・・

と表示され、どこをどう編集すればよいのか・・・。
今、自分がやりたい編集は

1、スキンのヘッダー部分にオリジナルの画像を表示させたい。
2、ブログ記事の横幅が狭いので広くして、見やすく＆文字を多く表示させたい。

の2つを今一番やってみたいと思っています。
どなたかHTMLに詳しい方、初心者の私に分かりやすく教えて下さい。よろしくお願いします。

mid_kazwo · Accepted Answer

>.blog_title　から下にを付け加えるんですよね？

逆なんですけど…。


●スタイルシート
【編集前】
.blog_title
{
width:90%;
padding-right:10px;
MARGIN: 30px auto 10px 20px;
FONT-WEIGHT: bold;
FONT-SIZE: 16px;
OVERFLOW: hidden;
COLOR: #369;
WORD-BREAK: break-all;
LETTER-SPACING: 1px
}
　↓
【編集後】
/* ヘッダーの指定 */
#header {
height: 100px; /* ヘッダの高さ: 100ピクセル（タイトル背景画像の高さにあわせると良い） */
background-image: url("http://yaplog.jp/あなたのID/img/タイトル背景画像の記事番号/bg_your_image.jpg");
background-position: right; /* タイトル背景画像の位置: 右寄せ の場合 */
background-repeat: no-repeat; /* タイトル背景画像の繰り返し: 繰り返しなし の場合 */
}
.blog_title
{
width:90%;
padding-right:10px;
MARGIN: 30px auto 10px 20px;
FONT-WEIGHT: bold;
FONT-SIZE: 16px;
OVERFLOW: hidden;
COLOR: #369;
WORD-BREAK: break-all;
LETTER-SPACING: 1px
}

です。

mid_kazwo · Answer

すみません、私の回答が間違っていました。ヤプログのblueのスキンでは(きっとpink,greenでも)、テンプレートにheaderというidがありませんでした。＃私が自分で追加していたのを忘れていました。ということで、以下のようにしてください。 ●スタイルシート【編集前】 .blog_title 　↓ 【編集後】 /* ヘッダーの指定 */ #header { height: 100px; /* ヘッダの高さ: 100ピクセル（タイトル背景画像の高さにあわせると良い） */ background-image: url("http://yaplog.jp/あなたのID/img/タイトル背景画像の記事番号/bg_your_image.jpg"); background-position: right; /* タイトル背景画像の位置: 右寄せの場合 */ background-repeat: no-repeat; /* タイトル背景画像の繰り返し: 繰り返しなしの場合 */ } .blog_title ●テンプレート（メイン・アーカイブ・１記事の3個とも）【編集前】

{$BlogName$}

　↓ 【編集後】また、テンプレート（３種類）にといった全体の横幅設定があった事も抜けていました。 Q2. ブログ記事の横幅が狭いので広くして、見やすく＆文字を多く表示させたい。 A2. スタイルシートの記事、コメント欄に関する幅を変更し、全テンプレートのエントリ、コメント、トラックバックに関する幅を変更してください。元の値は、以下のような値になっていると思います。 ● CSS .entry { widht: 380px; } .entry_layer { WIDTH: 360px; } .comment_layer { WIDTH: 300px; } ● テンプレート（メイン・アーカイブ・１記事の3個とも） {$BlogName$} の前後にある

から次のの間や付近にある

から次のの間ある

● １記事テンプレートのみにある部分から次のの間にある

から次のの間にある

値を増やす場合は、上記の項目について同じだけ増やしてください。まだまだ抜けがあるかも知れませんが、頑張ってみてください。

mid_kazwo · Answer

>#header {
>
>↑スタイルシートを見たのですが、上に書いてるタグが見つかりませんでした。

「HR」や「H1」よりも下です。40～50行目にありませんか？


>あと、画像をヘッダーにアップロードする場合、どのような方法でスタイルシートにjpg画像を貼れば良いのでしょうか？

スタイルシートに「貼る」ことはできません。
＃ スタイルシートは記事ではありません。
また、ヤプログでは画像のアップロードのみもできません。
ですから、前回の回答に書いてあるように「記事の画像」としてアップロードしてください。

●画像のURL形式
http://yaplog.jp/あなたのID/img/記事番号/画像ファイル名

例）15番目の下書き記事としてアップロードする
既存の記事数が14個の状態で「タイトル画像」という記事を書く。本文は何でも良いです。
「画像」のアイコンをクリックして、画像をアップロード（追加）する。ファイル名は何でもよいので、ここではbg_your_image.jpgとしてアップロードする。
状態を「公開」から「下書き」に変更してから保存をする。

上記のような状態で画像をアップロードした場合は、画像のURLは以下のようになります。

http://yaplog.jp/あなたのID/img/15/bg_your_image.jpg

画像のアップロードが終わったら（下書き記事の保存が終わったら）、スタイルシートの編集をしてください。

画像の追加方法は、ヤプログのヘルプをご覧ください。
●画像を追加する
http://www.yaplog.jp/html/help/help03.html#16

参考URL：http://www.yaplog.jp/html/help/help03.html#16

mid_kazwo · Answer

ヤプログの「スキン修正」に関しては、大きく分けて、スタイルシート修正とテンプレート修正の2種類があり、ご質問のケースは、スタイルシートとテンプレートの両者を修正する必要があると思います。

なお、説明は全てスキンが「blue」であるという前提です。スキンがpinkやgreenの場合は、値が異なるかも知れませんので、適当に読み替えてください。

(1) スタイルシート
ブログの各項目（タイトル、記事、日付など）のスタイルに関する定義が中心。
具体的には、フォントサイズ、フォントカラー、画面サイズなどが定義されている。

(2) テンプレート
ブログの各項目の配置（表示）に関する雛形の定義が中心。
ヤプログの場合は、メインテンプレート、アーカイブテンプレート、１記事テンプレートの3種類がある。

Q1. スキンのヘッダー部分にオリジナルの画像を表示させたい。

A1. スタイルシートのヘッダ背景画像を指定するのが比較的容易だと思います。
＃勿論、テンプレートの方でバナーをつけることもできますが…。

#headerにbackground-imageを追加定義してください。
また表示位置を指定する場合や、繰り返し表示したくない場合は、background-positionやbackground-repeatを追加定義してください。

例）
bg_your_image.jpgという画像を1番目の記事にアップロードした（記事では画像は未使用でもよい）。
また、背景画像は、右寄せ、繰り返しとする。

【修正前】
#header {
　：
}

【修正後】
#header {
　：
background-image: url("http://yaplog.jp/あなたのID/img/1/bg_your_image.jpg");
background-position: right;
background-repeat: no-repeat;
}

Q2. ブログ記事の横幅が狭いので広くして、見やすく＆文字を多く表示させたい。

A2. スタイルシートの記事、コメント欄に関する幅を変更し、全テンプレートのエントリ、コメント、トラックバックに関する幅を変更してください。

元の値は、以下のような値になっていると思います。
● CSS
.entry { WIDTH: 380px; }
.entry_layer { WIDTH: 360px; }
.comment_layer { WIDTH: 300px; }

● テンプレート
から次のの間にある<table ... width="400">
＃１記事テンプレートについては、（コメント）と（トラックバック）で挟まれた部分にもtableタグについてもwidthの属性があると思います。

値を増やす場合は、上記の項目について同じだけ増やしてください。

HTMLタグやスタイルシートの意味は、参考URLをご覧ください。
● HTMLクイックリファレンス
http://www.htmq.com/

● HTMLクイックリファレンス(スタイルシートリファレンス)
http://www.htmq.com/style/

それでは頑張ってください。

参考URL：http://www.htmq.com/,http://www.htmq.com/style/

ヤプログでテンプレートを編集するにはどうすればいいですか？

>.blog_title から下にを付け加えるんですよね？

すみません、私の回答が間違っていました。

>#header {

ヤプログの「スキン修正」に関しては、大きく分けて、スタイルシート修正とテンプレート修正の2種類があり、ご質問のケースは、スタイルシートとテンプレートの両者を修正する必要があると思います。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

>.blog_title　から下にを付け加えるんですよね？