1. Heartbeat infoテーマの設定・使用方法
Movable Type用旅行ブログテーマ

2. レスポンシブ・ウェブ・デザインに対応した
Movable Typeのテーマ
http://www.heartbeat.info

3. INDEX
Heartbeat.infoの特徴
テーマを設定する前に
テーマのダウンロードとアップロード
テーマの適用
ウェブサイトの設定
ブログの設定
ブログ記事一覧（カテゴリーページ）の設定
ブログ記事について
カスタマイズについて

4. Heartbeat.infoテーマの特徴
旅行ごとにブログを作成することで、旅行記をまとめた個人のポー
タル風サイトが作れます。
レスポンシブ・ウェブ・デザインに対応したサイトが構築できます。
ウィジェットセットの設定でページ内レイアウトをドラッグ＆ドロッ
プで自由に設定・変更できます。
簡単にGoogleマップとストリートビューの表示ができます。
Facebookウィジェット、Twitterウィジェットなどのブログパーツ
の埋め込みが簡単にできます。
アフィリエイト広告の埋め込みが簡単にできます。
自動的にOGPの設定やサイトマップXMLが作成されます。
Lightboxを利用した写真ギャラリーの設置やYoutubeなどの動画の
埋め込みが簡単です。

5. テーマを設定する前に…(1)
こちらの説明書はインストールしたMovable Typeのウェブサイトと
ブログの設定が完了している状態からheartbeat.infoのテーマを適用
して設定を進めていくようになっています。
こちらのテーマはシステムにカスタムフィールドを作ります。こちら
のテーマを適用させると、すべてのブログにシステムに作成されてい
るカスタムフィールドが追加されます。

6. テーマを設定する前に…(2)
heartbeat.infoのテーマを使う場合は、以下のプラグインが必要になりま
す。事前にインストールを完了しておいてください。
また、各プラグインの使用にあたっての注意事項をよくご確認ください。
SysCFImExporter
藤本 壱 様
http://www.h-fj.com/blog/archives/2010/02/25-214442.php
ImageUploadUtility
ジャクスタポジション 様
http://skeleton.juxtaposition.jp/image-upload-utility/
LastRebuildDate
tokiwatch 様
https://github.com/tokiwatch/LastRebuildDate
Split
小粋空間 様
http://www.koikikukan.com/archives/2009/01/20-015555.php
Location
タケユー・ウェブ 様
http://takeyu-web.com/placements/12/articles/21

7. テーマのダウンロードとアップロード（1）
heartbeat.infoのテーマは全部で３種類あります。
Heartbeat.info Webサイト [必須]
出力ファイル名：mt-theme-heartbeat-info-website
Heartbeat.info 旅行記ブログ [任意：旅行記ブログ用]
出力ファイル名：mt-theme-heartbeat-info-travelog
Heartbeat.info ノーマルブログ [任意：旅行記以外のブログ用]
出力ファイル名：mt-theme-heartbeat-info-normal-blog

8. テーマのダウンロードとアップロード（2）
heartbeat.infoの
テーマはGitHubから
ダウンロードできるよ。
https://github.com/applebeat

9. テーマのダウンロードとアップロード（3）
「https://github.com/applebeat」にアクセスしてください。
テーマは「mt-theme-heartbeat-info」です。
直接リンクはこちらです。
https://github.com/applebeat/mt-theme-heartbeat-info

10. テーマのダウンロードとアップロード（4）
Download ZIPからダウンロードします。

11. テーマのダウンロードとアップロード（5）
「mt-theme-heartbeat-info-master.zip」がダウンロードさ
れます。

12. テーマのダウンロードとアップロード（6）
ダウンロードしたZIPファイルをダブルクリックすると「mt-theme-
heartbeat-info-master」というフォルダができます。

13. テーマのダウンロードとアップロード（7）
mt-theme-heartbeat-info-masterの中の3つのフォルダがそれぞれ
ウェブサイト用、旅行記ブログ用、ノーマルブログ用のテーマになりま
す。README.mdはサイト構築には使いません。
mt-theme-heartbeat-info-normal-blog
mt-theme-heartbeat-info-travelog
mt-theme-heartbeat-info-website

14. テーマのダウンロードとアップロード（8）
3つのフォルダのうち「mt-theme-heartbeat-info-website」は
必須のテーマになります。
「mt-theme-heartbeat-info-travelog」は旅行記ブログ用の
テーマです。
「mt-theme-heartbeat-info-normal-blog」はノーマルブログ
用のテーマです。
旅行記ブログ用とノーマルブログ用は必須ではありませんが、3つの
フォルダをアップロードすることをおすすめします。
ノーマルブログ用[任意]
旅行記ブログ用[任意]
WebSite用[必須]

15. テーマのダウンロードとアップロード（9）
FTPソフトなどを使って「mt-theme-heartbeat-info-website
」、「mt-theme-heartbeat-info-travelog」、「mt-theme-
heartbeat-info-normal-blog」をサーバーのmt.cgiと
同じディレクトリにある「themes」にアップロードします。
themes

16. Heartbeat.infoテーマの適用

17. テーマの適用
テーマのアップロード後にシステムの管理画面の「デザイン >
テーマ」のページを開くとアップロードしたテーマが一覧に表示
されています。
注）上記の画像はテーマを適用した状態です。適用前は「利用している
テーマ」ではなく「インストールされているテーマ」に表示されます。

18. テーマの適用 -ウェブサイト編-
ウェブサイトの管理画面から「デザイン > テーマ」で
テーマの一覧を表示させます。
「Heartbeat.info ウェブサイト」の右端にある適用ボ
タンをクリックしてください。
テーマの適用が完了すると再構築をしてくださいと表示されますが、初回は再構築はしません。
ほかの設定が終了してから再構築してください。

19. テーマの適用 -ブログ編-
ブログの管理画面から「デザイン > テーマ」でテーマ
の一覧を表示させます。
ブログで使えるのは「Heartbeat.info 旅行記ブロ
グ」と「Heartbeat.info ノーマルブログ」です。どち
らかの右端にある適用ボタンをクリックしてください。
テーマの適用が完了すると再構築をしてくださいと表示されますが、初回は再構築はしません。
ほかの設定が終了してから再構築してください。

20. ウェブサイトの設定

21. ウェブサイトの設定
MTの管理画面で「設定 > 全
般」のページを開き下記の項
目を入力・編集します。
名前（入力済み）
説明
ヘッダーの背景画像（ウェブサイト用）
ヘッダー画像のキャプション
プロローグ（ウェブサイト）
名前の項目以外は任意です。
サイトが完成してからでも入
力・変更できます。

22. ウェブサイトの設定
ウェブサイトトップページの各項目は右図の通りです。
名前
説明
ヘッダーの背景画像（ウェブサイト用）
ヘッダー画像のキャプション
プロローグ（ウェブサイト）
ヘッダーの背景画像
（ウェブサイト用）について
名前
説明
ヘッダー画像のキャプション
ヘッダーの背景画像（ウェブサイト用）
プロローグ（ウェブサイト）
ヘッダーの背景画像（ウェブサイト用）
メインコンテンツ右サイドバー
の項目には画像のURLを入力してくだ
さい。設定しない場合はサンプルの画像
が表示されます。
ヘッダー画像はアイテムに登録をしておくと管理がしやすいと思います（次ページ参
照）。また、画像が幅 1000ピクセル／高さ 300ピクセル以下の場合は縦横比を保っ
たまま自動的に拡大されます。

23. ウェブサイトの設定
ヘッダー画像について
ヘッダーに使う画像がある場合は事前
にアイテムへ登録して、その画像の「ア
イテムの編集」ページで画像のURLを
準備しておいてください。
画像のURLはアイテムの
埋め込み欄にあるURLで
す。
この画像はウェブサイト
のOGP（Open Graph
Protocol）のog:imageと
しても使われます。

24. ウェブサイトの設定
「設定 > 全般」のページでは下記の項目も
設定できます。すべて任意です。
Google Analytics
Facebook Widget
Facebook Link URL
Twitter Widget
Twitter Link URL
広告（右サイドバー用）01
広告（右サイドバー用）02
広告（メインコンテンツ用）01
広告（メインコンテンツ用）02
フリースペースウェブサイト01
フリースペースウェブサイト02
フリースペースウェブサイト03
Zenback

25. ウェブサイトの設定
Google Analytics、Zenbackには各サービ
スより取得したソースをそのままコピー＆ペー
ストしてください。
Google Analytics
Facebook Widget
Facebook Link URL
Twitter Widget
Twitter Link URL
広告（右サイドバー用）01
広告（右サイドバー用）02
広告（メインコンテンツ用）01
広告（メインコンテンツ用）02
フリースペースウェブサイト01
フリースペースウェブサイト02
フリースペースウェブサイト03
Zenback

26. ウェブサイトの設定
Facebook WidgetとFacebook Link URL
の入力は任意です。
Facebook WidgetとFacebook Link URL
は両方とも入力した場合と、どちらか一方
を入力した場合で表示方法が変わります。
詳細は次のページをご覧ください。
Google Analytics
Facebook Widget
Facebook Link URL
Twitter Widget
Twitter Link URL
広告（右サイドバー用）01
広告（右サイドバー用）02
広告（メインコンテンツ用）01
広告（メインコンテンツ用）02
フリースペースウェブサイト01
フリースペースウェブサイト02
フリースペースウェブサイト03
Zenback

27. Facebook WidgetとLink URLの設定
Facebook Widgetのみを入力した場合
→右のFacebook Widgetが常に表示されます。
Facebook Link URLのみを入力した場合
→右のFacebook Link URLが常に表示されま
す。
Facebook WidgetとFacebook Link URLの
両方を入力した場合
→ウィンドウの横幅が600ピクセルより大きい
場合はFacebook Widgetが、600ピクセル以下
の場合はFacebook Link URLが表示されます。
メディアクエリーで横幅が800ピクセルと600ピ
クセルにブレークポイントが設定してあります。
Facebook Widget
Facebook Link URL
ウェブサイトの設定

28. ウェブサイトの設定
Twitter WidgetとTwitter Link URLの入力
は任意です。
Twitter WidgetとTwitter Link URLは両方
とも入力した場合と、どちらか一方を入力
した場合で表示方法が変わります。
詳細は次のページをご覧ください。
Google Analytics
Facebook Widget
Facebook Link URL
Twitter Widget
Twitter Link URL
広告（右サイドバー用）01
広告（右サイドバー用）02
広告（メインコンテンツ用）01
広告（メインコンテンツ用）02
フリースペースウェブサイト01
フリースペースウェブサイト02
フリースペースウェブサイト03
Zenback

29. Twitter WidgetとLink URLの設定
Twitter Widgetのみを入力した場合
→右のTwitter Widgetが常に表示されます。
Twitter Link URLのみを入力した場合
→右のTwitter Link URLが常に表示されます。
Twitter WidgetとTwitter Link URLの両方を
入力した場合
→ウィンドウの横幅が600ピクセルより大きい
場合はTwitter Widgetが、600ピクセル以下の
場合はTwitter Link URLが表示されます。メディ
アクエリーで横幅が800ピクセルと600ピクセル
にブレークポイントが設定してあります。
Twitter Widget
Twitter Link URL
ウェブサイトの設定

30. ウェブサイトの設定
広告の項目にはGoogle AdSense等のア
フィリエイトのソースを入力してください。
右サイドバー用の最大横幅は390ピクセル
です。
メインコンテンツ用の最大横幅は580ピク
セルです。
レスポンシブ・ウェブ・デザインに対応し
た広告がある場合は、そちらを使うことを
お勧めします。
Google Analytics
Facebook Widget
Facebook Link URL
Twitter Link Widget
Twitter URL
広告（右サイドバー用）01
広告（右サイドバー用）02
広告（メインコンテンツ用）01
広告（メインコンテンツ用）02
フリースペースウェブサイト01
フリースペースウェブサイト02
フリースペースウェブサイト03
Zenback

31. ウェブサイトの設定
フリースペースにはメインコンテンツ、右サ
イドバーに掲載したい内容をご記入くださ
い。
入力するテキストはHTMLで書いてくださ
い。
例）改行をする場合は<br>タグを使う
etc…
Google Analytics
Facebook Widget
Facebook Link URL
Twitter Link Widget
Twitter URL
広告（右サイドバー用）01
広告（右サイドバー用）02
広告（メインコンテンツ用）01
広告（メインコンテンツ用）02
フリースペースウェブサイト01
フリースペースウェブサイト02
フリースペースウェブサイト03
Zenback

32. ウェブサイトの設定
フリースペースにコンテンツを追加する場合、下記のフォーマットを使うことで
デザインを揃えることができます。ノーマルブログもこちらのフォーマットを使
えます。オレンジ色の部分がテンプレートになります。
タイトルあり・リスト
<div class="widget">
<h3 class=“widget-header”>
タイトル</h3>
<div>
コンテンツ
</div>
</div>
タイトルなし
<div class="widget">
<div>
コンテンツ
</div>
</div>
リストマーカー用マークアップ
<ul class=“listimg”>
<li>リスト1</li>
</ul>

33. ウェブサイトの設定
ウィジェットセットの設定

34. ウェブサイトの設定
ウェブサイトのウィジェットセットの設定
メインコンテンツ
（ウェブサイト）
右サイドバー
（ウェブサイト）
検索結果・タググラウド検索結果ページの
右サイドバー

35. ウェブサイトの設定
ウィジェットセットの設定
管理画面の「設定 > 全般」で入力した
「Facebook Widget」や「広告（メイン
コンテンツ用）01」、その他の項目をサイ
トに反映させるにはウィジェットセットに
必要なものをインストールする必要があり
ます。
管理画面の「デザイン > ウィジェット」の
ページで各ウィジェットをウィジェット
セットに設定してください。
ブログも同じように設定する必要がありま
す。
Facebook（ウェブサイト）
Twitter Link（ウェブサイト）
ウェブページ一覧
サイト内検索
タグクラウド
フリースペースウェブサイト01
フリースペースウェブサイト02
フリースペースウェブサイト03
ブログ一覧[旅行記以外]
広告（メインコンテンツ用）01
広告（メインコンテンツ用）02
広告（右サイドバー用）01
広告（右サイドバー用）02
新着情報
旅行記一覧
購読

36. ウェブサイトの設定
ウィジェットセットの設定
ウェブサイトの管理ページから「デザイン > ウィジェット」でウェブサイ
トウィジェットの管理ページを表示させます。
下記のウィジェットセットに表示させたいウィジェットを登録します。
ウィジェットセットにインス
トールされたウィジェット
ウィジェットセット

37. ウェブサイトの設定
ウィジェットセットの設定
「利用可能」にあるウィジェットを「インストール済み」にドラッグ
＆ドロップすることでウィジェットセットにインストールできます。
アンインストールしたい場合は「インストール済み」から「利用可能」
の方へドラッグ＆ドロップします。最後に変更を保存してください。

38. ウェブサイトの設定
プラグインの設定
下記のプラグインの設定をしてください。
ImageUploadUtility
MultiBlog
お問い合わせフォームについて
詳細は次ページからご覧ください。

39. ウェブサイトの設定
ImageUploadUtilityの設定（1）
イメージギャラリーで使う画像
のサイズを目安に長辺の最大値
を設定してください。
必要に応じて選択してください。
必要に応じて選択してください。

40. ウェブサイトの設定
ImageUploadUtilityの設定（2）
イメージギャラリーで使う画像
のサイズを目安に長辺の最大値
を設定してください。
長辺の最大値はギャラリーに使いたい画像サイズを目安にしておくことをお勧めし
ます。また、ヘッダー画像に使う場合は横幅に1000ピクセルが必要になります。
また、こちらの説明画像のように1200ピクセルでアップロードした場合の画像を
ブログ記事に使う場合でも、画像を縮小する必要はありません。MTEntryBody、
MTEntryMore、MTPageBody、MTPageMoreに「image_max_size=“548”」
が設定してあるので、長辺が548ピクセルより大きな場合は自動的に548ピクセル
に縮小されます。
注）アイテムに登録する画像のサイズが大きすぎると、ブログ記事の保存や再構築
の際に、サーバーのスペックによってサーバーエラーになる場合があります。

41. ウェブサイトの設定
ImageUploadUtilityの設定（3）
ブログ記事の作成では横幅1000
ピクセルのまま挿入してますが、
公開する際に548ピクセルに縮
小されます。
テンプレートは<$MTEntryBody image_max_size=“548”$>と設定してあるので、
ブログ記事の公開時に画像は長辺は548ピクセルに縮小されます。

42. ウェブサイトの設定
MultiBlogの設定（1）
旅行記ブログ、ノーマルブログが更新された際に、ウェブサイトのトップページが再構
築されるように設定します。
「再構築トリガーを作成」から設定します。
再構築トリガーを設定してください。

43. ウェブサイトの設定
MultiBlogの設定（2）
ポップアップされたウィンドウで設定
します。
右図では「ウェブサイト内のすべての
ブログ」を対象にして、いずれかのブ
ログで「記事」又は「ウェブページ」
を公開した際にウェブサイトのイン
デックステンプレートが再構築され
るようにしています。
再構築トリガーは複数の設定ができ
るので、ブログごとに設定することも
できます。

44. ウェブサイトの設定
お問い合わせフォームについて
こちらのテーマではコメントのフォームを利用した簡易のお問い合わせ
フォームを作成可能です。
この簡易お問い合わせフォームはコメント機能を使っているので仕様変
更等で使えなくなる場合があります。
お問い合わせフォームを積極的に使いたい方は、他のお問い合わせフォー
ムサービス（Googleドライブのフォーム等）をお使いになることお勧
めします。
簡易お問い合わせフォームを利用するには、簡易お問い合わせフォーム
に使うウェブページの作成が必要です。詳しい作成方法は次ページをご
覧ください。

45. ウェブサイトの設定
お問い合わせフォームの作成（1）
ウェブサイトの「設定 > コミュニケーション」の「コメントポリシー」
は「自動的に公開しない」に設定してください。

46. ウェブサイトの設定
お問い合わせフォームの作成（2）
お問い合わせフォーム用のウェブページを作成してください。

47. ウェブサイトの設定
お問い合わせフォームの作成（3）
作成したお問い合わせフォーム用のウェブページの編集画面で右サイド
バーのコメント欄で「コメントを許可」にチェックを入れてページを公
開してください。

48. ウェブサイトの設定は以上です。

49. ブログの設定

50. ブログの設定
MTの管理画面で任意のブロ
グを選択して「設定 > 全般」
のページを開き下記の項目を
入力・編集します。
名前（入力済み）
説明
ヘッダーの背景画像
プロローグ
名前の項目以外は任意です。
サイトが完成してからでも入
力・変更できます。

51. ブログの設定
各ブログの管理画面にて「設定 > 全般」
で全般設定ページで各項目を入力して
ください。
名前（入力済み）
説明
ヘッダーの背景画像
プロローグ
ヘッダーの背景画像について
名前
説明
ヘッダーの背景画像
プロローグ
メインメニュー
ヘッダーの背景画像の項目には画像の
URLを入力してください。設定しない
場合はサンプルの画像が表示されます。
WebSiteの設定時と同様にアイテムに画像を登録しておくと管理がしやすいです。
また、画像が幅 1000ピクセル／高さ 250ピクセル以下の場合は縦横比を保ったま
ま自動的に拡大されます。

52. ブログの設定
各ブログの管理画面にて「設定 > 全般」で表示された全般設定ペー
ジにある「旅行記ですか？」「新着情報欄に含める？」を設定し
てください。
詳細は次ページより

53. ブログの設定
「旅行記ですか？」について
旅行記ブログは「旅行記である」を選択してく
ださい。
「旅行記である」を選択した場合は、ウェブ
サイトのトップページの「Travel │旅行記」
にリンクが作られます。
「旅行記ではない」を選択するとリンクは作
られません。
「準備中」を選んだ場合も「Travel │旅行
記」にリンクは作られません。
「旅行記ではない」を選択したブログのリンク
はウェブサイトの「ブログ一覧[旅行記以外]」
というウィジェットを使って表示させることが
できます。

54. ブログの設定
「新着情報に含める？」について
「新着情報に含める」を選択したブログ
に新規投稿すると、新規投稿したブログ
記事がウェブサイトのトップページの
「What’s New! │新着情報」に表示
されます。
「新着情報に含めない」を選択したブロ
グのブログ記事は「What’s New! │新
着情報」には表示されません。

55. ブログの設定
ウェブサイトトップページの「Travels│旅行記」のリンク画像（1）
ウェブサイトトップページの「Travels│旅行記」に使用する画像を設定して
ください。こちらに設定する画像は各ブログごとのアイテムに登録してある
必要があります。設定方法は次ページをご覧ください。

56. ブログの設定
ウェブサイトトップページの「Travels│旅行記」のリンク画像（2）
「Travels│旅行記」のリンク画像
にしたい画像の「アイテムの編集」
画面を開きます。
タグの項目に「@blogmainimg」
を設定してください。
こちらが未設定の場合は、下記の準
備中の画像が表示されます。

57. ブログの設定
「ウィジェットセット」について
ブログのトップページには下記の2つのウィ
ジェットセットが設定されています。
ブログのトップページ01
ブログのトップページ02
ブログのトップページ01
ブログのトップページ02
ウィジェットを上記2つのウィジェットセット
に設定することで、ブログのトップページにコ
ンテンツを追加できます。
ウィジェットセットにウィジェットをインストー
ルする方法はウェブサイトの設定時と同じです。

58. ブログ記事一覧(カテゴリーページ)の設定（1）
MTの管理画面で任意のブロ
グを選択して「記事 > カテゴ
リ」のページを開き下記の項
目を入力・編集します。
名前（入力済み）
説明
カテゴリーサブタイトル
カテゴリーのメインイメージ
名前の項目以外は任意です。
サイトが完成してからでも入
力・変更できます。

59. ブログ記事一覧(カテゴリーページ)の設定（2）
名前
カテゴリーサブタイトル
説明
旅行の動画（カテゴリー別）
カテゴリーサブタイトル
「カテゴリーのメインイメージ」はブログのトップページ

60. ブログ記事一覧(カテゴリーページ)の設定（3）
「公開日」について
ブログトップページ
カテゴリの編集の「カテゴリーのメインイメージ」はブログのトップペー
ジのリンク画像にも使われます。カテゴリーサブタイトルはトップペー
ジ、カテゴリー一覧ウィジェット等のカテゴリー名の下に表示されます。

61. ブログ記事一覧(カテゴリーページ)の設定（4）
「ウィジェットセット」について
ブログ記事一覧ページ（カテゴリーペー
ジ）には以下の3つのウィジェット
セットが設定されています。
ブログ記事一覧の
右サイドバー
ブログ記事一覧のメイン部分01
ブログ記事一覧のメイン部分02
ブログ記事一覧メイン部分01
ブログ記事一覧メイン部分02
ブログ記事一覧の右サイドバー
ウィジェットを上記3つのウィジェッ
トセットに設定することで、ブログ記
事一覧（カテゴリーページ）にコンテ
ンツを追加できます。

62. ブログ記事一覧(カテゴリーページ)の設定（5）
「公開日」について
旅行の動画（カテゴリー別）にはYouTubeなどの動画配信サービスなどの動画を埋
め込むソースを取得して入力してください。
埋め込み用ソースを取得する際、右サイド
バーで使う場合は横幅を380ピクセル以下
にしてください。
ただし、iframeタグで埋め込む場合はレ
スポンシブ・デザインに対応しているので
横幅は自動的に調整されます。（iframe
タグにwidthとheightが設定されている必
要があります。）
カテゴリーに関係する動画をまとめたもの
を想定しています。→YouTubeの再生リ
ストで複数の動画をまとめたものなど。

63. ブログ記事について

64. ブログ記事について
「記事のメイン画像」について
ブログ記事の「記事の編集 」ページにて
「記事のメイン画像」を設定してくださ
い。
「記事のメイン画像」を設定するとブログ
記事の一覧ページ（カテゴリーページ）の
サムネールとして使われます。設定をしな
い場合は、ブログ記事に設定されているア
イテムが自動的に設定されます。ブログ記
事のアイテムがない場合は、カテゴリーの
メイン画像が設定されます。
この画像は各ブログ記事ページのOGP
（Open Graph Protocol）のog:imageの
画像としても使われます。

65. ブログ記事について
「Googleマップとストリートビュー」について
地図とストリートビューを表示させたい場合は「位置情報」を「有効」にしてマーカーを
設定するか、「Googleマップ＆ストリートビュー用北緯東経」を設定してください。
詳細は次ページをご覧ください。「位置情報 > 有効」または「Googleマップ＆ストリート
ビュー用北緯東経」を設定しない場合は、地図及びストリートビューは表示されません。
「位置情報 > 有効」と「Googleマップ＆ストリートビュー用北緯東経」の両方が設定され
ていた場合、「位置情報 > 有効」が優先されます。
「ストリートビュー用方角」を設定するとストリートビューの方角を設定できます。

66. ブログ記事について
「位置情報」の設定
位置情報はプラグイン「Location」により追加されています。
有効／無効の選択、マーカーの位置を設定してください。
マーカーを目的地に設定する
有効にする

67. ブログ記事について
「Googleマップ＆ストリートビュー用北緯東経」の設定
「位置情報」を有効にしている場合は設定する必要はありません。
Googleマップ上で地図の中心にしたいところで右ク
リックをしてメニューから「この場所について」を選
択します。
左上に表示された北緯東経をコピー
します。北緯東経をクリックする
と、Googleマップ上にマーカーが
表示されます。
「Googleマップ＆ストリートビュー用北緯
東経」にペーストします。37.784423,-122.432884

68. ブログ記事について
「ストリートビュー用方角」の取得
「ストリートビュー用方角」はストリート
ビューの表示方角を設定します。
（未設定の場合は0°になります。）
この方角を求める方法は、目的地でストリートビューを表示させて、ストリー
トビューを操作して表示させたい方角にあわせます。
ペグマン、もしくは方位磁石の方向から導きだします。下記の画像はすべて約
135°になります。

69. ブログ記事について
「関連サイトリンク集」の設定
「関連サイトリンク集」を設定すると、ブログ記
事に外部サイトへのリンクを設定できます。
設定はURLとリンク先タイトルを「 , 」で区切っ
て「URL , リンク先タイトル」を1行で書き、1件
ごとに改行します。
リンク先タイトルには半角の「 , 」は使うことは
できません。

70. ブログ記事について
「公開日」について
「記事の編集」ページの「公開日」は「新規エ
ントリー」をクリックした時点の日時が挿入さ
れますが、「公開日」をブログ記事の内容に合
わせて変更することで、ブログを旅行の行程に
合わせることができます。
旅行中にブログが書けない場合なども、こちら
を変更することで、ブログの日時は旅行の行程
に合わせることができます。
例）帰国後にブログを書く場合など。

71. ブログ記事について
「Gallery│ギャラリー」について
ブログ記事の「記事の編集 」ページの「記
事アイテム」に表示された画像はすべて
「Gallery│ギャラリー」に表示されます。
また、これらの各画像の「アイテムの編集」
ページにて「説明」の項目に入力したテキ
ストは画像の説明としてポップアップした
画像の下に表示されます。
アイテム編集ページの説明
に入力されたテキストは
こちらに表示されます。

72. カスタマイズについて
ご自身でカスタマイズが可能な部分があります。
ここからはカスタマイズをしたい方だけご覧ください。
リストマーカー画像とブランクウィンドウアイコンの変更
オリジナルのスタイルをサイトに反映させたい
apple-touch-iconを設定する

73. カスタマイズについて
リストマーカー画像とブランク・ウィンドウ・アイコンの変更（1）
「リストマーカー画像」と「ブランク・ウィンドウ・アイコン」は任意の画像
に変更することができます。
リストマーカー画像ブランク・ウィンドウ・アイコン
タグの項目にリストマーカー画像なら
「@listimg」を、ブランク・ウィンドウ・アイコ
ンの場合には「@blank_window_link」を入力
します。

74. カスタマイズについて
リストマーカー画像とブランク・ウィンドウ・アイコンの変更（2）
リストマーカー画像
「リストマーカー画像」を変更したい場合の手順は
1. 変更したい画像をウェブサイトorブログのアイテムに登録する
2. アイテムの編集画面でタグに「@listimg」を設定する
変更したい画像をウェブサイトのアイテムに登録するとウェブサイト全体で
変更されます。画像をウェブサイト配下の任意のブログのアイテムに登録す
ると、そのブログのみのリストマーカー画像が変更されます。

75. カスタマイズについて
リストマーカー画像とブランク・ウィンドウ・アイコンの変更（3）
ブランクウィンドウアイコン
「ブランク・ウィンドウ・アイコン」を変更したい場合は
1. 変更したい画像をウェブサイトorブログのアイテムに登録する
2. アイテムの編集画面でタグに「@blank_window_link」を設定する
変更したい画像をウェブサイトのアイテムに登録するとウェブサイト全体で
変更されます。画像をウェブサイト配下の任意のブログのアイテムに登録す
ると、そのブログのみのブランク・ウィンドウ・アイコンが変更されます。

76. カスタマイズについて
オリジナルのスタイルをサイトに反映させたい（1）
オリジナルのスタイルを追加することができます。スタイルの追加の方法
は2種類があります。
ウェブサイトの管理画面でウェブサイトユーザースタイルシートに設定す
る方法とブログの管理画面でブログユーザースタイルシートに設定する方
法です。

77. カスタマイズについて
オリジナルのスタイルをサイトに反映させたい（2）
ウェブサイトユーザースタイルシートに設定する場合
ウェブサイトの管理画面でウェブサイトユーザースタイルシートにスタイ
ルを設定するとウェブサイトとウェブサイト内のすべてのブログにスタイ
ルが適用されます。
ただし、スタイルのセレクタに「body.websitecss」を含めると、スタイ
ルの適用範囲はウェブサイトのみになり、ウェブサイト内のブログには適
用されません。

78. カスタマイズについて
オリジナルのスタイルをサイトに反映させたい（3）
ブログユーザースタイルシートに設定する場合
ブログの管理画面でブログユーザースタイルシートにスタイルを設定する
と当該のブログにスタイルが適用されます。
このスタイルはウェブサイトを含め、ほかのブログには適用されません。

79. カスタマイズについて
オリジナルのスタイルをサイトに反映させたい（4）
ウェブサイトのスタイルシートの読み込み順序
1. ウェブサイトURL/css/original_style_sheet.css
2. ウェブサイトURL/css/css_for_tablet.css
3. ウェブサイトURL/css/websiteusercss.css
ブログのスタイルシートの読み込み順序
1. ウェブサイトURL/css/original_style_sheet.css
2. ウェブサイトURL/css/blog_style_sheet.css
3. ブログURL/css/blog_style.css
4. ウェブサイトURL/css/css_for_tablet.css
5. ウェブサイトURL/css/websiteusercss.css
6. ブログURL/css/blogusercss.css

80. カスタマイズについて
apple-touch-iconを設定する（1）
apple-touch-iconとは
iOSにはホーム画面にウェブサイトやウェブ
ページへのショートカットを作成する機能が
あります。
apple-touch-iconを設定してあると、iPhone
やiPadなどのiOSデバイスでウェブサイトや
ウェブページを表示中に「ホーム画面に追
加」で作成されるショートカットに使われる
アイコンの画像を任意のものにすることが出
来ます。

81. カスタマイズについて
apple-touch-iconを設定する（2）
apple-touch-iconの設定方法
1. PNG形式の画像を横幅は600ピクセル
程度で作成します。
2. 作成した画像をウェブサイト、または
ブログのアイテムに登録してください。
3. アイテムに「@touch-icon」というプ
ライベートタグを設定してください。

82. 旅の恥はかきすて！
Let’s Enjoy Travering & Blogging!
設定は以上です！