• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Heartbeat infoテーマの設定・使用方法
 

Heartbeat infoテーマの設定・使用方法

on

  • 1,405 views

Movable Typeで旅行記を作れるテーマです。 ...

Movable Typeで旅行記を作れるテーマです。

↓こちらのサイトと同じものが作れます。
http://www.heartbeat.info

Movable Type用テーマのダウンロードは下記より出来ます。
https://github.com/applebeat/mt-theme-heartbeat-info

Statistics

Views

Total Views
1,405
Views on SlideShare
1,297
Embed Views
108

Actions

Likes
0
Downloads
3
Comments
0

3 Embeds 108

http://www.drivemenuts.com 102
http://s.deeeki.com 3
https://twitter.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Heartbeat infoテーマの設定・使用方法 Heartbeat infoテーマの設定・使用方法 Presentation Transcript

    • Heartbeat infoテーマの設定・使用方法 Movable Type用旅行ブログテーマ
    • http://www.heartbeat.info レスポンシブ・ウェブ・デザインに対応した Movable Typeのテーマ
    • INDEX Heartbeat.infoの特徴 テーマを設定する前に テーマのダウンロードとアップロード テーマの適用 ウェブサイトの設定 ブログの設定 ブログ記事一覧(カテゴリーページ)の設定 ブログ記事について カスタマイズについて
    • Heartbeat.infoテーマの特徴 旅行ごとにブログを作成することで、旅行記をまとめた個人のポー タル風サイトが作れます。 レスポンシブ・ウェブ・デザインに対応したサイトが構築できます。 ウィジェットセットの設定でページ内レイアウトをドラッグ&ドロッ プで自由に設定・変更できます。 簡単にGoogleマップとストリートビューの表示ができます。 Facebookウィジェット、Twitterウィジェットなどのブログパーツ の埋め込みが簡単にできます。 アフィリエイト広告の埋め込みが簡単にできます。 自動的にOGPの設定やサイトマップXMLが作成されます。 Lightboxを利用した写真ギャラリーの設置やYoutubeなどの動画の 埋め込みが簡単です。
    • テーマを設定する前に…(1) こちらの説明書はインストールしたMovable Typeのウェブサイトと ブログの設定が完了している状態からheartbeat.infoのテーマを適用 して設定を進めていくようになっています。 こちらのテーマはシステムにカスタムフィールドを作ります。こちら のテーマを適用させると、すべてのブログにシステムに作成されてい るカスタムフィールドが追加されます。
    • テーマを設定する前に…(2) heartbeat.infoのテーマを使う場合は、以下のプラグインが必要にな ります。事前にインストールを完了しておいてください。 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
    • テーマのダウンロードとアップロード(1) heartbeat.infoのテーマは全部で3種類あります。 Heartbeat.info Webサイト [必須]
 出力ファイル名:mt-theme-heartbeat-info-website Heartbeat.info 旅行記ブログ [任意:旅行記ブログ用]
 出力ファイル名:mt-theme-heartbeat-info-travelog Heartbeat.info ノーマルブログ [任意:旅行記以外のブログ用]
 出力ファイル名:mt-theme-heartbeat-info-normal-blog
    • テーマのダウンロードとアップロード(2) heartbeat.infoの
 テーマはGitHubから
 ダウンロードできるよ。 https://github.com/applebeat
    • 「https://github.com/applebeat」にアクセスしてください。
 テーマは「mt-theme-heartbeat-info」です。 テーマのダウンロードとアップロード(3) 直接リンクはこちらです。
 https://github.com/applebeat/mt-theme-heartbeat-info
    • Download ZIPからダウンロードします。 テーマのダウンロードとアップロード(4)
    • 「mt-theme-heartbeat-info-master.zip」がダウンロードさ れます。 テーマのダウンロードとアップロード(5)
    • ダウンロードしたZIPファイルをダブルクリックすると「mt- theme-heartbeat-info-master」というフォルダができます。 テーマのダウンロードとアップロード(6)
    • mt-theme-heartbeat-info-masterの中の3つのフォルダがそれぞれ ウェブサイト用、旅行記ブログ用、ノーマルブログ用のテーマになりま す。README.mdはサイト構築には使いません。 mt-theme-heartbeat-info-normal-blog mt-theme-heartbeat-info-travelog mt-theme-heartbeat-info-website テーマのダウンロードとアップロード(7)
    • 3つのフォルダのうち「mt-theme-heartbeat-info-website」は 必須のテーマになります。 「mt-theme-heartbeat-info-travelog」は旅行記ブログ用の テーマです。 「mt-theme-heartbeat-info-normal-blog」はノーマルブログ 用のテーマです。 旅行記ブログ用とノーマルブログ用は必須ではありませんが、3つの フォルダをアップロードすることをおすすめします。 WebSite用[必須] 旅行記ブログ用[任意] ノーマルブログ用[任意] テーマのダウンロードとアップロード(8)
    • FTPソフトなどを使って「mt-theme-heartbeat-info- website」、「mt-theme-heartbeat-info-travelog」、「mt- theme-heartbeat-info-normal-blog」をサーバーのmt.cgiと 同じディレクトリにある「themes」にアップロードします。 テーマのダウンロードとアップロード(9) themes
    • Heartbeat.infoテーマの適用
    • テーマのアップロード後にシステムの管理画面の「デザイン > テーマ」のページを開くとアップロードしたテーマが一覧に表示 されています。 テーマの適用 注)上記の画像はテーマを適用した状態です。適用前は「利用している テーマ」ではなく「インストールされているテーマ」に表示されます。
    • ウェブサイトの管理画面から「デザイン > テーマ」で テーマの一覧を表示させます。
 「Heartbeat.info ウェブサイト」の右端にある適用ボ タンをクリックしてください。 テーマの適用 -ウェブサイト編- テーマの適用が完了すると再構築をしてくださいと表示されますが、初回は再構築はしません。 ほかの設定が終了してから再構築してください。
    • ブログの管理画面から「デザイン > テーマ」でテーマ の一覧を表示させます。
 ブログで使えるのは「Heartbeat.info 旅行記ブロ グ」と「Heartbeat.info ノーマルブログ」です。どち らかの右端にある適用ボタンをクリックしてください。 テーマの適用 -ブログ編- テーマの適用が完了すると再構築をしてくださいと表示されますが、初回は再構築はしません。 ほかの設定が終了してから再構築してください。
    • ウェブサイトの設定
    • ウェブサイトの設定 MTの管理画面で「設定 > 全 般」のページを開き下記の項 目を入力・編集します。 名前(入力済み) 説明 ヘッダー画像 ヘッダー画像のキャプション プロローグ(ウェブサイト) 名前の項目以外は任意です。 サイトが完成してからでも入 力・変更できます。
    • 名前 説明 ヘッダー画像 ヘッダー画像のキャプション プロローグ(ウェブサイト) ウェブサイトトップページの各項目は右図の通りです。 ヘッダー画像の項目には画像のURLを 入力してください。設定しない場合は サンプルの画像が表示されます。 ヘッダー画像はアイテムに登録をしておくと管理がしやすいと思います(次ペー ジ参照)。また、画像が幅 1000ピクセル/高さ 300ピクセル以下の場合は縦 横比を保ったまま自動的に拡大されます。 ヘッダー画像について 名前 説明 ヘッダー画像のキャプション ヘッダー画像 プロローグ(ウェブサイト) メインコンテンツ 右サイドバー ウェブサイトの設定
    • ヘッダー画像について ヘッダーに使う画像がある場合は事前 にアイテムへ登録して、その画像の「ア イテムの編集」ページで画像のURLを 準備しておいてください。 画像のURLはアイテムの 埋め込み欄にあるURLで す。 この画像はウェブサイト のOGP(Open Graph Protocol)のog:imageと しても使われます。 ウェブサイトの設定
    • 「設定 > 全般」のページでは下記の項目も 設定できます。すべて任意です。 Google Analytics Facebook Widget Facebook Link URL Twitter Widget Twitter Link URL 広告(右サイドバー用)01 広告(右サイドバー用)02 広告(メインコンテンツ用)01 広告(メインコンテンツ用)02 フリースペースウェブサイト01 フリースペースウェブサイト02 フリースペースウェブサイト03 Zenback ウェブサイトの設定
    • Google Analytics、Zenbackには各サービ スより取得したソースをそのままコピー&ペー ストしてください。 Google Analytics Facebook Widget Facebook Link URL Twitter Widget Twitter Link URL 広告(右サイドバー用)01 広告(右サイドバー用)02 広告(メインコンテンツ用)01 広告(メインコンテンツ用)02 フリースペースウェブサイト01 フリースペースウェブサイト02 フリースペースウェブサイト03 Zenback ウェブサイトの設定
    • 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 ウェブサイトの設定
    • 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 ウェブサイトの設定
    • 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 ウェブサイトの設定
    • 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 ウェブサイトの設定
    • 広告の項目にはGoogle AdSense等のア フィリエイトのソースを入力してください。 右サイドバー用の最大横幅は390ピクセル です。 メインコンテンツ用の最大横幅は580ピク セルです。 レスポンシブ・ウェブ・デザインに対応し た広告がある場合は、そちらを使うことを お勧めします。 Google Analytics Facebook Widget Facebook Link URL Twitter Link Widget Twitter URL 広告(右サイドバー用)01 広告(右サイドバー用)02 広告(メインコンテンツ用)01 広告(メインコンテンツ用)02 フリースペースウェブサイト01 フリースペースウェブサイト02 フリースペースウェブサイト03 Zenback ウェブサイトの設定
    • フリースペースにはメインコンテンツ、右サ イドバーに掲載したい内容をご記入くださ い。 入力するテキストはHTMLで書いてくださ い。 例)改行をする場合は<br>タグを使う etc… Google Analytics Facebook Widget Facebook Link URL Twitter Link Widget Twitter URL 広告(右サイドバー用)01 広告(右サイドバー用)02 広告(メインコンテンツ用)01 広告(メインコンテンツ用)02 フリースペースウェブサイト01 フリースペースウェブサイト02 フリースペースウェブサイト03 Zenback ウェブサイトの設定
    • フリースペースにコンテンツを追加する場合、下記のフォーマットを使うことで デザインを えることができます。ノーマルブログもこちらのフォーマットを使 えます。オレンジ色の部分がテンプレートになります。 ウェブサイトの設定 <div class="widget">  <h3 class= widget-header >           タイトル</h3>  <div>   コンテンツ  </div> </div> タイトルあり・リスト <div class="widget">  <div>   コンテンツ  </div> </div> タイトルなし <ul class= listimg >  <li>リスト1</li> </ul> リストマーカー用マークアップ
    • ウィジェットセットの設定 ウェブサイトの設定
    • ウェブサイトのウィジェットセットの設定 メインコンテンツ (ウェブサイト) 右サイドバー (ウェブサイト) 検索結果・タググラウド検索結果ページの 右サイドバー ウェブサイトの設定
    • ウィジェットセットの設定 管理画面の「設定 > 全般」で入力した 「Facebook Widget」や「広告(メイン コンテンツ用)01」、その他の項目をサイ トに反映させるにはウィジェットセットに 必要なものをインストールする必要があり ます。 管理画面の「デザイン > ウィジェット」の ページで各ウィジェットをウィジェット セットに設定してください。 ブログも同じように設定する必要がありま す。 Facebook(ウェブサイト) Twitter Link(ウェブサイト) ウェブページ一覧 サイト内検索 タグクラウド フリースペースウェブサイト01 フリースペースウェブサイト02 フリースペースウェブサイト03 ブログ一覧[旅行記以外] 広告(メインコンテンツ用)01 広告(メインコンテンツ用)02 広告(右サイドバー用)01 広告(右サイドバー用)02 新着情報 旅行記一覧 購読 ウェブサイトの設定
    • ウェブサイトの管理ページから「デザイン > ウィジェット」でウェブサイ トウィジェットの管理ページを表示させます。
 下記のウィジェットセットに表示させたいウィジェットを登録します。 ウィジェットセットの設定 ウィジェットセットにインス トールされたウィジェット ウェブサイトの設定 ウィジェットセット
    • 「利用可能」にあるウィジェットを「インストール済み」にドラッグ &ドロップすることでウィジェットセットにインストールできます。
 アンインストールしたい場合は「インストール済み」から「利用可能」 の方へドラッグ&ドロップします。最後に変更を保存してください。 ウィジェットセットの設定 ウェブサイトの設定
    • プラグインの設定 ウェブサイトの設定 下記のプラグインの設定をしてください。 ImageUploadUtility MultiBlog お問い合わせフォームについて 詳細は次ページからご覧ください。
    • ImageUploadUtilityの設定(1) ウェブサイトの設定 イメージギャラリーで使う画像 のサイズを目安に長辺の最大値 を設定してください。 必要に応じて選択してください。 必要に応じて選択してください。
    • ImageUploadUtilityの設定(2) ウェブサイトの設定 イメージギャラリーで使う画像 のサイズを目安に長辺の最大値 を設定してください。 長辺の最大値はギャラリーに使いたい画像サイズを目安にしておくことをお勧めし ます。また、ヘッダー画像に使う場合は横幅に1000ピクセルが必要になります。 また、こちらの説明画像のように1200ピクセルでアップロードした場合の画像を ブログ記事に使う場合でも、画像を縮小する必要はありません。MTEntryBody、 MTEntryMore、MTPageBody、MTPageMoreに「image_max_size= 548 」 が設定してあるので、長辺が548ピクセルより大きな場合は自動的に548ピクセル に縮小されます。 注)アイテムに登録する画像のサイズが大きすぎると、ブログ記事の保存や再構築 の際に、サーバーのスペックによってサーバーエラーになる場合があります。
    • ImageUploadUtilityの設定(3) ウェブサイトの設定 ブログ記事の作成では横幅1000 ピクセルのまま挿入してますが、 公開する際に548ピクセルに縮 小されます。 テンプレートは<$MTEntryBody image_max_size= 548 $>と設定してあるので、 ブログ記事の公開時に画像は長辺は548ピクセルに縮小されます。
    • MultiBlogの設定(1) ウェブサイトの設定 再構築トリガーを設定してください。 旅行記ブログ、ノーマルブログが更新された際に、ウェブサイトのトップページが再構 築されるように設定します。 「再構築トリガーを作成」から設定します。
    • MultiBlogの設定(2) ウェブサイトの設定 ポップアップされたウィンドウで設定 します。 右図では「ウェブサイト内のすべての ブログ」を対象にして、いずれかのブ ログで「記事」又は「ウェブページ」 を公開した際にウェブサイトのイン デックステンプレートが再構築され るようにしています。 再構築トリガーは複数の設定ができ るので、ブログごとに設定することも できます。
    • お問い合わせフォームについて ウェブサイトの設定 こちらのテーマではコメントのフォームを利用した簡易のお問い合わせ フォームを作成可能です。 この簡易お問い合わせフォームはコメント機能を使っているので仕様変 更等で使えなくなる場合があります。 お問い合わせフォームを積極的に使いたい方は、他のお問い合わせフォー ムサービス(Googleドライブのフォーム等)をお使いになることお勧 めします。 簡易お問い合わせフォームを利用するには、簡易お問い合わせフォーム に使うウェブページの作成が必要です。詳しい作成方法は次ページをご 覧ください。
    • お問い合わせフォームの作成(1) ウェブサイトの設定 ウェブサイトの「設定 > コミュニケーション」の「コメントポリシー」 は「自動的に公開しない」に設定してください。
    • お問い合わせフォームの作成(2) ウェブサイトの設定 お問い合わせフォーム用のウェブページを作成してください。
    • お問い合わせフォームの作成(3) ウェブサイトの設定 作成したお問い合わせフォーム用のウェブページの編集画面で右サイド バーのコメント欄で「コメントを許可」にチェックを入れてページを公 開してください。
    • ウェブサイトの設定は以上です。
    • ブログの設定
    • ブログの設定 MTの管理画面で任意のブロ グを選択して「設定 > 全般」 のページを開き下記の項目を 入力・編集します。 名前の項目以外は任意です。 サイトが完成してからでも入 力・変更できます。 名前(入力済み) 説明 ヘッダー画像 プロローグ
    • ブログの設定 名前(入力済み) 説明 ヘッダー画像 プロローグ 各ブログの管理画面にて「設定 > 全般」 で全般設定ページで各項目を入力して ください。 ヘッダーの背景画像の項目には画像の URLを入力してください。設定しない 場合はサンプルの画像が表示されます。 WebSiteの設定時と同様にアイテムに画像を登録しておくと管理がしやすいです。 また、画像が幅 1000ピクセル/高さ 250ピクセル以下の場合は縦横比を保ったま ま自動的に拡大されます。 ヘッダー画像について 名前 説明 ヘッダー画像 プロローグ メインメニュー
    • 各ブログの管理画面にて「設定 > 全般」で表示された全般設定ペー ジにある「旅行記ですか?」「新着情報欄に含める?」を設定し てください。 詳細は次ページより ブログの設定
    • 「旅行記ですか?」について 旅行記ブログは「旅行記である」を選択してく ださい。 「旅行記である」を選択した場合は、ウェブ サイトのトップページの「Travel │旅行記」 にリンクが作られます。 「旅行記ではない」を選択するとリンクは作 られません。 「準備中」を選んだ場合も「Travel │旅行 記」にリンクは作られません。 「旅行記ではない」を選択したブログのリンク はウェブサイトの「ブログ一覧[旅行記以外]」 というウィジェットを使って表示させることが できます。 ブログの設定
    • 「新着情報に含める?」について 「新着情報に含める」を選択したブログ に新規投稿すると、新規投稿したブログ 記事がウェブサイトのトップページの 「What s New! │新着情報」に表示 されます。 「新着情報に含めない」を選択したブロ グのブログ記事は「What s New! │新 着情報」には表示されません。 ブログの設定
    • ブログの設定 ウェブサイトトップページの「Travels│旅行記」のリンク画像(1) ウェブサイトトップページの「Travels│旅行記」に使用する画像を設定して ください。こちらに設定する画像は各ブログごとのアイテムに登録してある 必要があります。設定方法は次ページをご覧ください。
    • ブログの設定 ウェブサイトトップページの「Travels│旅行記」のリンク画像(2) 「Travels│旅行記」のリンク画像 にしたい画像の「アイテムの編集」 画面を開きます。 タグの項目に「@blogmainimg」 を設定してください。 こちらが未設定の場合は、下記の準 備中の画像が表示されます。
    • ブログの設定 「ウィジェットセット」について ブログのトップページには下記の2つのウィ ジェットセットが設定されています。 ブログのトップページ01 ブログのトップページ02 ウィジェットを上記2つのウィジェットセット に設定することで、ブログのトップページにコ ンテンツを追加できます。 ウィジェットセットにウィジェットをインストー ルする方法はウェブサイトの設定時と同じです。 ブログのトップページ01 ブログのトップページ02
    • ブログ記事一覧(カテゴリーページ)の設定(1) MTの管理画面で任意のブロ グを選択して「記事 > カテゴ リ」のページを開き下記の項 目を入力・編集します。 名前の項目以外は任意です。 サイトが完成してからでも入 力・変更できます。 名前(入力済み) 説明 カテゴリーサブタイトル カテゴリーのメインイメージ
    • ブログ記事一覧(カテゴリーページ)の設定(2) 「カテゴリーのメインイメージ」はブログのトップページ 名前 カテゴリーサブタイトル 説明 旅行の動画(カテゴリー別) カテゴリーサブタイトル
    • ブログ記事一覧(カテゴリーページ)の設定(3) 「公開日」について カテゴリの編集の「カテゴリーのメインイメージ」はブログのトップペー ジのリンク画像にも使われます。カテゴリーサブタイトルはトップペー ジ、カテゴリー一覧ウィジェット等のカテゴリー名の下に表示されます。 ブログトップページ
    • ブログ記事一覧(カテゴリーページ)の設定(4) 「ウィジェットセット」について ブログ記事一覧ページ(カテゴリーペー ジ)には以下の3つのウィジェット セットが設定されています。 ブログ記事一覧の 右サイドバー ブログ記事一覧のメイン部分02 ブログ記事一覧のメイン部分01 ウィジェットを上記3つのウィジェッ トセットに設定することで、ブログ記 事一覧(カテゴリーページ)にコンテ ンツを追加できます。 ブログ記事一覧メイン部分01 ブログ記事一覧メイン部分02 ブログ記事一覧の右サイドバー
    • ブログ記事一覧(カテゴリーページ)の設定(5) 「公開日」について 埋め込み用ソースを取得する際、右サイド バーで使う場合は横幅を380ピクセル以下 にしてください。 ただし、iframeタグで埋め込む場合はレ スポンシブ・デザインに対応しているので 横幅は自動的に調整されます。(iframe タグにwidthとheightが設定されている必 要があります。) カテゴリーに関係する動画をまとめたもの を想定しています。→YouTubeの再生リ ストで複数の動画をまとめたものなど。 旅行の動画(カテゴリー別)にはYouTubeなどの動画配信サービスなどの動画を埋 め込むソースを取得して入力してください。
    • ブログ記事について
    • ブログ記事について 「記事のメイン画像」について ブログ記事の「記事の編集 」ページにて 「記事のメイン画像」を設定してくださ い。 「記事のメイン画像」を設定するとブログ 記事の一覧ページ(カテゴリーページ)の サムネールとして使われます。設定をしな い場合は、ブログ記事に設定されているア イテムが自動的に設定されます。ブログ記 事のアイテムがない場合は、カテゴリーの メイン画像が設定されます。 この画像は各ブログ記事ページのOGP (Open Graph Protocol)のog:imageの 画像としても使われます。
    • ブログ記事について 「Googleマップとストリートビュー」について 地図とストリートビューを表示させたい場合は「位置情報」を「有効」にしてマーカーを 設定するか、「Googleマップ&ストリートビュー用北緯東経」を設定してください。 詳細は次ページをご覧ください。「位置情報 > 有効」または「Googleマップ&ストリート ビュー用北緯東経」を設定しない場合は、地図及びストリートビューは表示されません。 「位置情報 > 有効」と「Googleマップ&ストリートビュー用北緯東経」の両方が設定され ていた場合、「位置情報 > 有効」が優先されます。 「ストリートビュー用方角」を設定するとストリートビューの方角を設定できます。
    • ブログ記事について 「位置情報」の設定 マーカーを目的地に設定する 有効にする 位置情報はプラグイン「Location」により追加されています。 有効/無効の選択、マーカーの位置を設定してください。
    • ブログ記事について 「Googleマップ&ストリートビュー用北緯東経」の設定 Googleマップ上で地図の中心にしたいところで右ク リックをしてメニューから「この場所について」を選 択します。 左上に表示された北緯東経をコピー します。北緯東経をクリックする と、Googleマップ上にマーカーが 表示されます。 「Googleマップ&ストリートビュー用北緯 東経」にペーストします。 37.784423,-122.432884 「位置情報」を有効にしている場合は設定する必要はありません。
    • ブログ記事について 「ストリートビュー用方角」の取得 この方角を求める方法は、目的地でストリートビューを表示させて、ストリー トビューを操作して表示させたい方角にあわせます。 ペグマン、もしくは方位磁石の方向から導きだします。下記の画像はすべて約 135 になります。 「ストリートビュー用方角」はストリート ビューの表示方角を設定します。
 (未設定の場合は0 になります。)
    • ブログ記事について 「関連サイトリンク集」の設定 「関連サイトリンク集」を設定すると、ブログ記 事に外部サイトへのリンクを設定できます。 設定はURLとリンク先タイトルを「 , 」で区切っ て「URL , リンク先タイトル」を1行で書き、1件 ごとに改行します。 リンク先タイトルには半角の「 , 」は使うことは できません。
    • ブログ記事について 「公開日」について 「記事の編集」ページの「公開日」は「新規エ ントリー」をクリックした時点の日時が挿入さ れますが、「公開日」をブログ記事の内容に合 わせて変更することで、ブログを旅行の行程に 合わせることができます。 旅行中にブログが書けない場合なども、こちら を変更することで、ブログの日時は旅行の行程 に合わせることができます。 例)帰国後にブログを書く場合など。
    • ブログ記事について 「Gallery│ギャラリー」について ブログ記事の「記事の編集 」ページの「記 事アイテム」に表示された画像はすべて 「Gallery│ギャラリー」に表示されます。 また、これらの各画像の「アイテムの編集」 ページにて「説明」の項目に入力したテキ ストは画像の説明としてポップアップした 画像の下に表示されます。 アイテム編集ページの説明 に入力されたテキストは こちらに表示されます。
    • カスタマイズについて ご自身でカスタマイズが可能な部分があります。 ここからはカスタマイズをしたい方だけご覧ください。 リストマーカー画像とブランクウィンドウアイコンの変更 オリジナルのスタイルをサイトに反映させたい apple-touch-iconを設定する
    • カスタマイズについて リストマーカー画像とブランク・ウィンドウ・アイコンの変更(1) 「リストマーカー画像」と「ブランク・ウィンドウ・アイコン」は任意の画像 に変更することができます。 リストマーカー画像 ブランク・ウィンドウ・アイコン タグの項目にリストマーカー画像なら 「@listimg」を、ブランク・ウィンドウ・アイコ ンの場合には「@blank_window_link」を入力 します。
    • カスタマイズについて リストマーカー画像とブランク・ウィンドウ・アイコンの変更(2) 「リストマーカー画像」を変更したい場合の手順は リストマーカー画像 変更したい画像をウェブサイトのアイテムに登録するとウェブサイト全体で 変更されます。画像をウェブサイト配下の任意のブログのアイテムに登録す ると、そのブログのみのリストマーカー画像が変更されます。 1. 変更したい画像をウェブサイトorブログのアイテムに登録する 2. アイテムの編集画面でタグに「@listimg」を設定する
    • カスタマイズについて リストマーカー画像とブランク・ウィンドウ・アイコンの変更(3) 「ブランク・ウィンドウ・アイコン」を変更したい場合は ブランクウィンドウアイコン 変更したい画像をウェブサイトのアイテムに登録するとウェブサイト全体で 変更されます。画像をウェブサイト配下の任意のブログのアイテムに登録す ると、そのブログのみのブランク・ウィンドウ・アイコンが変更されます。 1. 変更したい画像をウェブサイトorブログのアイテムに登録する 2. アイテムの編集画面でタグに「@blank_window_link」を設定する
    • カスタマイズについて オリジナルのスタイルをサイトに反映させたい(1) オリジナルのスタイルを追加することができます。スタイルの追加の方法 は2種類があります。 ウェブサイトの管理画面でウェブサイトユーザースタイルシートに設定す る方法とブログの管理画面でブログユーザースタイルシートに設定する方 法です。
    • カスタマイズについて オリジナルのスタイルをサイトに反映させたい(2) ウェブサイトユーザースタイルシートに設定する場合 ウェブサイトの管理画面でウェブサイトユーザースタイルシートにスタイ ルを設定するとウェブサイトとウェブサイト内のすべてのブログにスタイ ルが適用されます。 ただし、スタイルのセレクタに「body.websitecss」を含めると、スタイ ルの適用範囲はウェブサイトのみになり、ウェブサイト内のブログには適 用されません。
    • カスタマイズについて オリジナルのスタイルをサイトに反映させたい(3) ブログユーザースタイルシートに設定する場合 ブログの管理画面でブログユーザースタイルシートにスタイルを設定する と当該のブログにスタイルが適用されます。 このスタイルはウェブサイトを含め、ほかのブログには適用されません。
    • カスタマイズについて オリジナルのスタイルをサイトに反映させたい(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
    • カスタマイズについて apple-touch-iconを設定する(1) apple-touch-iconとは iOSにはホーム画面にウェブサイトやウェブ ページへのショートカットを作成する機能が あります。 apple-touch-iconを設定してあると、iPhone やiPadなどのiOSデバイスでウェブサイトや ウェブページを表示中に「ホーム画面に追 加」で作成されるショートカットに使われる アイコンの画像を任意のものにすることが出 来ます。
    • カスタマイズについて apple-touch-iconを設定する(2) apple-touch-iconの設定方法 1. PNG形式の画像を横幅は600ピクセル 程度で作成します。 2. 作成した画像をウェブサイト、または ブログのアイテムに登録してください。 3. アイテムに「@touch-icon」というプ ライベートタグを設定してください。
    • 旅の恥はかきすて! Let’s Enjoy Travering & Blogging! 設定は以上です!