info
jugem用テンプレートを配布しています(ロリポブログでも使用可>>カスタマイズ必要箇所あり)。テンプレート一覧などかんたんにまとめてありますので上部メニューの"template"をクリックでご覧下さい。さらなる詳細はそれぞれエントリーにて個別に記載してあります。
記:2008/12/20
---
SQUARE;凹凸シリーズは今までmp〜04までの5種類を作成しているのですでにおなかいっぱいな感もありますが、3カラムを作って完結させたいとずっと思っていたので、これがSQUARE;凹凸シリーズラストのテンプレです。
(加筆更新: 2008/10/26)
(更新: 2008/11/22)
Comments
2008/10/16 9:51 AM
【 SQUARE;凹凸_05】ダウンロードさせてもらい、
昨夜から徹夜でいじくり倒したんですが、
どうしても、どうしてもできないことがありまして、
ご教授いただけたら幸いです。
メインの記事が記載される部分なんですが、
記事の前(ページ数表示の下)に、google adsenseを貼りたくて、
それだけのために、15時間格闘しています(涙)
例で言うと、こんな感じです。
http://kittycollection.blog85.fc2.com/
PICK UP!という部分のように記事の部分の前に、枠を作りたいんです。
こちらの凸凹もすごく素敵ですが、
↑のような、■で囲まれたテンプレートも是非作って欲しいです!!
3カラムを全部見たんですが、こういったシンプルな■で囲まれたものがないんです・・。
お願いごとばかりで申し訳ないのですが、
是非カスタマイズ法を教えていただけたら幸いです。
2008/10/16 1:45 PM
テンプレ使ってくださってありがとうございます。
ご質問いただいた件ですが下記参照でお願いします。
htmlにて<!-- /navi/ -->と<!-- BEGIN entry -->の間に下記を記述。
<!-- google adsense -->
<div class="adsense">
■
</div>
<div class="entry_top"> </div>
<!-- /google adsense/ -->
上記の■とGoogle Adsenseのスクリプトを差し替える。
次にcssにて下記を記述。
.adsense {
padding: 5px;
border-left: 1px solid #848484;
}
こんなかんじでいいと思います。
テンプレのリクエストもくださったようでありがとうございます。
実は今作っているテンプレがいくつかあるので、それが終わってから作ってみますね。
いつごろ作れるか未定ですし、あやあやさんのお好みに近いものが出来上がるかどうかもわかりませんが、いずれUTFに公開してあるのを見かけたらご覧になってみてください。
2008/10/16 2:00 PM
いま徐々に設置して設定してるのですが、
amazonの部分ありますよね?
あそこを登録すると、画像が表示されないみたいです。
そのため右部分が崩れてしまうんです。
見本では、きちんと表示されていますが、
何かの不具合でしょうか?
テンプレ投票してきますね!!
これからも素敵なテンプレ作り応援しています!!
こんな素敵なセンスの持ち主のテンプレ使えて嬉しいです!!
2008/10/16 2:30 PM
投票してくださるとか!ありがとうございますm(__)m
htmlにて<!-- BEGIN amazon -->以降にある {amazon_ImageUrlSmall} を探して下さい。
以前同じようなご質問を他の方からいただいたことがあったのですが、多分この {amazon_ImageUrlSmall} を使うとアイテムによって画像が表示されないものがあるようです。
ですので、それを {amazon_ImageUrlMedium} と差し替えてみてください。
次にcssにて/* 画像 */以降にある .amazon_pict 内に width: 50%; を追記してください。
これで多分イケるはずです。
2008/10/16 2:47 PM
過去ログ検索せずに質問してしまって、すみません。
amazonは解決できました!
そこで、教えていただいたgoogle adsenseですが、
こちら設置してみたところ、
くにゅくにゅが上手くつながらなくなるんですね・・(涙)
左側の縦棒が表示されないみたいなんです。
CSSを、一番最後に置いたからでしょうか!?
2008/10/16 2:51 PM
CSSを間違えて貼っていただけのようでした・・。
大変失礼いたしました。
2008/10/16 3:04 PM
google adsenseですが、やはりくにゅくにゅが上手くつながらないみたいです。
エントリーの本文部分にもgoogle adsenseを設置すれば、
なぜかくにゅくにゅが上手くつながるんです。
一番上に作った四角部分だけgoogle adsenseを表示したいのですが、
そうなるとcssが変わってくるのでしょうか?
HTMLは理解できるんですが、CSSが苦手なものですみません・・。
2008/10/16 3:16 PM
解決策になるかどうかわかりませんが、先程cssにて記述した .adsense 内に、試しに下記を追記してみてください。
border-bottom: 1px solid #ffffff;
2008/10/16 4:31 PM
バッチリです!!!
お勉強にもなりました。ありがとうございます。
今から、配置やフリースペースを作っていきますが、
最後にもう1つ質問させてくださいっ。。
このコメント書く欄で名前、Email、URLの部分を長くしたくて、
HTML部分にINPUTのところに size="30"と足したんですが、
ここが変わらないみたいです。
どこで変えればいいのでしょうか?
Terrapinさんの作ってくださってるテンプレは、
HTMLも見やすくて、すごく使いやすいです!
何度も質問してしまって申し訳ないですが、これで最後だと思います!
あとは、いろいろといじくれたので、早く公開したいです♪♪
2008/10/16 5:09 PM
cssに以下を記述してみてください。
form #name, form #email, form #url {
width: ■px;
}
■部分はお好みの数値と差し替えてください。
ちなみに、今日はテンプレ作りをしたりでPCの前にいたので即レス状態でしたが、普段は毎日コメントチェックできる状態ではないことも多いので、もし今後ご質問いただいた場合、コメントレスが遅いことも多々ありますのでその際はご了承いただきつつ、また何かありましたらわかる範囲のことでしたらお答えいたしますのでお気軽にどうぞm(__)m
2008/10/17 12:37 AM
教えていただいた分も含めて、全て思い通り!というところまできました。
もしできることなら、コメントを記事ごとにツリー化できないものでしょうか!?
自分で検索してやってみたら、
ぐちゃぐちゃになってしまい、再設定してるところです。
果てしない道のりですが、意地でもこちらのテンプレ使います!!
こんな素敵なテンプレ&作成者の方と出会えましたから♪♪
まったく急がないので、お暇な時にでも見てもらえたら幸いです。
自己解決にいたりましたら、お知らせにきますね。
あと2時間頑張る予定です!
2008/10/17 1:18 PM
こんにちは。
どちらを検索して何を参考にしてどんな風にカスタマイズを試みたのかなどの詳細がわからないのですが、jugemカスタマイズ講座さんのスクリプトを使ってのカスタマイズなのかな?という方向で書かせていただきます。が、Jugemカスタマイズ講座さんは閉鎖??しているようですね。
ご自分で検索してやってみた。とのことですのでスクリプトはhtml内に記述済みなのだと思われます。ですのでそれ以外の書き加えるタグについて書いてみますね。
htmlにて<!-- BEGIN recent_comment -->以降の下記を探してください。
<div class="linktexts">{recent_comment_list}</div>
それを下記のように書き換えてください。
<div class="linktexts">
<div id="commentlist">{recent_comment_list}</div>
</div>
これでよいとおもいます。
2008/10/17 10:43 PM
無事にできました!
すごいですね・・。そういうタグ?をいれるとできるんですね。。
jugemのカスタマイズは見れませんでしたが、
検索するといろいろ情報はあったものの、
java?scriptだけでは、できなかったんですね・・。
お忙しいところありがとうございます。
完成したら、報告にきますね!!
これで、もうバッチリです!!!!
本当にありがとうございました。
これからも新作を楽しみにしていますので、
かげながら応援いたします!!!
2008/10/18 10:24 AM
望みどおりの状態になったようでよかったです。
今後ほかのテンプレを使われる時のために補足しておきますと、ほとんどのテンプレの場合であれば
<div class="linktexts" id="commentlist">{recent_comment_list}</div>
のようにdivタグの中にclassとid一緒に記述してdivタグひとつでよいのですが、凹凸シリーズの場合それだと凹凸が反映されなくなるためclassとidを分けてdivタグを2つにしているのです。参考までに。
2009/02/10 1:22 PM
ミナセと申します。
【 SQUARE;凹凸_05】をJUGEMの方で使わせて頂いております。
シンプルな3カラムテンプレートを探していたので見つけた時はとても嬉しかったです!
今回は質問がありコメントさせて頂きます。
日々、アイコン追加等をしてカスタマイズいるのですが
今日、自分のブログをチェックした際にカレンダーの左下部分と左サイドの線がずれてしまっていました。
今朝も少しHTML等を弄ったので元に戻したのですが直らず、いつからずれてしまっているのかわかりません。
HP作成経験はあるのでタグ等の多少の知識はあるのでそれで何とかしようと試行錯誤しましたが自分では守勢不可能でした。
もし原因がお分かりになるようでしたら
教えて頂けましたら嬉しいです。
また、全く違うことなのですが、左のサイドの表示が現在左寄せになっているところを右寄せにするということはCSSで一括可能なのでしょうか?
この行為が勝手なカスタマイズとして禁止されているものでしたら申し訳ございません。
もし、カスタマイズしても大丈夫であり左寄せに出来るのであれば教えて頂きたく思います。
よろしくお願い致します。
長々と失礼致します。
2009/02/11 12:55 PM
はじめまして。
テンプレ使ってくださってありがとうございます。
以下、長くなりますがご覧下さい。
【▼まず左サイドを左に寄せる】
■cssにて #leftbox #leftside {〜} 内の float: right; を配布時の状態 float: left; に書き換える。
【▼次に左サイドの凹凸を整える】
■左サイドのOthersとRecommendの凹凸を繋げる
□htmlにて<!-- search -->の上にある<div class="linktext_btm">を<div class="linktexts">に書き換える。
□<!-- /others/ -->の上に<div class="menu_btm"> </div>を書き加える。
■Recommend最下部の凹凸を整わせる
(Categoryの上に設置してある忍者のカウンターをRecommend下に移動させつつカウンター周りにも凹凸ラインを表示させる方法を書いてみます)
□htmlにて忍者のカウンターを<!-- /amazon/ -->の下へ移動させる。
□移動させたカウンターの上に<div class="linktext_btm">を書き加え、カウンターの下に</div>を書き加える。
▲ここまでで左サイドメニュー部分の凹凸が整います。
もしカウンター部分を他のメニューと同様にタイトル(例『▼Counter』)をつけたい場合は先程書き加えた<div class="linktext_btm">の上に下記を書き加えてください。
<div class="linktitle"><span class="menuhead">▼</span>Counter</div>
<div class="menu_btm"> </div>
【▼右メニューの凹凸を整える】
■『▼CONTACT』以降にある『*'09EVENT参加予定*』の上辺りに<div align="left">がありますが閉じる為の</div>も見当たりませんし必要無さそうなので、htmlにて該当する部分を削除してください。これをすることで『▼CONTACT』と『▼VitaminZ』との凹凸ラインを整えることができます。
【▼エントリー部分の横幅】
(エントリー部分の横幅を広げたことでエントリー部分と右サイドの間隔が狭まってしまっていたり…等あるので、他にも書き換えなければいけない部分があります)
■cssにて下記参照で修正してみてください。
□#layoutのwidthを796pxにする
□#headerのwidthを794pxにする
□#leftboxのwidthを596pxにする
□#leftbox #contentsのwidthは既に変更されている数値(395px)のままでよいです
□.header_bottomのwidthを772pxにする
□下記の8箇所のwidthを全て385pxに変更する
.page_home
.navi
.entry
.entry_top
.entry_bottom
.entry_comment, .entry_trackback
.entry_profile
.prof
以上です。上記を全て行えば全体的に整うと思います。
2009/02/12 11:08 PM
今朝、CSSも弄っていたことを思い出し元に戻すと
崩れは戻りました。
左寄せやカウンタータイトルの表示等
たくさん丁寧な説明を本当にありがとうございます。
とても気に入っているテンプレートなので
頂いたアドバイスを参考にカスタマイズして
いきたいと思います。
本当にありがとうございました。
2009/02/12 11:29 PM
度々連続で書き込みもうしわけありません。
頂いたアドバイスをもとに書き換えてみましたが
(カウンターの位置は今まで通りにしたかったので場所はBOXを作るだけにしました)
私のPCでは右サイドが記事より下に下がってしまいました。
一応、見直しをしてみたのですが・・・。
横幅を変更すれば良いのかな・・・と
なんとなく想像はつくのですが
下手にいじってややこしくなると
教えて頂くのもややこしくなるかと思って
崩れたままにしています。
何度もお手数をおかけいたしますが
ご指導のほどよろしくお願い致します。
2009/02/13 1:00 AM
下記参照でどうぞ。
■右サイドが記事より下に下がる
先日のわたしのコメントの『【▼エントリー部分の横幅】』にて書きました変更数値とは違う数値に書き換えていらっしゃる箇所があるようなのでそれが原因ではないでしょうか。
#layout
誤)760px
正)796px
.header_bottom
誤)722px
正)772px
■カウンター部分の凹凸ライン
先日のわたしのコメントにてカウンターを左サイド最下部に表示する方法として書いていましたので、現在は『▼Category』との凹凸ラインが繋がっていない状態となっていると思います。お望みの位置に表示させる場合ですとカウンターの上に記述しました<div class="linktext_btm">を<div class="linktexts">に書き換える必要があります。
■Recommendの最下部の凹凸ラインを整える
Recommendをミナセさんのように左もしくは右サイドの最下部に移動させた場合、下記[A]もしくは下記[B]のようにすることで凹凸ラインが整います。
[A]最下部にRecommendですが表示させているAmazon画像全てを一括で凹凸ラインで囲むことになります。
▼こんな感じ
http://terrapin.img.jugem.jp/20090213_627234.png
[B]上記[A]のようにせず配布時の凹凸ライン具合を保ちたい場合は、Recommendの下に何かしらメニューを持ってくる必要があります。
▼こんな感じ
http://terrapin.img.jugem.jp/20090213_627235.png
[A]の状態にしたい場合は再度コメントいただければお答えいたします。[B]の方は先日のわたしのコメント内の『■Recommend最下部の凹凸を整わせる』を応用していただければ出来ます。
先日のコメント同様、長くなりましてすみません。
上記を全て行えば整うと思いますのでお試しください。
2009/02/13 9:57 AM
お返事ありがとうございます。
結果的に私の打ちミスでお恥ずかしい限りです。
カウンターBOXへのアドバイスもありがとうございます。
最後に書いて頂いた「[A]の状態にする」方法も是非教えて頂きたいと思います。
今のテンプレートをきっちりさせるため、そして今後のテンプレートカスタマイズのためにも。
本当に丁寧に対応して頂いてとても嬉しく思っております。
何卒よろしくお願い致します。
2009/02/13 8:35 PM
先にお詫びです。昨夜のコメント内に書き忘れていた部分があったことに気づきました!すみません。
『■カウンター部分の凹凸ライン』を行っていただきつつ、更に追加するタグがあります。
▼該当する部分のタグを書き出てみます【※最後の行が書き加える部分です】
<div class="linktitle"><span class="menuhead">▼</span>Counter</div>
<div class="menu_btm"> </div>
<div class="linktexts">
忍者カウンタ−
</div>
<div class="menu_btm"> </div>
ウッカリ書き忘れのままコメントしておりましてすみませんでしたm(__)m
---
次に、昨夜のコメントの[A]の状態
http://terrapin.img.jugem.jp/20090213_627234.png
については下記参照でどうぞ。
▼htmlにて<!-- amazon -->から<!-- /amazon/ -->までを下記と差し換える。【※ミナセさんのブログのソースを見させていただいたところ<!-- /amazon/ -->が見当たらないので、<!-- amazon -->から</div><!-- /leftside/ -->の上にある<div class="menu_btm"> </div>までを下記と差し換えてください】
<!-- amazon -->
<div class="linktitle"><span class="menuhead">▼</span>Recommend</div>
<div class="menu_btm"> </div>
<div class="linktext_btm">
<!-- BEGIN amazon -->
<a href="{amazon_url}" target="_blank"><img border="0" src="{amazon_ImageUrlSmall}" alt="{amazon_ProductName}" class="amazon_pict" /></a>
<div class="amazon_text">
<a href="{amazon_url}" target="_blank">{amazon_ProductName}</a>
<br />{amazon_Creator}</div>
<!-- END amazon -->
</div>
<!-- /amazon/ -->
▼cssにて/* 画像 */以降にある .amazon_pict {〜} を削除し、その削除した場所に下記を書き加える
.amazon_pict {
display: block;
margin: 0 auto;
text-align: center;
padding: 5px;
background-color: #ffffff;
border: 1px solid #efefef;
}
.amazon_text {
text-align: center;
padding: 5px 0;
}
以上です。
2009/02/16 12:29 AM
今後のカスタマイズの勉強にもなり
ブログもすっきりとさせることができました。
これからも新作テンプレート期待しております。
2009/02/16 9:59 PM
崩れた部分など、整ったようでよかったです。
テンプレの不具合や、もしまたご不明な点などありましたら、わかる範囲のことでしたら対応いたしますのでその際はまたコメントいただければと思いますm(__)m
2009/04/14 2:08 AM
シンプルでクールなデザインが気に入り、こちらのテンプレートをお借りいたしました。(^^)
2点、カテゴリー等の順番と、サイズを少し広げさせていただきましたので、ご報告いたします。
2009/04/17 12:39 PM
はじめまして。こんにちは。
レスが遅くなりましてすみません。先程コメント拝見しました。
テンプレ気に入ってくださったようでとても嬉しいです。使ってくださってありがとうございますm(__)m