calendar

 123456
78910111213
14151617181920
21222324252627
28293031   
<< May 2017 >>

categories

archives

ロリポップレンタルサーバ

カラーミー

グーペ

お名前.com

ANA ToMeCard

◆ テンプレートカスタマイズ6 (リンク文字のデコレーション)

0
    Jugemのdefaultのリンク色の設定がわかりずらいので、下記のように変更することにした。
    link意味色指定、文字デコレーションcssでの記述
    a:link未訪問リンク水色
    underlineあり
    color="#0099ff"
    text-decoration:underline;
    a:visited訪問済みリンク紺色
    underlineあり
    color="#0000ff"
    text-decoration:underline;
    a:hoverマウスカーソルを
    乗せたリンク
    オレンジ
    underline無し
    bold指定
    color="#ff9900"
    text-decoration:none;
    font-weight:bold;
    a:active選択したリンク灰色
    underline無し
    color="#333333"
    text-decoration:underline;

    そろそろ、このブログに対するCSSの変更も終わりだろうか?? しかしながら、不思議とまた何か気がついたことが現れるものである。そのときは随時変更していこうと思う。

    ◆ テンプレートカスタマイズ5(ブログに表を導入する)

    0
      JUGEMのブログ上に簡単に表を追加したいのですが、特にそんな機能はなく地道にtableタグで追加するしかないらしいです。いままでシンプルエディターなるものがあることを知らずに、ずっとWYSIWYG(ウィジウィグ)エディターで書き込みをしてきた。しかしタグ記述ができないので表を追加したりするような場合は、シンプルエディターの方が便利なようである。
      エディタ名 HTMLタグ扱い ブログでの表示
      シンプル
      エディタ
      HTMLのダグ プレビューしないと表示結果は不明
      WYSIWYG
      エディタ
      単純なTEXT 入力した内容がそのままブログとして表示
       ※WYSIWYG : What You See Is What You Get
      今後は下記のCSSで記述したpatern01のclassを使って表を記述していこうと思う。

      上記表のHTML記述
      <table class="patern01">
          <tr>
              <th>エディタ名</th>
              <th>HTMLタグ扱い</th>
              <th>ブログでの表示</th>
          </tr>
          <tr>
              <td>シンプル<br>エディタ</td>
              <td>HTMLのダグ</td>
              <td class="L">プレビューしないと表示結果は不明</td>
          </tr>
          <tr>
              <td>WYSIWYG<br>エディタ</td>
              <td>単純なTEXT</td>
              <td class="L">入力した内容がそのままブログとして表示</td>
          </tr>
      </table>
      上記表のCSSの追加部分
      /* table (パターン1) */
      table.patern01{・・・・・・・・・・・・・・・・・・Class名はpatern01とする
          border:none;・・・・・・・・・・・・・・・・・・テーブルの境界線は表示しない
          border-collapse:collapse;・・・・・・・セル境界は重ねて表示
          margin-top:10px;・・・・・・・・・・・・・・表は上から10px空けて表示
          margin-left:10px;・・・・・・・・・・・・・・表は左から10px空けて表示
          }
      .patern01 th{
          border:#003366 solid 1px;・・・・・・ボーダは紺色で1pxの線で
          background:#888888; ・・・・・・・・・・タイトル枠はグレイ表示
          padding:4px;・・・・・・・・・・・・・・・・文字は4px空けて表示
          color:#ffffff;・・・・・・・・・・・・・・・・・文字色は白色で
          text-align:center;・・・・・・・・・・・・・・・テキストはセルの中心に表示
          }
      .patern01 td{
          border:#003366 solid 1px;
          padding:4px;
          text-align:center;
          }
      .patern01 td.L{・・・・・・・・・・・・・・・・・・・・・Class名はLとする
          border:#003366 solid 1px;
          padding:4px;
          text-align:left;・・・・・・・・・・・・・・・・・・テキストはセルの左寄せで表示
          }


      ◆ テンプレートカスタマイズ4(JQuery導入)

      0
        JUGEM内の他の人のブログを見るようになり、カスタマイズした美しいサイトを見つけると私のブログが陳腐に見えてきてしょうがない!
        そこで少しでも見栄えを良くすべく、JQueryを導入してみることにした。
        JQueryはオープンソースのJavaScriptライブラリで、簡単な記述で多用な表現が実現でき最近のWebサイト構築には無くてはならないものになっている。

        JQueryのライブラリをJUGEM内に取り込むのは簡単にできると思っていたのだが、JUGEMはこれを許していないらしい...たぶん!?(私は見つけられなかった!)
        そこで全て外部のサイトから取り込む方法をとることにした。
        私の場合は、ロリポップで私の女房の実家のプラモデル店のサイトを構築しているのでこちらにあるJQueryのライブラリを参照するように設定した。

        JQueryの本体はgoogleから(最新Versionは1.7ですがここは1.4を使用)
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

        ここではfancyboxのライブラリを導入してみた。(画像のポップアップ)
        <script type="text/javascript" src="参照元URL/jquery.mousewheel-3.0.4.pack.js"></script>
        <script type="text/javascript" src="参照元URL/jquery.fancybox-1.3.4.pack.js"></script>
        <link rel="stylesheet" type="text/css" href="参照元URL/jquery.fancybox-1.3.4.css" media="screen" />

        あとは下記のようなスクリプトを記述すればOK!
            <script type="text/javascript">
                $(document).ready(function() {
                    $("a#zoomin").fancybox({
                        'overlayShow'    : false,
                        'transitionIn'    : 'elastic',
                        'transitionOut'    : 'elastic'
                    });
                });
            </script>

        画像表示のaタグ上に<a id="zoomin"・・・>を加えればポップアップされる。
         <a id="zoomin" href="大きい画像"><img src="小さい画像"></a>

        veus_eclipseさて、実験的に右記の画像にid=zoominを記述してみた。クリック
        すると軌跡を表示しながらポップアップするのがわかると思う。
        ×ボタンでを押しても同様に軌跡を表示しながら閉じる。
        明日6月6日は金星が太陽面を通過するのが見える予定だったが
         金環日食と同様に、明日は首都圏は雨でほぼ見ることは不可能と
         思われがっかりである...

        ◆ テンプレートカスタマイズ3

        0
          ブログを始めて半月たち、ページ構成でまだまだカスタマイズしたい箇所が多く見受けられ
          今回もテンプレートのカスタマイズを行った。

          画像の外枠の削除
           画像をブログに挿入するとdefaultでボーダーの線が挿入されるのが、気になり始め
           ここをまずは直す事にした。
             #main .pict {border:none; padding:3px;} ・・・ボーダー枠無しに修正した。

           ※ボーダー線を入れたい場合は、下記のclass="picb"として記述することにした。
             #main .picb {border:1px #000000 solid; padding:3px;}

          サブタイトルを強調する
           サブタイトル名が単純なboldの文字列なのでを画像の上に載せて、強調しようと思う。
           cssの<h3>タグの記述を下記のように修正した。
           /* サイドメニューのタイトル */
           h3 {font-size:14px;
               font-weight:bolder;
               margin:0 0 5px 0;
               padding:0 0 0 25px; ・・・前を25px空ける(を入れたため)
               color:white; ・・・・・・・文字色は白にする
               background: #ffffff url(http://img-cdn.jg.jugem.jp/d70/2466487/画像ファイル名);}

           画像は左の枠(#left)が200px、右の枠(#right)が170pxと設定したので大きいほう
           の横200pxの画像を用意して背景画像とした。ちなみに縦は20pxです。

          JUGEMのバーナーをTOP画像の上に
           JUGEMのバーナーが左枠の一番下にあったが目立たない場所なので削除してしまった。
           そこでTop画像の上に表示位置を調整して表示させるようにした。
           #discriptionを使用しなくしたので、このIDを使って位置を調整した。
           /* ブログの説明文 */
           div#description {margin:100px 0 0 0;padding:0 0 0 50px;}

          今日の変更はここまで。




          ◆ テンプレートカスタマイズ2

          0
            引き続いてテンプレートのカスマイズを行ってみた。
            今回は、ページ全体の構成を調整するのとページ色の設定を行った。
            ページ幅の構成は、cssの構成記述から以下のように変更を加えた。

            表示サイズルール

            ※cssにルールの記述があったのでこのルールに従って修正した。
             a=b+40px (左右20pxの余白を取れということ)
             a=c+d+e+40px+40px(それぞれの枠間も20pxの余白を取れということ)

            コンテンツの表示幅(wrapper)は950pxでdefaultのままにしました。
                backgroud-color:ffffcc;として薄い黄色に変更

            ヘッダー部(header)は幅910px、縦180pxとしました。
             ここには雲画像が表示される。また画像に文字を入れたのでブログ名と詳細表示は
             しないように、htmlを下記のようのコメントアウトした。
                <!-- BEGIN title -->
            <!--    <h1>{blog_name}</h1> -->
            <!--    <div id="description">{blog_description}</div> -->
                <!-- END title -->

            左側の表示枠は200px、右を170pxとしたので実際のブログ表示幅は500pxです。
             mainのブログ表示枠の色を微妙に変更を加える。
             backgroud-color:fcfcfc;として白から薄い灰色に変更

            今日の変更は以上で終了。


            ◆ ブログパーツ?知らなかった...

            0
              「ブログパーツ」とは一般的な言葉で、ネット上に溢れていることを初めて知った。
              javascriptやFlashで作られていて、自分のサイトに単純に貼り付ければいいらしい。
              今回は、ブログに以下の2つのブログパーツを貼り付けてみた。

              月齢表示・・・・・・・月齢を表示するブログパーツ
                tool.fxwill.com

              WeatherNews ・・・iphoneで重宝させてもらっているのでここにも表示

              とにかく沢山のブログパーツがあることに驚いた。(世間知らずでした!

              ブログパーツの取得場所は、以下のような場所で探せるようです。
                ブログパーツ.com
                Bloglue
                ブログペット 


              ◆ テンプレートのカスタマイズ

              0
                ブログをはじめて約1週間、ブログを始めるにあたりたくさんのテンプレートから好きなテンプレート
                を選択できたのだが、まずはシンプルにということで一番シンプルなテンプレートでブログをはじめた。しかるに、あまりにもシンプルで芸がないと感じ始めた今日この頃...
                という訳で、本日はテンプレートのカスタマイズを行うことにした。

                Step1 ブログパーツの挿入
                  ブログパーツなるものがあることを知り、Web本棚とFLASH時計がいいと思ったが
                    紹介する本がまだあまり無いので、今回はFLASH時計のみを挿入することにした。
                  設置場所は、Topのブルーの画像の右側にしようとおもい下記の変更を加えた。
                  まずは、右よりに配置するため下記のrightという名前でIDをCSSに追加した。
                      #right {float:right; margin:15px 20px 0 0;}
                   あとはHTMLに<div id="right">時計のFLASHの内容を記述</div>を
                    書けば終了です。 
                   いままで何もなかったトップに時計が加わったので少し良くなったかな??
                     でもFLASHなので、iphone/ipadでは表示されないのがいまいちですね...

                Step2 Calendar表示の手直し
                  Calendarが見にくいので少し強調させることにした。CSSを覗くとsideContens
                      というclassを使って左側は全てこのClassで記述されている。従って新たに
                      CalContentsというclassを作ってCalendar部分をこのclassのdivタグ名を
                  変更した。
                  下記のCalContentsというclassを追加した。
                  .CalContents {margin:0 0 20px 0;
                                background-color:#FFFFCC; ・・・色は薄い黄色
                                border-style:solid; ・・・・・・・・外枠は1本線
                                border-color:gray; ・・・・・・・・線の色はグレイ
                                border-width:1px;} ・・・・・・・線の幅は1ピクセル
                  またHTMLのカレンダの曜日の記述を日本語に変更
                    これだけ変えただけでCalendarが強調されとても見やすくなった。

                Step3 タイトル画像の入れ替え
                  Topのブルーの画像はあまりにも味気ないんで、雲の画像に変えてみた。
                  HTMLのHeader画像のURLを、アップロードした画像名に変更するだけ
                    かなりイメージが変わったみたい!今回はとりあえずこんなとこかな?


                | 1/1PAGES |