ヤプログでテンプレートを編集する方法とは？

前へ 次へ
このQ&Aのポイント
  • ヤプログでテンプレートを編集する方法について教えてください。
  • テンプレートに好きな画像を入れて、自分なりのスキンを作りたいのですが、やり方が分かりません。
  • 具体的には、スキンのヘッダーにオリジナルの画像を表示したいと思っています。また、ブログ記事の横幅を広くして、見やすく＆文字を多く表示させたいです。
回答を見る
  • ベストアンサー

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

テンプレートに好きな画像を入れて、自分なりのスキンを作りたいのですが、やり方がイマイチよく分かりません。 テンプレート編集画面を開くと <html> <head> <title>{$BlogName$}</title> ・・・・・・・・・・・・・・・ と表示され、どこをどう編集すればよいのか・・・。 今、自分がやりたい編集は 1、スキンのヘッダー部分にオリジナルの画像を表示させたい。 2、ブログ記事の横幅が狭いので広くして、見やすく＆文字を多く表示させたい。 の2つを今一番やってみたいと思っています。 どなたかHTMLに詳しい方、初心者の私に分かりやすく教えて下さい。よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • mid_kazwo
  • ベストアンサー率57% (188/326)
回答No.4

>.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 } です。

yellowcard777
質問者

お礼

返事が遅れて大変申し訳ございませんm(_ _)m 色々なアドバイスありがとうございました。 これからじっくりと編集の方しようと思います。

その他の回答 (3)

  • mid_kazwo
  • ベストアンサー率57% (188/326)
回答No.3

すみません、私の回答が間違っていました。 ヤプログの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個とも） 【編集前】 <td><h1> <div class="blog_title"><a href="{$BlogUrl$}">{$BlogName$}</a></div> </h1> 　↓ 【編集後】 <td><h1 id="header"> <div class="blog_title"><a href="{$BlogUrl$}">{$BlogName$}</a></div> </h1> また、テンプレート（３種類）に<table ... width="750" ...>といった全体の横幅設定があった事も抜けていました。 Q2. ブログ記事の横幅が狭いので広くして、見やすく＆文字を多く表示させたい。 A2. スタイルシートの記事、コメント欄に関する幅を変更し、全テンプレートのエントリ、コメント、トラックバックに関する幅を変更してください。 元の値は、以下のような値になっていると思います。 ● CSS .entry { widht: 380px; } .entry_layer { WIDTH: 360px; } .comment_layer { WIDTH: 300px; } ● テンプレート（メイン・アーカイブ・１記事の3個とも） {$BlogName$} の前後にある<table ... width="750" ...> <!-- entry -->から次の<!-- entry -->の間や付近にある<table ... width="400" ...> <!-- footer_logo -->から次の<!-- footer_logo -->の間ある<table ... width="780" ...> <!-- footer_logo -->から次の<!-- footer_logo -->の間ある<table ... width="330" ...> <!-- footer_logo -->から次の<!-- footer_logo -->の間ある<table ... width="755" ...> ● １記事テンプレートのみにある部分 <!-- pings -->から次の<!-- pings -->の間にある<table ... width="400" ...> <!-- comments -->から次の<!-- comments -->の間にある<table ... width="380" ...> 値を増やす場合は、上記の項目について同じだけ増やしてください。 まだまだ抜けがあるかも知れませんが、頑張ってみてください。

yellowcard777
質問者

お礼

何度もすみません。ありがとうございます。 .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 } .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; /* タイトル背景画像の繰り返し: 繰り返しなし の場合 */ } を付け加えるんですよね？ 付け加えたのですが、うまくいきませんでした。 すみません理解力がなくて。どこがまずいのでしょうか？

  • mid_kazwo
  • ベストアンサー率57% (188/326)
回答No.2

>#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
yellowcard777
質問者

お礼

詳しい説明ありがとうございました。 ヘッダーの件ですが、スタイルシートの40～50行目を見たら .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
  • ベストアンサー率57% (188/326)
回答No.1

ヤプログの「スキン修正」に関しては、大きく分けて、スタイルシート修正とテンプレート修正の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; } ● テンプレート <!-- entry -->から次の<!-- entry -->の間にある<table ... width="400"> ＃ １記事テンプレートについては、<!-- comments -->（コメント）と<!-- pings -->（トラックバック）で挟まれた部分にも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/
yellowcard777
質問者

お礼

大変分かりやすい説明ありがとうございます。 しかし、まだ良く分からない部分があるので教えて下さい。 #header { ↑スタイルシートを見たのですが、上に書いてるタグが見つかりませんでした。 「HR」や「H1」、「H2」というのはあるのですが、これらはヘッダーとは関係ないですよね？ ホント初心者ですいません！ あと、画像をヘッダーにアップロードする場合、どのような方法でスタイルシートにjpg画像を貼れば良いのでしょうか？ mid_kazwoさんが例で書いている「bg_your_image.jpg」というような表示にさせたいのですが、画像のプロパティを見ても上のような表示になりません。お手数お掛けしますが、画像の貼り方の方も教えて下さい。よろしくお願いします。

  1. カテゴリ
  2. インターネット・Webサービス
  3. SNS・掲示板・ブログ
  4. ブログ

関連するQ&A

  • テンプレート画像について

    gooブログでテンプレートの上のタイトルの部分に自分で撮った画像を表示させたいのですが上手くいきません。 テンプレートは「シンプル」→「クリアホワイト左」を選択しています。 テンプレート編集画面の「ヘッダーの指定」というところで 「#header」の後ろに「background-image:url(画像のURL); という風に入力していますが、何故か画像が複数表示されてしまいます。画像を1枚、更に右側に寄せて表示させるのにはどのようにしたらいいのでしょうか？ どなたかお分かりの方、ご指導くださいませ。

  • アメーバブログ　テンプレート

    こんにちは。 アメーバブログ、日記の記事に画像がアップできるのは知ってるんですが、 オリジナルテンプレートの画像をチェンジすることができるかどうかが、分かればな、と思ってます。 編集画面では、「カスタマイズ」「CSS編集」ともにいじれないようになっています。 これは、出来ないと思うに越したことはなく、 ムーバブルタイプやホームページビルダーで、自分の使いたい画像を盛り込んだサイトデザインを作ったほうがいいのでしょうかね。 どう思いますか？

  • ヤプログのスキン

    ブログって楽しいですね。 自分はヤプログでスキン編集に挑戦しているのですが…なかなかうまくできません。。。 最近スキンテンプレートを配布していらっしゃるさいと聞きました。 もしそういうものを知っている、使っているという方がいらしたらサイトを教えていただけませんでしょうか?? よろしくお願いします。

  • テンプレート編集　モジュール　画像

    いろんな方のブログを見てあこがれ、 先日ブログを始めたばかりの初心者です^^; テンプレート編集のオリジナルモジュールを追加するところで困っています(:_;) 有名なブログ等を拝見するとオリジナルでモジュールを作っておられ、 自分の自己紹介の他に、ペットの写真を貼ってプロフィールを記載したり、 使っている商品等を写真を貼って紹介されてるので真似たいと思ったのですが…。 モジュールに自分で撮影した画像を貼るやり方が分かりません(-_-;) テンプレートはモジュール等編集可能なものを選んで使用しています。 gooに質問したりしたのですが回答貰えずで… ご経験のある方やり方をお教え頂けないでしょうか？ 宜しくお願いしますm(__)m

  • スキンの編集

    ヤプログで、ブログをやっているものです。 以前からブログのスキンを自分でトップページの画像や背景などを作ってオリジナルのスキンを利用していますが、なんとなく野暮ったく感じられます。 なので、配布されているスキンのような感じに作るには、どうすればいいんでしょうか。 例えば、タイトルから記事を、最後まで太い線が通っていて、サイドバーの背景は色の違う別の線が…といった感じです。 分かりにくいと思いますが、回答宜しくお願いします。

  • テンプレートに画像を貼り付ける方法

    ＤＩＯＮのラヴログで、サンプルテンプレート（トップページ）のタイトル（一番上）に、オリジナルの画像を貼り付ける方法がわかりません、、、ＣＳＳ・ＨＴＭＬどちらで可能でしょうか？何方かご教授をお願いします。

  • ＤＷのテンプレートについて

    他社で作成したＨＰの編集を頼まれました。私はテンプレートは今まで使ったことがありませんが、そのＨＰはテンプレートを使用しているようです。ですがどこにも見当たりません。そして外部CSSもあるようなのですが、ファイルを見ると空でした。 ＨＰ最初には、 <HTML><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" --> <HEAD> <!-- InstanceBeginEditable name="doctitle" --> <TITLE>タイトル名</TITLE> <!-- InstanceEndEditable --><META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> このように記述されていてDOCTYPE宣言もありません。 テンプレートをＣＳＳファイルを探し出すことは可能でしょうか？ 一応作り直すことも頭に入れています。 情報が少なかったらすみません。今の私の能力ではどうすることもできないので何かアドバイスがありましたらよろしくお願いいたします。

  • 《Fc2ブログのテンプレート編集について》

    《Fc2ブログのテンプレート編集について》 こんにちは。 FC2ブログを使用しています。 以前使用していた共有テンプレートのリンク部分をHTML編集して、 リンク先を直接入力して表示させていました。 左メニューにある「環境設定」→「リンクの設定」では、 バナーが表示されないため、このように直接タグを打ち込んでいました。 ですが、先日テンプレートをシンプルなものに変えました。 すると、前のテンプレートに打ち込んだバナー付きのリンクが、 新しくしたテンプレートにもそのまま反映されていました。 リンクを外したいので、新しいテンプレートのHTML編集をして、 打ち込んだ部分を消そうと思ったのですが、打ち込んだリンクのタグがありませんでした。 テンプレートを変えたので、タグも変わり、当たり前だと思うのですが、 ブログを見ると、バナー付きのリンクが以前のテンプレートを使用していた時のように残っています。 以前のテンプレートで、打ち込んだ部分を消した後、 新しいテンプレートに変えても、まだリンクが表示されています。 左メニューの「リンクの設定」を確認してみたのですが、 もともと、その部分には打ち込んでいないので何もリンクしていない状態でした。 新しいテンプレートで、以前打ち込んだタグを反映させないようにするには どうしたらいいでしょうか？ うまく説明ができないのですが、お答えいただけると助かります。 説明不足でしたら、質問ください。 よろしくお願いします。

  • gooブログで、テンプレート編集（CLアドバンス)

    gooブログの使い方、テンプレート編集（CLアドバンス)に従って、ヘッダーに画像を貼れないか、試みています。が、なにぶん知識のない小生のため、うまくいきません。ご指導ください。

  • fc2ブログのヘッダ画像の変え方

    自分で色々調べたのですが #header{ ～～～ （画像url） などHTMLを編集するとき上記のHTMLが見つかりません；； あと、ヘッダ画像にリンクも付けたいです。 テンプレートはsnowというものです

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する