ちわぐるず



クロスフェード

 ブログテクニック     10
ブログテクニックライン1200x60

右メニューに全メンバー画像をふんわり(クロスフェード)表示 簡単です!!

ちわぐるずこの世部の11わんず
エンブレム以降年功順に表示します

毛がボーボーで見苦しいなどと言ってはいけません
本当のことは言わないのが大人と言うものです


ちわぐるずあの世部の5わんず
天国から友情出演

死んでもなお、ネタにされる
そうは言わんと協力してや


HTMLを編集します

  • 管理画面から「プラグインの設定」に入ります。
  • フリーエリアなど、表示させたいプラグインを選んで下記のプラグインHTMLを貼り付けます。

  • javascriptの読み込みにjQueryを使用しています。あまり理解できていませんが、対象と指示を記していますのでそのまま貼り付けて問題ないと思います。


【プラグインHTML】
<!--▼クロスフェードscript▼-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
var $setElm = $('.prof'),
fadeSpeed = 1500,
switchDelay = 5000;

$setElm.each(function(){
var targetObj = $(this);
var findUl = targetObj.find('ul');
var findLi = targetObj.find('li');
var findLiFirst = targetObj.find('li:first');

findLi.css({display:'block',opacity:'0',zIndex:'99'});
findLiFirst.css({zIndex:'100'}).stop().animate({opacity:'1'},fadeSpeed);

setInterval(function(){
findUl.find('li:first-child').animate({opacity:'0'},fadeSpeed).next('li').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).end().appendTo(findUl).css({zIndex:'99'});
},switchDelay);
});
});
</script>
<!--▲クロスフェードscript▲-->

<!--▼クロスフェードscript▼-->
<div class="prof">
<ul>
<li><img src="画像URL" width="画像幅" height="画像高さ" /></li>
<li><img src="画像URL" width="画像幅" height="画像高さ" /></li>
<li><img src="画像URL" width="画像幅" height="画像高さ" /></li>
</ul>
</div><!--/.prof-->
<!--▲クロスフェードscript▲-->

  • fadeSpeedは次画像への変移時間で、switchDelayは変移のタイミングです。いろいろ変えてみてイケてると思った数値に変えてみてください。

  • サンプルのプラグインHTMLコードは画像3枚を表示すると仮定したコードです。表示画像数の増減は1画像ごとに
    <li>
    <img src="画像URL" width="画像幅" height="画像高さ
    " />
    </li>

    で調整します。追加すれば増え、削除すれば減ります。(当たり前ですね)

  • 画像URLとは
    https://blog-imgs-**.fc2.com/*/*/*/***/***.jpg
    の様に、画像をアップロードした際に発行されるアドレスです。

  • 画像幅、高さとは
    width="180" height="240"
    の様に、表示されているものです。縦横の比率を保って指定しないと昔の映画のようにひょろ長になったり、びよ~んと幅広になってしまいます。アップロードする画像の比率を確認しましょう(プラグインに表示するのであればテンプレートのプラグイン幅に収まるようにしてください)。コンパクトカメラなら4:3、一眼レフなら3:2というのが一般的のようです。設定の仕方が解らず、妙に痩せているように見えたり、太っているように見えたりしているブログ、見たことありませんか?縦横比(アスペクト)を正しく設定するだけで直ります。以下は失敗例です。



正しい縦横比3:4

width="180"
height="240"

このブログで使用しているサイズです



間違えると現実を映してみたり
width="150"
height="50"



理想をぶつけてみたり
width="50"
height="150"


ポッチャリとなってしまったご自身の画像で細く見せようとするのもまた一興かと思いますのでぜひぜひお試しを。


CSSを編集します

  • 管理画面から「テンプレートの設定」に入ります。
  • 以下のコードをCSS内の任意の場所に貼り付けます。


【テンプレートCSS】

/*-----------------------------------------------------------------
jQuely(.prof)
-----------------------------------------------------------------*/

.prof {
margin: 0 auto;
width: 画像幅px;
height: 画像高さpx;
text-align: left;
overflow: hidden;
}

.prof ul {
width: 画像幅px;
height: 画像高さpx;
text-align: left;
overflow: hidden;
position: relative;
}

.prof ul li {
top: 0;
left: 0;
width: 画像幅px;
height: 画像高さpx;
display: none;
position: absolute;
}

画像の幅と高さの設定はもうお解かりですね?

目ざとい方は何かお気付きと思います。
そう、「.prof」というIDです。
ちわぐるずブログのヘッダーも同じようにjQueryを使ってのクロスフェードを採用しています。どういう訳か、同じサイト内で2つ以上のscriptを実行しようとすると、互いに干渉するようなのです。これにはほとほと悩みましたが、ヘッダー部分とサイドメニュー部分をID化して強制的に分離してしまおうと考え付いたのでした。これが正しい対策とは考えにくいのですが、目の前の不具合は何とか回避しています。何のこっちゃ… でしょうが、おしゃれにしようとすると嫉妬する輩が現れるということでしょうか。怖い怖い…。

FC2ブロガーの先輩諸氏が惜しげもなくブログ上で公開された技術を参考にさせていただき、日々勉強させていただいていますが、如何せんパソコンに造詣も知識もなく、諸氏方の専門用語についてなどいけませんでした。自分なりに解りやすく書いたつもりですが、それでも舌足らずだと思います。
前述の通り、興味のある方は本当にご遠慮なくお知らせください。ブロともさんのブログが進化していくのを見るのもまたブロガーの楽しみだと思うのです。
もちろん、「今のままで結構!」と仰る方のご気分を害する訳ではありません。
いつも通りの駄ログと一蹴、一笑してください。
HTMLとCSSを自由にカスタマイズできるFC2ブログ向けの記事です。
残念ながら、Yahoo!やAmebaブログでは煮ても焼いても使えない技ですのでご了承ください。



ブログテクニックフッター


結構簡単です

ブログを始めた2009年まではパソコンなどほとんど使えなく、インターネット閲覧の道具だと思っていた。しかし何を血迷ったのか、酔った勢いで右も左も解らぬ様な世界に足を踏み入れ、こともあろうかブログを開設してしまった。これで閲覧される側に立ってしまった。やってしまったからにはケジメや落とし前はつけねばならず、もうじっとなどしてはおれなかった。やるからにはとことんやってやろう。一旦覚醒したものは引っ込みがつかない。しかし、開設したブログサービスにはカスタマイズなどと言う言葉はどこにも見当たらず、融通の利かないブログにやきもきしながら試行錯誤していた頃を思い出して懐かしくなった。そんな日々もそうは長くも続かず、このFC2に新しいブログの活路を見出してまもなく4年になる。WEBのウの字も理解しない人間がイチからテンプレートを作って始めた現在のちわぐるず。まだまだ発展の途上ではあるがその道々が楽しくもある。人間、変わるものだな。
よく解らない英数の羅列で取っ付きにくい印象ですが、コピペでちゃちゃっと貼り付けるだけにしていますので、ぜひぜひお試しください。以下に詳細を記しましたが、「何やねんコレ、よぉ解れへんわ」言う方はご遠慮なくお問い合わせください。はるパパの出来る範囲でお手伝いさせていただきます。可愛い愛犬をおしゃれに表示しませんか?
HTMLとCSSをちょこっといじりますが、せっかくカスタマイズ自由度では他の追随を許さないFC2でブログをやっている以上、触らないなんてもったいないと思います。
できるまでサポートしますから、ぜひぜひ。


みなさまに愛されるブログを目指して頑張ります


web拍手 by FC2

  • 現在、ブログランキング関係の応援はご遠慮させていただいております。(2021/08/08)
  • ブログ内検索とカテゴリメニューを最上部のメニュー内に移動しました。(2020/10/01)
  • コメント欄に画像が表示できるようになりました。詳細はコメント入力フォームのご案内をご覧ください。(2020/07/05)
Twitterではときどき言いたいことをつぶやいています。“フォロー” “いいね!”をどうぞ!
Instagramではいい写真が撮れたときなどに投稿しています。こちらのフォローもどうぞ!
Facebookでは現在リンクをしておりません。
ごあんないちわぐるずメンバー紹介もご覧ください。 お問い合わせ・ご意見などはメールフォームからお気軽にどうぞ。

ヲタクハトックニチワグリアン
BLOG'N DOGS 次回の活躍をお楽しみに!
お相手はあなたのはるパパでした

comment(s) 10

There are no comments yet.
一番初めのコメントを残しませんか?

nonnon

№3428

No title

あ、あかん・・・。

め、めまいがする。。。v-12i-6

絵文字いれるのが、精一杯。なんせ、わかりゃん。頭わるいきに・・・。

何十年、パソコン使って仕事してるけど、ネットはだめ。。ブログ、わからん。

できるのは、文字と数字だけ~~。ぱらぴらぴん。

もっと基本勉強しないと、このページ、理解できひんわ~~。ごめんちゃい。

  • 2016/08/03 (Wed) 10:47

ライナ母

№3429

No title

こんにちは♪
すごいです!!
わたし何度かヘッダー(←かな?)を
変えたくてトライしたんですが
ムリでした!
そうそう、あの英数の羅列、、
これで「う・・・」ってなります(>_<)

  • 2016/08/03 (Wed) 14:07

acco

№3430

No title

はるパパさん、あたしにはサッパリわからん、わけワカメです・・・
ヘッダーの写真を変えるくらいは出来るけど、数字とアルファベットを見ていたら、
自然と目が閉じてしまいますよ( ̄∇ ̄;)
自己紹介画像も、どうやってしたのか今ではもうわからないです・・・
だから万が一家族が増えた場合、追加の写真は入れることが出来ないでしょうねぇ(>_<)

はるパパさんが最初は「ウ」の字もだなんて、信じられませんよぉー☆
テ、テンプレートも1からだったんですね(゚∀゚屮)屮

自分が全くわからない分野だから、尊敬します!!

  • 2016/08/03 (Wed) 17:31

三日月@久遠

№3432

No title

駄目、理解しようとすると眠くなる~
なにがなんだかさっぱり(´ヘ`;) う~ん

FC2に引っ越すような事になったら
1から教えてもらうから宜しくね~(≧▽≦)

  • 2016/08/04 (Thu) 12:07

イベリコ

№3441

No title

もし、万が一状況が整ってワンをお迎えすることになったら
ブログは凝るようになるやろうと思う・・・
そうなったら本気で調べてやるかもなぁ?と
その時は「師匠!」ってやたら連発して聞きまくると思います

今はもうマジで更新するにも日々が単調すぎて読んでくれる人に申し訳ない
ワンが来る前でも、もっと楽しんでもらえる内容を書けたらなって思います

それにして、細身になる手段がこんな風にあったなんて!(笑)

  • 2016/08/07 (Sun) 18:40

はるパパ@ちわぐるず

№3469

nonnonさん №3428

こんばん▼o・ェ・o▼ワン!v-286

リコメ遅れてゴメンでし (◞‸ლ)

何でめまいすんねんなぁ。
って、はるパパもよく解ってないし…。
仕事でパソコン使ってると違うソフトなんか見たらまるで別物って感じするでしょ?
はるパパもエクセルとか苦手。

で、「ぱらぴらぴん」ってなぁに?

nonnonさん、いつもおおきにでし (⋈◍>◡<◍)。✧♡

  • 2016/08/14 (Sun) 23:31

はるパパ@ちわぐるず

№3470

ライナ母さん №3429

こんばん▼o・ェ・o▼ワン!v-286

お返事遅くなってすみませんです (๑´ㅂ`๑)

ヘッダーを変えるとずいぶんと印象が変わりますからね。
頑張って再チャレンジしてみてはいかがですか?
はるパパの出来ることならお手伝いしますよ。
確かに英数の羅列は拒否反応が出ますね。

ライナ母さん、いつもありがとう (๑◔‿◔๑)

  • 2016/08/14 (Sun) 23:34

はるパパ@ちわぐるず

№3471

accoさん №3430

こんばん▼o・ェ・o▼ワン!v-286

お返事遅れてしまいすみません (*>_<*)ノ

わけワカメでしたか?
ヘッダー変えるスキルがあればこのぐらい簡単ですよ。
コピペでちゃっとできます。大家族ならではの素敵なスライドショーを作ってくださいな。
と言うはるパパも昔できたことがすっかり忘れてしまっていたりしますから、偉そうなことは言えませんけどね。

ブログを始めてからいろいろ勉強しました。ちょっとでもオシャレなブログにしようと必死ですわ。
根が凝り性なのでハマりやすいんです。
テンプレートはさすがに難しかったです。今でもよく解っていませんから。

はるパパなんか尊敬する前にもっと他にいますから~。

accoさん、いつもありがとう (*´˘`*)♪

  • 2016/08/14 (Sun) 23:40

はるパパ@ちわぐるず

№3472

三日月@久遠さん №3432

こんばん▼o・ェ・o▼ワン!v-286

リコメ遅れてゴメンねゴメンね~ (◞‸◟;)

確かに眠くなるな。
コレが何でブログになるねん? やわ。

FC2?
止めとき。Yahoo!にどっぷり浸かってなさいよ。居心地いいんでしょ?

久遠ママちゃん、いつもありがとう ₍₍ ( ๑॔˃̶◡ ˂̶๑॓)◞♡

  • 2016/08/14 (Sun) 23:44

はるパパ@ちわぐるず

№3473

イベリコさん №3441

こんばん▼o・ェ・o▼ワン!v-286

リコメが遅れて悪うございました (◞‸ლ)

飼いたくてうずうずやな、たぶん。
そのときは「弟子!」ってやたら連発して教えまくると思います(爆)

はるパパも犬飼いじゃなかったら絶対にブログなんかやってないと思う。
まず、何も書くことないし、誰がこんな男の日記見たいねん? やし。
飼っていても書けんときは書けんけど。

そうそう、ダイエットシミュレーション的にやってみたら?
あるいは詐欺写メ風に。

イベ姫、いつもありがとね (*˘︶˘*).。.:*♡ 

  • 2016/08/14 (Sun) 23:49

comment form



コメントを投稿される方へのご案内

  • コメントを投稿された際にはプライバシーポリシーをご了承いただいたものと判断をします。このブログのご案内でご確認ください。
  • 記事本文を参照としないコメントやご自身の近況報告、コピーペーストのコメントは削除する場合があります。
  • ちわぐるずではコメント承認制を採らせていただいております。いただいたコメントは承認後に公開されます。不適切と判断したコメントは削除します。
  • 投稿後はパスワードを設定されていれば編集できますが、削除はできません。
  • 非公開コメントは一度投稿されると編集,削除,確認はできません。
  • コメント欄に画像を表示できるようになりました。画像URLをそのまま本文欄にお書きください。原寸での表示となりますのでサイズにご注意ください。
  • コメント欄用の文字修飾ツールは設置しておりません。HTML5準拠によりコメント欄でのHTML利用(文字色変更,下線,打線,太字など)はお控えください。はるパパからのお返事は赤い文字を使用しますが、これはCSSで色を指定しています。