助太刀忍者(質問掲示板)

助太刀忍者

No.54048    ヘッダー画像の変更
まだこのサービスを使用し始めたばかりで全く方法がわかりません。
かつてこの掲示板でされていた質問も参照したのですが、2011~2012年のものばかりで、現在の仕様とは若干異なっていてうまく設定できません。
どなたかおわかりになる方はいらっしゃいますでしょうか。

理想的な縦横比(ピクセル単位で)がわかる方がいらっしゃると有難いです。
試した操作手順
質問掲示板にある手段
投稿者:No Name Ninja 投稿時間:2014-04-17 11:09:29

この質問は解決済みです

投稿者 : No Name Ninja
投稿時間:2014-04-30 13:22:48
>だとすると、background-image: url(背景画像のURL);の前に全角スペースがあるので、これの所為かもしれません。全角スペースを削除してみて下さい。

無事できました!ありがとうございます。
投稿者 : No Name Ninja
投稿時間:2014-04-29 22:01:14
もしかすると、回答(投稿時間:2014-04-28 23:07:03)をコピペしてコードを貼り付けましたか?

だとすると、background-image: url(背景画像のURL);の前に全角スペースがあるので、これの所為かもしれません。全角スペースを削除してみて下さい。

>png方式ではだめなのでしょうか?
画像ファイル形式がPNGということですよね?
サイズが大きすぎなければ大丈夫ですよ。
投稿者 : No Name Ninja
投稿時間:2014-04-29 10:22:05
返信ありがとうございます。
CSSボックス内の指定された場所に例と同じようにURLを貼ってみたのですが、全く反映されません。
画像は忍者ブログにアップロードしています。
png方式ではだめなのでしょうか?
投稿者 : No Name Ninja
投稿時間:2014-04-28 23:07:03
質問者さんの提示のテンプレートは、最初からヘッダー画像が入っていないテンプレートです。

幾人かの回答者が答えているように、カスタマイズに慣れていない人の場合、最初からヘッダー画像が入っているテンプレートを使用して、画像の差し替えだけをする方が簡単です。

上記を踏まえた上で、以下、解説です。
※1つ前の回答が詳しいので、以下の解説は大分端折ります。

1)ブログの管理ページにログイン。
2)テンプレートの修正画面を開く。
3)CSSボックス内にて、以下を探す。

/* ヘッダー全体の設定 */
.header {
margin-left: auto;
margin-right: auto;
width: 1090px;
min-height: 150px;
}

上記の部分がヘッダーボックスの設定です。

4)このボックスに背景画像を指定する。

.header {
margin-left: auto;
margin-right: auto;
width: 1090px;
min-height: 150px;
 background-image: url(背景画像のURL);
}

※画像サイズは、ボックスのサイズを見るに、横1090px、縦150px、が良いようです。あとは、実際に表示確認してみてからいろいろ修正してみて下さい。

※参考
└背景:http://www.tagindex.com/stylesheet/box/background_image.html
└一括指定:http://www.tagindex.com/stylesheet/box/background.html

5)「データ保存」ボタンをクリック。
6)実際にブログにアクセスして表示確認(Ctrlキー+F5キー)する。

※ブログタイトルのバランスを変えるなど、更に質問がありましたら、またどうぞ。
投稿者 : No Name Ninja
投稿時間:2014-04-28 14:12:20
私の書き方がひどく皆様を混乱させてしまい大変申し訳ありません。

現在使用しているテンプレート「スタンダード」(http://blog.ninja.co.jp/Preview/MASTER/6878/)にヘッダー画像を挿入したいのですが、どの部分に、どのようなコードを挿入すればよいのでしょうか?

HTMLとCSSどちらでも構いません。
画像自体のアップロード方法は知っています。
投稿者 : No Name Ninja
投稿時間:2014-04-23 21:19:48
何もかも分からない人に、分かり易い、且つ、実際にカスタマイズし易い、ように説明するには、

1)「テンプレートの検索」から、最初からヘッダ画像が配置されている、自分好みのテンプレートを探して、そのテンプレート名を、この掲示板に明記する。

2)差し替え予定の画像のサイズ(○○px×○○pxという感じで)を、この掲示板に明記する。

・・・といったことが必要になります。
上記とことが分かれば、ブログ、CSS、HTMLについて、よく分からない人にも説明できると思います。

取り敢えず、以下の2点を質問者さんの希望していることだと仮定して説明をしますね。

・ベースには「くろろ」さんのWebstyle #01 Mechanicsというテンプレ―トを使いたい。
・上記テンプレートのヘッダ画像を、別の画像に差し替えたい。

1)ブログの管理ページに入る。
2)「デザイン」項目の「テンプレートの検索」をクリック。
3)「キーワード」に「Webstyle #01 Mechanics」と入れてテンプレートを検索する。
4)該当したテンプレートの「利用規約」「詳細」をそれぞれクリックしてよく読む。
5)「ダウンロード」ボタンをクリックする。
6)自分のPC内に入っている、差し替えたいヘッダ画像を探す。
7)画像ファイル名を半角の英数に変えておく。
8)ブログの管理ページに戻り、「ファイルのアップロード」をクリック。
9)「参照」ボタンをクリック。
10)差し替えたい画像を探して「開く」ボタンをクリック。
11)アップロードしたファイル一覧を見て、今アップロードした画像があるか確認する。
12)ファイル一覧にあるヘッダ画像をクリックする。
13)ブラウザのURL欄に表示されているURLが、その画像のURLなので、そのURLを控えておく。
14)ブログの管理ページに戻る。
15)「デザイン」項目の「PC用テンプレート」をクリック。
16)「お気に入りテンプレート」一覧の内の「Webstyle #01 Mechanics」の「このテンプレートに設定」をクリックする。
17)「使用中のテンプレート」の「修正」ボタンをクリック。
18)CSS編集ボックス内にて「/* ヘッダー */」を探す。
19)

background:url(http://bfile.shinobi.jp/5284/mechanik.jpg) no-repeat;

上記の内の「http://~mechanik.jpg」を、控えておいたURLに置き換える。

20)画像を差し替えたので、このテンプレート利用規約に従い、クレジットを書き換えます。
21)HTML修正ボックス内にて「<!-- ========= フッター ========== -->」を探す。
22)自作の画像に差し替える、または、クレジット表記の必要ない画像に差し替える場合は、以下を削除する。

/ Photo by <a href="http://~中略~" target="_blank">Geralt</a>

23)「データ保存」ボタンをクリックする。
24)修正画面を閉じる。
25)実際に自分のブログにアクセスして表示を確認する。

上記の操作で、ヘッダ画像の表示位置を直したいとか、繰り返し画像を使いたいとか、ヘッダ画像の映る部分を大きくしたいとか、クレジット表記が必要な画像に差し替えたいとか、そういう要望が出たならば、使用画像のサイズと併せて更に質問ください。

※自分のやりたいことは、上記ようなことではない、という場合はさらに詳しく自分の要望を提示ください。できうる限りは説明しますよ。
投稿者 : No Name Ninja
投稿時間:2014-04-23 20:25:27
なにが一体したいのでしょうか?
ブログを作った時期によってデフォルトで設定されているテンプレートは違います。
現在テンプレートの検索で「デフォルト」と入れても3つ提示されますし
過去には違うテンプレートがデフォルトで設定されていたはずです。
「スタンダード」で検索すると現在見つかるのは
http://blog.ninja.co.jp/Preview/MASTER/5844/
これだけみたいですけど。

>ヘッダ画像のあるテンプレを選んで適用させてください。
これについての補足説明です。
ヘッダ画像のあるテンプレートを使うことにして
そのトップ画像を自分が使いたいものに差し替えるというだけであれば
該当の画像URLを書き換えて多少の調整をするだけで終わるので楽です。
ヘッダ画像の存在しないテンプレートに画像を入れる場合は
URLを書き換えるだけではできません。
HTMLとCSS両方をいじらないといけないこともあるので
全く分からない人には難しいと思われます。
どうしても特定のテンプレートを使いたいときはどれのことなのか第三者にもわかるように書いてください。

http://blog.ninja.co.jp/Preview/MASTER/6878/
もしもこれのことならば幅可変なテンプレートなので画像を入れるとするとかなり横に長いものを入れないと
閲覧者の環境によっては中途半端な画像がタイトル背景に入ることになるのではないかと思います。
またブログのタイトルはheaderTitleですが
ブログのサブタイトルはその下の横メニューと一体になっているため
ブログタイトル及びサブタイトルの背景に画像を入れようと思うと
その横メニューが被ってしまい下の方が切れて表示されないですね。
width: 1090px;
min-height: 150px;
とあるので横幅は1090以上必要です。
このテンプレートとWebstyle #01 Mechanicsでは構造やトップ部分を指定しているクラス名などが違うので
一部コピーして持ってくるとデザインが崩れるだけだと思います。

ブログのトップに入れたい画像を差し替えるときは
自分でその画像を用意する必要があります。
自分で用意できない時はフリーの画像を探してくる必要があります。
その場合はフリー画像を配布しているサイトの利用規約をよく読んでトラブルにならないようにして下さい。
リンクを貼らないとダメというところや画像配布サイトへの連絡必須などサイトによって決まりがいろいろあります。

共有テンプレートに使用されている画像を他のテンプレートに勝手に使ってはいけません。
>そのテンプレの注意事項をよくよく読んでくださいね。
と書かれているのもそのためです。
テンプレートのダウンロード画面に「利用規約」と「詳細」があるのでその部分をよく読んでください。

Webstyle #01 Mechanics
http://blog.ninja.co.jp/TemplateCopyright/5284/


以下参考まで:
http://www.htmq.com/style/background-image.shtml
投稿者 : No Name Ninja
投稿時間:2014-04-23 14:06:04
>取り敢えず、「このテンプレートを使う」と決めてくれないと、ヘッダ画像差し替えの事細かな説明ができませんので、まずは、ヘッダ画像のあるテンプレを選んで適用させてください。画像を差し替える場合は、そのテンプレの注意事項をよくよく読んでくださいね。

とりあえず「くろろ」さんのWebstyle #01 Mechanicsを使用することにしました。

こちらのテンプレートからヘッダー画像の挿入にあたる部分をコピーして、現在使用しているスタンダードにペーストすればよいのでしょうか?
投稿者 : No Name Ninja
投稿時間:2014-04-21 22:54:45
>他の方がデザインテンプレートを公開しているのを知りませんでした。
ブログの管理ページ>「デザイン」項目の「テンプレートの検索」からいろいろ探せます。

>気に入ったデザインのテンプレートからソースコードをコピーしても大丈夫なのでしょうか?
気に入ったテンプレートがあれば、そのテンプレートを適用させてください。
該当部分のソースだけコピーしても、希望通りに表示されるとは限りませんし、テンプレート作成者側で禁止している場合も多いかと。

>テンプレートはスタンダードを使用しています。
デフォルトテンプレは、確か、その時々、ユーザによって異なっていたと思うので、質問者さんが実際どういうスタンダードテンプレを使っているのか判断できません。

ということで、
取り敢えず、「このテンプレートを使う」と決めてくれないと、ヘッダ画像差し替えの事細かな説明ができませんので、まずは、ヘッダ画像のあるテンプレを選んで適用させてください。画像を差し替える場合は、そのテンプレの注意事項をよくよく読んでくださいね。
投稿者 : No Name Ninja
投稿時間:2014-04-21 13:33:13
テンプレートはスタンダードを使用しています。

他の方がデザインテンプレートを公開しているのを知りませんでした。すみません。
気に入ったデザインのテンプレートからソースコードをコピーしても大丈夫なのでしょうか?
投稿者 : No Name Ninja
投稿時間:2014-04-20 15:36:03
テンプレートのほとんどは同じ忍者ブログユーザーが善意で公開しているものです。
記事幅もブログ全体の幅もそれぞれ違います、構造もそれぞれです。
トップ画像が入っていると言っても全部のテンプレートで同じ大きさのものが入っているわけでもありません。
その画像もHTMLで指定しているものもCSSで指定しているものも存在します。
絶対的なやり方があるわけではないので、どのテンプレートを使いたいのかを書けと言われるんです。

>理想的な縦横比(ピクセル単位で)
スマートフォンからのアクセスを考えるなら狭い方がいいでしょう。
ただしテンプレートが画像に合わせて伸縮することは少ないので自分で調整をする必要があると思います。

No.1019 共有テンプレートの改変ついて
No.278 テンプレートの要望
投稿者 : No Name Ninja
投稿時間:2014-04-17 14:30:58
使用テンプレート名は?