Article page

by
  • Comment:22
  • Trackback:0

sample
当該記事は
「ホントに初心者で背景を変えるにも何をしたら良いかわからない
という方へ向けてです

私の自作テンプレ「Glass_shore」に限定して説明しますね
通常 ブログ背景というのは一枚であることが多いですが
こちらのテンプレは少し特殊な(トリッキーな) 内容になっておりまして
背景を指定するソース(文字列) が一箇所ではありません

エディターをお持ちの方は ソース内容をコピペで移されての作業をおすすめします
メモ帳でも構いません


意味がわからんよ!
という方は以下の手順に従ってどうぞ

************************
① 変更したい画像の準備
************************

まずこれがなければ何も始まりません
シェア画像をお使いになる方は 必ずサイトの規約を確認されまして
配布元のルールに沿った利用をお願い致します

画像のサイズは大きければ大きいに越したことはありません
今回の作品は パソコンの画面がいかなるサイズであっても 全画面としてフィットするような構成です
元画のサイズが小さいと「拡大」されて 解像度が落ちてしまいます(画像が荒くなる という意味です)
パソコンのデスクトップに設定できるぐらい大きい方が望ましいですね
これは個人の感覚ですので 最終的にご自分が納得行く表示になればオッケーですよ
推奨は 横 1000px 以上のものだと理想的です



**********************************
② 画像をアルバムにアップロードします
**********************************




ご自分の管理ページを開いてくださいね
上の方に「ファイルアップロード」という項目があります
こちらから画像をFC2のサーバーへ収めます
すると 画像に URL が与えられますので
そちらのURLとデフォルト(標準 このテンプレでは女性と浜辺の画像) のURL との差し替えを行うわけです



赤く色付けした部分が URL です


*********************************************
③ Glass_shore をブログテンプレートとして適用します
*********************************************

これから具体的作業に入りますが
必ず該当テンプレを「適用」した状態にしてください
たまにこれを忘れてですね「できないよぅ」という方がいらっしゃいます
設定していないテンプレは修正を行っても目で確認ができませんので
ちゃんと適用されているか確認をしてください


*************************
④ テンプレの「複製」をします
*************************

こちらも忘れずに行ってください
カスタム中にわけのわからないことになっても 元が残っていればなんとかなります
元ソースに上書きを行うと 修正が大変困難です
複製をし忘れましたら 一旦消去→再度ダウンロード
ということになり また一からやり直しという羽目になります




********************
⑤ 該当箇所を探します
********************

Glass_shore の背景については全部で 4箇所 あります
指定する画像自体は一枚ですが 4箇所記述すべき箇所がある ということです
CSSソース の方にありますので 上の HTMLソース内容は触りません



該当箇所の探し方ですが
まずパソコンのキーボードで

Ctrl + F

を押します
「コントロール」と「エフ」ですね
するとブラウザの右上にこんなのが出ます
(ブラウザによって表示位置は異なります 以下のスクリーンショットはGoogle Chromeのものです)




これはページ内で文字列を検索するためのフォームです
私のテンプレやFC2の特殊な機能というわけでなく 全ブラウザ共通ですので覚えておくと便利ですよ

この検索フォームの中に以下の文字列を入れてください(コピペでどうぞ)

//blog-imgs-71.fc2.com/v/a/n/vanillaice000/bea.jpg

これが Glass_shore の背景URLです
該当箇所はキーボードの Enter/ Return を押すと移動します




色付けで表示されてますよね
これを全て(4箇所) ご自分が変更したい画像の URL と差し替えます
他の文字列を巻き込まないよう重々注意の上書き換えてください


---------------------------


以上が背景変更の手順です
わかりにくい箇所等ありましたらご指摘くださいね

* Javascript (ジャバスクリプト) の関係上「プレビュー」では確認ができません
「更新」をクリックしてご確認ください
更新を押すということは上書きを行うということですので くれぐれも複製をお取りください


背景変更の例

sc0011.jpg
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 22

-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/03/30 (Mon) 18:33 | EDIT | REPLY |   
vanillaice (Akira)  
@内緒「n」さんへ

とりあえずのお返事です!

今出先なものですから、手元にパソコンがありません。
帰宅次第プラグインの仕様等確認してみますね。
教えて頂きたいのは

・公式プラグインですか?共有ですか?
・プラグインの正式名称(pictlayerで良いのかしら)
・『画像の等倍表示』というのは、原寸が大きいので、記事内で縮尺調整された画像をクリックする(またはマウスオーバー)で原寸大表示する、ということで合ってますか?

この三点よろしければ教えてくださいね ( ゚Д゚)ノ

2015/03/30 (Mon) 19:53 | EDIT | REPLY |   
vanillaice (Akira)  
nさんへ

もういっこ!
お使いのブラウザも念のため聞いておこうかな(笑)
よろしくお願い致しますe-454

2015/03/30 (Mon) 19:57 | EDIT | REPLY |   
vanillaice (Akira)  
nさんへ

今最新記事でサンプル出しましたが、こういうことで合ってますか (´・ω・`)
お返事聞いてからやり方書こうと思います(笑)

ちなみにそちらのpict~プラグインですが、Google Chrome・Firefox等のモダンブラウザでは上手く機能しないようです。
ieを主軸に作成されたものではないかと思います。

記事の方では新たにプラグインを入れて頂く形ですが、その辺は私の方で済ませましたので難しくはないと思います。
でもちょっとした手間は必要ですー (´・ω・`)

2015/03/30 (Mon) 23:34 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/03/31 (Tue) 06:29 | EDIT | REPLY |   
vanillaice (Akira)  
@内緒「n」さんへ

はい。これから書きますよー ( ゚Д゚)ノ

ご指摘の通り、過去の画像はどないすんねん… (´・ω・`)
という問題がありますよね。
それはJavascriptの記述でクリアできます。
ただし注意点があります。
それも踏まえて記事にしたいと思いますので、しばらくお待ちくださいねe-257

ちょっとね、次男坊が喫茶店に行きたいとせがむもので ( ̄∀ ̄;)
帰宅次第作業します(笑)
すみません^^;

2015/03/31 (Tue) 09:57 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/04/01 (Wed) 04:04 | EDIT | REPLY |   
vanillaice (Akira)  
@内緒[n]さんへ

はい。ご指摘の通り、画像には『縦横比』というものが存在しますよね。
それについて事前に記事にするべきかと思ったのですが、取り急ぎこちらで。

結果から申しますと、
「現状ではできません」
ということになります。
ちょっとややこしい説明をしていきます。

FC2ブログの画像の扱いとhtmlやCSSの絡みでいくつか問題が発生します。
テンプレ製作時に既に『不可能』となる事象が以下の通り。

① 画像のURLを事前に知るのは不可能
② 画像のサイズや拡張子を事前に知るのは不可能
③ FC2のアップロード画像は必ず imgタグが自動付加される

この3つです。
画像自体はテンプレ制作者ではなくお使い頂くユーザーさんの作業ですよね。
どんなサイズの、そして
その画像が縦に長いのか横に長いのか
画像は必ずしも正方形とは限らず、これを事前に把握することが叶いません。

画像を並べて表示する際、どちらか一方に基準を合わせて大まかなサイズを揃える必要があります。
例えば 1000✕800 の画像と 150✕300 の画像とを並べようと思うと、随分大きさに違いがありますよね。
そこでどちらか一辺を 100% にする、というパーセンテージ換算を行います。
100✕100のボックスの中に画像を横100%で入れると、実寸に関わらず
1000pxの画像の横幅は100px(ボックスの横幅100%)となって縦横比を維持して縮尺
150pxの画像の横幅も同じく100px・縦横比固定で縮尺

こういうことになります。

一旦投稿(笑)

2015/04/01 (Wed) 13:18 | EDIT | REPLY |   
vanillaice (Akira)  
続きです

ところがこの『一辺を基準にする』選択をした時点で、逆に縦横比が困ったことになるんです。
短い方の辺を基準にすると画像は上手く収まりますが、長い方を基準にすると短い方が見きれてしまう
という物理的法則です。

そして先ほど述べましたように、画像の横が長いのか縦が長いのか。
これは『その時の画像による』わけですので、どちらかを100%に指定するととてもマズいことになる、という理屈です。

円の中に実際に収めてみると、短辺の見切れというのはとっても目立つんですね (´・ω・`)
せっかく丸いのに中に四角入っとるやんけ、的な見た目になってしまいます。

では画像のサイズをそのままで、中央から半径いくつというpx指定で表示を行おうとしますと、
これは画像の大きさが如実に影響しますよね。

1000pxの画像の中心から300px
150pxの画像の中心から300px = 既に四方で見切れ発生

ではパーセンテージに換算した上で中心から半径を取るとどうなるか。
これは『振り出しに戻る』ってことになります(笑)

実は画像の扱いというのは大別して二種類あります。

● backgroundとして掲載する
● img として掲載する

この二通り。
background として画像を扱うと、実は問題をクリアすることができたりするんです。
がしかし、FC2では画像に強制的に img というタグが適用されますし、
background として装飾を行う際には対象画像のURLが必ず必要です。
②と③の問題から、backgroundでの画像掲載というのは叶いません。

縦横比を多少崩しても円として収めるのか、縦横比を確保して見切れには目をつぶるのか。
この二択だったのですが、目視での検証を重ねた結果、
『見切れの方がより見苦しい』
という結論に至り、こういう形での掲載となっております (*_ _)

でも何か他に良い方法があるのかもしれないですね (´・ω・`)
私の手数の中には存在しませんでした。
勉強不足で申し訳ない (*_ _)

2015/04/01 (Wed) 13:31 | EDIT | REPLY |   
vanillaice (Akira)  

四角で掲載すれば良いんじゃね (´・ω・`)

とかはナシでe-452
四角ではちょっとアイキャッチとしてはつまんないですもんね~ (´・ω・`)

2015/04/01 (Wed) 13:32 | EDIT | REPLY |   
-  
続きだよ

すっごい時間経ってますが続き((((笑)

>はみ出た分は表示させないような処理

Botanicalテンプレがその方法を採用しています。
2015.4.1 16:50 現在ここに設定しているやつ (´・ω・`)

実際の画像は写真の枠からはみ出していますが、はみ出した部分は表示しないという指示を書いています。

ただしやはり縦横比を維持しているので、見切れは発生するんです。
そのためにこちらでは画像(洗濯バサミや写真枠の部分)で小賢しく小賢しく処理しております(笑)

写真の上には黒のグラデーションレイヤーを入れて、画像の上辺が見切れた時にごまかせるようになってます。
なので「現像中 風」ってことで(笑)

いずれにしても狭い範囲の中ではみ出した部分を処理するとなると、よくできても左右両端ぐらいですよね。
画像同士の隣り合わせ距離が20pxしか無いのに、はみ出したのが100pxとなると、隣の画像と重なりますよね。
重なった部分の表示を消してしまうと、今度はキャプションに影響が… (´・ω・`)

2015/04/01 (Wed) 16:52 | EDIT | REPLY |   
「n」さんへ  
まだまだ続くよ

続いてるんです((((笑)
長くて嫌になるね。ごめんなさいね ^^;

ここで発想の転換をして頂けないだろうか、という提案です。
こちらの記事に目を通してくださいませ。

http://vanillaice000.blog.fc2.com/blog-entry-161.html

change styleは押さないでね。
ちょっとまだ処理前です(笑)
この記事下の方「歯抜けはイヤっ!」のところが該当です。

ざっくり言うと、アイキャッチ用の画像を用意してもらおう、ってことです。
表示したい画像を正方形300✕300に切り抜きます。
全体像が見えるようにしたいのならば、短辺を300pxにして縮小した上で、長辺の余分を切り落とす格好です。
ですから画像の編集が必要になってきます。
それが「手間ではない」と思える、というのが前提。

記事の通り、0✕0 での掲載をしますと記事には当然表示されません。
されないというよりも、見えません。
しかし実際には存在しているので抽出が行われます。
記事の一番最初に貼ってもらうわけですが、0✕0ですから記事の書き出し位置にも影響しません。
そして例えば記事内にいくつも画像があり、その中の最初の画像以外をアイキャッチに使うことも容易です。

ただしjavascriptで自動処理というのはできませんので、これからUPされる画像については、という制限 もしくは 対象画像を手作業で処理するということになります。

これが確実でおすすめですが、「手間である」と感じられる場合にはおすすめしません(笑)

2015/04/01 (Wed) 17:20 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/04/01 (Wed) 22:55 | EDIT | REPLY |   
Akira  
To alquiler casas vacaciones playaさん

I'm sorry to say that I unfortunately can't understand Spanish.
Ummm...have no clue lol but.. thanks for ur comment.

全文英語も許可してるのに何故かダメでしたので日本語追加。

2015/04/02 (Thu) 00:39 | EDIT | REPLY |   
nnn  
ご教授ありがとうございます!

おはようございます。
昨晩じっくり熟読してお勉強させていただきました!
本当にご丁寧にありがとうございます!
素人だと、理屈を知らずに首を傾げていたので、
いろいろなソース解説サイトをお邪魔して調べても、
中々「知っていて当然」な状態でお話が進んでしまったり
内容が全然別だったりして、理解がしにくく…
(私が無知なだけだとは思うのですが^^;)

すごく分かりやすい書き方だったので
とってもありがたかったです。
私もアイコンサムネイルの丸いのがとっても気に入っております!
この丸い形が並んでるのが可愛いです~!

そして0px表示とは予想外な手法で驚きました。
なるほど!と自分の中で検討しまして、
本当に気になる記事だけ
そのように導入していこうかなと思いました。
過去記事もそうして編集したいと思います。

またまた質問が出てしまい、本当に何度も申し訳ありません。
大変恐縮なのですが、最後にこちらだけご教授頂けますと…幸いです。
お忙しい中、お手隙の際にご確認頂けますでしょうか。
次コメントに致します。

2015/04/02 (Thu) 12:48 | EDIT | REPLY |   
nnn  
質問3

>テンプレートGlass_shoreの「タイトルリスト」の部分です。
・真ん中サークルのタイトルリストクリック
→ページが飛んで今までの記事一覧が表示される

>>こちらの記事一覧を開いた際に
アイキャッチというか、
記事中身の画像がサムネイルで横に表示は可能でしょうか?
ど素人で、前の質問同様、また失礼に無知な質問をしてそうで……

<%topentry_image>といった変数を使用するのかな?と思い
調べてみたりしたのですが、中々うまく出来ません。
エントリーNOごとにアイキャッチ画像を番号ずつ用意して…
といった手法も出てきたのですが見ても
一覧テキスト「INDEX」から下のHTMLと理解が難しく…(すみません)
そもそも、やはり<%topentry_image_72>だとか
何かソースで指定できるような簡単な作業ではなく、
番号ずつサムネイルをすべてに名前を付けて用意必須……だったりしますか?
だとしたら少しクラッとするなぁと…。。

ちなみに、
>一部の記事を選別してそれだけサムネを表示したい
といった希望はありません。

個人的な希望の質問ばかり続けてしまい
大変ご迷惑ばかりおかけしております。。

どうぞよろしくお願いします。

2015/04/02 (Thu) 12:50 | EDIT | REPLY |   
vanillaice (Akira)  
@nnnさんへ

専門サイト難しいですよね ^^;
いやもうゼロからどころかマイナス5あたりから説明お願いします…って感じになります(笑)

0px挿入は「ここぞ」の時にやってみてくださいね。

-------------

タイトルリストの表示に画像を追加 の件

こちらは現状FC2の方が変数出力に対応していません。
変数はURLとの紐付けがあってですね
(blog-entry-数字.html など)
タイトルリストって色々制限のあるページ表示だったりします。
コメント数とトラバ数の表示ができるようになったのも最近のようです。
なのでいずれはできるようになるかもしれませんねe-247

2015/04/02 (Thu) 14:04 | EDIT | REPLY |   
vanillaice (Akira)  
@nnnさんへ

お褒めいただいてありがとうです。
とっても励みになりますe-446
まだまだ未熟者ですが、精進したいと思います (o'ω')ノ

2015/04/02 (Thu) 14:14 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2016/05/13 (Fri) 10:27 | EDIT | REPLY |   
Akira  
To BetweenNeo背景変更の件 内緒さん

こんにちは
Ctrl+Fキー検索(htmlソース後方にあります)

<!-- 注)背景スライドはここです -->

を目印にして頂くと出てきます。
画像の増減をされる際には、最後の一枚分だけ末尾のカンマ(,)なし。
それ以前のものには付けるようにご注意ください。

それからこちらがBetweenNeoのページですので、カスタマイズ時にご参照くださいませ ↓

http://vanillaice000.blog.fc2.com/blog-entry-305.html

2016/05/13 (Fri) 16:46 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2016/05/13 (Fri) 18:45 | EDIT | REPLY |   
Akira  
To BetweenNeoの件 内緒さん

できましたか。
良かったです
こちらこそありがとうございます ( ゚Д゚)ノ

2016/05/14 (Sat) 03:00 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い