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

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

http://www.heartbeat.info

レスポンシブ・ウェブ・デザインに対応した Movable Typeのテーマ

http://www.heartbeat.info

INDEXHeartbeat.infoの特徴

テーマを設定する前に

テーマのダウンロードとアップロード

テーマの適用

ウェブサイトの設定

ブログの設定

ブログ記事一覧（カテゴリーページ）の設定

ブログ記事について

カスタマイズについて

Heartbeat.infoテーマの特徴旅行ごとにブログを作成することで、旅行記をまとめた個人のポータル風サイトが作れます。

レスポンシブ・ウェブ・デザインに対応したサイトが構築できます。

ウィジェットセットの設定でページ内レイアウトをドラッグ＆ドロップで自由に設定・変更できます。

簡単にGoogleマップとストリートビューの表示ができます。

Facebookウィジェット、Twitterウィジェットなどのブログパーツの埋め込みが簡単にできます。

アフィリエイト広告の埋め込みが簡単にできます。

自動的にOGPの設定やサイトマップXMLが作成されます。

Lightboxを利用した写真ギャラリーの設置やYoutubeなどの動画の埋め込みが簡単です。

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

テーマを設定する前に…(2)heartbeat.infoのテーマを使う場合は、以下のプラグインが必要になります。事前にインストールを完了しておいてください。また、各プラグインの使用にあたっての注意事項をよくご確認ください。

SysCFImExporter藤本壱様http://www.h-fj.com/blog/archives/2010/02/25-214442.php ImageUploadUtilityジャクスタポジション様http://skeleton.juxtaposition.jp/image-upload-utility/ LastRebuildDatetokiwatch 様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

http://www.h-fj.com/blog/archives/2010/02/25-214442.php

http://skeleton.juxtaposition.jp/image-upload-utility/

https://github.com/tokiwatch/LastRebuildDate

http://www.koikikukan.com/archives/2009/01/20-015555.php

http://takeyu-web.com/placements/12/articles/21

テーマのダウンロードとアップロード（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

テーマのダウンロードとアップロード（2）

heartbeat.infoのテーマはGitHubからダウンロードできるよ。

https://github.com/applebeat


「https://github.com/applebeat」にアクセスしてください。テーマは「mt-theme-heartbeat-info」です。


直接リンクはこちらです。https://github.com/applebeat/mt-theme-heartbeat-info


https://github.com/applebeat/mt-theme-heartbeat-info

Download ZIPからダウンロードします。


「mt-theme-heartbeat-info-master.zip」がダウンロードされます。


ダウンロードしたZIPファイルをダブルクリックすると「mt-theme-heartbeat-info-master」というフォルダができます。


mt-theme-heartbeat-info-masterの中の3つのフォルダがそれぞれウェブサイト用、旅行記ブログ用、ノーマルブログ用のテーマになります。README.mdはサイト構築には使いません。

mt-theme-heartbeat-info-normal-blogmt-theme-heartbeat-info-travelog

mt-theme-heartbeat-info-website


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

WebSite用[必須]旅行記ブログ用[任意]ノーマルブログ用[任意]


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


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


広告（メインコンテンツ用）01


フリースペースウェブサイト01



Zenback


Facebook WidgetとFacebook Link URLの入力は任意です。 Facebook WidgetとFacebook Link URLは両方とも入力した場合と、どちらか一方を入力した場合で表示方法が変わります。詳細は次のページをご覧ください。

Google Analytics

Facebook Widget

Facebook Link URL

Twitter Widget

Twitter Link URL








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








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








Zenback


フリースペースにはメインコンテンツ、右サイドバーに掲載したい内容をご記入ください。

入力するテキストはHTMLで書いてください。

例）改行をする場合は<br>タグを使うetc…

Google Analytics

Facebook Widget

Facebook Link URL

Twitter Link Widget

Twitter URL








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）ウェブサイトの設定

イメージギャラリーで使う画像のサイズを目安に長辺の最大値を設定してください。

必要に応じて選択してください。

必要に応じて選択してください。


イメージギャラリーで使う画像のサイズを目安に長辺の最大値を設定してください。

長辺の最大値はギャラリーに使いたい画像サイズを目安にしておくことをお勧めします。また、ヘッダー画像に使う場合は横幅に1000ピクセルが必要になります。

また、こちらの説明画像のように1200ピクセルでアップロードした場合の画像をブログ記事に使う場合でも、画像を縮小する必要はありません。MTEntryBody、MTEntryMore、MTPageBody、MTPageMoreに「image_max_size=“548”」が設定してあるので、長辺が548ピクセルより大きな場合は自動的に548ピクセルに縮小されます。

注）アイテムに登録する画像のサイズが大きすぎると、ブログ記事の保存や再構築の際に、サーバーのスペックによってサーバーエラーになる場合があります。


ブログ記事の作成では横幅1000ピクセルのまま挿入してますが、公開する際に548ピクセルに縮小されます。

テンプレートは<$MTEntryBody image_max_size=“548”$>と設定してあるので、ブログ記事の公開時に画像は長辺は548ピクセルに縮小されます。

MultiBlogの設定（1）ウェブサイトの設定

再構築トリガーを設定してください。

旅行記ブログ、ノーマルブログが更新された際に、ウェブサイトのトップページが再構築されるように設定します。

「再構築トリガーを作成」から設定します。

MultiBlogの設定（2）ウェブサイトの設定

ポップアップされたウィンドウで設定します。

右図では「ウェブサイト内のすべてのブログ」を対象にして、いずれかのブログで「記事」又は「ウェブページ」を公開した際にウェブサイトのインデックステンプレートが再構築されるようにしています。

再構築トリガーは複数の設定ができるので、ブログごとに設定することもできます。

お問い合わせフォームについてウェブサイトの設定

こちらのテーマではコメントのフォームを利用した簡易のお問い合わせフォームを作成可能です。

この簡易お問い合わせフォームはコメント機能を使っているので仕様変更等で使えなくなる場合があります。

お問い合わせフォームを積極的に使いたい方は、他のお問い合わせフォームサービス（Googleドライブのフォーム等）をお使いになることお勧めします。

簡易お問い合わせフォームを利用するには、簡易お問い合わせフォームに使うウェブページの作成が必要です。詳しい作成方法は次ページをご覧ください。

お問い合わせフォームの作成（1）ウェブサイトの設定

ウェブサイトの「設定 > コミュニケーション」の「コメントポリシー」は「自動的に公開しない」に設定してください。


お問い合わせフォーム用のウェブページを作成してください。


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

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

ブログの設定

ブログの設定MTの管理画面で任意のブログを選択して「設定 > 全般」のページを開き下記の項目を入力・編集します。


名前（入力済み）

説明

ヘッダーの背景画像

プロローグ

ブログの設定


説明


プロローグ

各ブログの管理画面にて「設定 > 全般」で全般設定ページで各項目を入力してください。

ヘッダーの背景画像の項目には画像のURLを入力してください。設定しない場合はサンプルの画像が表示されます。

WebSiteの設定時と同様にアイテムに画像を登録しておくと管理がしやすいです。また、画像が幅 1000ピクセル／高さ 250ピクセル以下の場合は縦横比を保ったまま自動的に拡大されます。

ヘッダーの背景画像について

名前説明


プロローグ

メインメニュー

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

詳細は次ページより

ブログの設定

「旅行記ですか？」について

旅行記ブログは「旅行記である」を選択してください。

「旅行記である」を選択した場合は、ウェブサイトのトップページの「Travel │旅行記」にリンクが作られます。

「旅行記ではない」を選択するとリンクは作られません。

「準備中」を選んだ場合も「Travel │旅行記」にリンクは作られません。

「旅行記ではない」を選択したブログのリンクはウェブサイトの「ブログ一覧[旅行記以外]」というウィジェットを使って表示させることができます。

ブログの設定

「新着情報に含める？」について

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

「新着情報に含めない」を選択したブログのブログ記事は「What’s New! │新着情報」には表示されません。

ブログの設定

ブログの設定ウェブサイトトップページの「Travels│旅行記」のリンク画像（1）

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

ブログの設定ウェブサイトトップページの「Travels│旅行記」のリンク画像（2）

「Travels│旅行記」のリンク画像にしたい画像の「アイテムの編集」画面を開きます。

タグの項目に「@blogmainimg」を設定してください。

こちらが未設定の場合は、下記の準備中の画像が表示されます。

ブログの設定

「ウィジェットセット」についてブログのトップページには下記の2つのウィジェットセットが設定されています。

ブログのトップページ01


ウィジェットを上記2つのウィジェットセットに設定することで、ブログのトップページにコンテンツを追加できます。ウィジェットセットにウィジェットをインストールする方法はウェブサイトの設定時と同じです。



ブログ記事一覧(カテゴリーページ)の設定（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」を入力します。


「リストマーカー画像」を変更したい場合の手順は

リストマーカー画像

変更したい画像をウェブサイトのアイテムに登録するとウェブサイト全体で変更されます。画像をウェブサイト配下の任意のブログのアイテムに登録すると、そのブログのみのリストマーカー画像が変更されます。

1. 変更したい画像をウェブサイトorブログのアイテムに登録する

2. アイテムの編集画面でタグに「@listimg」を設定する


「ブランク・ウィンドウ・アイコン」を変更したい場合は

ブランクウィンドウアイコン

変更したい画像をウェブサイトのアイテムに登録するとウェブサイト全体で変更されます。画像をウェブサイト配下の任意のブログのアイテムに登録すると、そのブログのみのブランク・ウィンドウ・アイコンが変更されます。

1. 変更したい画像をウェブサイトorブログのアイテムに登録する

2. アイテムの編集画面でタグに「@blank_window_link」を設定する

カスタマイズについてオリジナルのスタイルをサイトに反映させたい（1）

オリジナルのスタイルを追加することができます。スタイルの追加の方法は2種類があります。ウェブサイトの管理画面でウェブサイトユーザースタイルシートに設定する方法とブログの管理画面でブログユーザースタイルシートに設定する方法です。

カスタマイズについてオリジナルのスタイルをサイトに反映させたい（2）ウェブサイトユーザースタイルシートに設定する場合

ウェブサイトの管理画面でウェブサイトユーザースタイルシートにスタイルを設定するとウェブサイトとウェブサイト内のすべてのブログにスタイルが適用されます。ただし、スタイルのセレクタに「body.websitecss」を含めると、スタイルの適用範囲はウェブサイトのみになり、ウェブサイト内のブログには適用されません。


ブログユーザースタイルシートに設定する場合

ブログの管理画面でブログユーザースタイルシートにスタイルを設定すると当該のブログにスタイルが適用されます。このスタイルはウェブサイトを含め、ほかのブログには適用されません。


ウェブサイトのスタイルシートの読み込み順序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!

設定は以上です！