p_space2007-12-18(Tue)
* FC2ユーザー限定。
2008/03/17
コメント投稿欄にタイトルを記入出来るように変更。IEでの画像オンマウス時の表示を、他のブラウザと揃えた。 詳しくはこちらへ
2008/02/03
色違い（ホワイトバージョン）をアップしました。 詳しくはこちらへ
2008/01/15
修正版をアップしました。 詳しくはこちららへ
Fc2用共有テンプレート『p_space』をお使いいただき、誠にありがとうございます。このテンプレートは、エントリー内の画像をサムネイル表示する事で、表紙をギャラリー風に見せております。多くの写真でも出来るだけ速く描画出来るように考えて書かれています。
画像表示の速さを考えると、その都合上どうしてもインラインでjavascriptを埋め込まないとならなく、既存のテンプレートに後付のjavascriptでは間に合わないので新規製作となりました。新規作成までの簡単な経緯は テンプレートを作成 のエントリーにありますので御参考に。
その為に、お使いになる上で幾つか留意していただきたい点があります。このページにはその情報が載っていますので、お使いになる前にご一読くださいませ。
名前はphoto_spaceにしようと考えていたのですが、長いのでp_spaceとしました。
原寸画像をレイヤー表示するpictlayerも標準で組み込んであります。このテンプレートをお使いの場合は、共有プラグイン『Pictlayer』は使用しないで下さい。
カスタマイズはfc2の規約内で御自由にどうぞ。デザイン的には単純な部類ですので、どんどんカッコ良く仕上げていただければ、作者も嬉しいです。(^^)
また、アダルトサイト以外でしたら使用制限も設けません。
解説はHTMLとCSSの基本が解ってる方を対象に書いてあります。このことまで書き出すと切りが無いので、どうか御了承くださいませ。
お使いになる上で、重要な事を書き添えておきます。
1. 画像の表示・非表示について
表紙に載せたくない画像はclass="nds"とクラス指定してください。class="emoji"も載りません。管理画面から挿入した絵文字には、あらかじめこのクラスが指定されているはずです。
また表紙に表示される画像の数は、blog環境設定内の記事(ページ別)件数によって決まります。ここで設定した件数分の記事から画像を抜き出し表示します。サムネイルは個別ページへのリンクも兼ねてますので、画像が無くても一記事分は表示されます。
追記部分の画像を表示させたくない場合は、テンプレートの編集が必要です。（下記FAQ参照）
2. 拍手・ブックマーク画像について
環境設定で、ボタンの位置を追記リンクの前に指定すると、表紙に拍手・ブックマーク画像が表紙に表示されてしまいます。回避するには追記リンクの後を選択してください。また、ランキングなどのバナー画像を記事内に入れますと表示されてしまいます。テンプレートに記入すれば表示されません。
3. プラグインの配置について
プラグインはユーザーによって設定がまちまちで、使用数も分かりませんし、凝ったブログパーツなどをお使いの方もあるでしょう。なのでデフォルトでは第一から第三まで、左から並列に並んでいます。第一プラグインの中の各プラグインはeach1、第二プラグインの中はeach2、第三プラグインの中はeach3とそれぞれクラス分けされています。配置にはこのことを踏まえてスタイルシートを編集して頂ければ宜しいかと思います。参考までに、現在の自分のスタイルシートは以下のようになってます。
.each1, .each2, .each3 {
float: left;
position: relative;
width: 47%;
margin-left: 5px;
overflow: hidden;
}
簡易FAQ / 頂いた質問(コメント)へのリンク
- アクセス解析の挿入場所
- 初期状態で表紙に画像が表示されない 又は nbsを別の文字に変更する方法
- 追記部分の画像を表紙に載せない方法
- 縦横比4:3の画像に合わせたサムネイル枠
- more（追記）部分をクリックして表示するようにしたい
Comments
2007/12/21 6:00 現在
最新が 12/13付けですから、年内にアップされるのかあやぶいですね(~o~)
pictlayerは、アップされてすぐに、大歓迎されていますから、fc2もkazuさんは別扱いすべきだと、まじ思いますよ。
承認待ちの間に小さな不具合（ブラウザ画面には現れないくらいの）を見つけたので、何回かなおして申請しなおしてました。そうしたら最終更新日もそれにつられて先になり、現在は12／20になってしまいました。
気付かなかった。！
その分だけ承認も遅れるかも知れません。
（実情はわかりませんが…）
12/27 承認されました。
(*^^)/。・:*:・°★,。・:*:・°☆オメデト！！
既に70件以上のダウンロードが。
NKさん、noriさん
冬休みの楽しみが増えましたね。
ふつう、テンプレート提供者は、ご自身のブログでは、ちょっと読み解けない技をほどこして、差をつけるものですし、もちろんそれで当たり前とは思うのですが、われらのkazuさんは、ちがう！ ぜんぶ、おしみなく、見せてくださる。すごいですよ、みなさん(*^^)v
昨日こちらのテンプレートを見つけて、
早速使わせていただいております＾＾
かっこいいなぁ〜、写真がいっそう映えて見えるなぁ〜
と大喜びです(*^-^)
ありがとうございました。
こちらの写真のほうも、見ごたえがありそうでワクワクしているところですｗ
また遊びに伺いますね(^▽^)
はじめまして
素敵なテンプレートに
今年最後に出会いました
早速使わせてもらいます
ありがとうございます
よいお年をお迎えください
2007-12-31 22:58 | URL | reno [ 編集]
kazuさん こんばんは。
私もお仲間に入れていただきました。
最初、ブログ拍手のボタンまで表示されたときは焦りました。
三日悩んだけど、ボタンの表示位置を追記の後にしたら表示されなくなりました。よかった。
日鷹さん
白仲間のお嬢さまを紹介してくださいね。
NKさん。
このテンプレートは画像表示を重点に考えて書いたので、デザイン面ではあまり凝った事はしていません。カスタマイズはfc2の規約の範囲内で御自由にどうぞ。
プラグインはユーザーによって何を入れてるか相当違うと思われるので、余裕を持った表示にしておきました。上記のようにクラス分けされていますので、お気に入りの配置に収めていただければと思います。
実は2カラムにも簡単に編集できるようになってますので、プラグインを横に持ってくるのも可能です。
青さん。
テンプレートをお使いいただき、誠にありがとうございます。
急用であまり細かいサポートは出来ませんが、不都合な部分などがありましたらお知らせただければと思います。
kazeさん。
＞ブログ拍手のボタンまで表示されたときは焦りました。
そうでしたか、自分では追記リンクの後でのテストしかしていなかったので気付きませんでした。教えていただき助かりました。ありがとう〜(^^)
この事は本文にも書かせていただききますね。
はじめまして(^_^)
新しいブログを作ろうとテンプレートをダウンロードさせていただきました(^_^)
で、教えて頂きたいんですけど、アクセス解析の設置場所がわからなくて(^_^;)
お暇がありましたらよろしくお願いします。
2008-01-10 18:09 | URL | まーくん [ 編集]
まーくんさん。
テンプレートをお使いくださってありがとうございます。
アクセス解析の設置場所ですが、それはアクセス解析を提供してるサービスにお問い合わせください。これはテンプレートではなく、解析プログラムの仕様で決まるからです。
お返事ありがとうございました(^_^)
すみません、<body>の後に入れるようになってたんですけど、どこに入れたらいいのかわからなくて(^_^;)
かなりの初心者なんですけど、僕もキスデジでのブログを作ってます。
また勉強にお伺いします(^_^)
よろしくお願いします。
2008-01-10 22:08 | URL | まーくん [ 編集]
<body>の後にアクセス解析等を付ける場合の説明です。
<body id="<!--index_area-->index-area<!--/index_area-->
~省略~
<!--permanent_area-->onload="initi();"<!--/permanent_area-->>
○○○○
上記全部がこのテンプレートの<body>タグです。
○○○○の位置に挿入してみてください。
kazuさん，はじめまして。
１月はじめに写真主体のブログを開設するために『p_space』をダウンロードさせていただきました。クールな雰囲気で写真が見やすく，私の求めていたイメージにぴったりのテンプレートです。継続して使わせていただきたいと思っておりますのでよろしくお願いいたします。
さて，ひとつお尋ねしたいことがございます。現在，ほとんどダウンロードした状態でのままで使っていますが，表紙のサムネイル画像が表示されません。テンプレートについて何らかの書き換えが必要でしょうか。ご教示をお願いいたします。
（因みにFC2でのブログ運営は２本目になりますので，HTML，CSSともある程度の理解とカスタマイズは可能です。）
hideandseekさん。
テンプレートをお使いいただき、誠にありがとうございます。
お尋ねの件ですが、hideandseekさんの場合は画像のパス内にndsという文字列が入ってしまってます。ndsとは、あまり使われないだろうと画像のエスケープ用に設定した文字です。想定外とはいえご迷惑をおかけいたしました。今回の場合は、ブログIDからくるフォルダー名でこの文字列が入ってしまいました。
回避方法ですが、ソースの編集がお出来になられるという事ですので、以下の場所のndsの文字を別の文字に変えていただけますでしょうか。英数字なら何でも結構です。編集後は、新しい文字が画像タグ内に有ると、表紙に表示されなくなります。
if (arr[cnt].match(/emoji|nds/i)) { cnt++;continue; }
↓
例：if (arr[cnt].match(/emoji|abc/i)) { cnt++;continue; }
こちらのエディターでは43行目と表示されています。
その辺をお探しください。
kazuさん！
おかげさまでうまく修正出来ました。偶然から生じたトラブルだったようですね。ありがとうございました。
２本目のブログはまだまだこれからなので，今まで撮り溜めたものを含めて少しずつアップして行きたいと思っています。これからもよろしくお願いします。
（追伸）
１本目のほうは脱力系，お気楽系でやっております。よろしければごらん下さい。
http://keesdnaedih.blog50.fc2.com/
hideandseekさん。
無事修正できたご様子でよかったです。(^^)
前輪（全輪）駆動自転車、ボクも興味深く拝見しました。
はじめまして。
テンプレート、すてきなので使わせて頂こうと思ったのですが、
サムネイル版にしてある大きめな写真は、
クリックしても、拡大出来なく・・・
別フレームでの写真表示は、出来ないのでしょうか？
2008-02-05 09:41 | URL | スロウキープ [ 編集]
スロウキープ さん。
う〜んどの様な状況なのかよくわかりませんが、お役にたてず残念です。
別フレーム表示ですか？
このテンプレートのままでは出来ませんが、FC2の場合かなり自由度があるので、カスタマイズすれば出来ると思いますよ。
ごめんなさい。
回線が遅い（ISDN）なので、転送時間がかかってしまう様で・・・
別フレームで、拡大して見る時より、体感的に、そう思ってしまいました。
そういう知識無く、大変失礼しました。
写真をアルバムみたいに見せる様なテンプレート、
本当に、すてきだと思います。
月ごとに表示すると、マンスリー・アルバムみたいになるし。
これからも、すてきなテンプレート作って下さい！
おさわがせして、すみませんでした。
テンプレート、使わせてもらいたいと思います。
2008-02-06 08:27 | URL | スロウキープ [ 編集]
スロウキープさん。
ISDN回線で表示が遅かったのですね。
了解しました。
ご報告ありがとうございます。
以下に追記部分を載せないようにするカスタマイズを載せましたので、よかったらご参考になさってください。記事の書き方にもよりますが、自分等は追記部分に画像を沢山入れてるので、こうすると表示枚数がぐっと減ります。月別表示等は相当早くなります。
表紙に追記部分の画像を載せないカスタマイズ方法です。
テンプレート中程の
<!--サムネイル表示開始-->
を探します。
その数行下にあります
<div id="src<%topentry_no>" style="display:none;"><%topentry_body><%topentry_more></div>
の中の<%topentry_more>を削除し以下のようにします。
<div id="src<%topentry_no>" style="display:none;"><%topentry_body></div>
以上で追記部分の画像はトップページに載らなくなります。
他の場所にある<%topentry_more>は削除しないように、注意深く作業してください。
縦横比が3:2以外のフォーマットの場合は、画像と枠の間が空きます。これは描画のスピードアップと、サムネイルの縦列を揃える目的で比率を固定しているからです。縦画像の場合も両脇が空くのはこの為です。
試作段階では画像の縦横比そのままで表示した事も有ったのですが、サムネイルの縦列が揃わずに見苦しく感じたので現在は統一フォーマットの中に表示されています。
しかし、メインの画像フォーマットが4:3（フォーサーズがこれですね）であるなど、統一のフォーマットを変更する事はカスタマイズで出来ます。
テンプレート内の3/2という記述を検索で見つけてください。上から1/5位の所にあります。これを4:3の場合は4/3に書き換えます。これで画像枠は全て4:3に統一されます。まれに3:2の画像が入った場合は、右側が切れて表示されます。ちなみに此処を1/1つまり乗算をしなければ、正方形の枠を作ります。
このカスタマイズで変更されるのは、サムネイルの枠の縦横比であり、画像そのものはオリジナルの縦横比を維持します。
kazuさん
本当に、ご親切に、ありがとうございます！
カスタマイズ、チャレンジしてみます。
このテンプレート制作についてもそうですが、
勉強になります。
2008-02-07 00:07 | URL | スロウキープ [ 編集]
初めまして
ステキなテンプレート使わせていただきました。
HTMLのことがわからないため、こちらを参考にさせていただきました。
わからないこと出てくると思いますのでその折はお尋ねに上がりますのでどうぞ宜しくお願いいたします。
どうも有難うございました。
きんたさん。
テンプレートをお使いいただき、ありがとうございます。
ご質問は随時お受けしてますが、サポートはこのテンプレート特有の事柄に限定させていただいてます。とはいえよく判らない場合は、取り合えずご質問したくださって結構ですよ。
このコメントは管理人のみ閲覧できます
2008-02-15 14:55 | | [ 編集]
more（追記）部分をクリックして表示するようにしたいという質問をたまに頂きますので、ちょっと説明させていただきます。
このテンプレートで記事（more部分も含めての文章）が表示されるのはパーマネントエリア（個別記事のページ）だけです。moreリンクが機能するようなページでは文章そのものが表示されていません。
そして、パーマネントエリアではどのテンプレートを使ってもmore部分は表示されます。これはFC2側の仕様ですので、ユーザーにはコントロール出来ません。共有プラグインにある折りたたみスクリプトは、ＴＯＰページなどで使うもので、パーマネントエリアでは機能しない物がほとんどです。（全部を検証してはいませんが）
どうしても非表示になさりたい場合は、スクリプト等を使って制御すれば出来るでしょう。
こちらのテンプレートを使用させて頂いています。
とても素敵なデザインなので気に入っています。
一つお尋ねさせて頂いてもよろしいでしょうか。
サンプルページのように、サムネイル表示を複数行にするにはどうすればよろしいのでしょうか？
2008-02-18 17:51 | URL | 太陽 [ 編集]
太陽さん、テンプレートをお使いいただきありがとうございます。
サムネイルを複数行にとの事ですが、画像を沢山表示すれば勝手に複数行になります。表示画像の数は、このページ記事内の『1. 画像の表示・非表示について』をご覧ください。
http://fseasons.blog39.fc2.com/blog-entry-458.html#manu1
ご回答ありがとうございました！なるほど、ブログ側で設定できるんですね。さっそくやってみます！
2008-02-19 10:14 | URL | 太陽 [ 編集]
こんばんわ。 (･･｡) すごぃ素敵なので使用させていただこうと思ったのですが、１つだけ懸念点が。。
コメントに題名をつけたいのですが、それについては編集可能ですか？
結菜さん、どうもありがとうございます。
コメントのタイトルですが、テンプレートの編集で追加出来ますよ。配布の段階で付けておこうか迷った項目なのですが、このテンプレートの場合は割愛してしまいました。(^^;
HTMLがお解かりなら簡単な作業なのですが･･･
3/17追記
タイトルを記入できるように修正しました。
お初にお目にかかります。おはようございます。
このテンプレート最高です。出会った瞬間、これだ！って思いました。
そこで相談なんですが、サムネイル表示を、ランダムにピックアップする方法ってあるのでしょうか？
かなりあつかましい相談だとはわかっているのですが、素人な者で、知識がありません。
もし出来るなら、具体的に教えていただけないでしょうか。
よろしくお願いします。
chuberryさん。
テンプレートを気に入っていただき、ありがとうございます。
＞サムネイル表示を、ランダムにピックアップする方法ってあるのでしょうか？
残念ながらそのような機能は組み込んでありません。ただサムネイルは配列に入っていますので、そこからピックアプするスクリプトに渡す事は出来ます。ピックアップとその後の処理をするスクリプトを別途ご用意できれば可能です。
かっこいいテンプレートお借りしてBLOGを書こうと思うのですが、当方素人なもので分からないことでいっぱいです。
お聞きしたいのですが、
まず、トップページのサムネイルを各記事(日記)一枚ずつにしたいのですがどうすればよいでしょうか？
もうひとつ、トップページのサムネイルに枠があるのですがどうすれば枠無しにできますでしょうか？
よろしくお願いします。
2008-04-03 13:59 | URL | タケヒロ [ 編集]
タケヒロさん、テンプレートをお気に召していただき、ありがとうございます。
お尋ねの件ですが、サムネイルを各記事１枚づつにする方法は２通り考えられます。
一つは画像ごとに非表示用クラスを設定方法、もう一つは１枚だけ本文に記載し、残りの画像を追記に記載します。そして追記部分をサムネイルに表示しないようにテンプレートを編集する方法です。
ずっと１枚で通すなら二番目の方法がお勧めです。自分も現在はこの方法を使って、１記事１枚の画像を表示しています。
やり方はどちらもこのページ記事内にあります。
1. 特定の画像を非表示にする方法
http://fseasons.blog39.fc2.com/blog-entry-458.html#manu1
2. 追記部分の画像を表紙に載せない方法
http://fseasons.blog39.fc2.com/blog-entry-458.html#comment2960
サムネイルの枠を消したい場合はCSSの編集をします。
/* サムネイル表示 */
と書かれた部位がサムネイルの表示関係のスタイルです。
次の
/* エントリ */
が始まるまでの間に、borderで始まる行が３カ所ありますので、それらを削除すれば消せます。
編集は慎重に願いますね。(^^)
ありがとうございます。
表示を一つにする方はできました。
トップページのサムネイルの両端にあるグレーの枠の方ですがCSSのborderで始まる〜の所がよく分からず、borderから始まる一行を3箇所消しましたが特に変化が内容に思います。編集が間違っている可能性大ですが・・・。
2008-04-03 21:39 | URL | タケヒロ [ 編集]
＞両端にあるグレーの枠の...
もしかして枠線ではなくて、画像と枠の大きさが合わずに、背景色が見えてるって事はないですか？
こちらをお読み下さい。
http://fseasons.blog39.fc2.com/blog-entry-458.html#comment2964
実際のページを拝見できればハッキリするのですが。
初めまして
格好いいテンプレート拝借させていただきました。
ところで、質問させてください。
◎サムネイルのNO IMAGEをオンマウスではなく直接文字で表示させる方法はあるんでしょうか？
◎サムネイル数を任意でで調整できますか？
◎エントリータイトルの文字色の変更が分かりません。
お手数ですがご回答いただければと思います。
宜しくお願いします。
dejavuewords さん。
お気に召していただき、ありがとうございます。
ご質問の件ですが、
一つ目は、画像が無い時には記事のタイトルを最初から表示したい、という事で宜しいですか？
それならば、CSSの
#thum a.thum_link:link .thum_title, #thum a.thum_link:visited .thum_title, #thum a.thum_link_ni:link .thum_title, #thum a.thum_link_ni:visited .thum_title {
visibility: hidden;
}
というところを（180行目あたりです）
#thum a.thum_link:link .thum_title, #thum a.thum_link:visited .thum_title {
visibility: hidden;
}
と変更して下さい。
画像が無い場合は常時エントリータイトルが表示されます。
サムネイルの数は、トップページに表示する記事内の写真の数となります。記事数は管理画面で調整できます。コントロールするとなると、各記事で１枚の画像だけ表示するようにしては如何でしょう。
つまり、10件表示なら10枚、15件表示なら15枚となります。
各記事で1枚の画像だけ載せる方法は、以下のコメントをお読み下さい。
http://fseasons.blog39.fc2.com/blog-entry-458.html#comment3292
エントリータイトルの文字色の変更ですが、オンマウス時のタイトルという事でお答えしますね。
#thum a.thum_link:hover, #thum a.thum_link:focus, #thum a.thum_link:active, #thum a.thum_link_ni:hover, #thum a.thum_link_ni:focus, #thum a.thum_link_ni:active {
border-color: #000;
font-weight: normal;
}
ここにお好みのラー設定をして下さい。
早速の回答有難うございました。
１件目は難なく処理できました。
あとのはゆっくりやってみます。
これからも素敵な作品の提供をしていただければと思います。
重ねながら、有難うございます。
dejavuewords さん。
文書だけだと中々伝わりにくい部分もあろうかと思いますが、バックアップを取りながら、少しずつ作業を進められると宜しいかと。
テンプレートがお役に立てれば、これほど嬉しい事はありません。
ありがとうございます。
有難うございます。
ゆっくり、試行錯誤しながらやっていきたいと思います。
それで、分からないときはまた質問しにきますので、そのときは宜しくお願いします。
いい写真とりたいものです。。。
お借りいたしております。
画像が8枚までしかトップに表示されないのですが、
増やすにはどうしたらいいのでしょうか？
初歩な質問でごめんなさい。<(__*)>
misty さん。
お使いいただきありがとうございます。
画像の数ですが、以下のリンクをご参照ください。
http://fseasons.blog39.fc2.com/blog-entry-458.html#manu1
こちらもお役に立つかも知れません。
http://fseasons.blog39.fc2.com/blog-entry-458.html#comment3338
ありがとうございました。
トップ画像表示数の件、今、ようやく分かりました。
ご丁寧に説明くださって、ありがとうございました。
前回、違う名前でコメントしてしまいました;
お借りしているのはこちらの方です。misty
先日は素早い回答有難うございました。
その後色々と試行錯誤しながら、文字だけの表示や、それに伴うNO IMAGEも消すことができ何とか今の形になりました。
そして今は、
サムネールの下のプラグインのエントリー左側につく○のアイコンを消そうと思っています。
また、○ではなくほかの形にしたいときにはどうすればいいでしょうか？
そして、ブラウジングでお気に入りを表示したときにブログ自体を縮小して全体表示をしたいと考えていますが、それをどのようにしたらいいのかお聞きしたいと思います。
コンテナーの幅は１１００で設定しています。
お忙しいとは思いますが、ご教示のほど、宜しくお願いいたします。
dejavuewords さん。
カスタマイズ頑張っておられますね。ただ今回のご質問内容は、このテンプレートの事情とは関係ありませんので、サポートは出来かねます。ご了承ください。
css リストマーク / css 可変幅 などで検索すれば、お役に立つページが見つかると思いますよ。
初歩的な質問で筈かいいのですが、文字を小さくするのにはどうしたらいいのでしょう？
トップページはいいのですが、文章の文字をもう少し小さくしたいのですが。。。
初心者ですのでよろしくお願い致します。
yukiさん。
テンプレートをお使い頂き、ありがとうございます。
文章の文字の大きさとの事ですが、エントリーの本文ということでお答えすると、entry_bodyという名前のクラスが設定されていますので、そこに文字サイズを設定してください。
文字サイズの設定の仕方は一般的な事柄に入ると思いますので、ここではあえて触れません。失礼ながら、もしお分かりにならない場合は、検索等でお調べください。
参考ページを一つ載せておきます。
はじめてのFC２ブログカスタマイズ→文字の大きさを変更
http://blog.fc2.com/custom_manual/#m002
コメントの投稿
トラックバック
このページのTrackback-URL
http://fseasons.blog39.fc2.com/tb.php/458-a757fb22
多くのFC2使用者が使ってくれるといいですね。
まぁ、NKさんとnoriさんは確定でしょう…
2007-12-19 09:05 | URL | 日鷹 [ 編集]