micachanに聞かれたことを説明するブログ

2010年11月30日火曜日

Blogger:外部のCSSやJavascriptを利用する方法


自問自答です。

BloggerでjQuery使えるかな?
(外部サイトに置いたCSSやJavascriptファイルをBloggerから利用できるかな?)
と思っったのでやってみました。

 

結論

できました。
以下が、サンプルのjQuery lightBox プラグインです。
下の画像をクリックすると、lightBox風に拡大画像がビヨーンとなります。

 

使用ファイル

2011/1/15 追記
動画も扱いたくなったため、lightpopへ移行しました。そのため、lightboxは使用していません。lightpopを使用した投稿→
http://tinypicotips.blogspot.com/2011/01/is06_15.html

jQuery lightBoxはこちらからダウンロードさせていただきました。

ダウンロードしたZIPのうち、使用するファイルは以下の4ファイルです。

  • css/jquery.lightbox-0.5.css
  • images/lightbox-btn-close.gif
  • js/jquery.js
  • lightpop移行ついでにgoogleさんのjquery.min.js へ移行
  • js/jquery.lightbox-0.5.js
  • jquery.lightpop-0.8.5.min.jsへ移行

今回はNext / Prevを使用しないので、CLOSE画像だけを使います。
  
*jquery.lightbox-0.5.jsをいじってNext / Prevが表示されないようにしています。
lightpop移行により細工やめました。

 

使用サイト

ここはBloggerですし、お金をもありませんから、Bloggerの運営者であるGoogleさんのサービスで無料で利用できるGoogleサイトを利用します。
以前の投稿で作ったサンプルのtinypicotipsサイトをそのまま使います。

https://sites.google.com/site/tinypicotips/

 

ファイルの保存先

Googleサイト→[その他の操作]→[サイトを管理]→[添付ファイル]として以下の4ファイルをアップロードしました。

2011/1/15
jquery.js → googleさんのホスティングしているjquery.jsに変更。
jquery.lightbox-0.5.js → lightpopへ変更。

  • https://sites.google.com/site/tinypicotips/jquery.lightbox-0.5.css
  • https://sites.google.com/site/tinypicotips/lightbox-btn-close.gif
  • https://sites.google.com/site/tinypicotips/jquery.js
  • https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
  • https://sites.google.com/site/tinypicotips/jquery.lightbox-0.5.js
  • https://sites.google.com/site/tinypicotips/jquery.lightpop-0.8.5.min.js
  •  

    表示する画像ファイル

    CADLIBのJIS画像(picasaに保存)を使います。

    最初に表示する(小さい)画像:
    http://lh4.ggpht.com/_sv2ya4Xgkz4/Slr3VcAE_JI/AAAAAAAAFy4/IlWzAKzbM_E/s400/jis.PNG

    クリック後表示する(大きい)画像:http://lh4.ggpht.com/_sv2ya4Xgkz4/Slr3VcAE_JI/AAAAAAAAFy4/IlWzAKzbM_E/s720/jis.PNG

     

    ファイルの編集

    jsファイルをそのまま使用するとパスが違うため、CLOSE画像が表示されません。そのため、jquery.lightbox-0.5.jsの以下の箇所を変更しました。
    2011/1/15
    オプションでできました(^^;
    lightbox→lightpopへの移行よりオプションに変更しました。

    imageBtnClose:            'images/lightbox-btn-close.gif'

    imageBtnClose:            'https://sites.google.com/site/tinypicotips/lightbox-btn-close.gif'

    $('a[rel*=lightbox]').lightpop({imageBtnClose:'https://sites.google.com/site/tinypicotips/lightbox-btn-close.gif'});

    NextとPrev画像はfunction _set_navigation() の中身すべてをコメントアウトして表示されないようにしました。
    2011/1/15
    lightpop移行時にパスが無効であれば表示されなかったので、以下のような細工はせず、何も記述せずに放置してあります。

    function _set_navigation() {
    /*
        $('#lightbox-nav').show();
        .........
        }
    */
        // Enable keyboard navigation
        _enable_keyboard_navigation();
    }

     

    Bloggerテンプレート

    Bloggerのテンプレートのheadタグの中に以下を埋め込みます。headタグ内ならどこでも良いと思います。
    2011/1/15
    lightpopへ移行したため、全面書き換えしました。

    <head>
    .........
    <link href='https://sites.google.com/site/tinypicotips/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
    <script src='https://sites.google.com/site/tinypicotips/jquery.js' type='text/javascript'/>
    <script src='https://sites.google.com/site/tinypicotips/jquery.lightbox-0.5.js' type='text/javascript'/>
    <script type='text/javascript'>$(document).ready(function() {$(&#39;a[rel*=lightbox]&#39;).lightBox();});</script>

    2011/1/15 変更


    .........
    </head>

     

    投稿

    画像部分は以下のhtmlタグを記述します。

    <a href="大きい画像のパス" rel="lightbox">
    <img border="0" src="小さい画像のパス">
    </a>

    具体的には以下を記述しています。

    |<a href="http://lh4.ggpht.com/_sv2ya4Xgkz4/Slr3VcAE_JI/AAAAAAAAFy4/IlWzAKzbM_E/s720/jis.PNG" rel="lightbox"><img border="0" src="http://lh4.ggpht.com/_sv2ya4Xgkz4/Slr3VcAE_JI/AAAAAAAAFy4/IlWzAKzbM_E/s400/jis.PNG"></a>

    そうすると画像をクリックした時にビヨーンと拡大画像が表示されます。
    嬉しかったので、もう一度最初と同じ画像を貼っておきます。クリックしてみてください。


     

    これからはいろいろ使っていこうかと思います。

    2010年11月28日日曜日

    Excel:セル内の改行文字の検索


    Excel2003で操作しています。
    改行文字はCtrl+Jと入力します。
    *見た目には変化がありません。

    まずは動画です。

    手順です。

    1. [編集]→[検索]を選択します。
      excel_sreturn1


    2. excel_sreturn2

    3. 検索する文字列にCtrl+Jを入力します。
      excel_sreturn3
      見た目に変化はありませんが、[次を検索]をクリック
      excel_sreturn4

    4. 改行文字が入っているセルが検索されます。
      excel_sreturn5

     

    参考:改行文字の入力

    改行文字はAtl+Enterです。

    2010年11月23日火曜日

    Excel:『セルの書式設定』の初期値(Excel起動時の値)の設定方法


    Excel2003の設定方法です。

    Microsoftの↓を参考に作成しました。
    http://office.microsoft.com/ja-jp/excel-help/HP005199596.aspx

     

    操作概略

    1. 新規ブックを作成
    2. セルの書式を設定
    3. XLStartフォルダにテンプレートとして保存

     

    操作手順

    まずは動画です。

     

    図説です。

    1. 何も無い新規ブックを作成し、[書式]→[スタイル]を選択します。
      excel_celldef1

    2. [変更]を選択します。
      excel_celldef2 
    3. [セルの書式設定]ダイアログが表示されるので好みに合わせて設定を変更します。
      図では変更されたことがわかりやすいように文字列の角度を45度に変更しています。
      excel_celldef3
      [OK]→[OK]と選択してすべてのダイアログを終了させます。
    4. ここからがメインです。
      [ファイル]→[名前を付けて保存]を選択します。
      excel_celldef4 

    5. ファイルの種類を テンプレート(*.xlt) にします。
      excel_celldef5
    6. 保存先を XLSTART フォルダにします。
      XLSTARTフォルダは多分以下です。
      C:\Program Files\Microsoft Office\OFFICE11\XLSTART
      excel_celldef6
      ここになければ検索してください。

    7. ファイル名を book にして保存します。
      excel_celldef7
    8. Excelを終了→再度Excelを起動→セルに値を入力すると45度傾いて入力されます。
      excel_celldef8

      以上で『セルの書式設定』の初期値が変更されました。

     

    元に戻す

    book.xltを 削除 または XLSTARTフォルダから移動 →Excelを再起動することにより元に戻ります。
    excel_celldef9
     

    以上です。

    2010年11月18日木曜日

    ネットワーク:ワークグループ名、ドメイン名の調べ方

    WinXPで操作しました。Win7では違うかもしれません。

    システムのプロパティ→コンピュータ名にてワークグループ名orドメイン名を調べます。

    1. WinキーとRキーを同時に押します。
      network0

    2. [ファイル名を指定して実行]が起動するので、sysdm.cplと入力して[OK]
      network1

    3. [システムのプロパティ]→[コンピュータ名]と進み、フルコンピュータ名の下の文字で判断します。

      ワークグループの場合
      ワークグループ : *****(←ワークグループ名)
      ドメインの場合
      ドメイン : *****(←ドメイン名)

      図では、MICASUKEHOMEというワークグループに入っています。
      network2

     

    ワークグループとドメインの違いは以下を見てください。

    http://windows.microsoft.com/ja-JP/windows-vista/What-is-the-difference-between-a-domain-and-a-workgroup

    以上です。

    Paint.NET:画像の解像度の確認と設定

    Paint.NETでの画像解像度の確認/変更方法です。
    まずは動画です。

    以下、手順です。

    1. [イメージ]→[キャンバスサイズ]
      paintdotnet_dpi1

    2. [解像度]を確認 or 入力→[OK/キャンセル]
      paintdotnet_dpi2 

    以上です。

    ここではピクセル/インチなので正確にはppiですが、dpi(ドット/インチ)もppiも同じように使っているので(多分)大丈夫です。

    Webに載せるだけの画像なら72ppiもあれば十分だと思います。印刷するなら300ppiくらいはあった方が(多分)いいと思います。

    2010年11月15日月曜日

    Excel:置換


    文字の置換方法です。
    Office2003で操作しています。
    まずは動画です。

    以下手順です。

    1. [編集]→[置換]を選択
      excel_replace1
    2. wordをワードに置換してみます。
      検索する文字列:word
      置換後の文字列:ワード
      と入力して→[すべて置換]
      excel_replace2
    3. wordpressの中にもwordがありました...orz
      excel_replace3
    4. [編集]→[元に戻す]で全て戻します。
      再度、[編集]→[置換]を選択し、
      →[次を検索]
      →対象文字列:[置換]をクリック、対象外:[次を検索]をクリック
      と操作することでひとつずつ置換することができます。
      excel_replace4
    5. [すべて検索]をクリックすると該当文字列のリストが表示されます。
      このリストにより該当文字列を事前に確認することができます。
      excel_replace5

    以上です。

    2010年11月9日火曜日

    Googleトーク:画像の変更方法


    Googleトークの画像の変更方法です。
    まずは動画です。

    これだけです。

    1. 画像をクリック→その他の画像をクリックします。
      GoogleTalk_image1

    2. 表示させたい画像を選択します。
      GoogleTalk_image2

    3. 変更されました。
      GoogleTalk_image3

     

    以上です。

    2010年11月8日月曜日

    Googleドキュメント:フォームの作り方と使い方


    フォームとはアンケートなどによくある入力画面を作る機能です。
    以下がGoogleドキュメントのフォームで作ったフォームです。
    2012/4/21 追記
    最後に動画を追加しました。








    入力した内容はこちらのドキュメントに記録されます。
    https://docs.google.com/spreadsheet/ccc?key=0AsA33xE40K0pdHpvUFhjZFVkWW1sVUtVdjVzOW5YZVE&usp=sharing




    作ってみよう
    1. Googleドキュメントの[新規作成]→[フォーム]を選択します。
      gdocsform1
    2. こんな画面が表示れるので無題フォーム欄と説明文欄を入力します。
      gdocsform2
      こんなふうに入力すると
      gdocsform3 こんなふうに表示されます。
      gdocsform4
    3. フォームの項目を作っていきます。まずは最初から勝手にできている項目に以下のように追加してみます。
      gdocsform5表示はこうなります。
      gdocsform6

    4. テキスト以外には以下の要素があります。
      gdocsform7
      • 段落テキスト
        gdocsform7-1
      • ラジオボタン
        gdocsform7-2
      • チェックボックス
        gdocsform7-3
      • リストから選択
        gdocsform7-4
      • スケール gdocsform7-5
      • グリッド
        gdocsform7-6 
    5. 完了ボタンを押すと項目が作成され、その下の”公開されたフォームをここから表示できます”をクリックするとブラウザでフォームを確認することができます。
      gdocsform8
    6. 定期的に保存をクリックしましょう。
      gdocsform9 

    使ってみよう
    メールに添付したり
    gdocsform10
    Webページとして公開したり
    (”公開されたフォームをここから表示できます”が公開URLです。)
    https://spreadsheets.google.com/viewform?formkey=dDBoaVVhRTVyRnRZUHhIRXQ5Z1l4Nnc6MQ
    gdocsform8

    ブログに埋め込んだり(この投稿の最初に埋め込んであります。)
    gdocsform11
    などの使い方があります。

    入力された結果はどこに?
    Googleドキュメントのスプレッドシートとして順次追加されていきます。
    gdocsform12 開いてみると入力された内容が順次追加されていきます。
    gdocsform13

    フォームの編集は?
    フォームのスプレッドシートを開いてメニューの[フォーム]→[フォームを編集]で作成画面が表示されます。
    gdocsform14

    以上です。
    2012/4/21 追記