まりふのひと

はてなダイアリー/画像アップ入門

Hatena MAPS-BB
  • 日時：12月12日（土）13:00〜17:00
  • 場所：田布施町高齢者いきいき館
  • 内容
    • 13:00〜14:00：パソコン サポート コーナー（1時間で打ち切り）
      • 質問に応えます。
      • 質問内容は自由ですが、事前に出してもらわないと「聞くだけ」で終わる可能性があります。
        　質問は iPS-BB（掲示板）であったものを優先します。
    • 14:00〜17:00：はてなダイアリー画像アップ入門
  • 参加：MAPS-TA会員がメインですが、MAPS会員/元会員/非会員 問わず自由とします。
    　田布施町内の見学者（応援団・サポート・冷やかし等）を歓迎します。
  • 費用：「有益だった」と思われた方は、1コイン程度の寄付をお願いします。

はてなダイアリー画像アップ入門・予定テーマ

　Windows8.1 PCに Classic Shell（スタートメニューを Windows7風にするフリーソフト）がインストールされている PC で説明します。

§１．「マクロ仕分くん」のインストール
  • 「仕分ちゃん」の使い方を限定した Excelマクロを、希望者に配布します。
    • DCIM・フォルダーしか仕分けられない。
    • 前回の仕分フォルダーを記憶しているので、同じ操作であれば、直ぐ「仕分ちゃん」を実行する。
  • 「仕分ちゃん」と併用できます。但し、仕分ちゃんの設定は同じになります。
  • パソコンにより環境が異なるので、1台1台、確認しながら行います。
§２．パソコンの設定関連
  1. ［ペイント］をスタートメニューに登録する。
  2. Snipping Toolの起動アイコンをタスクバーに出す。
  3. ピクチャーに「フォトライフ」フォルダーを作成する。（作成する場所およびフォルダー名は任意。二重に作る必要はない）
    • 理由1）保存してあるファイルしかアップロード出来ない。
    • 理由2）はてなにアップロードできる容量は 300MB/月。
      　最近のデジカメで初期設定のまま撮影*1 すると、30枚以下？ 程度しか保存できない。
    • そこで、サイズを小さくしたアップロード用のファイルを作るもの。アップロードに要する時間も短くなる。
§３．ペイント/Snipping Toolの操作
  1. 画像をペイントで開く
    • 標準的には(1)ペイントを起動し、(2)［ファイル］タブ ⇒［開く］‥‥ と進める。
    • 素早く開くには、画像ファイルを 右クリック ⇒［プログラムから開く］⇒［ペイント］が便利。
  2. パソコンの画面のコピーを取るには
    1. ［PrintScreen］キー押下後、ペイントに貼り付ける。
      • 画面全体のコピーが取れる。
    2. ［Alt］＋［PrintScreen］キー押下後、ペイントに貼り付ける。
    3. ［Snipping Tool］を使う。
      • 画面の自由な範囲のコピーが取れる。
  3. ペイントの使い方
§４．はてなダイアリーに画像をアップしブログに貼り付ける
  1. アップする画像を自分のPC内（例えば、ピクチャー4フォトライフ）に保存する。
    1. 基本的にはペイントに貼り付け、
    2. 加工終了後‥‥
    3. 長辺を 800px.以下に［サイズ変更］する。
      • 800px.以下にリサイズする目的は、(1)大きい画像をアップすると 1ヶ月内にアップできる枚数が減る。(2)アップに時間が掛かる（例えば、画面がなかなか変わらない等）の問題が出る。
    4. 名前を付けて、フォトライフ・フォルダーに保存する。
      • 名前は任意であるが、半角文字で、yyyy-mmdd*（*は1枚目はa、2枚目はb‥‥）としたらどうか...
  2. 自分のブログを開き、記事の入力状態にする。
  3. 画像を入れる場所にカーソルを移す。
  4. ［写真］をクリックする。
  5. HatenaFotolifeはてなのウェブアルバムサービス 画面になるので、
    1. ［参照...］をクリックする。
      • ［参照...］が無い時は ※Flashを利用しないアップロードはこちら をクリックする。
    2. 【アップロードするファイルの選択】画面で、
      1. 左側ナビゲーションウィンドウの「ピクチャ」を開き、フォトライフ・フォルダーを開く。
      2. アップロードする画像を選択し、［開く］。
    3. 元の画面に戻ったら、［アップロード］をクリックする。
    4. アップロードが終わったら
      1. 「貼り付ける写真を選択」の左上のサムネイルが選択状態になるので、（＝選択して）
      2. 「画像の大きさ」を、（仮に） 8L にし、
      3. ［選択した画像・動画を貼り付け］る。

§５．fotolife記法

　上記方法で画像をブログに貼り付けると、次のように表示される。

この下に画像を貼り付ける
[f:id:ogohnohito:20151206195700j:image:w360]
この上に画像があるはず．．．
    1. 1行目：あらかじめ入力した文字列
    2. 2行目：画像を貼り付ける操作を行うと、このように表示される。これが「fotolife記法」。
    3. 3行目：画像の下に文字を入れる場合は、このように記す。
      • 2行目を改行し入力する。
      • 2行目に続けて入力する方法もある。この場合、表示され方が変わる。

　最後の「:image」に続けて、以下の指定を行うことで、画像のサイズや文字の回り込みを簡単に指定することが可能です。

  • small
    　その写真のサムネイル画像（長辺60px）を表示しますmediumその写真の大きいサムネイル画像（長辺120px）を表示します
  • h**
    　表示する写真の縦サイズを**ピクセルにします
  • w**
    　表示する写真の横サイズを**ピクセルにします
  • left
    　写真を左寄せで表示し、文字を右に回り込ませます
  • right
    　写真を右寄せで表示し、文字を左に回り込ませます
  • movie動画ファイルの場合、再生プレーヤーを表示します

　画像の下から文章を書き始めたい場合は、その文章の上に <br clear="all"> と書き込むと、画像の回り込みが解除されます。

ヒント
  • 区切り記号は、ヘルプには半角カンマ（,）とありますが、半角コロン（:）の方が統一感がありいいです。
  • ブログに表示できる横幅は、ブログのデザインで異なります。試行錯誤し、自分で探してください。

*1:Sony Cyber-shot DSC-W810 では、1枚 10MB