0
    「長すぎるブログの記事を折りたたもう!」
    と、 これまでがんばって jQueryを勉強していましたが...

    いざ、記事を折りたたむための jQueryを実行だっ!!

    と思った瞬間、目に入ったのがこれでした...


    1
    jQuery で記事を折り畳もう!ということで、
    やってみました

    !...実は今、見てはいけないものを見てしまいました
    でも、見ていないフリをして先に進みたいと思います

    ...

    ということで、
    まずは、折り畳みに使う jQuery を追加します(赤いとこ)
    <script type="text/javascript"> 
         $(function(){
              $("a[href^='http://']").attr("target","_blank");
              $(".open").click(function(){
                   $("#slideBox").slideToggle("slow");
              });
         });
    </script>
    *ひとつ前の記事の jQuery 記述部分に追加しています

    次に、CSS の部分を追加します(赤いとこ)
    /* divの色をグレーに変えてみます */
    .divColorGray{background:#eeeeee; padding:10px}
    /* divの折りたたみ */
    .open{
         background: #ffffff;
         color: #3399dd;
         cursor: pointer;
         width:100px;
         padding: 5px
         }
    #slideBox{
         display:none;
         }

    仕上げに、HTMLで<p>と<div>に
    折り畳みに使う命令を記述します(赤いとこ)
    <div> の部分は前回つくった CSSを使い、
    薄いグレーで表示するようにもしています(青いとこ)
    <p class="open">[ 記事の続き ]</p>
    <div id="slideBox" class="divColorGray">
    中身がでてきました<br>
    でてきたでしょ?<br>
    わかりやすく<div>の中はグレーで表示してます<br>
    色が必要なければ class="divColorGray"を消せばいいですよ<br>
    </div>
    <p>の中身をクリックすると、<div>が開くようになります
    class="open"と、id="slideBox"が連動するんでしょうね

    さてさて、うまく動いてくれるでしょうか?
    ↓↓この下の[記事の続き]ってとこをクリックします↓↓↓↓

    [ 記事の続き ]

    中身がでてきました
    でてきたでしょ?
    わかりやすく<div>の中はグレーで表示してます
    色が必要なければ class="divColorGray"を消せばいいですよ
    ↑↑この上に出てきますよ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑


    で、「見てはいけないもの」が何か?っていうと
    ...
    ...
    ...ブログを書くところに「記事の続き」ってのを書く場所がありました
    ...当たり前のハナシ?...なの?

    0

      このブログは、JUGEMを利用しています
      Tap Jockey のホームページを作るために、
      ロリポップのレンタルサーバーを使っていたので、
      無料のロリポブログ = JUGEMでブログ ってことになりました

      で、プログラムのことを書こうとすると、
      記事がなが〜くなっちゃって、
      複数の記事を表示するときに見にくいんですよね
      だから記事を折り畳みたいな...
      と思って、jQueryとやらを使おうと試みました

      あと、jQueryなんて使ってたら、
      なんかおしゃれなブログになりそうですし...(違う?)

      ということで、時間がかかると思いますが
      記事を折り畳めるように jQueryを勉強していきます


      そんなこんなで、jQueryってJUGEMでどうやって使うんだ?と調べた結果を報告

      JUGEMにログインしてからの
      [デザイン] > [HTML・CSS編集]から
      [HTML編集フォーム]のボックスの中に
      <script type="text/javascript" src="http://js.jugem.jp/jquery/1.3.2/jquery.min.js"></script>
      の一文を入れるといいようです
      ココですね(赤いとこ)

      <link rel="alternate" media="handheld" type="application/xhtml+xml" href="{mobile_url}" />
      <script type="text/javascript" src="./template/js/cookie.js"></script>
      <script type="text/javascript" src="http://js.jugem.jp/jquery/1.3.2/jquery.min.js"></script>

      ん〜でから、昨日はさらにその下に
      「外部リンクを別タブで開くようにする」ために、
      この5行を追加した次第です(青いとこ)

      <link rel="alternate" media="handheld" type="application/xhtml+xml" href="{mobile_url}" />
      <script type="text/javascript" src="./template/js/cookie.js"></script>
      <script type="text/javascript" src="http://js.jugem.jp/jquery/1.3.2/jquery.min.js"></script>

      <script type="text/javascript"> 
           $(function(){
                $("a[href^='http://']").attr("target","_blank");
           });
      </script>

      これはまぁおそらく、
      「http://」で始まるリンクは別のタブで表示しますよ〜
      ってことなのだと思います
      *Safari は、別ウィンドウで開きましたけど


      え?なにげに jQueryの説明のところが薄いグレーになってますね
      これ CSSっていうんですよ、エッヘン!...って、
      世間では当たり前かもしれませんが、
      初心者なので大目に見てください
      jQueryと一緒に勉強しなくちゃいけないようですし


      ということで、これは
      [デザイン] > [HTML・CSS編集]
      [CSS編集フォーム]の中の...え〜
      どこに書こうかな?
      まぁわかりにくいのでとりあえず一番下に

      /* divの色をグレーに変えてみます */
      .divColorGray{background:#eeeeee; padding:10px}

      と追加して、
      ブログを書くときに <HTMLモード>

      <div class="divColorGray">
      ここはdivの中身です<br>
      背景がグレーになりますよ<br>
      きっとね<br>
      </div>

      って書いてみたら...

      ここはdivの中身です
      背景がグレーになりますよ
      きっとね

      できました

      終わり

      ...

      はやく記事を折り畳まなきゃ...


      0
        外部リンクをタブで開く
        ということで Google を開いてみる

        >> Google

        ...タブじゃなくて別ウィンドウで開いた...
        Safari で確認したからかな?

        おぉ!Firefoxだとタブで開いた 

        jQuery というか JavaScript でさえ全く理解していないので
        少しずつでも、いい感じのブログにするために勉強していきます

        [参考]


        0
          いろいろなところで東北地方太平洋沖地震の義援金が受け付けられていますが、
          先日、アップルからの義援金送金が可能になりました 

          トップページの「寄付はこちらから>」のリンクから
          iTunesに切り替わって寄付の受付画面が表示されます

          ただし、寄付はクレジットカードを使わないと受け付けられません


          ネット銀行口座をお持ちの方は、各ネット銀行でも義援金を受け付けているので、
          気になる方は覗いてみてください
          *手数料がかからない送金と手数料がかかる送金とが
           混在していたりしますので、ご確認ください

          ジャパンネット銀行
           >>東北地方太平洋沖地震災害義援金の受け付けについて

          楽天銀行
           >>東北地方太平洋沖地震義援金を受け付けています

          citibank -シティバンク
           >>シティバンク銀行の営業時間と義援金について


          その他、ゆうちょ銀行やいろいろなコンビニでも義援金を受け付けています


          個人的には、アプリも大して売れている訳でもなく
          ほんのわずかの義援金しか送ることができませんが、
          今後アプリがたくさん売れて、少しでも社会に貢献できるよう、
          アップデート作業をもくもくとがんばり続けます




          Calendar
          S M T W T F S
                1
          2345678
          9101112131415
          16171819202122
          23242526272829
          30      
          << September 2018 >>
          My Apps
          有料アプリ

          無料アプリ

          Selected entries
          Categories
          AdSense
          Sponsored Links
          Archives
          Recent comment
          Links
          Profile
          Search this site.
          Others
          Mobile
          qrcode
          powered
          無料ブログ作成サービス JUGEM