Contenu connexe
Similaire à Heartbeat infoテーマの設定・使用方法 (12)
Heartbeat infoテーマの設定・使用方法
- 4. Heartbeat.infoテーマの特徴
旅行ごとにブログを作成することで、旅行記をまとめた個人のポー
タル風サイトが作れます。
レスポンシブ・ウェブ・デザインに対応したサイトが構築できます。
ウィジェットセットの設定でページ内レイアウトをドラッグ&ドロッ
プで自由に設定・変更できます。
簡単にGoogleマップとストリートビューの表示ができます。
Facebookウィジェット、Twitterウィジェットなどのブログパーツ
の埋め込みが簡単にできます。
アフィリエイト広告の埋め込みが簡単にできます。
自動的にOGPの設定やサイトマップXMLが作成されます。
Lightboxを利用した写真ギャラリーの設置やYoutubeなどの動画の
埋め込みが簡単です。
- 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
- 18. テーマの適用 -ウェブサイト編-
ウェブサイトの管理画面から「デザイン > テーマ」で
テーマの一覧を表示させます。
「Heartbeat.info ウェブサイト」の右端にある適用ボ
タンをクリックしてください。
テーマの適用が完了すると再構築をしてくださいと表示されますが、初回は再構築はしません。
ほかの設定が終了してから再構築してください。
- 19. テーマの適用 -ブログ編-
ブログの管理画面から「デザイン > テーマ」でテーマ
の一覧を表示させます。
ブログで使えるのは「Heartbeat.info 旅行記ブロ
グ」と「Heartbeat.info ノーマルブログ」です。どち
らかの右端にある適用ボタンをクリックしてください。
テーマの適用が完了すると再構築をしてくださいと表示されますが、初回は再構築はしません。
ほかの設定が終了してから再構築してください。
- 21. ウェブサイトの設定
MTの管理画面で「設定 > 全
般」のページを開き下記の項
目を入力・編集します。
名前(入力済み)
説明
ヘッダーの背景画像(ウェブサイト用)
ヘッダー画像のキャプション
プロローグ(ウェブサイト)
名前の項目以外は任意です。
サイトが完成してからでも入
力・変更できます。
- 22. ウェブサイトの設定
ウェブサイトトップページの各項目は右図の通りです。
名前
説明
ヘッダーの背景画像(ウェブサイト用)
ヘッダー画像のキャプション
プロローグ(ウェブサイト)
ヘッダーの背景画像
(ウェブサイト用)について
名前
説明
ヘッダー画像のキャプション
ヘッダーの背景画像(ウェブサイト用)
プロローグ(ウェブサイト)
ヘッダーの背景画像(ウェブサイト用)
メインコンテンツ右サイドバー
の項目には画像のURLを入力してくだ
さい。設定しない場合はサンプルの画像
が表示されます。
ヘッダー画像はアイテムに登録をしておくと管理がしやすいと思います(次ページ参
照)。また、画像が幅 1000ピクセル/高さ 300ピクセル以下の場合は縦横比を保っ
たまま自動的に拡大されます。
- 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
- 35. ウェブサイトの設定
ウィジェットセットの設定
管理画面の「設定 > 全般」で入力した
「Facebook Widget」や「広告(メイン
コンテンツ用)01」、その他の項目をサイ
トに反映させるにはウィジェットセットに
必要なものをインストールする必要があり
ます。
管理画面の「デザイン > ウィジェット」の
ページで各ウィジェットをウィジェット
セットに設定してください。
ブログも同じように設定する必要がありま
す。
Facebook(ウェブサイト)
Twitter Link(ウェブサイト)
ウェブページ一覧
サイト内検索
タグクラウド
フリースペースウェブサイト01
フリースペースウェブサイト02
フリースペースウェブサイト03
ブログ一覧[旅行記以外]
広告(メインコンテンツ用)01
広告(メインコンテンツ用)02
広告(右サイドバー用)01
広告(右サイドバー用)02
新着情報
旅行記一覧
購読
- 40. ウェブサイトの設定
ImageUploadUtilityの設定(2)
イメージギャラリーで使う画像
のサイズを目安に長辺の最大値
を設定してください。
長辺の最大値はギャラリーに使いたい画像サイズを目安にしておくことをお勧めし
ます。また、ヘッダー画像に使う場合は横幅に1000ピクセルが必要になります。
また、こちらの説明画像のように1200ピクセルでアップロードした場合の画像を
ブログ記事に使う場合でも、画像を縮小する必要はありません。MTEntryBody、
MTEntryMore、MTPageBody、MTPageMoreに「image_max_size=“548”」
が設定してあるので、長辺が548ピクセルより大きな場合は自動的に548ピクセル
に縮小されます。
注)アイテムに登録する画像のサイズが大きすぎると、ブログ記事の保存や再構築
の際に、サーバーのスペックによってサーバーエラーになる場合があります。
- 51. ブログの設定
各ブログの管理画面にて「設定 > 全般」
で全般設定ページで各項目を入力して
ください。
名前(入力済み)
説明
ヘッダーの背景画像
プロローグ
ヘッダーの背景画像について
名前
説明
ヘッダーの背景画像
プロローグ
メインメニュー
ヘッダーの背景画像の項目には画像の
URLを入力してください。設定しない
場合はサンプルの画像が表示されます。
WebSiteの設定時と同様にアイテムに画像を登録しておくと管理がしやすいです。
また、画像が幅 1000ピクセル/高さ 250ピクセル以下の場合は縦横比を保ったま
ま自動的に拡大されます。
- 53. ブログの設定
「旅行記ですか?」について
旅行記ブログは「旅行記である」を選択してく
ださい。
「旅行記である」を選択した場合は、ウェブ
サイトのトップページの「Travel │旅行記」
にリンクが作られます。
「旅行記ではない」を選択するとリンクは作
られません。
「準備中」を選んだ場合も「Travel │旅行
記」にリンクは作られません。
「旅行記ではない」を選択したブログのリンク
はウェブサイトの「ブログ一覧[旅行記以外]」
というウィジェットを使って表示させることが
できます。
- 57. ブログの設定
「ウィジェットセット」について
ブログのトップページには下記の2つのウィ
ジェットセットが設定されています。
ブログのトップページ01
ブログのトップページ02
ブログのトップページ01
ブログのトップページ02
ウィジェットを上記2つのウィジェットセット
に設定することで、ブログのトップページにコ
ンテンツを追加できます。
ウィジェットセットにウィジェットをインストー
ルする方法はウェブサイトの設定時と同じです。
- 64. ブログ記事について
「記事のメイン画像」について
ブログ記事の「記事の編集 」ページにて
「記事のメイン画像」を設定してくださ
い。
「記事のメイン画像」を設定するとブログ
記事の一覧ページ(カテゴリーページ)の
サムネールとして使われます。設定をしな
い場合は、ブログ記事に設定されているア
イテムが自動的に設定されます。ブログ記
事のアイテムがない場合は、カテゴリーの
メイン画像が設定されます。
この画像は各ブログ記事ページのOGP
(Open Graph Protocol)のog:imageの
画像としても使われます。
- 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