info
jugem用テンプレートを配布しています(ロリポブログでも使用可>>カスタマイズ必要箇所あり)。テンプレート一覧などかんたんにまとめてありますので上部メニューの"template"をクリックでご覧下さい。さらなる詳細はそれぞれエントリーにて個別に記載してあります。
記:2008/12/20
---
SQUARE;凹凸_mpを元にサイズやレイアウトを変えて作りました。
フリースペースをいくつ使うのか、どこに設置させたいのか…など、お使いになりたい状態によって凹凸のライン具合をそろえながらタグを記述する必要があるため記述してありません。HTML内のタグの並びを見てやり方がわかる方は、ご自分のお好みに合わせて凹凸が繋がるようタグを記述していただくことになります。
(追記: Mobileの下にフリースペースを設置する場合のカスタマイズ方法をアップしましたのでエントリ上部の【 Customize Sample 】からリンク先参照でどうぞ)
折り畳みについてはこちらでも書きましたが「JUGEMカスタマイズ講座」で紹介されているスクリプトを使用していますので、そちらをご覧になっていただければ設定の方法が書かれています。
やってみたけれど わからない・できない という方がいらっしゃいましたら、設置したい場所や表示の状態(開・閉)等の詳細を書いていただきご質問いただければお答えいたします。
(加筆更新: 2008/10/26)
Comments
2006/10/10 9:53 AM
カレンダーのように内容を折りたたんでない状態にするのは
どうすればよいのでしょうか?
2006/10/10 12:46 PM
ご質問いただいた件ですが、こちら( http://terrapin.jugem.cc/?eid=145 )のコメント欄の2番目のものを参照していただきつつhtml内にて該当箇所を書き換えればお望みの状態に変更できると思いますのでお試し下さいm(__)m
2006/10/13 4:48 PM
それと大変申し訳ないのですが、もう一つ質問があります。
フリースペースのタグの入れ方がわからないのですが、
詳細を教えて頂けないでしょうか?
フリースペースタグを入力しただけでは表示されなかったのですが
他にどこを変更すればよろしいでしょうか?
何卒よろしくお願い致します。
2006/10/14 2:28 PM
返信が遅くなり失礼しました。
freespaceの件ですが、
【01】freespaceタグを記述する際に <!-- BEGIN freespace■ --> と <!-- END freespace■ --> で囲んでいますでしょうか?(※■部分はfreespace番号と差し替えて下さい)
【02】あと、管理画面内のfreespace編集で表示or非表示が表示するになっていますでしょうか?
【03】それでも表示されない場合は、キャッシュのクリアをしてみて下さい。
※以上の3点に加えこちら( http://terrapin.jugem.cc/?eid=160 )の06/6/4 8:12投稿の私のコメントもご参照下さい。
2006/10/14 2:38 PM
>猫さん
もし先に書かせて頂いた回答だけでは解決に至らない場合…
サイドバーのどの位置にいくつfreespaceを設置したいのかをお教え頂ければ、凹凸のラインを崩さず揃った状態でfreespaceを表示させる為の詳細な回答が可能になりますので宜しくお願いいたしますm(__)m
2006/10/15 2:48 AM
色々といじってみましたが表示されないので質問させていただきます。
フリースペースを入れたい数は2個です。
場所はSponsored Linkの上の部分になります。
それと、Calendar.Archive..Category..Recent Trackback...Recent Comment..Sponsored Link..の準でサイドバーにならんでおります。
他のカテゴリはデザインの問題で消してしまいました。
現状の方法でタグの入力をしてみましたが、フリースペースが表示できないままの状態です。
何卒お力をお貸し頂ければ幸いです。
2006/10/16 11:53 AM
回答の方が遅くなりまして申し訳ありません。
メニューの順番が猫さんご希望の、
Calendar, Archive, Category, Recent Trackback, Recent Comment, freespace1, freespace2, Sponsored Link
となるカスタマイズ方法をアップいたしましたので以下のエントリの【02】の方をご参照くださいませ。
http://terrapin.jugem.cc/?eid=185
ちなみに、もし上記リンク先の方法をお試しいただいても表示されない場合…
管理画面内のフリースペース編集にて、状態が『公開』になっていることを確認しつつ、フリースペースの『タイトル』と『内容』の記述に間違いが無いかを再度ご確認していただきつつ、念のためキャッシュのクリアもしてみてください。
2006/10/16 3:58 PM
本当にありがとうございます。
今後もこのスキンを愛用させていただきますm(_ _)m
2006/10/18 12:23 PM
フリースペースの件ですが無事解決されたようで何よりです。
今後もテンプレを使ってくださるとのこと、大変嬉しいです。ありがとうございます。
今後また何かご不明な点などありましたらコメント頂ければ対応いたしますのでよろしくお願いいたしますm(__)m
2008/11/14 11:40 PM
ロリポブログで利用させていただきます。
今までずっとテンプレートに悩んでいましたが手を出せずにいました。
とても可愛いデザインでとても気に入っています。
これから、タイトルを画像にしたいので、また勉強してまいります。
これからも頑張ってくださいね!ありがとうございました。
2008/11/15 3:57 PM
こんにちは。はじめまして。
テンプレ気に入ってくださったようで嬉しいです。
独自タグを差し替える件、わかりづらかったようですみませんでしたm(__)m
blogを見させていただいて気づいた部分がありましたので参考までに書かせていただきます。
トラックバックをお使いになっていないのでサイドバーのメニューのコメントとlinkの間の凹凸が繋がっていないと思います。あと、ロリポブログをお使いなのでSponsored Linkも必要ないものとなっていると思います。
もしそれを直されるようでしたら、下記参照でどうぞ。
2008/10/11にテンプレのマイナーチェンジをしました。マイナーチェンジ前と違い、使っていないメニューがあってもメニュー部分の凹凸が繋がるようになっており、Sponsored Linkの表記も消してあります。utfにてhtmlとcssをそれぞれコピペして入れ替えてください(お手数ですがまたhtmlにて投稿日部分などロリポで機能する独自タグと差し替えたりjugemのバナーを削除する必要があります)。
※現在お使いのhtml/cssを今後使う可能性があるようでしたらhtml/css共にバックアップをお忘れなく。
もし上記を試されるようでしたら下記リンク先もご覧下さい。
http://terrapin.jugem.cc/?eid=203
---
タイトルを画像にする件ですが、タイトルはサイトタイトルなのか、メニュータイトルなのか…背景画像を表示させるのか、タイトル自体を画像にしたいのか…など、表示させたい状態によって方法が変わってきますので、もしご自身で解決に至らない場合、詳細を教えていただければ対応いたしますのでお気軽にどうぞ。
2008/11/16 3:06 AM
先ほど無事に修正させていただきました。
ブログを改造するのは初めてな初心者なもので、大して分かっていないクセにアレコレ調べていて迷子になっていました(-"-;;)
ブログの改変は、私の知識が足りないせいですので・・・。
ロリポップの独自タグがどこにあるのかもわからずにウロウロしていました・・・すみません。
背景画像も入れてみたのですが【しっぽblog】となっている
ブログのタイトル部分を画像にしようと思っていました。
一度変えてみたのですが、素人には無理と判断して半分諦めていました。
もしご迷惑でなければ教えてくださいm(_ _)m
テンプレート自体は一目惚れして、このテンプレートを使いたい一心でブログの改変を始めたくらいなので、とても気に入っています。
本当にご親切に色々教えていただいてありがとうございます。
これからも色々参考にさせてくださいね。
どうぞよろしくお願いいたします。
2008/11/16 8:24 AM
【01】サイトタイトルとサイトの説明の表示される部分の枠内全体にヘッダーサイズに作った画像を背景画像として表示させる場合。
cssにて #header 内に下記[A]の2行を書き加えます。
[A]
background-repeat: no-repeat;
background-image: url("■");
■部分は画像urlと差し替えてください。
あと、#header内のwidthを479pxに変更してください。
【02】小さい画像を繰り返し表示させたい場合は上記【01】実行後[A]のbackground-repeatの no-repeatをrepeatに変更してください。
【03】小さい画像を位置指定して表示させる場合は【01】実行後下記のいづれかの1行を更に書き加えてください。
右下の場合
(左の場合はrightをleftに上の場合はbottomをtopに書換)
background-position: right bottom;
右上の場合
(左の場合はrightをleftに上の場合はbottomをtopに書換)
background-position: right bottom;
下部真ん中
(上部真ん中の場合はbottomをtopに書換)
background-position: center bottom;
ど真ん中
background-position: center;
【04】サイトタイトル自体を画像にするのでしたら、上記のカスタマイズは行わず下記を行ってください。
htmlにて<!-- BEGIN title -->の下にある<h1 class="site_title">{blog_name}</h1>を削除して、<!-- BEGIN title -->の上に下記を書き加える。
<h1 class="site_title"><a href="■■"><img src="■" alt="●" width="▲px" height="▲px" border="0" /></a></h1>
■■部分はブログのurlと差し替えてください。
■部分は画像urlと差し替えてください。
●部分はサイトタイトル名に書き換えてください。
▲部分は画像サイズに書き換えてください。
上記の方法だけでは実現したい状態にならない。という場合にはお手数ですがもうすこし詳細をお教えください。
---
あと、ここからは余談なので参考までにお読みいただければ結構です。さらっと読み流してください。
ヒトミさんの場合サイドのトラックバック項目内が空欄な状態で、今後トラックバック許可にしない限りその状態が続くと思いますので、その空欄を活用してみてもいいかも?ということで。サイトの説明部分にトラックバックについてインフォメーションをされていますが、それを『〜について書いているブログです』のようなサイト説明文に変更しつつ、トラックバックについて書いたインフォメーションをサイドバーのトラックバックの項目内に移動させてみる方法も書いてみます。
htmlにてRecentTrackbackに関して記述してある部分を探していただき下記のようにしてください。ちなみに『<ul><li>ここにインフォメーションを書き込む</li></ul>』の行が書き加えた部分です。
<!-- recenttrackback -->
<div class="linktitle01" id="tbname">Recent Trackback:</div>
<div class="linktext" id="tblist">
<div class="linktext01">
<ul><li>ここにインフォメーションを書き込む</li></ul>
<!-- BEGIN recent_trackback -->
{recent_trackback_list}
<!-- END recent_trackback -->
</div>
<div class="menu_btm01"> </div>
</div>
<!-- /recenttrackback/ -->
あとはサイトの説明文を変更すればOKです。
長々と失礼しましたm(__)m
2008/11/16 3:48 PM
お言葉に甘えて、教えていただいた事を全て実行させていただきました(笑)
こんな初心者に丁寧に教えてくださってありがとうございます。
とても勉強になりました。
これからもお世話になりますm(_ _)m
2008/11/17 12:30 AM
お望みの状態になったようでよかったです。
もしまた何か(テンプレをお使いになってみてご不明な点や不具合等)ございましたら、わかる範囲のことでしたらお答えいたしますのでその際はまたコメントいただければと思います。
ちなみに、cssの方は以前(マイナーチェンジ前)のものをお使いのようなので、またお時間のある時にでもutfのマイナーチェンジ後のcss(以前とほとんど同じcssなのですが、一部書き換えてある部分があります)と差し替えてみてください。
2009/01/15 2:51 PM
はじめまして。
jugemで「SQUARE;凹凸_01」を使用させてもらっています。
Terrapinさんのテンプレはシンプルであったかい感じがとても気に入っています。
さて、質問なのですが、「SQUARE;凹凸_01」にメールフォームを加えることはできますでしょうか?
もし、可能なら加え方を教えてください。
急ぎませんのでお時間のあるときにお願いいたします。
2009/01/17 2:44 AM
はじめまして。テンプレ使ってくださってありがとうございますm(__)m気に入っていただけているようでうれしいです。
ご質問いただいた件ですが、可能です。
フリースペースを使ってメールフォームを加える方法を書いてみます。
このテンプレにはデフォルトの状態でフリースペースタグを記述していないので、お手数ですがまずは下記リンク先参照でhtmlにてフリースペースタグを加えてください。
http://terrapin.jugem.cc/?eid=185
で、あとは管理画面にてフリースペースにメールフォームを設置することになります。
もし利用するメールフォーム自体決まっていないようでしたら、過去に似たようなご質問をいただいたコメントがあるのを思い出したので、そちらへの誘導もしてみます。
http://terrapin.jugem.cc/?eid=153#comments
上記リンク先コメント欄のわたしの2007/06/25 2:20PM投稿のもの(09/01/17現在/下から5番目)の中の【質問2】以降をご覧いただきつつ、あとgoogleなどでキーワードを『無料メールフォーム比較』でサーチするとメールフォーム比較のサイトがずらっと出てくると思いますのでその中から好みに合うものをチョイスするのもよいかもしれません。
ご不明な点などございましたら、またコメントいただければと思います。
2009/01/17 11:28 PM
ありがとうございます!!
なんとかできました〜。
分かりやすく説明いただいてありがとうございました。
自分のブログが理想に近づくのはとても楽しいです。
もうちょっと勉強して自分なりにカスタマイズしてゆきたいです!!
また、教えてもらいにくるかもしれません。そのときはよろしくお願いします。
2009/01/18 9:48 AM
ブログを見させていただきました。気づいた点がありましたので書き残してみます。もしこのコメントをご覧になりましたら必要に応じて下記参照で修正してみてください。
まずは、メールフォーム部分に折り畳み機能がついていないようですが、もしメールフォームにも他のメニューと同じく折り畳み機能をつけたいようでしたら、下記リンク先のエントリ内の<< [02] ※[01-a][01-b]共通 >>をご覧いただきつつ、お使いのフリースペース番号のもの(一行)をhtmlにて該当する部分に書き加えてください。
http://terrapin.jugem.cc/?eid=185
あと、メールフォームとスポンサードリンクの間の凹凸のラインが繋がっていない状態になっていると思います。それを繋げたいようでしたら下記[A]のようにしてみてください。もしくは、2008/10/11にテンプレのマイナーチェンジをしたのですが、その状態( http://terrapin.jugem.cc/?tid=64 )と同じように(広告を凹凸メニューの下に凹凸ラインなしで配置)したいようでしたら下記[B]のようにしてみてください。
[A]
<!-- ad -->から<!-- /ad/ -->までを下記と差し換える
<!-- ad -->
<div class="linktitle01_btm"><span style="color: #b35959;">▼</span>Sponsored Link:</div>
<div class="linktext">
<div class="linktext01_btm">{ad}</div>
<div class="menu_btm03"> </div>
</div>
<!-- /ad/ -->
[B]
<!-- BEGIN freespace■ -->から<!-- /ad/ -->までを下記と差し換える(※■部分はお使いのフリースペース番号と差し換えてください)
<!-- BEGIN freespace■ -->
<div class="linktitle02_btm" id="fs0■name">{freespace_title■}</div>
<div class="linktext" id="fs0■list">
<div class="linktext02_btm">{freespace_contents■}</div>
<div class="menu_btm04"> </div>
</div>
<!-- END freespace■ -->
<br /><br />
<!-- ad -->
{ad}
<!-- /ad/ -->
長々と失礼いしました。