|丑のスープカレー&ラーメン・マップ| |美味しいもの♪| |本の紹介| |ミュージック| |ブログ作成上のメモ|

メイン

ブログ作成上のメモ アーカイブ

2007年05月03日

丑のカレー&ラーメン・マップの作成法

丑のカレー&ラーメン・マップは「KsGMap」で作成しています。
「KsGMap」はフリーでこんな便利なツールを使用させていただき本当にありがとうございます。http://www.ksgmap.jp/index.html
そして、KsGMapの使用の際にこのソフトを利用していた、「ももち どっと こむ」のももちさんに感謝します。
http://www.momoti.com/map/map01.htm
浅草グルメマップは参考になりました。

「汎用Google Maps APIスクリプト KsGMap」を使用するにあたりGoogeMapsの
APIキーの取得が必要です。APIキー取得にはGoogleアカウントが必要です。Gmail便利ですので、取得してみてください。

ダウンロードよりKsGMapの本体をDLします。私はコメント有りの「ksgmap103wc.js」をDLしました。次に、ドキュメントよりサンプルのページに飛びシンプルかリキッド・デザインをDLします。私は最終的にはリキッド・デザインを使用しました。あんまり気にしていませんでしたが、シンプルより横幅が廣く感じました。そのときに対になっているXML/データファイルをDLしておきます。
次に素材/関連ファイルのページに飛びpopup01.zip(ポップアップのパーツ)とinfowindow01.zip(情報ウィンドウ内のボタンのパーツ)とマーカーから1ファイル、私はstandard04.zipを選択しました。

集めたものを整理しました。

Holder「gmap」ーーーgmap.html(sample_liquiddesign01.html)
         |
         |ーHolder「js」ksgmap103wc.js
         |
         |ーHolder「image」素材/関連ファイルで集めたデータを入れる
         |
         |ーHolder「xml」gmap.xml(sample_liquiddesign.xml)

gmap.html(sample_liquiddesign01.html)の変更点
1)<title>
2)<script src="./js/ksgmap103.js"→<script src="./js/ksgmap103wc.js"
3)<script src="http://maps.google.co.jp/maps?file=api&v=2&key=取得したAPIキー
4)ksgmap_default_zoom = 1; さっぽろは大きいので6にしました。
5)<div id="breadCrumbsNavi">以下のパンクズリストとタイトル
6)<div id="foot">以下のフッタメッセージ

gmap.xml(sample_liquiddesign.xml)の変更点
1)<title>
2)<link>
3)<author>
4)(席数: %seatqty% / 音響:%surround% )→<a href="%url%">記事へリンク</a>という変更でブログのパーマリンクに飛ばせられます。
5)<!-- カテゴリ -->
<category id="area1301" name="札幌" lng="141.350956" lat="43.068386" />と書く
6)<!-- アイテム -->
<tem id="theater1301010" category="area1301" name="スープカレー「XY象SA」" lng="141.359957" lat="43.092289" address="札幌市東区北23条東6丁目4-10" phone="050-7568-6241" url="http://usimov.com/blog/2007/03/xysa.html" />
と書いていきます。

座標の決定はここを参考にしてください。

2007年05月02日

スタイルシートの修正

サイトのデザインを修正するために、

テンプレートのスタイルシートを修正します。

こんな感じかな。

(中略)

|module-header,
|.trackbacks-header,
|.comments-header,
|.comments-open-header,
|.archive-header {
|   /* ie win (5, 5.5, 6) bugfix */
|   p\osition: relative;
|   width: 100%;
|   w\idth: auto;

|   margin: 0;
|   border-left: 5px solid#36414d;  「色の定義」
|   padding: 5px;
|   color: #fff;
|    background:#a3b8cc;  「色の定義」
|    font-size: 11px;
|    font-weight: bold;
|    line-height: 1;
|    text-transform: uppercase;
|}

| (中略)

|/* page layout */

|body {
|    min-width:720px;「サイズの定義 800px」
|    color: #333;
|    background:#36414d;  「色の定義」
|}

|#container {
|    width:720px;「サイズの定義 800px」
|    margin-bottom: 20px;
|    background: #fff;  「ラインの色の定義」
|}

|#container-inner {
|    border-width:0 5px 5px 5px;「サイズの定義」
|    border-style: solid;
|    border-color:#292e33;  「ラインの色の定義」
|}

|#banner {
|    width:710px; /* necessary for ie win */ 「サイズの定義」
|    background:#a3b8cc;          「色の定義」
|}

|#banner-inner {
|    padding: 15px 13px;
|    border-width: 2px 2px 0 2px;
|    border-style: solid;
|    border-color: #fff;
|}
| 
| (中略)

|#alpha { margin: 15px 15px 0 15px; width:480px; } 「サイズの定義」
|#beta { width:200px; background: #e6ecf2; }  「サイズの定義」

| (中略)

|.entry-header {
|    margin-top: 0;
|    border-left: 5px solid#dae0e6;  「色の定義」
|    padding: 0 0 0 10px;
|    color: #666;
|    font-size: 18px;

| (中略)

|/* Date-based and category archives
|    Archive title banner at top of page, below blog banner */
|.master-archive-index #archive-title,
|.individual-entry-archive #archive-title,
|.date-based-archive #archive-title,
|.category-archive #archive-title {

|    /* ie win (5, 5.5, 6) bugfix */
|    p\osition: relative;
|    width: 100%;
|    w\idth: auto;

|    margin: 0;
|    border-left: 10px solid#a3b8cc;  「色の定義」
|    padding: 5px;
|    color: #fff;
|    background:#36414d;  「色の定義」
|}

2007年02月25日

日付・カテゴリー アーカイブの表示順

日付アーカイブとカテゴリーアーカイブのエントリーはデフォルトでは古い日付のエントリーが最初に表示される昇順に並んでいます。最新記事が最初に来ていないと見づらいですよね。そこで、順番を変えます。テンプレートの「index.html」は初期設定の項目で昇順か降順かを設定できますが、日付とカテゴリーのアーカイブではテンプレートで設定します。エントリーの本文が書いてあるあたりに<MTEnttries>のタブが有ります。そこに、属性を設定します。

sort_order:エントリーの表示順を指定します。

  • ascend:昇順
  • decend:降順
sort_by:並べ替えのキー項目を指定します。
  • created_on:投稿日 

以上を設定すると以下になります。 

<MTEntries sort_by="created_on" sort_order="ascend"> 

↓ 

<MTEntriessort_by="created_on" sort_order="decend">

カテゴリーの表示順

カテゴリーを設定して表示したところ、自分の意図とは全然違う並びに表示されていた。どうも「abc」「あいうえお」で並び替えて表示されてしまうようです。

そこで、カテゴリーに「10_」から連番を振ってカテゴリーを定義し直しました。当然、「10_」からの接頭語がついて表示されました。当然ですね。

それで、カテゴリーの説明に表示したいカテゴリー名を書いて、カテゴリーの説明を表示するようにします。タグを以下に書き直します。

テンプレートの"index.html"の以下の部分の修正を行います。

<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>のところを

↓ 

<$MTCategoryDescription$>に変更します。

そして、カテゴリーのエントリーの表示の時に、タイトルにカテゴリー名が表示されます。そこで、テンプレートの中のカテゴリー・エントリーに書かれている<$MTCategoryTittle$>の部分を2カ所、<$MTCategoryDescription$>変更します。

 

これで、終了! 

2007年02月13日

TOPページを改良

ブログのbannarエリアにナビゲーションボタンを増設します。きっと使いやすくなるにちがい有りません。こうご期待♪

2007年02月12日

TinyMCEforMTの設定について

MTで記事を書くときには、タグを手打ちして入力していました。

大きな文字小さな文字 

赤文字青文字黄文字緑文字オレンジ文字

赤文字背景青文字背景黄文字背景 

  1. ポイント1
  2. ポイント2
  3. ポイント3
  • ポイント1
  • ポイント2
  • ポイント3
 
 表組み 1  表組み 2
 表組み 3  表組み 4:表組み 4

写真の使い方をもう少し研究しなきゃ

でも、便利!便利! 

某サイトでの承認機能の設定について

MTに承認機能をインストールし投稿者(下書き者)の名前をエントリーに表示するときの設定尾について。
設定項目 テンプレート index.htmlとアーカイブのファイル3つ共
内容:現状は投稿者ということで<$MTEntryAuthorDisplayName$>が使用されている。
これは、エントリーされた記事の承認者を指している。そのため、下書き者には
<$MTEntryCreatorNickname$>を当てなければならない。
投稿者:<$MTEntryAuthorDisplayName$>
の部分を探して、投稿者/承認者:<$MTEntryCreatorNickname$>/<$MTEntryAuthor$>
に、修正する。

2007年02月11日

MTにMapper Pluginの追加の仕方。

MTでGoogleMapの地図が表示出来るようにするPluginの設定方法です。
Plugin自体はMTのプラグイン・ディレクトリに紹介されています。
サイトはこのリンク先に有る。

続きを読む "MTにMapper Pluginの追加の仕方。" »

Googleの地図にコメントとマークを入れる方法

http://www.witha.jp/blog/archives/2005/07/google_2.html
に、書かれていた「Googleマップの好きな場所に好きな文字で噴出しピンを立てる」に記事を転記しています。十分優れた方法なので、記録しておきたいと考えて行っています。
Witha System Ltd.さん
ありがとうございます。

続きを読む "Googleの地図にコメントとマークを入れる方法" »