Mr.ポンバシのブログ改造術part27-1

最近更新した別の記事

オワタ＼(^O^)/

こんばんは Mr.ポンバシです(-^□^-)

昨日今日とバイト以外はjavascriptの勉強してかやってないです（；´∀｀）


今日も5時半までずっとやってましたwww


だって面白いんだから仕方がない｀・ω・´


2箇所ほど改造しましたよ～≧∇≦


一つはマウスオーバー時のフェードインです！


この以前紹介したMr.ポンバシのブログ改造術part26-1も似たようなものですが、今回は徐々に透明度が変わりますので前よりも良い感じになりました（o＾-'）b


記事の中の画像は訳あってフェードインするようにはしていませんので、メッセージボードやサイドバーの画像で試してみてください♪


この改造方法も今度載せますのでお楽しみに(*´ω｀*)





そして2つ目の改造は、自作した「拡大画像プラグイン」の導入です！


PCの方は下の画像をクリックしてみてください。

まあこんな感じで拡大された画像が表示されるようにしました。


ちなみにこの「拡大画像プラグイン」を作成するのに10時間くらいかかりました・・・・・・orz


まだまだjavascriptやりはじめたばかりですので、かなり苦労しましたよ……


でも今回のこの改造のおかげでだいぶわかってきましたので、今後の改造はスムーズにいく……と願いたいですwww


このプラグインもまだまだ完成形とはいえず、縦長の画像とかは画面からはみ出てしまいますし、表示された画像をクリックしたら次の画像に移れるようにしようと頑張ったんですが、結局できませんでした(つд・)


とりあえずこのプラグインの改造はここまでにしようと思いますが、時間ができましたらまた改良していくつもりです。

さて、今回紹介する改造術はjavascriptを使ったものです。


よく記事の途中でネタバレしたいときに読みたい人だけ読めて、読みたくない人が読めないようにすることができれば便利ですよね


下のボタンを押してみてください

ニーソマジ最高

絶対領域は神

とまあこんな感じですｗｗｗ


ということで今回は"記事の表示/非表示をボタンによって切り替える方法"をお教えします。


もうすでに外部ファイル化しておきましたので、すぐに改造できます。


まずはフリープラグインに

<script type="text/javascript" src="http://korogaringu.cocolog-nifty.com/kaizou/kiji.js"></script
>

と追加し、隠したい記事の文章や画像を

<div id="kiji">
<li>隠したい記事1</li>
<li>隠したい記事2</li>
・
・
・
<li>隠したい記事n</li>
</div>

このように、記事の最初と最後に「<div id="kiji"></div>」を記述しておき、隠したい箇所をそれぞれ「<li></li>」で囲えばおｋです。


隠したい箇所はいくらでも増やすことが可能です。


「<div id="kiji"><li></li></div>」は辞書登録でもしとけばいつでも使えて便利ですよ♪


では今日はこれで(´∀｀*)ノｼ

オワタ＼(^O^)/

最近更新した別の記事

Mr.ポンバシのブログ改造術part26-2

こんばんは Mr.ポンバシです(-^□^-)

↑ちなみに最近うｐしてる画像は全部桑島黎音さんの画像です。


ノートPCがお亡くなりになられました……


起動ボタンをポチッ

と押したら、ちょっとしてからWindowsのロゴマークが出てくると思うんですが、その時にいきなり

ピー!!!!

と大音量で流れて、僕は

こんな状態のまま、何事かと思い画像を見てみると


フリーズしてる………だと……？

フリーズしながら大音量をたててるので、やむを得ず強制終了ボタンを再びポチッとな

そして再起動してみると、「自動復旧します」なんていう表示が！


少し待ってると「自動復旧が完了しました」と出て、


ヽ(　　´　　∇　　｀　　)ノ ノ ﾜｰｲ


と思ってまた再起動したら……


またあの音が……


期待させんな～!!!!!!

というわけでノートPCがお亡くなりになりましたので、攻略中の「果てしなく青い、この空の下で」は一時中断です……orz


これを機に積んでるほかのゲームを崩すのもありかもしれませんね(-ω-)ﾆﾔﾘ

この前も書きましたが、僕の夏休みはこれから9月末までで、学校は10月からです。


まあそれまでに、院試結果発表やら、前期成績発表やら、おだやかでいられないイベントがあります（;´∀｀）


バイトのほうも、


「研究室が忙しいからあまり出勤を出せない」


と嘘を言って、週2にしてもらいました(-ω-)ﾆﾔﾘ


というわけで、結構暇になったわけですが、今進めてるJavascriptの勉強とかを生かして、ホームページを作ってみようと思います！


ブログ改造術のことをまとめたものにしようとは思いますが、ergレビューなどは書こうか書かまいか迷ってますwww


でもデザインはもちろん痛くしますよwww


あっでもあまり今みたいにゴチャゴチャしないようにはするつもりですが(;´∀｀)


まあまだどうなるかは分かりませんが、何かリクエストみたいなものがあれば言ってみてくださいwww


実現できる可能性は低いですが（おいwww

では(´∀｀*)ノｼ

Mr.ポンバシのブログ改造術part26-2

最近更新した別の記事

SORAHANE新作!!! 「さくら、咲きました。」

こんばんは Mr.ポンバシです(-^□^-)

本日は面接に行ってまいりました！｀・ω・´


面接というか口頭試問(?)ってやつですwww


うわさではこの面接は

昨日のテストの成績のいいやつはすぐに終わって、悪かったやつは長い

なんていう噂があったので、

どうかすぐに終わりますように！（>Д<;）

とずっと願って大学に向かいましたwww


俺は大学まで片道1.5h、往復3h、面接までの待ち時間が1hで、合計4hかかることになりました。


待ち時間の間は友達と、

「面接官がM先生とかH先生だったら最悪だなwww もしそうだったら怖すぎて喋れないよ(；´∀｀)」

とか適当に話しながら待ってたら、とうとう自分の番が回ってきました！


面接室に入るときとかは心臓がばくばくなってました(；゜Д゜)


そして面接室に入って、「失礼します！」といって顔をあげてみると……


そこにはM先生、H先生を含めた権力の高い教授群4人がこっちを向いていました(´ﾟдﾟ｀)


もうちびりそうになりましたよ……


まさか冗談で言ってたことが本当になるなんて…orz


ということで、ビクビクして4人の鬼教授たちの視線をあびながら面接に臨んだわけですが……





20秒で終わってもうた
＼(＾O＾)/＼(＾O＾)/


いやなんか噂はデマだったみたいで、ほとんどの人が10秒から20秒で終わったみたいですwww


いや～あんな状態で長時間面接なんて耐えられないから早く終わってよかった～HAHAHA


と思ってたんですが、よくよく考えてみたら、


たかが20秒のために4時間無駄になったのかよ！？Σ(･ω･ﾉ)ﾉ！！


ってかあの面接はなんだよ！


あんなのアンケートで済むないようじゃね～か！


ということで全く意味がないと思われる面接のせいで、4hつぶれてしまったわけですが、



これで正真正銘解放されたぜ！≧∇≦


ということで今日は帰ってからは久々にメルルやったりパワプロやったりスーパーストリートファイター4 アーケードエディション(SSF4AE)とかをやってましたwww


ergについては、以前やりかけのままerg禁止期間に入り、そのままになってた「果てしなく青い、この空の下で。」の続きを少し進めた程度です(；´∀｀)

なんかやりかけのゲームを久々にやるのは、なんか気が進まないですヽ(;・ー・)ノ


でも残り2ルートなので、水曜と木曜の間に終わらせたいところです。

解放されたので、これで心おきなくjavascriptの勉強をすることができます。


近いうちにjavascriptを用いたちょっとした改造術でも載せれたらいいな～と思ってます。


では、改造術の説明のほうに移ります。


前回の改造術では、"マウスオーバー時に画像を白く薄める方法"を紹介しましたが、今回のその逆の


"マウスアウト時に画像を薄める方法"です。


「画像の上にマウスが乗っているときに画像が薄まって、画像から離れるともとに戻る」というのが前回紹介した改造術ですが、今回は「画像の上にマウスが乗っていないときに画像が薄まって、画像の上にマウスが乗るともとに戻る」という状態です。


次の記述をCSSの最後に追記してください。

img{
opacity:0.6;
filter: alpha(opacity=60);
}

img:hover{
opacity:1.0;
filter: alpha(opacity=100);
}

赤字の値を調節することで、画像の濃さを調節することができます。


では今回はこれで(。｀・ω・。)ﾉｼ