スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
web拍手 by FC2

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

最近更新した別の記事

8月ergセールスランキング Getchu

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

Mr.ポンバシのブログ


「失われた未来を求めて」の攻略状況ですが……

Mr.ポンバシのブログ


現在、3人目の凪沙先輩を攻略中です!


どうやら攻略順は、佳織⇒愛理⇒凪沙先輩⇒ゆいで固定みたいですね。


一つのルートを攻略していくたびに謎が解き明かされていく形式で、伏線も多く張られているので攻略していくのが面白いです≧∇≦


攻略前は普通の学園ラブコメ的なものなのかと思ってましたが、いい意味で期待を裏切ってくれてよかったです。


このままでしたら、僕のランキングのシナリオ点に77点~79点くらいはつけることができそうです(*´ω`*)


明日は時間が空いてますので、一気にクリアしようと思います!ヾ(● ・`ω・ ) キリ

Mr.ポンバシのブログ


さて、ではブログ改造術の紹介に移りたいと思います!


以前紹介したブログ改造術に、「コメント欄にプロフ画を表示させる方法」というものがありましたが、これはアメーバのメンテナンスによって表示できなくなりました。


なので、違う手段を用いてプロフ画を表示する方法を考えましたので紹介します。

Mr.ポンバシのブログ



以前紹介したプロフ画表示の記述を削除していない方は、フリープラグインの下記の記述を消してください。



  • <script type="text/javascript"src="http://www.google.com/jsapi"></script><script>google.load("jquery
    ", "1.4.4");</script>

    <script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/87/48/10010269430.css
    " defer="defer"></script>

    <script language="javascript"><!--
    document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'
    .comment_body .proimg{
    float:right;/*①画像の表示位置rightで右 leftで左*/
    margin:5px; /*②周りの余白*/

    }
    #comment_module .comment_body {overflow:hidden;}
    #comment_module{
    border:0px solid #000;
    padding:5px;/*③周りの余白*/
    }
    div.proimg img{
    width:120px !important;
    height:120px !important;/*画像サイズの調整*/
    }
    #ameblogers{display:none; !important}
    '+"\n"+'-->'+"\n"+'</style>');
    // --></script>



  • 記述を消すことはできましたでしょうか?


    消せた方は、次の記述をフリープラグインに追記してください。




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

    .profga{
    float:right;
    }


    赤字の部分には「left」もしくは「right」をいれてください。


    これによって、コメント欄の右側に表示されるか左側に表示されるかが決まります。


    このプラグインを用いる上で注意していただきたいのは、コメント数が多い方になりますと、読み込みが遅くなる恐れがあるということと、プロフ画がコメント欄の外にはみ出てしまうことがあるということ、新しいデザインを用いている方のプロフ画は表示されないことです。


    まだ簡易的に作っただけのものですので、今後改善していき、随時みなさんにお知らせしていこうと思いますので、どうかお待ちいただけると助かります。


    では今日はこれで(´∀`*)ノシ
    スポンサーサイト
    web拍手 by FC2

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

    最近更新した別の記事

    オワタ\(^O^)/

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

    Mr.ポンバシのブログ


    昨日今日とバイト以外はjavascriptの勉強してかやってないです(;´∀`)


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


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


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


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


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


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


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





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


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

    Mr.ポンバシのブログ


    Mr.ポンバシのブログ


    Mr.ポンバシのブログ


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


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


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


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


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


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

    Mr.ポンバシのブログ


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


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


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

  • ニーソマジ最高

    絶対領域は神


  • とまあこんな感じですwww


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


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


    まずはフリープラグイン



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

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



    <li>隠したい記事n</li>
    </div>


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


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


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


    では今日はこれで(´∀`*)ノシ
    web拍手 by FC2

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


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

    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禁止期間に入り、そのままになってた「果てしなく青い、この空の下で。」の続きを少し進めた程度です(;´∀`)

    Mr.ポンバシのブログ


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


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

    Mr.ポンバシのブログ


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


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


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


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


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


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


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


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

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


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


    では今回はこれで(。`・ω・。)ノシ
    web拍手 by FC2

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

    最近更新した別の記事

    テストオワタ\(^O^)/

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

    Mr.ポンバシのブログ


    先日のテストの結果は……



    見事に崩壊いたしました\(^O^)/



    まあ自業自得ですね(;´∀`)


    最悪後期にまた授業を1つ2つ取ればいいだけなので、今は目先の院試勉強に専念したいと思います。


    Mr.ポンバシのブログ


    そいえばいつの間にか7月の新作が発売していたんですね(;´∀`)


    勉強ばっかの俺には全く関係がありませんが、やはりすこし気になってしまいますwww


    もうプレイを終えてる人もちょこちょこ出始めているみたいで、少し評判を調べてみましたところ……


    以前僕のブログで、いろとりどりのセカイの体験版のレビューを書きました。

    Mr.ポンバシのブログ


    こちらがその記事です

    その時は結構酷評したんですが、今のところ


    結構評判がいい模様!



    あれ?体験版の感じじゃ面白くなさそうだったんだけどな~(;´∀`)


    なかなか感動できるみたいですね( ^ω^)


    といっても今はまだまだ少数の人の意見ですので、もっと多くの方の意見を見るまでは信じられませんがヽ(;・ー・)ノ


    もしもっと多くの方が面白いというのであれば、自分も購入を検討してみようと思います(´∇`)


    もちろん院試後ですけどねwww


    Mr.ポンバシのブログ


    では久々に改造術の記事でも書こうと思います。


    本日の改造は


    "マウスオーバー時に画像を白く薄める方法"


    具体的にどうなるのかは、下の画像にマウスポインタを乗せてもらえればわかると思います。

    Mr.ポンバシのブログ


    このように画像の上にポインタが乗った時(マウスオーバー時)に、画像が白くなり、かつ少し透過されるようになります。


    やり方は下のやり方はとても簡単で、下の記述をCSSの一番最後に追記していただくだけです♪


    a:hover img{
    opacity:0.7;
    filter: alpha(opacity=70);
    }


    ※赤字のところで透過率を調整できます。


    では今日はこれで(。`・ω・。)ノシ
    web拍手 by FC2

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


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

    Mr.ポンバシのブログ


    今日は久々にブログ改造術の記事を書こうと思います。


    ここ最近記事の更新率が低下しているどころか、改造術の記事をまったく書いていませんでしたからね(;´∀`)


    ということで早速ですが内容のほうに移ろうと思います。


    今日紹介するのは、メッセージでリクエストを頂きました、


    "ページナンバーナビの改造方法"です!








    ページナンバーナビとは何かというと、トップページ

    Mr.ポンバシのブログ


    この部分と、各記事ページ

    Mr.ポンバシのブログ


    この赤く囲っているような部分のことを指します。







    これらを改造して、

    Mr.ポンバシのブログ


    Mr.ポンバシのブログ


    このように改造する方法を説明いたします。






    1. まず、大きさの同じ画像を用意します。


      大きさについては、横幅は100px以内にしておいたほうがいいと思います。(縦幅は特に制限はありません)



    2. 次の記述をCSSの一番最後に追記してください

      /*ページナンバーナビ*/
      .articlePaging,.topPaging{
      position:relative;
      margin:0px 10px 110px 10px;/*赤字の部分は画像の縦幅と同じ値*/
      width:560px;/*⑧*/
      text-align:center;
      }

      .topPaging a.firstPage{/*①*/
      position:absolute;
      top:0px;
      left:0px;
      background:url(画像のURL);
      background-position:top center;
      background-repeat:no-repeat;
      display:block;
      width:100px;/*画像の横*/
      height:90px;/*画像の縦*/
      text-indent:-9000px;
      }

      .articlePaging a.previousPage,.topPaging a.previousPage{/*②,⑤*/
      position:absolute;
      top:0px;
      left:100px;/*⑨*/
      background:url(画像のURL);
      background-position:top center;
      background-repeat:no-repeat;
      display:block;
      width:100px;/*画像の横*/
      height:95px;/*画像の縦*/
      text-indent:-9000px;
      }

      .articlePaging a.nextPage,.topPaging a.nextPage{/*③,⑦*/
      position:absolute;
      top:0px;
      right:100px;/*⑩*/
      background:url(画像のURL);
      background-position:top center;
      background-repeat:no-repeat;
      display:block;
      width:100px;/*画像の横*/
      height:104px;/*画像の縦*/
      text-indent:-9000px;
      }

      .topPaging a.lastPage{/*④*/
      position:absolute;
      top:0px;
      right:0px;
      background:url(画像のURL);
      background-position:top center;
      background-repeat:no-repeat;
      display:block;
      width:100px;/*画像の横*/
      height:112px;/*画像の縦*/
      text-indent:-9000px;
      }

      .articlePaging a{/*⑥*/
      position:absolute;
      top:0px;
      right:225px;/*⑪*/
      background:url(画像のURL);
      background-position:top center;
      background-repeat:no-repeat;
      display:block;
      width:100px;/*画像の横*/
      height:119px;/*画像の縦*/
      text-indent:-9000px;
      }


      各番号が何を表しているかは、下の画像を参考にしてください。

      Mr.ポンバシのブログ


      Mr.ポンバシのブログ


      Mr.ポンバシのブログ


      Mr.ポンバシのブログ



    以上で終わりです!


    画像に使っているのは記事上のページナンバーナビだけで、記事下にも同様のものがありますが、上記の記述を書き込むことにより、両方とも改造することが可能ですのでご安心ください。


    何か記述の誤り等がありましたら、コメントもしくはメッセージをください。


    Mr.ポンバシのブログ


    現在Rewriteの攻略も最後のルートの最中です!


    今日中にはすべてのルートの攻略が終わると思います!


    近いうちにレビューも書きますので楽しみにしておいてください(*´ω`*)


    レビューの前に簡単な感想を次の記事で書くつもりです( ^ω^)


    では(´∀`*)ノシ
    web拍手 by FC2
    プロフィール

    ポンバシ

    はじめまして!Mr.ポンバシです。
    呼び名は「ポンバシ」「ポンさん」などなどです ^ ^
    2次元をこよなく愛しており、エロゲ、ギャルゲ、アニメ、ラノベなんでも話を振ってください。
    コメントしてくれると天に昇る勢いで喜びますww


    アクセスランキング
    [ジャンルランキング]
    ゲーム
    7109位
    アクセスランキングを見る>>

    [サブジャンルランキング]
    PCゲーム
    1002位
    アクセスランキングを見る>>

    アクセスカウンター

    カテゴリ

    最新コメント

    全記事表示リンク

    全ての記事を表示する


    月別アーカイブ

    OHPバナー
    紅い瞳に映るセカイ 応援中!!

    「魔女こいにっき」応援中

    恋がさくころ桜どき

    すたじお緑茶『南十字星恋歌』応援中!

    検索フォーム
    RSSリンクの表示
    リンク
    ブロとも申請フォーム

    この人とブロともになる

    QRコード
    QR
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。