彼此ともつかぬ場所


□ スポンサー広告 □

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




*    *    *

Information

□ 使用方法 □

for_novel シリーズ 使用画像を変更する

 当ブログの共有テンプレートは、カスタマイズ自由です。

 自分の作ったデザインにこだわりがないわけではありませんが、私がお気に入りの画像を使ってテンプレートを飾りたい、と思うのと同じように、ユーザの皆さんもそれぞれお使いになりたい画像があるだろう、と思うからです。自分だけのオリジナル・テンプレートって憧れますよねv

 というわけで、「for_novel シリーズ」の画像を他のものに差し替える方法を説明いたします。
 画像は、全てスタイルシートにて背景画像に設定しています。

 

表紙の画像について


 先ずはカスタマイズする前に、表紙画像についての各小説用テンプレートの特徴を以下に記します。原則、画像の表示位置は変更出来ないとお考えください。
for_novel_olive
画像を画面の側に表示。デフォルト:横200px * 縦750px
for_novel_bamboo
画像を画面の側に表示。デフォルト:横400px * 縦768px
for_novel_sky
画像を画面の上部に表示。新着案内は画像に重なりません。デフォルト:横700px * 縦525px
for_novel_penguin
画像をスクロールに対して画面の中央に固定。カスタマイズによっては、自由な位置に画像をレイアウトする事が出来ます。新着案内は画像に重なりますので文字とのコントラストにご注意を。デフォルト:横700px * 縦270px
 これらを参考に、差し替える画像をご確認ください。

 さて、カスタマイズとまいります。
 表紙の画像の設定は、「インデックス画面の設定」の「外枠」にあります。(古いバージョンのテンプレートをお使いの場合は、「表紙 外枠」と書いてあると思います)
この、「.index { ……」で始まるクラス設定にある、

min-height:***px;

の赤字の部分を「変更したい画像の縦のピクセル数」に、

background-image:url(http://blog-imgs-**.fc2.com/g/r/e/greenbeetle2/******.jpg);

の青字の部分を、「変更したい画像のURL」に置き換えてください。


 背景画像をスクロールに対して固定している「for_novel_penguin」については、少し注意が必要です。

 まず、上で示した「min-height」の値は、「100%」のまま変更しないでください。

■ デフォルトのスクロール固定のまま画像を表示したい場合
 画像の位置を設定する「background-position」の値は、出来るだけ「center center」のままにしておいてください。というのも、スクロールに対して背景を固定する場合、画像の位置はブラウザのウィンドウ全体での配置となるからです。「background-position:left center;」や「background-position:right center;」のようにのどちらかに寄せてしまうと、ブラウザの横幅が広い場合は画像が表紙の枠の外側に隠れてしまう事になります。同様に、「background-position:center bottom;」とに固定すると、やはり画像がページ下部のコピーライト表示に隠れてしまう可能性があります。
 というわけで、背景をスクロール固定のまま使用する場合は、「background-position」の値は、左右に対しては中央に、上下に対しては上部か中央に、つまり「center center」もしくは「center top」に固定する事をおすすめします。

■ 表紙の枠内に自由に画像をレイアウトしたい場合
 スクロール固定を解除する必要があります。「.index { ……」で始まるクラス設定から、「 background-attachment:fixed;」の文字列を削除してください。
 そうしてから「background-position」の値を変更すれば、表紙の枠内の上下左右自由な位置に、背景画像を表示させる事が可能になります。例えば、画像を左上に寄せたい場合は「background-position:left top;」と、右下に表示させたい場合は「background-position:right bottom;」といった具合です。詳しくは、「TAG index」様の「背景画像の表示位置を指定する」を参照してください。
 新着案内が画像の上に重なるようになっていますので、文字とのコントラストに気をつけて背景画像を選んでいただければよいかと思います。



 

ヘッダについて


 表紙以外の画面で使われるヘッダについては、「ヘッダの設定」の「.header { ……」で始まるクラス設定で画像を指定しています。

background-image:url(http://blog-imgs-**.fc2.com/g/r/e/greenbeetle2/******.jpg);

の青字の部分を、「変更したい画像のURL」に置き換えてください。

 使用画像のサイズに関して、「for_novel_sky」が上部メニューバーが画像の上にレイアウトされるため、縦サイズが若干大きめの 180px となっている以外は、他は全て 横700px * 縦130px となっています。
 これらと異なるサイズの画像を使用される場合は、「.header」で始まる行にある

height:***px;

の赤字の部分を「変更したい画像の縦のピクセル数」に変更してください。

 ただ、ブラウザによっては、「.header」の行の「height:***px;」を変更するだけでは、画像が上手く表示されない場合がありますので、その時は、「/* ブログタイトル */」の「h1」で始まる行の最後の方にある、

padding:**px **px **px **px; margin:**px **px **px **px;

で調整してください。
 padding(内側の余白)も、margin(外側の余白)も、「 左」の順に余白を指定していますので、

「ブログタイトルの文字サイズ(24px)」+「上padding」+「下padding」+「上margin」+「下margin」=「画像の縦サイズ」

となるように数値を変更なさればOKです。


 

フッタについて


「フッタの設定」をみてください。「コピーライト」のスタイル指定にある

background-image:url(http://blog-imgs-**.fc2.com/g/r/e/greenbeetle2/******.jpg);

の青字の部分を、「変更したい画像のURL」に置き換えてください。

「for_novel_olive」と「for_novel_penguin」はフッタに画像を使用していません。新たに画像を設定したい場合は、

.copyright { background-image:url(新たに設定したい画像のURL); background-repeat:no-repeat; background-position:center bottom; font-size:80%; text-align:center;(後略)}

のように青字部分を追加すればよいでしょう。

 ここで使用する画像のサイズは、横700px * 縦70~80px となっています。


 

最後に……


 HTMLの708行目にある、

Graphics By <a href="素材サイトのURL" target="_blank">素材サイト名</a> + Template By <a href="http://greenbeetle2.blog117.fc2.com/" target="_blank">GreenBeetle</a>

の青字の部分を、カスタマイズ内容に即したものに変更してください。

 スタイルシートの記述は似たような項目が多いため、うっかり編集間違いをしてしまう可能性も少なくないと思います。カスタマイズ前には、テンプレートの複製をとって、いつでも編集前の状態に戻れるようにしておく事をおすすめします。
 また、/* コメント */を除く全ての記述は半角で入力するようにお願いします。全角文字(スペースも含む)が紛れ込んでしまわないように注意して、テンプレート・カスタマイズを楽しんでくださいね。



*    *    *

Information

Date:2009/05/05
Trackback:0
Comment:11

Comment

[299] 

こちらのテンプレートsword_and_magic_aをダウンロードさせてもらいました。扉つきが欲しかったので助かります。

背景の色を変更したところ、記事とプラグインの場所に網がかかっていました(Url先の状態です)。網を取り除くか、網の色を変えるには、どこを変更したらよいですか?
2013/02/02 【朱乃弥矢】 URL [編集] 

[300] 記事本文の網かけについて

>朱乃弥矢さん

ダウンロードありがとうございます!

記事本文の背景の網かけは、
http://blog-imgs-41.fc2.com/g/r/e/greenbeetle2/black.gif
という透過処理をした画像ファイルで行っております。
色を変えるには、新しく画像ファイルをつくらなければなりません。

削除するには、テンプレートのスタイルシート(CSS)から

background-image:url(http://blog-imgs-41.fc2.com/g/r/e/greenbeetle2/black.gif);

を削除してください。

記事本文は、101行目の「/* エントリ */」
他にも、カテゴリ画面で表示される「/* カテゴリ一覧 */」は94行目、
「/* コメント */」は122行目、
ヘッダのカレンダーは削除しておられるようですが、念のため75行目。
全部で四箇所に網かけ指定があります。


プラグインについては、背景に網をかけずに、単に背景色を指定しているだけなので、
「/* プラグイン */」の88行目、

background-color:#333333;

の部分を好きな色に変更してみてください。
2013/02/02 【GB】 URL [編集] 

[301] 

丁寧なお返事、大変有難うございます。
おかげで解決しました。
2013/02/03 【朱乃弥矢】 URL [編集] 

[317] 

初めまして、Svaと申します。
以前こちらでfor_novel_oliveをダウンロードさせていただきました。

今ヘッダーを変更しようと思い、上記の通り(やり方通り)変更しましたが、URLをファイルのものに貼りなおしてもヘッダーが変わらなくて困っております…。

ブログ字体初心者なのでもしかするとヘッダーの概念も間違っているのかもしれません。
ヘッダーというのは表紙画面以外のページに飛んだ時の一番上に表示される画像でよろしいでよね?

ちなみに、使用したいと思っている画像は700px130pxで、ブログにアップロードしたものです。

返信よろしくお願いいたします。
2014/02/17 【Sva】 URL [編集] 

[318] >Svaさん

はじめまして。ダウンロードありがとうございます。

まず、ヘッダが何か、については、Svaさんが認識しておられるとおりで間違いありません。

テンプレートのヘッダ画像URLを変更したにもかかわらず、表示が変わらない、ということですが、
仮に、
ヘッダ画像がきちんとアップロードされていて、
テンプレートの記述に間違いがない、
という前提で考えると、あと思いつく原因は、

表示確認をテンプレート編集の「プレビュー」で行っている

ということぐらいしでしょうか。

プレビュー機能が有効なのはINDEX画面(表紙)だけで、リンクをクリックすると、プレビューモードから外れてしまうのです。一度テンプレートを「更新」して確認してみてください。

これ以上の詳しいことは、実際のブログを拝見してみないとわかりません。
お力になれず、すみません。
2014/02/17 【GB】 URL [編集] 

[319] 上の補足です

一晩たって上のコメントを読み返してみて、不十分な箇所に気がついたため、補足いたします。

> プレビュー機能が有効なのはINDEX画面(表紙)だけで、リンクをクリックすると、プレビューモードから外れてしまうのです。一度テンプレートを「更新」して確認してみてください。



> プレビュー機能が有効なのはINDEX画面(表紙)だけで、リンクをクリックすると、プレビューモードから外れてしまうのです。摘要しているテンプレートと、ヘッダ画像を変更しようとしているテンプレートが別な場合、ヘッダ画像を変更したテンプレートを、一度実際に適用して確認してみてください。


……適用テンプレートを編集しているにもかかわらず、ヘッダ変更ができない、という場合は、私にはちょっとお手上げです。すみません……。
2014/02/18 【GB】 URL [編集] 

[320] 

こんにちは。丁寧なご説明ありがとうございます。
今日も試してみたのですが、更新ボタンを押してもやはり画像は変わらなかったです…。
ちなみにですが、ヘッダー設定の画像URLを貼り付けるところを完全に切り取って白紙状態にして更新もしてみたのですが、それでも元々の画像が表示されました(笑)

ということは、

もしかして自分が見ているところが違いますか?for_novel_olive のスタイルシート編集の、.headerから始まる部分で合っていますか?

もし変更ができないようでしたらそのまま使いますので^^
お返事よろしくおねがいします。
2014/02/18 【Sva】 URL [編集] 

[321] >Svaさん

こんばんは。

「ヘッダー設定の画像URLを貼り付けるところを完全に切り取って白紙状態にして」も、元の画像が表示されるんですか? それは本当に変ですね。

その時、そのページのソースはどうなっていますか?
link rel="stylesheet" の直後のURLを直接ブラウザで表示させてみて、.header 以下のところは、編集したとおりになっていますか?
実際にブログを拝見してみれば、何かお力になれるかもしれません。が、見せていただいても何も解らないままかもしれません……。
それでも構わなければ、ブログURLを教えていただけますか?
無理にとは申しません。
2014/02/18 【GB】 URL [編集] 

[322] 

こんにちは。
URLを貼り付けたかったのですが、ブログそのもののURLかどこのURLか分からずに貼っておりませんでした。(今回はブログそのもののURLを貼り付けました。もし間違いでしたらすみません)

header以下は編集通りになっているのですが画像が変わらず、分かりません。一度見ていただけると助かります。
よろしくお願いします。
2014/02/19 【Sva】 URL [編集] 

[323] >Svaさん

ブログURL、ありがとうございました。
早速拝見いたしました……。

……申し訳ありません!!
こちらのミスで、不必要な記述がスタイルシートに残っておりました!
以前テンプレートをバージョンアップした際に、削除し損ねていたようです。私の手元のファイルは正しいものになっていたので、気がつきませんでした……。なんという失態。

スタイルシートの「ヘッダの設定」を見てください。
/* ヘッダ */
/* ブログタイトル */
/* ブログタイトル */
/* ナビゲーション */
と順にあると思いますが、この、二つある /* ブログタイトル */ の後のほうをまるっと削除してしまってください。
以下の部分です。

/* ブログタイトル */
h1 { color:#dcd8c2; font-size:24px; font-weight:bold; background-image:url(http://blog-imgs-41.fc2.com/g/r/e/greenbeetle2/tsuki_to_sakana_2.jpg); background-repeat:no-repeat; background-position:top left; border:solid 1px #72640c; padding:30px 20px 70px 70px; margin:0px; }

これが、本来は存在しないはずの箇所です……。
これを削除すれば、上手くいくと思います。

本当に、ご迷惑をおかけいたしました。申し訳ありませんでした。
そして、ありがとうございました。Svaさんのおかげで、テンプレートのミスに気づくことができました。

どうかこれに懲りずに、これからもよろしくお願いいたします。
2014/02/19 【GB】 URL [編集] 

[324] 

こんにちは。
削除したら上手くいきました!ありがとうございます^^

いえいえ、こちらももっと早くにURLを貼りつけていればお手数おかけすることも無かったはずです;
申し訳ございません!
ご丁寧にありがとうございました。
今後ももし分からないことがありましたら質問させていただくと思いますが、よろしくお願いいたします。
2014/02/20 【Sva】 URL [編集] 

コメントの投稿

コメント書き込みの前に、是非一度「コメントについて」に目をお通しください。







 ブログ管理者以外には秘密にする

Trackback

TrackbackUrl:http://greenbeetle2.blog117.fc2.com/tb.php/28-3de0e737
この記事にトラックバックする(FC2ブログユーザー)

 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。