ホームページお助け隊
お役立ちTips
お助け隊の中で出てきたJimdoやホームページ作成に関する知っておくと便利な機能などをまとめています。
- 文字の大きさを変える（疑似見出しを作り、リンクを張る）
- Jimdo検索エンジン対策（公式）
- GoogleへのURLの申請
- 301リダイレクト（SEO対策）
- Twitterウィジェット
- 過去にFacebookに貼付けたURLの表示をリフレッシュ
- ページタイトル＆詳細の設定（SEO対策）
- リンク先ホームページのサムネイル作成
- faviconの作り方
- ページ内リンク
- Jimdoページのバックアップ
- 写真に日付、場所、コメントを挿入
- 無料素材（イラスト、写真、地図など）
- Word/PPT/PDF等の画像変換
- 画像系のフリーソフト
- JimdoにRSSフィードを表示する
- JIMDO操作快適チェック（買いパラ：ファイルサイズチェック）
- QRコードの作り方（カンタン無料）
- 無料アクセスカウンターの設定
◎ 文字の大きさを変える（目立つリンクを張る）
見出しにリンクを張る事はできませんが、文章の文字を見出しのように大きくすることで、見出しにリンクが張られたようにすることができます。
◎ Jimdoの検索エンジン対策（公式）
◎ GoogleへのURL申請
ウェブマスターツールからURLを登録
「Google はウェブをクロールするたびに、インデックスに新しいサイトを登録し、既存のインデックスを更新しています。新しい URL を使用する場合は Google にご連絡ください。送信されたすべての URL がインデックスに登録されるとは限りません。送信された URL がインデックスに表示される時期について、予測や保証はいたしかねますのでご了承ください。」
https://www.google.com/webmasters/tools/submit-url?hl=ja&continue=%2Faddurl&pli=1
◎ 301リダイレクト
検索エンジンの結果で表示されるページの URL を変更する必要がある場合は、サーバー サイドの 301 リダイレクトを使用することをおすすめします。これは、ユーザーや検索エンジンが正しいページにたどり着くことを保証する最善の方法です。
http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=93633
◎ Twitterウィジェット
Twitterでのつぶやきをホームページに表示させるのは、Twitterのウィジェットを使うのが便利。
JimdoのTwitter機能よりもデザインが良く、またユーザーだけでなくハッシュタグでの表示などもできます。
https://twitter.com/about/resources/widgets
たとえば特定のハッシュタグが含まれるツイートを表示したければ
［自分のサイト］＞［検索ウィジェット］を選び、［Search Query］に
ハッシュタグを指定し、その他の欄は好きなように変更します。
デザインやサイズも指定して、［設定を終了し、コードを生成する］をクリックすると
HTMLコードが生成されます。これをコピーしておきます。
次に、Jimdoページのお好きな位置で［＋］ボタンを押して［ウィジェット/HTML］を選択し、
先ほどコピーしたHTMLコードを貼りつけて保存すれば完了です。
◎ 過去にFacebookに貼付けたURLの表示をリフレッシュ
以前にFacebookに貼ったURLは、古い内容で表示されることがあります。
「オブジェクトデバッカー」でFacebookの持っているキャッシュを削除します。
http://developers.facebook.com/tools/debug
例えば、パスワード保護をしている時期にFacebookに貼った事があると、
その状態をFacebookが覚えています。
上記ページのもう一度URLを入力してあげると、再度取得にいってくれます！
◎ ページタイトル＆詳細の設定（SEO対策）
検索エンジン対策（SE0）として、ページタイトルやページ内容の詳細を設定します。
「メニュー」 →「設定」→「検索エンジン」から
＜ページタイトル＞
・ページタイトル：ホームページのタイトルとキーワードを入力
・ホームページタイトル：ブランクのまま（デフォルトで「ホーム」となっています）
＜ページ内容詳細＞
紹介文やサービス内容を入力
＜タグ＞
関連するキーワードを入れます。
但しキーワードが多過ぎると逆にスパム扱いされることもあるらしいので注意。
Jimdoの検索エンジン対策（SEO）ページもご参考に。
◎ リンク先ホームページのサムネイル作成
参考ホームページ（Jimdo導入事例）のように、外部ホームページの紹介＆リンクの
サムネイル作成方法です。
他にも同じようなサービスはあると思いますが、ここでは
「HeartRails Capture」のサムネイル画像作成サービスを使っています。
http://capture.heartrails.com/help/make_thumbnail
リンクさせたいホームページのURLを入れると一瞬でサムネイルが作れます。
固定サイズの他、自分でサイズや体裁を指定することもできます。
事例のページでは、サイズを横280px 縦200px、影なし、縁なし、角丸なしで指定して
『貼り付け用タグ』をコピーしてHTMLに貼付けました。
リンクも自動的に貼られます。
◎ faviconの作り方
１．ペイント、Naverフォトエディター、Open Pixlr Editorなどの画像加工アプリを使って160x160ピクセル位のfaviconの素となるPNGファイルを作成する。例えば homepage-otasuke.png
２．このPNGファイルを、Web上のFaviconConverter（例えば http://favicon.qfor.info/c/）で32x32ピクセルのicoファイルに変換する。ファイル名は homepage-otasuke.ico に変わる。
３．jimdoで作ったホームページ（例えば、http://shukuran.jimdo.com）右上の「設定」を開くと上から３段目に「ウエブサイト」というメニューがある。この中の「ファビコン」というサブメニューをクリックする。
４．先ほど用意した icoファイルをアップロードし、「アイコン作成」ボタンをクリックすると、faviconが付加される。
◎ ページ内リンク
縦長ページでは、上部に横並び、または縦並び（リスト）でメニューを用意し、ページ内リンクさせると目的の記事にアクセスし易いです。以下にJimdoの「文章」を使ったページ内リンク方法を示します。
基本は、リンク先の文字にidを付け、リンク元の文字からそのidに#を付け参照します。具体的には、リンク先文字を<p id=”abc”>リンク先文字</p>とし、リンク元文字は<a href=”#abc”>リンク元文字</a>とします。リンク元文字がリストや表のコラムでも同じです。
リンク先文字を見出し文字にしたい時は、<p id=”abc”>リンク先文字</p>の替りに、<h2 id=”abc”>リンク先文字</h2>とします。
例としてリンク元文字がリストの「・あいうえお」、リンク先文字が見出しの「アイウエオ」でidをaiueoとした時のhtmlは以下になります。
| html（リンク無しの状態） |
|
html（ページ内リンクを付けた時） | |
|
リンク元 |
<ul> <li>あいうえお</li> </ul> |
⇒⇒ |
<ul> <li><a href="#aiueo">あいうえお</a> </ul> |
| リンク先 | <p>アイウエオ</p> |
|
<h2 id="aiueo"あいうえお</h2> |
◎ Jimdoページのバックアップ
１．以下のダウンロードサイトから、HTTrack Website Copierをダウンロードし、パソコンにインストールする。32bit、64bit、32bit USB、64bit USBに分かれているので、使用パソコンに合わせる。言語を日本語にする。
ダウンロードサイト ⇒ http://www.httrack.com/page/2/en/index.html
２．HTTrackを開き、新規プロジェクト欄にプロジェクト名を入れる。homepage-otasuke、shukuranなど、ホームページの内容に沿ったプロジェクト名にする。プロジェクトカテゴリー欄はコピーするホームページ数が多い時の分類用。空欄でも良い。
３．基準パス欄は、右端のボタンをクリックし、コピーしたホームページのインストール先フォルダーを選択する。例えば、Dropbox内に作った jimdo_backup フォルダーを選択。
４．「次へ」ボタンをクリックすると、Webアドレス記入欄が現れるのでコピーするホームページのURLを記入する。例えば、http://shukuran.jimdo.com それ以外の欄はそのままで良い。
５．「次へ」ボタンをクリックすると、確認画面が表示される。特に変更せず、「完了」をクリックする。
６．「進行中」画面が表示され、自動的に指定フォルダーへのコピーが始まる。
７．コピーが終わると、「サイトのコピー（ミラー）完了」画面が表示される。ここで「ミラーされたサイトのブラウズ」をクリックすると、パソコンにコピーされたホームページが表示される。
８．別のホームページをコピーする時は「完了」をクリックする。コピーを終了する時は「終了」をクリックする。
９．後で、コピーされたホームページを見る時は、指定フォルダー内に自動的に作られたプロジェクト名のフォルダー（例えば shukuran）内のindex.html をクリックする。
１０．ホームページを変更し、上書きコピーする時は、whttファイル（例えば shukuran.whtt）を開き、上の操作５～８を実行する。
◎ 写真に日付、場所、コメントを挿入
フォトギャラリーで数10枚の写真を投稿する際、それぞれの写真を何時、何処で撮影したかを写真上に表示したいことがあると思います。（旅行写真など）
そんな時はフリーソフトのDatePlusを使うと便利です。日付はExif情報から自動表示、場所は記録が必要な写真毎に１枚ずつ書いていきます。日付は年月日、年月日＋時刻など選択出来ます。フォント、サイズ、色、背景色、表示位置は自由に選択出来ます。
DatePlusの使い方は以下です。DatePlusでは写真と文字列が別々に保存されており文字列の内容や配置場所を何度でも修正できます。
① 日時を選択
② 日時のスタイルを選択 yyyy/mm/dd hhmmだと年月日 時刻
③ 文字を選択
④ 年月日時刻の後に撮影場所、コメントなど書く
⑤ 更新を押すと内容が決まり、
⑥ 文字列の一覧にその内容が表示される。但し、何度でも修正できる
⑦ 写真画面をクリックし、文字列挿入場所を決める
⑧ 名前を付けて保存でパソコンの適当な場所に写真＋文字列を保存する。
◎ 無料素材（イラスト、写真、地図など）
■イラストAC
http://www.ac-illust.com/
■写真AC
http://www.photo-ac.com/jp/
■シルエットAC
http://www.silhouette-ac.com/
■地図AC
http://www.map-ac.com/
■イラストわんパグ（かわいい動物イラスト）
■イラストわんパグ（かわいい人物イラスト）
■Gimp （フォトショップに近い）
http://www.geocities.jp/gimproject/gimp2.0.html
■エクスプローラー風の画像ビューワー
http://www.forest.impress.co.jp/lib/pic/piccam/picviewer/vix.html
■アクセスカウンター（FC2カウンター）
◎ Word/PPT/PDF等の画像変換
■Word／PPT／PDFなどを画像化してJIMDOの写真やフォトギャラリーで表示させたい時のやり方。
今までは、ファイルをGoogle共有Docsにしたのですが、次のやり方でもできました。
■こんな時に役立つ
Google 共有Docsnoライセンス許諾がちょいといやらしいので使いたくないとき。
＜参考：Googleの利用許諾条項＞
『・・このライセンスでユーザーが付与する権利は、本サービスの運営、プロモーション、
改善、および、新しいサービスの開発に目的が限定されます。・・』とあるので基本的には著作権を侵害しないと思います。あくまで基本的には、です。
■Wordファイル等を適切な画像ファイルに変換してフォトギャラリーでスライドショー表示をさせたいときの、フリーソフトの紹介。
例えば、Wordファイルの場合は、いったんPDFに変換出力してから、下記の変換ソフトを
使ってPDFをjpeg変換してから、フォトギャラリーに登録しました。 ＋＋
■フリーソフト： PDF-XChange Viewer
＜exe.ダウンロードする場所（窓の杜） http://www.forest.impress.co.jp/lib/offc/document/pdf/pdfxchange.html
＜使い方＞
１）PDFファイルを読む
２）ファイル⇒エクスポート⇒イメージへエクスポート
３）画像形式（JPEG）、格納先、ファイル名を指定して
画面下のエクスポートをクリックする。
＋＋
◎PDFファイルをJIMDOのｳｲｼﾞｪｯﾄ/HTML機能を使って表示させる方法
（JIMDO利用方法の講座資料はこの方法を使っています）
１）PDFファイルを作ります。
２）グーグル共有ドキュメントでPDFファイルをアップロードします。
３）共有ドキュメントとなったＰＤＦファイルの＜ファイル＞から＜このＰＤＦファイルを埋め込む＞をクリックします。埋め込みコードが表示されるのでコピーし、ＪＩＭＤＯの＜ｳｲｼﾞｪｯﾄ/HTML＞を選んで埋め込みコードを貼り付けます。
＋＋
◎ 画像系フリーソフトで便利そうなもの
フリーソフト、便利そうなもの・・・
●PDFや画像の切り取りツール（Windows7以降では標準搭載の snipping_tool）
http://www.softonic.jp/s/snipping-tool
●フリー写真素材
http://www.photo-ac.com/jp/
●切り抜き
http://www.bels.jp/mybels/
●スライドショー
http://www.anvsoft.jp/download-photo-flash-maker-free.html
●画像編集加工
http://www.bannerkoubou.com/
●ロゴ
http://freesoft-100.com/pasokon/viewer.html
●絵画作成
http://www.esola.co.jp/
●画像ソフトライブラリー
http://www.forest.impress.co.jp/lib/pic/piccam/paint/
http://freesoft-100.com/pasokon/viewer.html
●画像編集
今回の講座テーマは画像編集。無料ソフト pixlr。
クラウド形（インストールなし、ネットで編集）
下記の画像の右下の風景が編集前、左上が編集後の例
＊その他の参考ツール紹介
画像（ヘッダー、バナー）のデザイン
フリーテクスチャー素材
背景イラスト
http://www.backgroundlabs.com/
◎ 画像を編集する PIXLRツール
無料でも案外カンタン画像編集使い方サイトも便利。
http://pixlr.com/editor/ 画像編集ツール
http://ameblo.jp/hcak777/entry-10860671338.html pixlr使い方
画像の右下が編集前素材
画像の左上が編集後（明るさ、グラデーション、テクスト挿入など）
◎ JimdoにRSSフィードを表示する
◎買いパラで、サイトの重さをチェックする
光回線を利用していると、意外と重いサイトになっている事に気づかない。
そんな時、このサイトは役立つかもしれません。
http://www.kaipara.com/cgi-bin/size_check.cgi
■ファイルサイズのチェック（試験運用中）
チェックしたいサイトのＵＲＬを入力して下さい。
ホームページ表示に必要な合計サイズ（byte）と表示時間の判定をします。
◎かんたん無料でQRコード作成する
無料で簡単にQRコードを作成できるサイトを紹介します。
ホームページやチラシなどで、URLアドレス、携帯へのメールアドレス登録、メール問い合わせ、地図表示などを埋め込む（あるいは印刷）すると便利です。
＜QRのススメ＞無料サイト
＊QR画像はgif形式Uデフォルト）またはjpeg形式（選択）できます。
下記QR画像は作成サンプルです。お試しください。
**上記の紹介ツールのほか、少し上級には下記も役立ちます。
◎無料アクセスカウンタの設定方法
＞無料版JIMDOには標準で設定機能がないので、
今回は、次のサイトで作って見ました。
http://access-analyze-counter.com/
＞表の中で適当な選択（設定：カウンタの形、アクセス数、初期値）をして、ターゲットHPのURLを設定。結構分かりやすいです。
＞カウンタ作成をクリックすると埋め込みHTMLが表示されるので、これをコピーします。
＞ターゲットHPをログインして、
JIMDO機能＜ウイジェット／HTML＞を選択して、
先ほどの埋め込みHTMLを貼りつけて、保存
＞カウンタ表示を確認するには、
いったんログアウトまたは、プレビューします。
＞やり直しできるのでお試しください。
