か、か、可憐だっ!

S M T W T F S
 123456
78910111213
14151617181920
21222324252627
282930    
<< April 2019 >>

自画像

じがぞう.jpg

こ猫データ

最近の記事

カレゴリーズ

アーカイヴっす!

ランダム記事

others

モバイル

qrcode

powered

無料ブログ作成サービス JUGEM

こ猫チャレンジ13 ジュゲムブログ 「画像を自動でブログサイズに合わせる方法」

0

    JUGEMテーマ:ブログカスタマイズ

     

     

    どうもこ猫です。

     

     

    久しぶりのこ猫チャレンジですが、今回は、以前にチャレンジしてどうにもうまくいかなかった画像の自動調整についての記事を書きたいと思います。

     

     

    ブログをカスタマイズしている人は一度は思ったことがあるのではないでしょうか?

     

    元の画像はそのままに、カラムのサイズよりも大きいものだけ、カラムサイズに収まるように自動で縮小させたい

     

    と。

     

     

    はい、当然こ猫も思いました。

    で、色々と試したんですが上手くいかずその時はとりあえず保留に。

     

     

    しかし、しかしです。

    こ猫はついにやってやりました。

     

     

    そう、こつこつ色々と試していた結果、元の画像はそのままに、カラムのサイズよりも大きいものだけカラムサイズに収まるように自動で縮小させたい、という夢のカスタマイズを実現したのですっ!

     

     

    ということで………

     

     

    カスタムHTMLコードドーンッ!

     

     

     

    ビフォー

     

    /* --------------------------------------
    リセット
    --------------------------------------- */
     
    * {margin:0px;padding:0px;}

    h1,h2,h3,h4,h5,h6 {font-size:100%;}
    a {text-decoration:underline;overflow:hidden;}
    img {border:none;vertical-align:top;}
    li {list-style-type:none;}
    hr {display:none;clear:both;}
    br.clear {clear:both;}

    /* --------------------------------------
    共通部分
    --------------------------------------- */

     

     

     

     

    アフター

     

    /* --------------------------------------
    リセット
    --------------------------------------- */
     
    * {margin:0px;padding:0px;}

    h1,h2,h3,h4,h5,h6 {font-size:100%;}
    a {text-decoration:underline;overflow:hidden;}
    img {border:none;  width: ; max-width:100%;  height:auto ;  vertical-align:top;}
    li {list-style-type:none;}
    hr {display:none;clear:both;}
    br.clear {clear:both;}

    /* --------------------------------------
    共通部分
    --------------------------------------- */

     

     

     

    (訂正

     

    width: ;の部分はいりません。

    うっかりそのままにしていました。

     

    もう導入していてうまくいかなった人はwidth: ;の部分をのぞけばうまくいくはずです。

    ホント申し訳ないです。)

     

     

     

    はい、CSSのほぼほぼトップにあるコードを上のコードを参考に変更しましょう。

    青い部分が追加された部分です。

     

     

    あととりあえずコードの意味を書きますと、

     

     

    width: ; max-width:100%;

     

    が、カラムの横サイズ100%より大きくならないようにする、つまりMAXはカラムサイズ100%、仮に700Pxに設定していたらどんなに画像が大きくても700Pxまでだよ、あと、あくまでも最大幅がしていされているだけだけだからカラムサイズより小さい画像は元の画像のまま小さいままだよ、という意味で

     

     

    height:auto ;

     

    が、縦の画像サイズは横のサイズに合わせて自動で調整するよ、という意味です。

     

     

    はい、もうまさに夢のコードですね。

    もちろんこ猫はもうすでに導入しています。

     

     

    これが上手くいったときはホントに嬉しかったですね。

    ああ、これで画像のリサイズから解放される、と。

     

     

    いや、みんな思ってると思うんですよ、

     

    「画像の調整めんどくしゃいニャー」

     

    って。

     

     

    まあもちろん、そうじゃない中にはいるでしょうけどね。

    ほとんどの人はそうだと思います。

     

     

    ということで、今まで画像サイズの調整に時間をとられていた皆さん、もしよければ参考にでもどうぞ。

     

     

    ちなみに、タイトルにも書いてありますが、あくまでこれはジュゲムブログでの方法なので他でも同じくコードが反映されるかは分かりませんのであしからず。

     

     

    もちろんmax-width:100%などのHTMLコード自体の意味は変わるわけではないので、あとはそれぞれのブログやホームページとの相性ということになります。

     

     

    色々と独自の設定とかがありますからね。

     

     

    まあどうするにしても………

     

     

    バックアップはとってからっ!!!

     

     

    はい、ということで今回はこれにて。

     

     

    皆さんも、レッツエンジョイカスタマイズッ!

     

     

    ではまたっ!

     

     

     

    裏話

     

    そういえば、画像のリサイズ設定は上手くいったけど、すっかりブログにのせるの………ゴホンッゴホンッ!

     

    ニャんでもありません。

     

     


    こ猫チャレンジ12 ジュゲムブログ 「フリースペースを増やす方法」

    0

       

      はい、今日はブロッコリーさんなスムージーを試してみたこ猫です。

      味はなかなか、リンゴジュースなどを混ぜているので割とおいしく飲めました。

       

       

      食感は少しツブツブ感がありましたが特に気になるほどではありませんでしたね。

      一応もっとよくできたらとは考えてはいますが。

       

       

      いやしかし、スムージーって野菜をとるにはホント最適な飲み物ですよね。

      リンゴ、バナナ、豆乳さえ混ぜておけばたいていの味や食感は気にならなくなるんですから。

       

       

      まあ、限度はありますが………

       

      なんにしても素晴らしい飲み物です。

       

       

      さて、つぶやき的な話はこれくらいにして今回のテーマに移りたいと思います。

       

       

      今回のテーマは、ジュゲムブログを使っている人なら一度は考えただろう「フリースペースを増やす方法」です。

       

      (こ猫のブログだと、この部分が増設した場所です)

       

       

      まあ、5個でも十分といえば十分なんですが、レイアウトに自由を持たせようと思ったらやはりもう少し欲しいところですよね。

       

       

      というわけで、こ猫らしくシンプルにその方法を書いていきたいと思います。

       

       

      1 以下のHTMLコードをコピーしましょう。

       

      <!-- 増設フリースペース1(自分の分かりやすい名前を書きましょう) -->
      <h3>
      ここにタイトル(見出し)を書きましょう(書かなくてもOK、表示されないだけです)</h3>
      <div class="sideContents">

       

      ここにジュゲムのフリースペースと同じように入力しましょう。


      </div>

       

       

      2 こ猫チャレンジ7を参考に、コピーしたコードを好みの場所に貼り付けましょう。

       

      ………

      ……

       

      完了ですw

       

      す、すごい速さで説明が終ってしまった。

      こ猫チャレンジの中ではもしかして最速だったんじゃないでしょうか?

       

       

      ああ、シンプルって素晴らしいですね。

      主に時間がかからな………皆さんが分かり易いという点でっ!

       

       

      はい、というわけで今回のこ猫チャレンジはこんな感じでした。

      よければ参考にでもどうぞ。

       

       

      もちろん………

       

       

      バックアップはとってからっ!!!

       

       

      ちなみに、HTMLに直接書き込んでいるため、テンプレートを変える時はまたコピーしなければいけませんので気を付けてくださいね。

       

       

      ではまたっ!

       

       


      こ猫チャレンジ11 ジュゲムブログ 「動画のレスポンシヴ化をしてみよう」

      0

         

        はいどうも、今日はいつもより目覚めの早いこ猫です。

        今回はレスポンシヴ動画について書いていきたいと思います。

         

         

        こ猫チャレンジ6にてこ猫は

         

         

        なんて書いていたのですが、これどうやら、やらなくても大丈夫だったようです。

         

         

        というのも実は、Youtube動画を自動でサイズ調整してくれる機能がジュゲムブログにはついていたのです。

         

         

        これは今日モンハンの動画をはりつける時にたまたま気付いたんですが、その名もそう……

         

         

        レスポンシヴビデオ機能!

         

         

        実際の画像がこれ

         

         

        Responsive videoって書かれたやつがそれです。

         

         

        で、やり方はこれにチェックを入れるだけの簡単仕様。

        あとは自動でサイズを調節してくれます。

         

         

        いや〜まさかこんな方法があったとは、色々と試してみるものですね。

         

         

        なんにしても、これで動画に関しては、好きなサイズのサイトにいつでもカスタマイズしても大丈夫ということになります。

         

         

        あとはまあ画像サイズをどうするかですが………、まあこれはおいおいですね。

         

         

        まずは全ての動画をレスポンシヴ動画に置き換えなければ……

         

        ………

        ……

         

        ……なんか「れすぽんすぃう゛」って妙にいいたくなります。

         

         

        ということで、今回はこれまでっ!

        皆さんもぜひっ! れすぽんすぃう゛動画、活用してみてくださいっ!

         

         

        ではまたっ。

         

         


        こ猫チャレンジ10 「忍者画像RSSで忍者あんてなに飛ばされない方法」

        0

           

          どうもいつも元気! なつもりでいるこ猫です。

           

          こ猫チャレンジ9にて忍者画像RSSを使いランダム記事コーナーを作る方法を紹介しましたが、実は一つ「う〜ん」と思うところがありました。

           

          それは忍者あんてなのサイトに一度飛ばされてしまうこと。

           

          最初設置した時は仕方ないかと思っていたんですが、やはり気になります。

           

          それでどうにかできないかと調べてみたら、以外と簡単に方法が見つかったではありませんか。

           

          で、やってみたらすんなりと出来ちゃいました。

           

          ということでその方法をさっそく紹介していきたいと思います。

          方法はもの凄く簡単。

           

          チャンネルをつくった時の設定画面の基本設定→チャンネル設定と進み

           

          WS000002.JPG

           

          そこの

           

          WS000004.JPG

           

          アンテナサイト設定のレ点チェックを外すだけ。

          あとは設定を保存して完了。

           

          その瞬間から反映され忍者あんてなを経由しなくなります。

           

          以上、こんな感じです。

           

          試しにつけてみたけど、忍者あんてなに飛んでなんか……

          と思っている人は試してみて下さい。

           

          ではでは、また次回。

           

          醤油揚げんっ!

           

           


          こ猫チャレンジ9 ジュゲムブログ 「ランダム記事を追加する方法」

          0

             

            どうも「地上の星」を聴いてエネルギーMAX! な気分、になっているこ猫です。

             

            今日は、最近ではよく見かけるようになった「ランダム記事」これを追加する方法を書いていきたいと思います。

             

            方法はわりと簡単。

             

             忍者ツールズというサイトにジャンプ

             

             

             忍者画像RSSをクリック

             

             WS000002.JPG

             

             初めての場合は無料の会員登録をしてからサービス(忍者画像RSS)を追加する。

             

             

             管理ページで忍者画像RSSの管理画面を押し、あとは新しいチャンネルを作るからサイトのURLを入れ、チャンネルをつくる。

             

             

             好みに設定をあれやこれやかえ、タグ(HTMLコード)を取得(コピー

             

            WS000003.jpg

             

            設定画面はこんな感じ。

            色々設定できる。

            割と操作は分かりやすいので、説明するより実際やってみて、色々試した方がはやい。

            うまくいかなかったら何個でもチャンネルは作りなおせるし、安心して試すことができる。

             

             

             JUGEMのデザイン→フリースペースを選び、内容欄のところに貼り付け。

            後は設定を公開にして完了である。

             

             

            追記 表示場所を変える方法は

             

            こ猫チャレンジ7こ猫チャレンジ8を参考にどうぞ。

             

             

            と、これでほんとに完了ですね。

             

            なれないうちは少し時間がかかるかもしれませんが、これができれば一気にサイトが華やかになるので、ぜひとも試してみてはいかがでしょう。

             

            もちろんっ!

             

            バックアップはとってからっ!

             

            はいw ということで今回はこれにて。

            ではまたっ

             

             

            裏話 忍者画像RSS画像の忍者RSSと書いていて、思わず吹き出し即なおしましたとさw

             

             


            | 1/3ページ | >>