mysticdiary

更新はLittleDreamでしています。右のバナーからどうぞ

グレー系統が続くけど・・

なんだか気がついたら、グレー系統のテンプレートが続いている・・。
特に意識したわけじゃないんだけど、いわゆる灰色でも華やかな雰囲気が出せるのでは・・と
いろいろ楽しみながら作っていたら、ずーっと灰色が続いてしまった(爆)

whiteboxdample.jpg


今回は画像をあんまり使わないようにしよう・・と心がけて、CSSでなるたけ表現しようとして
疲れた(笑)
トップの画像は、sliding boxes&captionという動きがちょっとかっこいいパネルになっている。
背後に模様を入れたりしていろいろ楽しめたり、
写真の説明やリンクも問題なく入れられるので、工夫のしがいがあるようになっている。
デフォルトで入れてあるのは、3種類のエフェクトだけど、元ネタのページを見るかぎり、 エフェクトはたくさんあるので、お好みで変更できる。(ちょっと面倒くさいけど・・)

さて、というわけで灰色のテンプレはちょっと小休止にするかなあ。
次は少しカラフルなやつを作ろう・・(爆)

●上部画像の変更の仕方

上部のスライドボックスには3枚の写真が使われています。
写真はお好みのものに変更可能です。
写真の大きさは、左側の一番大きな画像が310px×400px、右側の2枚の画像は
上も下も310px×200pxとなっています。
画像を入れ替えるには、


<div id="photo">
<div class="boxgrid thecombo">
<img class="cover" src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/whiteboxphoto1.jpg" />
<h3>タイトル</h3>
<p>写真の説明など<br/><a href="#">ここにリンクをする項目</a></p>
</div>	

<div class="boxgrid peek">
<img class="cover" src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/whitebocphoto2.jpg" />
<h3>タイトル</h3>
<p>写真の説明など<br/><a href="#">ここにリンクする項目</a></p>
</div>	

<div class="boxgrid captionfull">
<img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/whitebocphoto3.jpg" />
<div class="cover boxcaption">
<h3>タイトル</h3>
<p>写真の説明など<br/><a href="#">ここにリンクする項目</a></p>
</div>
</div>

</div>

上のソースの画像リンクのアドレスを変更するだけです。

それぞれの画像にはクラス名がつけられていますが、
上から左側の画像、右上、右下という順番です。

また、必要なら写真のタイトルと説明、リンクなども入れることができます。
該当の説明のところを差し替えてください。


<h3>タイトル</h3>
<p>写真の説明など<br/><a href="リンクアドレス">ここにリンクする項目</a></p>

また、3枚の写真の背景には画像が使われています。
これも変更可能です。
CSSの編集画面で、

#photo{
width:620px;
height:400px;
background-color:#dddddd;
margin-bottom:30px;
background-image:url(http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/whitebocphotoback1.jpg);
}

この部分の背景画像のアドレスをお好みのものに変更します。
背景画像は620px×400pxです。

●画像のエフェクトを変更する

これはちょっと知識がないと難しいかも知れませんが、
一応仕組みの説明だけしてみたいと思います。(わかりにくいけど・・)
HTMLの上部には一応全種類のエフェクトを表記してあります。
(詳しくは元ネタのページを参照)


<script type="text/javascript">
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
});
//Horizontal Sliding
$('.boxgrid.slideright').hover(function(){
$(".cover", this).stop().animate({left:'310px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
});
//Diagnal Sliding
$('.boxgrid.thecombo').hover(function(){
$(".cover", this).stop().animate({top:'260px', left:'310px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
});
//Partial Sliding (Only show some of background)
$('.boxgrid.peek').hover(function(){
$(".cover", this).stop().animate({top:'100px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
});
//Full Caption Sliding (Hidden to Visible)
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'100px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'250px'},{queue:false,duration:160});
});
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'100px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
});
});
</script>

上部のソースの中でデフォルトで使用しているのは、以下の部分です。

//Diagnal Sliding
$('.boxgrid.thecombo').hover(function(){
$(".cover", this).stop().animate({top:'260px', left:'310px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
});
//Partial Sliding (Only show some of background)
$('.boxgrid.peek').hover(function(){
$(".cover", this).stop().animate({top:'100px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
});
//Full Caption Sliding (Hidden to Visible)
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'100px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'250px'},{queue:false,duration:160});
});

それぞれのエフェクトにクラス名がつけられているので、
それに対応したソースをHTMLに書くと以下のようになります。

<div id="photo">
<div class="boxgrid thecombo">
<img class="cover" src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/whiteboxphoto1.jpg" />
<h3>タイトル</h3>
<p>写真の説明など<br/><a href="#">ここにリンクをする項目</a></p>
</div>	

<div class="boxgrid peek">
<img class="cover" src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/whitebocphoto2.jpg" />
<h3>タイトル</h3>
<p>写真の説明など<br/><a href="#">ここにリンクする項目</a></p>
</div>	

<div class="boxgrid captionfull">
<img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/whitebocphoto3.jpg" />
<div class="cover boxcaption">
<h3>タイトル</h3>
<p>写真の説明など<br/><a href="#">ここにリンクする項目</a></p>
</div>
</div>

</div>

さらに、CSSで見栄えを調整します。
position: relative; はアニメーションさせるために絶対必要な記述です。

.boxgrid.thecombo{
width:308px;
height:400px;
float:left;
border-right: solid 2px #f0f0f0; 
overflow: hidden; 
position: relative; 
}

.boxgrid.peek{
width:310px;
height:198px;
float:left;
border-bottom: solid 2px #f0f0f0; 
overflow: hidden; 
position: relative; 
}

.boxgrid.captionfull{
width:310px;
height:200px;
float:left;
overflow: hidden; 
position: relative; 
}


つまり、平たく言えば、エフェクトには名前がついているので、
その名前と同じ名前を使ってHTMLソースを記述し、CSSで見栄えを調整する・・といった感じでしょうか。 (わかりにくくてすいません)

●上部ナビげーションの編集


<div id="menu">
<ul class="lavaLamp" >
<li class="allpost"><a href="<%url>archives.html" onfocus="this.blur();" class="nonborder" title="全ての記事">allpost</a></li>
<li class="twitter"><a href="http://twitter.com/" onfocus="this.blur();" class="nonborder" title="twitter">twitter</a></li>
<li class="rss"><a href="<%url>?xml" onfocus="this.blur();" class="nonborder" title="Rss">rss</a></li>
<li class="mail"><a href="mailto:?subject=hello!&body=message" onfocus="this.blur();" class="nonborder" title="メール">mail</a></li>
<li class="admin"><a href="<%server_url>control.php" onfocus="this.blur();" class="nonborder" title="管理画面">admin</a></li>
</ul>
</div>

ツイッターのアドレスとメールのアドレスはご自分のを記入してください。

●サイドバーの項目を開いた状態にする

サイドバーはjqueryを使って閉じた状態にしているので、常に開いた状態にしておくには、
jqueryへのリンクを切っておくだけでオッケーです。

<script type="text/javascript" src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/slidetogglesample.js"></script>

HTML上部の方にある、このソースを丸々削除するか、
後々のために残してリンクアドレスの最後の.jsだけ消去しておけばリンクは切れます。

●サイドバーを全部閉じた状態にする


<script type="text/javascript" src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/slidetoggle.js"></script>

サイドバーのスクリプト表記の部分を上に書き換えてください。
関連記事
baorin

いつも超ド近眼眼鏡をかけています。ああ、視力が良くなりたい・・・。好物はおすしです。性格はずぼらで人見知りです。こわい人がきらいです。

53 Comments

☆リューヤ☆彡 says...""
サイドバーを何回やっても開いた状態にならないんですが
どうしたらよいですか?
前の記事のやり方でもよくわかりません
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/jquery-142min.js"></script>
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/slidetogglesample.js"></script>
<script type="text/javascript" src="http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/smoothscroll.js"></script>
<script src=" http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/jqueynivoslider.js" type="text/javascript"></script>
<script type="text/javascript">
をどうすればいいのですか?
できれば詳しくお願いします

2010.06.19 23:08 | URL | #- [edit]
BETTINA says...""

あなたのテンプレの大ファンです><

フラッシュ系なのがすごいうれしいですし(タイトル画的なのが)
外国っぽいのも自分のブログの分類とマッチしますし

色、フォント、すべて完璧で

愛用してますノン

リクエストなんですが
peacockの2カラム左

デザインはoldnewsとMIXさせたようなのを
つくっていただけないでしょうか?

公式サイトみたいな感じでメニューがあるものがいいです。


よろしければお願いします><


あとよければ返信ください
jenekuran@yahoo.co.jp
2010.06.20 00:35 | URL | #- [edit]
管理人 says...""
☆リューヤ☆彡さんへ。

<script type="text/javascript" src="http://blog-imgs-30.fc2.com/m/y/s/mysticdiary/slidetogglesample.js"></script>
この部分だけ削除してください。
そうすればサイドバーが開くようになります。
2010.06.21 12:02 | URL | #- [edit]
管理人 says...""
BETTINAさんへ。

テンプレートを気に入っていただきありがとうございます。

リクエストについては、今のところ考えて見ます・・としか
言いようがないのですが、言っておいていただければ、
いつか何かの形になるかも知れません。
(あいまいですが・・・)
2010.06.21 12:22 | URL | #- [edit]
BETTINA says...""

>>管理人さん

返信すごくうれしいです!!
形になったらうれしいですなぁ!!(www


ツイッターフォローさせていただきますね!!

2010.06.25 21:45 | URL | #- [edit]
ぷぅ。 says...""
初めまして!
こちらのテンプレートとても素敵でダウンロードさせていただきました!

今、私のブログでは以前作成されたスライドショーになる「peacock」をお借りして(このテンプレもまた私にはお気に入りですw)ブログをやっているのですがこちらのテンプレの画像を画像変更してはダメでしょうか?
またスライドショーのように画像を増やす事は可能でしょうか?

お時間のある時でけっこうですのでお返事よろしくお願いします。
2010.06.28 23:02 | URL | #- [edit]
mama says..."お借りいたします"
初めまして。
とっても素敵なテンプレートお借りいたしますネ。

トップ画面の画像を差し替え可能でありましたら、画像の大きさを
それぞれ教えて欲しいのですが・・・
少し試みたのですが、背景より小さいのか隅っこから背景の画像が
見えてしまいます。
お手数ですがよろしくお願い致します。

これからも新作のテンプレートを楽しみにしております。
2010.06.29 00:23 | URL | #MEoSjULU [edit]
管理人 says...""
ぷぅ。さんへ。

画像の差し替えについては記事に追記してみたので、
そちらを参考になさってください。
あと、画像をスライドショーにできるか・・ということですが、
無理やりやれば可能な気もしますが(笑)、かなり難しい
と思います・・・。そこまで試したことがないので、
実装できるか謎です。
2010.06.29 12:48 | URL | #- [edit]
管理人 says...""
mamaさんへ。

画像のサイズについては記事に追記したので、
そちらをご覧になってください。
2010.06.29 12:48 | URL | #- [edit]
mama says..."ありがとうございました"
大変分かりやすく教えて下さってありがとうございました。
無事に画像の変更が出来ました。

記事のタイトルの下にある囲み(コメント、トラックバック)
現在は、記事の上にこの囲みがある形になっていますが
これらを記事の最後にもってくることは可能ですか?
何度もすみません。
2010.06.29 15:57 | URL | #- [edit]
キリン says...""
右上の所のメールをクリックしてもアドレス部分が空欄で表示されません。
どこに入力したら表示されますか??


<li class="mail1"><input id="mail1" type="text" name="comment[mail]" size="30" title="メールアドレス" value="<%cookie_mail>" /></li>

とっても気に入って使用しています♪
教えてください。 宜しくお願いします。
2010.06.30 15:27 | URL | #- [edit]
管理人 says...""
キリンさんへ。

そのHTMLはコメント欄の部分です。
上部ナビゲーションのHTMLは上の記事の

●上部ナビゲーションの編集

の部分を読んでください。
メールアドレスを設定するには、
mailto;
の後にご自分のアドレスを記入します。
2010.07.01 11:37 | URL | #- [edit]
管理人 says...""
mamaさんへ。

可能ですが、
個別カスタマイズについては各自で行ってください。

少しヒントを出しますと、HTMLの
kizifooterで囲まれた部分(kizi_bodyの上まで)
を、
kizi-bodyの直下(kizibody-----ここまでの下)に入れ替えます。

上下のスペースなどはCSSの
.kizifooterの部分で調整します。
こんな感じでしょうか。
2010.07.01 11:47 | URL | #- [edit]
だーさん says...""
はじめまして、気に入って使わせて頂いております。

早速ですが、サイドバーですが、BLOG立ち上げると一番上だけは最初から
開いておりますが、2番目も最初から開けて起きたい場合は、方法が有るの
でしょうか?
ちなみにjqueryへのリンクを切っておくと、サイドバー全部が開いてしまうので
方法が有りましたら、教えて下さい。
お願い致します。
2010.07.01 15:59 | URL | #- [edit]
mama says..."ありがとうございました"
>>管理人さま

ヒントを出して頂きましてありがとうございました。
無事に変更できました。
愛用させて頂きますw
2010.07.01 22:43 | URL | #MEoSjULU [edit]
管理人 says...""
だーさんへ。

2番目もあけておくのは、プラグイン対応にしている限り
ちょっと難しいんじゃないかな・・と思います。
プラグインでなくて、直接サイドバーの内容をHTMLに
書き込む形にしているなら、その要素に名前をつけて
それで開閉をコントロールするということもできるんですけど、
ためしに、プラグインの編集画面でIDつけて
やってみたりしたんですが、コントロールできませんでした。
もっと頭のいい人なら何か方法もあるんでしょうが、
今のところ管理人には思いつきませんです・・。
2010.07.02 16:06 | URL | #- [edit]
きりん says...""
有難うございました。
なにせ初心者でなのでまったくわからなくて・・・。
丁寧に教えていただき有難うございました。
かなり気に入って使用しています♪
2010.07.02 17:47 | URL | #- [edit]
だーさん says...""
ご返答有難う御座いました。
そうですか、残念ですがしかたありませんね。
私もかなり気に入って使用させて頂いてます。
また、素敵なテンプレートご紹介下さい。
2010.07.03 09:51 | URL | #- [edit]
Demee says..."Whitebox2お借りいたしました。"
はじめまして。
このたび、テンプレートの改編に伴い、Whitebox2を少々改良させていただき、使わせていただきました。
シンプルで観やすく、何よりも設定しやすいので、とても気に入っております。

ありがとうございました。

スクリプトの開きに最初は戸惑いましたが、こちらのサイトの他の方へのご回答で、解決いたしました。
そして、ちょっと細かいことなんですが、写真の裏の説明文の改行の設定の仕方を教えていただけると、ありがたいのですが。現状はそのまま文が続いてしまっている状態です。

あと、あなたの作成されたテンプレートには直接関係ないことですが、ある記事を常にトップにおいて置く設定の仕方をお教えいただきたいのですが。
インフォメーションとして利用するために。

何分にも不慣れなものでして、お手数をおかけいたしますが、お願い申し上げます。

hih
2010.08.10 16:36 | URL | #- [edit]
管理人 says..."Demeeさんへ"
お返事遅くなってすみません。

写真の裏の文章の改行方法ですが、
これは直接改行タグを文章に挿入してください。
文章をHTMLの書く時に、改行したい部分に
<br />を挿入します。

あと特定の記事を常にトップに置いておく方法についてですが、
一番簡単なのは、記事を編集する時に、その記事の投稿日時を
自分で設定にし、日時を2020年とかずっと先の未来に設定
しておくと、常にトップに表示されます。
2010.08.15 10:19 | URL | #- [edit]
says..."管理人様"
当方、サイドバーの項目数が15あるのですが、サイドバーを開閉するようにすると、12しか開閉できません。

それ以上は、表示はされていますが、タイトル文字が小さくなって、クリックしても開閉できません。

開閉できるサイドバーの項目数に制限があるのでしょうか。

お教えいただけると、嬉しいのですが。
2010.08.17 10:55 | URL | #90LdKUd6 [edit]
管理人 says..."風さんへ"
こんにちは。

サイドバーの開閉の項目数に制限などはとくにありません。

13番目から開閉できなくなっているとすれば、
13番目のプラグインのHTMLがおかしくなっているのかも知れません。
プラグインのHTMLが正常かどうかタグが正常に閉じられているか
など一応確認してください。

かりに13番目のプラグインを一度はずしてみると14番目以降は普通に
開閉できるかも知れません。ちょっとためしてみてください。

2010.08.17 17:06 | URL | #- [edit]
says..."管理人様"
ご指示の通り、13番目のプラグインを一度外してみたのですが、結果は同じでした。
逆に、13番目のプラグインを外すと、開閉できるサイドバーが11に成ってしまいました。
因みに、3個外したら、開閉できるサイドバーは3つ減って、9になってしまいます。
理解不可能です。

プラグインの位置を1、2,3とパターンを変えてみても同じです。

折角、ご指導いただいたのですが、今回はこのテンプレートの導入は諦めました。
また、気に入ったテンプレートがありましたら、再度チャレンジしてみたいと思います。

今回は、お手数かけて、申し訳ありませんでした。
ありがとうございました。
2010.08.18 00:45 | URL | #90LdKUd6 [edit]
管理人 says..."風さんへ"
こんにちは。
それはちょっと解せないですねえ・・・。
管理人の方のテストでは、特に問題なかったので
その状態が再現できないです。
プラグイン1・2・3の位置とかもあまり関係ないと思います。
仕組みとしてはプラグインのタイトルに反応して内容を開いたり
閉じたりしているので、タイトル部分に半角文字がまじって
いたり、あるいはその上のコンテンツのタグが正常に
閉じられていなかったりというのが考えられますが、
いずれにしても直接ブログを見てみないことには
なんとも言いようがありません。

アドレス教えていただければソースを見ることもできますが・・
教えていただけるならまたコメントください。
2010.08.18 07:33 | URL | #- [edit]
Demee says..."タイトル"
ありがとうございました。
記事トップ設定できました。
写真裏は追って、設定いたします。

ところで、過去の記事などが、文章を含めセンターに表示されてしまうという現象が起きるときがあります。
今までは、設定どおりに表示されていたんですが、左寄せの記事が突然センター寄せ表示になったってしまったり。(それが本日発生発生しました)
お心あたりがありますでしょうか。

記事の作成時にはそれなりの設定をし、プレビューでも設定通りに表示されるんですが、実際のホーム上で観ると、みんなセンターに寄ってしまっているときがあるんですよ。
そうじゃなく、設定通りに表示されてるときもあります。

カテゴリーを開いてみたりすると、今度はちゃんとそろっていたり、そうじゃない記事もあります。

やはり、このテンプレートをお借りしたときに、記事を古いテンプレから移そうとしたときに、プレビューでは、ばらばらにレイアウトされたものもあったんですが。
それは微調整で修正できました。

設定もしっかりしていて、作成時のプレビューでも設定通り、でも実際のホーム上の文字や写真はずれているとは、どうゆうことなのでしょうかね。

FC2の問題なんでしょうか。

お心当たりがありましたら、お教え願います。

hih
2010.08.22 13:12 | URL | #- [edit]
Demee says..."タイトル"
たびたび申し訳ありません。

特に文字がセンター寄せで表示されているようです。

hih
2010.08.22 13:19 | URL | #- [edit]
Demee says..."タイトル"
解決いたしました。
最新の記事をアップする際に、</center>をくくりわすれてました。
とんだケアレスミスでお騒がせいたしまして、申し訳ありませんでした。

それにしても、こちらの構造は、過去の記事に反映されるのですね。
私は、記事が単独で設定されるのかと思ってました。

お騒がせいたしました。

hih
2010.08.22 15:53 | URL | #- [edit]
管理人 says..."Demeeさんへ"
こんにちは。

とりあえず解決なさったようで良かったですね。

ちなみに記事編集の時に、一つタグの閉じ忘れがあっただけで、
その記事だけではなく、ブログ全体のレイアウトに影響すると思います。
上のコメントなんかでサイドバーがうまく開閉しないなんていうのも、
ほぼ同じ問題ですね。
なにか不具合がおきた時は、どこかに余計なタグがまじっているとか、
タグの閉じ忘れなどの場合が多いので、注意してチェック
してみてください。

2010.08.23 07:49 | URL | #- [edit]
Mattel says..."はじめまして。"
素敵なテンプレート、お借りしています。
お伺いしたいのですが、サイドバーの項目の1番目が常に開いている状態を
閉じた状態にすることは可能でしょうか?
全てのプラグインが常に閉じた状態で表示される、ということです。

お手数お掛けしますが、お時間ございましたらお返事お待ちしております。
2010.08.23 21:30 | URL | #- [edit]
Demee says..."タイトル"
そうですね。

タグのチェックは重要ですね。

ありがとうございます。

hih

2010.08.23 22:08 | URL | #- [edit]
管理人 says..."Mattel さんへ"
こんにちは。
上の記事の最後に追記したので、
そちらを参考になさってください。
2010.08.24 16:12 | URL | #- [edit]
Mattel says..."ありがとうございます。"
とても解り易く教えて頂き、助かりました。
ありがとうございます。
2010.08.25 20:34 | URL | #- [edit]
匿名希望 says..."Whitebox2の構成の変更について"
初めまして。
自分もブログを作り、素敵なテンプレートを見つけれて良かったです。
絵が動くってことは考えもつかなかったです!
テンプレート編集のページと、エフェクト編集のページを睨めっこして試してみたのですが出来ませんでした。
画像がスライドするのが3つあるのですがこれを4つに増やす場合の構成、もしくはそのヒントを教えていただけないでしょうか。
2010.10.02 20:55 | URL | #7CzU7SnA [edit]
Demee says..."タイトル"
こんにちわ。
いつもお世話になります。
テンプレート大変快適に使わせていただいております。

さて、本日はどうしても自分では設定できないことがありますので、
ちょっとお尋ねいたしたく、ご連絡いたしました。

アメリカのLinkwithinのアクセサリーを貼りたいのです。
過去に書いた記事がサムネイル写真でランダムに各ページに表示されるものです。
これで、読者の方には過去記事も観ていただけるのですが。

これを私の記事の中の
Sponsorship Advertisements
from NTT Communications(ピンクの欄の広告)
のすぐ上に表示させたのですが、それが表示されないのです。
(コピーしたタグはそのタグのすぐ上に置いたのです。)
そのかわり、コメント欄の中に、単純に文字だけが表示されてしまいます。

その場合、このテンプレートですと、どこに設置すれば、サムネイル画像が、
各記事の最後に表示されるようになるのでしょうか?
いろんな箇所で試したのですが、どうもうまくいきません。
また何かを書き足さなければいけないのでしょうか。

文字だけでも表示されているということは、リンクはされているのですよね。

やむなく、お力をお借りできればと思い、ご連絡させていただきました。
お手数と存じますが、私のソース表示を見ていただき、適切なアドバイスをいただければ、幸いに存じます。

コピーしたオリジナルタグは、
<script>
var linkwithin_site_id = 332177;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>です。

alt="Related Posts Plugin for WordPress, Blogger..."の部分を
alt="Related Posts with Thumbnails"に変えてあります。

よろしくお願いいたします。

hih-Demee
2010.12.05 14:13 | URL | #- [edit]
管理人 says..."Demeeさんへ"
こんにちは。
Linkwithinですが、
スクリプトはHPの説明通り/bodyタグの直前に入れてください。
Q&Aをみると、その他に位置をコントロールするタグがあるようですが、
それをHTMLの<kizimoreここまで>の直下にいれて、
個別記事エリアを表すFC2の独自タグpermanentarea
(詳しい記述はFC2ブログのマニュアルを参照してください)
で囲ってください。
kizimoreなど追記のHTML内に入れてしまったりしなければ、
独自タグで囲ってさえいれば、どこに挿入しても大丈夫だと思います。
2010.12.06 14:42 | URL | #JC3FHLh6 [edit]
Demee says..."タイトル"
ご回答ありがとうございます。

ご指示どおり、位置をコントロールするタグをコピーし、
<kizimoreここまで>
の直下に入れました。

本体スクリプトは</body>の直前に入れました。

位置は、そこでオッケーになりました。

しかし、最初の記事ページだけに文字だけが出るのですが、相変らす過去の画像(写真)は表示されません。
あと希望は、全記事ページに画像付きを反映させたいのですが。

LimkWithinが選択した記事には、写真は入っているのですが、表示されないんですねぇ~。文字だけで。

>個別記事エリアを表すFC2の独自タグpermanentarea
すみません。これがちょっと不明なんですが。
おっしゃられているのは、下記の変数で囲むというとでしょうか。
マニュアルには、これくらいしかみあたらないんですが。

<!--permanent_area-->
~ <!--/permanent_area-->

囲むとしたら、どのタグを囲めばよいのでしょうか。


fc2で他の方のlinkwithinを使ってらっしゃるブログのソースを参考にさせていただいたりもしたんですが、どうしても画像がでてこなんですよ。

苦戦しております。

何度もお手数をおかけいたしまして、申し訳けありません。

hih

2010.12.06 21:29 | URL | #- [edit]
管理人 says..."Demeeさんへ"
こんにちは。
最初はしばらく画像が出ないみたいですよ。
他の導入している方のブログなどを参考にしてください。
エリア変数は上記のでけっこうです。
囲むのは位置をコントロールするタグをその変数で囲むという意味です。

2010.12.07 07:34 | URL | #JC3FHLh6 [edit]
nack1213 says..."タグ"
お世話になります。素敵なテンプレートをお借りいたしました。ありがとうございます。
初心者でよくわからないところがあり、不躾ながらコメントさせていただきます。
タグの設定なのですが、お借りしたテンプレートではサイト外でタグ検索をする設定になっています。これを自サイト内のみで検索できるように変更したいのですが、HTMLはどのように記述すればよろしいでしょうか?
どうぞよろしくご教授くださいますようお願い申し上げます。
2011.04.01 01:05 | URL | #StuDzSQo [edit]
nack1213 says..."Re: タグ"
お騒がせいたしました。初心者のためユーザータグの設営がうまくいかずお騒がせしました。何とか解決することができました。大変失礼しました。
2011.04.02 17:21 | URL | #- [edit]
satemth says..."Whitebox2"
Whitebox2をお借りしました。お陰様で自分のイメージのブログが出来ました。小生、ホームページも始めたことなくブログから始めて一ヶ月程度ですが、なかなか面白くはまっています。Whitebox2も2日で立ち上げました。ただプラグインの追加が設定の2までで、それ以上追加できません。どうしたらよいのでしょうか?
2011.06.06 21:33 | URL | #n.a9wqKw [edit]
管理人 says..."satemthさんへ"
こんにちは。

プラグイン3に追加すれば普通に表示されるように
なっていますが、もし画面では見えないとしたら
管理画面でチェックが入ってないとか、
他のプラグインや記事中のhtmlが正しくないために
表示されなくなっている可能性があります。
今一度ソースを見直してみてください。
他のプラグインが邪魔しているかどうかは、チェックを
はずして確かめてみたりする方法があります。
2011.06.07 10:20 | URL | #i4E9Nobc [edit]
BOOOYA says...""
Whitebox2を使わせていただいております。
3つの画像が動くアニメーションのようなものがあると思うのですが、右下のアニメーションの動きを右上のでも行うにはどうすればよいのでしょうか?
色々試したりしてみたのですが上手くいかず質問させていただきました。
差し支えなければ教えていただけないでしょうか?
よろしくお願いいたします。
2011.08.31 04:19 | URL | #ZyqPIeBg [edit]
管理人 says..."BOOOYAさんへ"
こんにちは。
右下のアニメーションと同じにするには、
右下のアニメーションのソースと同じクラス名を指定します。
ただ同じクラス名を指定すると、今度はCSSで幅を指定するときに
区別することができなくなり、(右上と右下で画像の縦幅が違います)
レイアウトが崩れます。
それ以降はカスタマイズがかなり複雑になってきます。
個別の複雑なカスタマイズについてはお答えしないことに
しているので、すみませんが、この辺で勘弁してください。
よろしくお願いします。
2011.09.04 08:48 | URL | #i4E9Nobc [edit]
マユ says..."ブログの"
このテンプレを気に言って、ずっと長い間使わせていただいています。
テンプレ使用開始当初は、テンプレ案内のように、上が白くて、ブログの
最下部に黒い模様があったのですが、1年ぐらいまえから、突然、
上のタイトル部分に、ブログ最下部の黒い模様が来てしまい、タイトルが
見え辛くなる現象が続いています。いつか治るかなーと思ってたのですが、
そのままです。解決方法が分かりましたら、教えて頂きたく思います。
お忙しいと思いますが、よろしくお願い致します。
2012.02.27 14:08 | URL | #- [edit]
dan&jodi says..."写真変更リンク先"
はじめまして。
教えていただければ。
はじめてブログをする超初心者です。
なんとか写真など入れ変え、リンク先なども変えたのですが。
ここで問題発生です。
リンク先をmacで使用しているidisk内にフォルダーを作成し変更写真をいれたのですが。
ユーザー名とパスワードを要求。
これをいれないと見れません。
写真変更する際のなにか方法はないでしょうか?
ご伝授いただければ幸いです。
2012.03.10 10:57 | URL | #- [edit]
dan&jodi says..."できました。"
できました。
ブログ内の画像アップを使えばよかったのに気がつきました。
お騒がせしました。
2012.03.10 11:14 | URL | #- [edit]
mattel says..."画像が上下で入れ替わっています"
素敵なWhitebox2をずっと使っております。
すでに質問されている方がいらっしゃるのですが、ボトムの黒い画像がトップに来てしまっています。
Firefoxではちゃんと変更なく表示されるのですが、IEですと上記のようにデザインのバランスが崩れてしまいます。
解決法などありましたら教えていただけますでしょうか?
お手数ですが宜しくお願い致します。
2012.08.19 20:39 | URL | #- [edit]
管理人 says..."mattelさんへ"
こんにちは。
ブログのレイアウトが崩れるということですが、
くずれていなかったのが、ある日突然くずれたのでしょうか?
その直前に何か記事を書いたりプラグインを導入したりということは
ありませんか?
あとieのバージョンは何でしょうか?ウィンドウズを使って
るんですよね?
2012.08.20 07:36 | URL | #i4E9Nobc [edit]
mattel says...""
ウィンドウズです。IE9を使っています。
独自でプラグインを入れたりしたのでそれが原因でしょうか。
一応、見直しはしたのですが。
もう一度、よく見てみます。
2012.08.21 02:11 | URL | #- [edit]
mattel says...""
こんばんわ。何度も失礼して申し訳ありません。
色々見直ししてみたのですが、特に気になる部分はありませんでした。
新しいFC2のIDを取得してWhitebox2のプレビューをしてみましたが、やはりボトム画像が
トップに表示されてしまいます。
ID取得後、すぐにプレビューしてみたので、CSS,HTMLともに何もいじっておりません。
やはり、IE9に不都合があるのでしょうか?
・・・難しいです。
2012.08.21 21:50 | URL | #- [edit]
管理人 says..."mattelさんへ"
こんにちは。
ということは、ブラウザを変更したら表示がおかしくなったということでしょうか?
それまでは普通に見れていたのですか?
管理人の環境だとie8までしか実際に試してみれないので、
それ意外はブラウザーショットというサイトで確認するのですが、
ie9でも普通に見れています。
ここまできたらサイトのソースをみないことには何もいいようがないのですが・・・。
2012.08.22 07:45 | URL | #JC3FHLh6 [edit]
管理人 says..."mattelさんへ"
つづきです。
もしやIE9でなぜだかCSSがうまく適用できていないのかも
しれないので、CSSのbodyに指定されている
background-position:center bottom;に
background-position:center bottom !important;と付けてみてください。
これでもだめだとちょっと原因がわからないです。

それと、実はこのテンプレートはけっこうソースが古くなってきているので
近々リニューアル予定です。そちらも配布すると思うので、
新しい方をよかったら利用してみてください。
日付は未定ですが、来週かさ来週あたりにはアップできると思います。
2012.08.22 16:38 | URL | #i4E9Nobc [edit]
mattel says...""
こんばんわ。
!important;と付けてみましたところ、見事に正常に表示されました。
お忙しい中本当にありがとうございます。

リニューアル予定とのこと、そちらも楽しみにしています。
2012.08.22 21:30 | URL | #- [edit]

Leave a reply






管理者にだけ表示を許可する

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/169-fdb9a814
← ひんやり実験器具 → なんちゃってアールデコ