mysticdiary

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

どうして古くなってしまうんだ!(爆)

なんか、ここらで少しまじめな(笑)テンプレート作ろうかと思いたち・・。
外国のサイトなんかでよくあるニュースサイト風テンプレート(新聞風?)でも
作ってみようかなとGIMPであれこれ遊んでたら、
どうしても、あれ、ここら辺すこし汚してみようかな、とか
かすれた感じにしたらいいかも?とか、どうしても古くする癖が抜けない自分に気づきました。
どうしても過去に戻りたいらしい自分。自分再発見(爆)

oldnewssample.jpg

写真はやっぱりnivoslider入れてみた。なんか動かないと楽しくないし(笑)。
ハリーポッターに出てくる新聞みたいに、紙媒体だけど、写真は動いたりするのって
楽しいよね。

あれ?それにしてもまたプレビューがおかしいな。
今回はサイドバーを開閉式にしていないのに、開閉式になっちゃってる??
最近fc2ブログのプレビューがおかしいんだけど、管理人だけかな?
違うテンプレートでも、同じID名とかスクリプトとか使ってると、
写真が前回のを継承しちゃったり、スクリプトも継承しちゃったり、
おかしなことに??

同じサーバー内だけでおこるみたいだから、他人から見ると普通みたいなんだけど。
自分で正常なプレビューが見れないのは辛いなあ・・。IDちょこっと替えれば
問題ないんだけど、やっぱりFC2のキャッシュかなんかの問題?

テンプレートごとに同じID名使っちゃいけないとか、
別に規則とかないよな?う~ん。フォーラムで質問してみようかなあ。

ちょこっと速報。

ただいま作成中のテンプレート画面です。

whiterosesample.jpg

これもおねいさんの画像は変化するようにしてみた。
まだいろいろ手を加えるので、完成は来週あたり!?

●nivosliderの画像を変更する


<div id="slider1">
<img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/oldstreetmono2.jpg" alt="" title="" />
<img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/oldstreetphotocolor1.jpg" alt="" title="" />
<img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/oldstreetkaimono.jpg" alt="" title="ここにキャプションを入れるのだよ~" />
<img src="https://blog-imgs-30.fc2.com/m/y/s/mysticdiary/oldstreetsummer1.jpg" alt="" title="" />
</div>
このHTML部分の画像リンクをお好きな画像に変更してください。
キャプションを入れたい場合は、titleの部分に好きな言葉を入れます。
画像の大きさは、サンプルは720px×250pxですが、今回は背景に画像を使用してないので、
縦幅の250pxは自由に設定できます。
720px×(好きな縦幅)pxでオッケーです。

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


<script type="text/javascript">
$(window).load(function() {
	$('#slider1').nivoSlider({
		effect:'random',
		slices:15,
		animSpeed:500,
		pauseTime:10000,
		startSlide:0, //Set starting Slide (0 index)
		directionNav:true, //Next & Prev
		directionNavHide:true, //Only show on hover
		controlNav:true, //1,2,3...
		controlNavThumbs:false, //Use thumbnails for Control Nav
		controlNavThumbsSearch: '.jpg', //Replace this with...
		controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
		keyboardNav:true, //Use left & right arrows
		pauseOnHover:true, //Stop animation while hovering
		manualAdvance:false, //Force manual transitions
		captionOpacity:0.8, //Universal caption opacity
		beforeChange: function(){},
		afterChange: function(){},
		slideshowEnd: function(){} //Triggers after all slides have been shown
	});
});
</script>
上部がnivosliderのエフェクト及びカスタマイズ関連のスクリプト。
エフェクトを変更するだけならば、

effect:'random',
のrandam部分をsliceupとかに変更するだけでオッケー。
詳しくは、nivo sliderの元ネタページを参照されたし。

過去記事にも少し説明があります。
モダンに逆もどり

●右上のメニューの編集



<div id="menu1">
<ul> 
<li class="allpost"><a href="<%url>archives.html" onfocus="this.blur();" class="nonborder">All post</a></li>
<li class="twitter"><a href="http://twitter.com/" onfocus="this.blur();" class="nonborder">Twitter</a></li>
<li class="rss"><a href="<%url>?xml" onfocus="this.blur();" class="nonborder">Rss</a></li>
<li class="mail"><a href="mailto:?subject=hello&body=message" onfocus="this.blur();" class="nonborder">Contact</a></li>
<li class="admin"><a href="<%server_url>control.php" onfocus="this.blur();" class="nonborder">Admin</a></li>
</ul>
</div><!-- menu1 -->
メールやツイッターはご自分のアドレスを入れてください。
背景にアイコンを使っているので、項目を変更すると、アイコン画像も変更する必要が出てきます。
できればそのまんま使っていただくのがよろしいかと・・・。

●左側のメニューの編集

  こちらは自由に項目を設定できるようになっています。
今の所5つまで設定していますが、1項目100pxなので大体9つまで項目を増やすことが可能です。

<div id="menu">
<ul> 
<li><a href="#" onfocus="this.blur();" class="nonborder">Link</a></li>
<li><a href="#" onfocus="this.blur();" class="nonborder">Link</a></li>
<li><a href="#" onfocus="this.blur();" class="nonborder">Link</a></li>
<li><a href="#" onfocus="this.blur();" class="nonborder">Link</a></li>
<li><a href="#" onfocus="this.blur();" class="nonborder">Link</a></li>
</ul>
</div><!-- menu -->
上のリンク部分のアドレス(#)と、項目(Link)をお好きに変更してください。
関連記事
baorin

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

24 Comments

べる@SiDOOH says...""
はじめまして。
テンプレ共有一覧で貴殿のテンプレを拝見し、シンプル且つレトロチックな配色とデザインがとても気に入り、DLさせて頂いた者です。早速使ってみましたが、当方のブログにプラグインを詰め込みすぎているせいか、IEにエラーが出てちょっと表示が崩れてしまいました。折角DLさせて頂いたので、少しずつ弄ってちゃんと表示出来るようにしたいと思います。
ところで、上記の件も含めて今後何かとご教授頂けたらと思い、リンクを貼らせて頂きました。
※リンクは当方ブログの Link>about BLOG CUSTMIZING です。
どうかご了承頂けますようお願いします。
2010.06.04 12:12 | URL | #- [edit]
管理人 says...""
べる@SiDOOHさん、こんにちは。

リンクはご自由にどうぞです!
ところでブログを訪問したら、文字が01との羅列になってましたけど、
これってこういうブログなのですか?
タイトルが2バイトとなってたので・・
2010.06.06 20:32 | URL | #- [edit]
鹿 says...""
すみません…
tag 表示 欲しい…Orz…
2010.06.07 05:20 | URL | #- [edit]
べる@SiDOOH says..."お返事遅くなった上、駄文長文コメですいません"
ご連絡遅くなり申し訳ありません。
えーとですね、ブログの記事にもチラっと書いたんですが、当方のブログを閲覧した瞬間、表示されてる文字が全て「0,1」もしくは「_,_(アンダーバー)」に表示が変換されます。
全ての文字が変換された数秒後に、「0,1」もしくは「_,_(アンダーバー)」に変換表示されていた文字が今度は1文字ずつ順番に逆変換-本来記載されていた文字に映画「MATRIX」のオープニング風に戻っていくという、Java scriptコードをテンプレHTMLに入れています。

この"映画「MATRIX」風にWebページを見せる方法"というscriptコードは、3~4年ほど前に地味に流行ったらしい(?)です。
ただこれ、自宅と仕事場のPCでは常に正常に変換表示されるのですが、出張滞在先のホテルに持ち込んでいる会社資産の現行VAIO ZではIEエラーで変換途中で表示が固まります。。。(´-ω-`;)ゞポリポリ
何が原因でIEエラーが出るのか自分にはちょっとわからないので、ひょっとするとMDさんのPCでも同様のエラーで表示が固まった可能性があります。スイマセン。

きっと、ホテルに持ち込んでいるVAIO Zと同様の状況に陥っている訪問者の方々が多数いらっしゃる様な気がしたりしてます・・・(;゚ロ゚)
ちなみに最近アフィリエイト広告の掲載を申し込んだメーカー3社から広告掲載をやんわりと断られたのですが、3社同時に断られたのが気になってメーカーに電話で確認を入れたところ、メーカー側のPCで当方のブログを確認してみたら横棒(アンダーバー)しか表示されなくて「なんというブログなんだこれ・・・」という事で、「内容も確認出来ない様なブログに広告は表示させないよ」という理由でお断りされたようです(笑


2010.06.07 14:01 | URL | #- [edit]
管理人 says...""
鹿さんへ。

タグ表示ってユーザータグのリンクを記事の下とかに入れたいという
意味ですか?
変数入れればいいだけなので、できないことはないですけど・・?
2010.06.07 20:08 | URL | #- [edit]
管理人 says...""
べる@SiDOOHさんへ。

なるほど~おもしろいスクリプトですね。
管理人も職場のwinで見たら、普通に見れましたよ。
ただ、自宅のmac+safariで見たら、010101...のまんま
固まって見れませんでした(笑)
メーカーの方は横棒しか見れなかったんじゃ、唖然とした
でしょうね・・。
管理人も最初見た時は、すごい前衛的なブログなのかも知れないと
思いました。(笑)
あ~笑った笑った

2010.06.07 20:27 | URL | #- [edit]
高遠 says...""
はじめまして
このデザインに一目ぼれして使わせていただいてます

困ったことがあるのですが
ツイッターのログを取得するようにしているのですが
追記にまたがる程度の長さのログの日は

ツイッター記事********
******************

*****************

▼ReadMore

▲Close
------------------------
という形で追記部分が開いていないのにCloseまで表示され
3カラムのデザインが崩れてしまいます

真ん中だけ表示されて、左右が真ん中の記事が表示された後から
表示される、IMG等の幅が合わないときに見られる
崩れ方をしてしまうのですが
解決する方法はないのでしょうか

一応、過去記事編集で保存しなおすとCloseが消えて表示自体も
元には戻るのですが…
2010.06.21 07:09 | URL | #- [edit]
管理人 says...""
高遠さんへ。

記事中にツイッターのログを表示するようにHTMLにスクリプトを
入れているということですか?
それとも記事を編集するときに、そういったソースを記事中に
入れているということですか?
それがどういったものなのかソースを見てみないことには
なんとも言いようがありません。
支障なければブログを拝見したいのですが・・
2010.06.21 12:18 | URL | #- [edit]
高遠 says...""
お返事ありがとうございます

いえ、FC2ブログの新しい機能です。

ツイッターの記事と同期できる仕組みになっています。
環境設定から設定できるやつです

文字の大きさを多少直すためにCSSのほうを弄らせてもらいましたが
HTML自体は弄ってはおりません

とりあえず当方のブログは
http://caymcc.blog134.fc2.com/

こちらです。
2010.06.21 18:17 | URL | #- [edit]
管理人 says...""
高遠さんへ。

これは大変失礼いたしました。
管理人まったくこのような機能が存在することに気が付きませんでした!
(すみません・・・)

ところで、質問に質問で返して申し訳ないのですが、
このツイッターの記事生成のオプションで追記の設定というのは
存在しているのでしょうか?
管理人がみたところ、追記にしたければ記事を直接編集するしか
ないような感じがしたのですが・・・。
長くなる場合は自動で追記にできるのですか?

それからソースを見たところ、どうやら定義リストとして
出力されるみたいなので、レイアウトが崩れるのは
タグがうまく閉じれてないからだと思います・・・・。

本文と追記にわけて出力した場合、それぞれが<dl></dl>で全体がくくられて
いなければならないところを、どちらかがうまくくくられていないので
レイアウトが崩れような気がします。
その場合は、直接記事を編集するしかないと思います。






2010.06.22 11:37 | URL | #- [edit]
高遠 says...""
お返事ありがとうございます

css内に.twitter~という定義が含まれていたのでてっきりその機能面も
フォローされているのかと思っておりました。
申し訳ないです

追記はある程度ツイッターのログが多いと自動的に振り分けられるようです
2,3回しか呟かないときは追記にならないみたいなので

でも現状解決方法がないということになりますか…
今は余裕もあるのでレイアウトの崩れも見直せているのですが
忙しくなるとその余裕もなくなってしまうので崩れたままのレイアウトを
読者さんに見せ続けてしまうことになるんですよね…

日記代わりのツイッターなのでツイッター記事を掲載自体をやめるわけにもいかないので
2010.06.22 14:28 | URL | #- [edit]
管理人 says...""
高遠さんへ。

管理人のほうでためしに長いツイートを書いて
ためしてみた所、自動で追記になり、レイアウトの崩れ等が
見られなかったため、なぜレイアウトが崩れるのかその状況が再現
できない状態です。

管理人がテストしてうまくいったソースを見ると、やはり本文と
追記でそれぞれ、自動的に定義リストのタグが<dl></dl>と挿入されており、
タグがうまく閉じられているためレイアウトの崩れが起こらないのだと
思います。
ちなみに高遠さんのブログのソースを見ると、タグが<dl></dl>で
閉じられていません。
同じ自動追記にしてどうしてタグが閉じたり閉じられなかったりする場合があるのか、
そこのところが良くわかりません。
文章の長さの程度によって変わってしまうのか、fc2側の設定の問題なのか、
パソコンの環境の問題なのか、
もっとよく調べてみないと今のところ解決の方法が見つからないといった
状況です。

ちなみに、追記をjavascriptで開閉するようにしているのが
影響しているのかと思い、通常の追記のリンクに
戻したらどうかとも思いましたが、現時点で、追記のjavascript
が邪魔している可能性は低いのではないかと思います。

うまい解決の方法が見つからず申し訳ありません。
今後もこの件については精査していくつもりですので、
何かわかりしだい、ブログで報告させていただきます。



2010.06.22 20:58 | URL | #- [edit]
R says..."ありがとうございました"
Rです。
大変失礼しました。
時間かかりましたができました。
申し訳ありませんm(_ _)m
2010.07.04 18:12 | URL | #- [edit]
燈籠斎 says..."タイトル"
テンプレートをお借りさせて頂きました。

サイトに掲載されている参考画像を見ると、しっかり3カラムになっているのですが、自分のブログにこのテンプレートを適用するとなぜか2カラム(左側がガラ空きなだけの3カラム?)になってしまっています。

直す方法がありましたら教えてくださりませんでしょうか?
長文失礼しました。
2010.07.19 12:51 | URL | #- [edit]
管理人 says..."燈籠斎さんへ"
こんにちは。
左のサイドバーはプラグイン3、右のサイドバーはプラグイン1・2が入っていますので、
おそらく左側がガラ空きなのはプラグイン3に項目が入っていないからだと思います。
管理画面でどれでもお好きな項目をプラグイン3に移動していただけば、
左側のサイドバーにも項目が表示されると思います。
2010.07.19 14:11 | URL | #i4E9Nobc [edit]
燈籠斎 says..."タイトル"
素早い回答ありがとうございます!

度々申し訳ありませんが、この画像(http://dl5.getuploader.com/g/4c4437e7-4e58-4457-b03a-2eb746246448/4%7Ctourousai/7/2010y07m19d_202706593.jpg)の通り、本来一番下にあるべき物が飛び出していて、右側も余分なスペースが出来てしまっています。

解決策がありましたらお教えください。
何度も失礼します。
2010.07.19 20:34 | URL | #- [edit]
管理人 says..."燈籠斎さんへ"
こんにちは。
リンク先の画像は登録しないと見れないみたいなので、
見ませんでした。すみません。
レイアウトのくずれは大体どこか余計なところにタグが
入っているか、入っていないかだと思います。
記事中に入っているのかも知れませんし、
プラグインのHTMLが間違っている可能性もあります。
プラグインをはずしてみたら、正常に表示される場合は、
プラグインに原因があったりします。
一度お試しになってはいかがでしょうか。


2010.07.20 15:56 | URL | #i4E9Nobc [edit]
管理人 says..."燈籠斎さんへ"
さきほど訪問者のリンクからブログを拝見しましたが、
トップの写真が大きすぎるためにレイアウトが
崩れているような気がします。

上の記事で画像の変更について記述しているので
読んでみてください。
写真の大きさは縦の長さは自由ですが、横は720pxです。
これ以上大きくするとレイアウトが崩れる原因になるかも
しれません。
試してみてください。
2010.07.20 16:03 | URL | #i4E9Nobc [edit]
燈籠斎 says..."タイトル"
分かりやすい回答ありがとうございます。
わざわざ面倒な作業をやらせてしまって申し訳ございませんm(__)m
2010.07.21 15:45 | URL | #- [edit]
すずまどか says...""

初めまして!こちらのテンプレートがとってもよかったので
拝借させてもらったものですが、
oldnewsのトップ画像はどこで変えたらよいのですか?
教えていたたければ嬉しいです…w

とってもよかったので
2011.03.20 11:14 | URL | #- [edit]
管理人 says..."すずまどかさんへ"
こんにちは。

上の記事を読んでいただければたぶんわかると思います・・。
2011.03.28 13:27 | URL | #i4E9Nobc [edit]
uma吉 says..."質問です!"
初めまして!!
素敵なテンプレートをたくさん配信くださってありがとうございます。
デザインがとっても気に入って、oldnews テンプレートを使わせてもらってます!!

一つ不具合があってお聞きします。

プラグインのフリーエリアにアマゾンのウィジェットを追加して、
プラグインカテゴリに表示させると、なぜか、上部の4枚の画像部分がまるごと消えてしまいます。
(表示すると画像が消えてしまうので、今は非表示にしています。)

あと、マイショップに登録している商品も一番目の商品しか表示されません。
(左の競馬関連書籍の部分)

同じやり方で、楽天のウィジェットを貼っていますが、
こちらは何も影響なく上部の画像もきちんと表示されます。

Amazonのアフィリエイト関連をサイドバーにいろいろ表示したいのですが、
どうしたらよいでしょうか。

お忙しい中、申し訳ございませんが、ご回答のほど、よろしくお願いします!!

私のサイトはこちらです。
http://nankansp.blog.fc2.com/

2011.08.08 19:14 | URL | #- [edit]
管理人 says..."uma吉さんへ"
こんにちは。

プラグインで不具合が出るとのことですが、
このような場合はほとんどテンプレートには関係なく、
プラグインとサーバーの関係の不具合だったりします。
アマゾンのウィジェットで不具合が出るなら、アマゾンのサーバーの
問題だったりします。
一度FC2の方へ問い合わせてみてはいかがでしょうか?
2011.08.09 07:42 | URL | #i4E9Nobc [edit]
uma吉 says..."ありがとうございます。"
ご回答ありがとうございました!!
FC2の方へ問い合わせしてみたいと思います!!
ありがとうございました!
2011.08.09 19:27 | URL | #- [edit]

Leave a reply






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

Trackbacks

trackbackURL:https://mysticdiary.blog.fc2.com/tb.php/165-e38f02e6
← ジョーって紀ちゃん好きだったんだ!! → なんか不思議・・?