「MC Styleコラム」の版間の差分

← 古い編集

2008年5月2日 (金) 10:04時点における最新版

MC Styleコラムは三菱商事による住宅事業のメンバーズクラブ「MC Style CLUB」が展開しているWebコラム。

URLはMC Style。

毎月1日と15日に本アップ。だいたい2～3日前に入稿があるのでできるだけその日のうちに仮アップ。

MCスタイルの更新作業

サイトの構造について

http://www.mcstyle.com/が本番。http://www.mcstyle.com/kds_prep/以下がデモサイト。
FTPする際には間違えて本番にアップしないように注意が必要。
コラムは全部で6種類

食（a)
選（b)
快（c)
旅（d）
知（e）
遊（f）

順番に1ヶ月間休みがあるので更新するのはどれか5種類です。

それぞれのコラムはメンバーのみ閲覧できるページと誰でも閲覧できるページに
分かれています。メンバーでない人はそれぞれのコラムの最新号のみ閲覧することができます。

誰でも見る事ができるページ：http://www.mcstyle.com/kds_prep/member/column/new/a/index.html
メンバーのみ閲覧可：http://www.mcstyle.com/kds_prep/member/column/20070201/a/index.php

コラムの構造について

写真（1～2枚）＋テキスト、またはテキストのみで段落に分かれている。
段落は2段または3段のどちらか。
毎回コラムごとに違うので要確認。
ツールやJSは3段組み使用なので、2段組みのコーディングの際には適宜調整すること。
画像を生成する際、＜小見出し＞が3つないとエラーになってしまうので（今のところは）適当な名前で作って後で削除すること

更新するファイル

/index.php
/news_back/index.html
/member/index.php
/member/column/new/以下(a～eのうち更新があるフォルダ全て)
/member/column/list/columnlist_(a～e).php(a～eのうち更新があるファイル)
/member/column/yyyymmdd/(a～e)/以下(a～eのうち更新があるフォルダ全て)

更新手順

下準備

1.原稿を開く(Word文書)
2.文書を全てテキストエディタに貼り付ける。
3.ファイル→名前を付けて保存→Webページ(*.htm; *.html)
4.画像とHTMLファイルが書き出されるのでまず画像フォルダを「img」にリネーム
5.HTMLファイルはいらないので削除
6.リネームしたimgフォルダに移動する。中にあるXMLファイルと.wmfファイルはいらないので削除
7.同じ写真が複数書き出されているので画像のピクセル数が小さいほうは消す。
8.画像を段落ごとにpht_101.jpg、pht_201.jpg、pht_301.jpgにリネームする。段落に画像が2つ以上ある場合はpht_102,pht_103とする。
Photoshopで開き、幅を175pxにリサイズ。
幅が175pxに満たない場合は、カンバスサイズ等を使って幅175pxに。
必要なら簡単な補正やアンシャープマスクをかけて下さい。（リサイズ後の高さは後で使うのでメモしておく。）

テキストの加工

英数字の全角→半角に変換
半角?の検索→全角？に変換(URLのクエリ用の?は半角)

本文中改行が入っている箇所に

<br>

を付ける

LINKの文字列を＜＞でくくる。＜LINK＞とする。前に1行空行をいれること
リンクのURL前後に空行を含まないこと。
PHOTOの文字列を＜＞でくくる。＜PHOTO＞とする。前に1行空行をいれること。

こんな感じで（例：d.txt）

旅
バーで選ぶホテル

＜小見出し＞
コンシェルジュは万能ではない
＜本文＞
段落1………

＜小見出し＞
ホテルバーで街を知る
＜本文＞
段落2………

＜小見出し＞
バーから街が見えてくる
＜本文＞
段落3………

＜LINK＞
http://www.concierge.ne.jp/302_bar/
オンラインマガジン「ホテルコンシェルジュ」が勧める日本のホテルバー一覧。
http://www.yamanoue-hotel.co.jp/rb/dining.html
山の上ホテルのバー＆レストラン紹介。別館1階の「バーモンモン」は9名限定のカウンターバー。ゆっくりと会話を楽しめます。
http://www.hotel-newgrand.co.jp/restplan/seaguardian.html
ホテルニューグランドのバー「シーガーディアン」。1階にあって夕方4時オープン。もちろんチャージもとりません。
http://nymag.com/bestofny/nightlife/2006/hotelbar/
ホテルバーにこだわる「ニューヨーカー」誌では、毎年ベストイシューのなかでホテルバーも選出しています。海外でもこんなバーを探してホテルを選んでみたいもの。

＜PHOTO＞
東京ステーションホテルのバー「カメリア」は、多くの作家に愛されてきた名物バーのひとつです。
お茶の水の高台に建つ「山の上ホテル」。バーでは下町伝統の味や、珍しい古書の話が聞けるかも知れません。
多くのホテルバーは夕方に開きます。夜出かける前に、街の様子を尋ねてみては。

midashi.txtの作成

a五感で満足させる、味の妙
＜見出し＞
無垢材の食器
＜小見出し＞
料理の味を変えない木食器
木目の美しさを保つため
無垢木ならではの感触を楽しむ

b選ばれたその理由
＜見出し＞
ストレスレスチェア
＜小見出し＞
長い時間座る人の椅子
ラクに座るために
「座るストレス」を解消する

c生活する空間のクオリティ
＜見出し＞
静電気を根絶する
＜小見出し＞
静電気は体質で起きる？
静電気を逃がすために
家から静電気を追放する

d上質の旅が与えてくれるもの
＜見出し＞
バーで選ぶホテル
＜小見出し＞
コンシェルジュは万能ではない
ホテルバーで街を知る
バーから街が見えてくる

e思索という静かな冒険
＜見出し＞
ネットで数値を管理する
＜小見出し＞
数字からは読みきれないもの
自分をチェックするグラフ
他人と「グラフ」で比べてみる

f好奇心に充ちた時間
＜見出し＞
スノーバイクでゲレンデ制覇
＜小見出し＞
滑降の醍醐味を初日から
雪上を走る自転車
まずはレンタルやスクールで

見出し画像の作成

見出し画像はPhotoshopをJavaScriptでコントロールして　midashi.txt　を読み込ませ、バッチ処理で作成します。
作成用のJavaScriptファイルをダウンロード。MCスタイル作成用JavaScriptファイル

ダウンロードしたjsファイルと同じ階層に「before」と「after」の2つのフォルダを作る。
「before」フォルダの中にmidashi.txtを入れる。
Photoshopを立ち上げ、ファイル→スクリプト→参照と進む。
出てきたダイアログでファイルの種類を「JavaScriptファイル(*.JS)」にして作成用jsファイルを選択する。
「読み込み」を押すと勝手に処理が始まり、「after」フォルダ内に画像ファイルが出来上がります。

MCスタイル作成君

場所はまとめサイトの/kds_tko/hide_script/mc_style/column2.cgi
FTPでまとめサイトの/WWW_TKSM/kds_tko/hide_script/mc_style/source/にアクセス。
もともと存在しているやつを削除した後にもろもろをアップロード
アップロードしたら「送信」をクリック。
まずリンクチェックをしましょう。全てのリンクが生きていることを確認
確認できたらアップ日を入力（例：2006.5.1）
確認できたらリンク先のクリップタイトルを入力
その際にクリップタイトルに'(シングルコーテーション)は含まないこと

さっきメモした画像の高さを順番に入力
全部入力し終わったら送信をクリック
さきほどと同じくFTPでまとめサイトにアクセスする。
/WWW_TKSM/kds_tko/hide_script/mc_style/member/以下にファイルが出来上がっているのでローカルにダウンロードする。

手作業で更新するファイル

■/index.php
日付をアップ日に変える　(例：2月1日であれば 2.1)　2ヵ所

<!-- 更新日時 //-->

っていうコメントが書いてある部分です。

一番上に「MC.column…　2/1号掲載いたしました。」を追加し、他の号のリリースのお知らせを消す。
■/news_back/index.html
一番上に「MC.column… 2/1号掲載いたしました。」を追加
■/member/index.php
「▼現在のMC Columnカテゴリ」の部分のリンクのパスを変更
a～eのコラムのうち変更があったもののパスをアップ日の日付に変更
■column/20070201/(a～e）/index.php(変更があったもののみ)
column直下の日付のフォルダがアップ日の日付になっていなかったらアップ日の日付に直す
titleタグの中の日付をアップ日に変更
■/member/column/list/columnlist_(a～e).php
一番下に

<option value="../../20070201/a/content01.php">　・無垢材の食器</option>

を追加

日付を変えるのを忘れずに

MCスタイル新トップページでの作業(仮)

MCスタイルのトップページ変更に伴い、コラムのアップ作業に追加項目があります。

更新するファイル

/index.php
/member/column/new/index.html

更新箇所

■/index.php
・「NEW ARRIVAL」内の[MC.column]の更新日時をアップ日に修正。
・「MC column 上質な暮らしの情報を連載コラムでお届けします。」内を下記の方法で修正。

1.画像の作成: まず、使用する画像（縦217px・横98px）の作成を行います。
アップするコラムの中から客観的に見て内容が良い(？)と思われるコラムを1つ選び、そのコラムに使用されている画像を1つ選びます。
原稿から画像を保存し、その画像をリサイズした後、ファイル名を「img_column_（アップ日の日付）.jpg」として、保存してください。

2.タイトルと文章の追加: 画像の作成で使用したコラムの「タイトル」と「文章」を追加します。
文章は全て追加するのではなく、数行程度を追加して文章を途中で「……」で切ってください。
あとは、一番下に表示されている「続きを読む」のリンク先をコラムのリンク先に変更して終了。

■/member/column/new/index.html

1.画像の作成: まず、使用する画像（縦99px・横99px）の作成を行います。
アップする5つのコラムの中から客観的に見て見栄えが良い(？)画像をそれぞ1つずつ選び、原稿から画像を保存してリサイズした後、「img_（a～f）_（アップ日の日付）.jpg」として保存してください。

2.タイトルと文章の追加: アップする5つのコラムの「タイトル」「小見出し」「文章」の3つを追加します。
文章は全て追加するのではなく、数行程度を追加して文章を途中で「…」で切ってください。
※リンク先の修正は不要。

@@ 27行目: / 27行目: @@
 *誰でも見る事ができるページ：[http://www.mcstyle.com/kds_prep/member/column/new/a/index.html http://www.mcstyle.com/kds_prep/member/column/new/a/index.html]
 *メンバーのみ閲覧可：[http://www.mcstyle.com/kds_prep/member/column/20070201/a/index.php http://www.mcstyle.com/kds_prep/member/column/20070201/a/index.php]
+</div>
+<div class="section">
+===コラムの構造について===
+写真（1～2枚）＋テキスト、またはテキストのみで段落に分かれている。<br>
+段落は2段または3段のどちらか。<br>
+毎回コラムごとに違うので要確認。<br>
+ツールやJSは3段組み使用なので、2段組みのコーディングの際には適宜調整すること。<br>
+<strong>画像を生成する際、＜小見出し＞が3つないとエラーになってしまうので（今のところは）適当な名前で作って後で削除すること</strong>
 </div>
 <div class="section">
@@ 47行目: / 55行目: @@
 .リネームしたimgフォルダに移動する。中にあるXMLファイルと.wmfファイルはいらないので削除<br>
 .同じ写真が複数書き出されているので画像のピクセル数が小さいほうは消す。<br>
-.画像をpht_101.jpg、pht_201.jpg、pht_301.jpgにリネームする。Photoshopで開き、
+.画像を段落ごとにpht_101.jpg、pht_201.jpg、pht_301.jpgにリネームする。段落に画像が2つ以上ある場合はpht_102,pht_103とする。<br>
-幅を175pxにリサイズ。<br>
+Photoshopで開き、幅を175pxにリサイズ。<br>
-幅が175pxに満たない場合は、カンバスサイズ等を使って幅175pxにして下さい。<br>
+幅が175pxに満たない場合は、カンバスサイズ等を使って幅175pxに。<br>
-必要なら簡単な補正やアンシャープマスクをかけて下さい。（リサイズ後の高さは後で使うのでメモしておく。）
+必要なら簡単な補正やアンシャープマスクをかけて下さい。（リサイズ後の高さは後で使うのでメモしておく。）<br>
 <br>
 ====テキストの加工====
@@ 57行目: / 65行目: @@
 本文中改行が入っている箇所に<pre><br></pre>を付ける<br>
 LINKの文字列を＜＞でくくる。＜LINK＞とする。前に1行空行をいれること<br>
-リンクのURL前後に空行を含まないこと。
+リンクのURL前後に空行を含まないこと。<br>
+PHOTOの文字列を＜＞でくくる。＜PHOTO＞とする。前に1行空行をいれること。<br>
+<br>
+こんな感じで（例：d.txt）
 <br>
-PHOTOの文字列を＜＞でくくる。＜PHOTO＞とする。前に1行空行をいれること。
-こんな感じで（例：d.txt）<br>
 <div class="html-source">
 <pre>
@@ 150行目: / 159行目: @@
 </div>
 ====見出し画像の作成====
-見出し画像はPhotoshopをJavaScriptでコントロールしてmidashi.txtを<br>
+見出し画像はPhotoshopをJavaScriptでコントロールして　midashi.txt　を読み込ませ、バッチ処理で作成します。<br>
-読み込ませ、バッチ処理で作成します。<br>
+作成用のJavaScriptファイルをダウンロード。[http://192.168.200.60:16080/kds_tko/hide_script/mc_style/mc_js.lzh MCスタイル作成用JavaScriptファイル]<br>
-作成用のJavaScriptファイルをダウンロード。[http://192.168.200.60:16080/kds_tko/hide_script/mc_style/mc_js.lzh MCスタイル作成用JavaScriptファイル]
 <br>
 ダウンロードしたjsファイルと同じ階層に「before」と「after」の2つのフォルダを作る。<br>
 「before」フォルダの中にmidashi.txtを入れる。<br>
 Photoshopを立ち上げ、ファイル→スクリプト→参照と進む。<br>
-出てきたダイアログでファイルの種類を「JavaScriptファイル(*.JS)」にして<br>
+出てきたダイアログでファイルの種類を「JavaScriptファイル(*.JS)」にして作成用jsファイルを選択する。<br>
-作成用jsファイルを選択する。
+「読み込み」を押すと勝手に処理が始まり、「after」フォルダ内に画像ファイルが出来上がります。<br>
-<br>
-「読み込み」を押すと勝手に処理が始まり、「after」フォルダ内にファイルが画像ファイルが出来上がります。
 <br>
 ====MCスタイル作成君====
-場所はまとめサイトの[http://192.168.200.60:16080/kds_tko/hide_script/mc_style/column2.cgi /kds_tko/hide_script/mc_style/column2.cgi]
+場所はまとめサイトの[http://192.168.200.60:16080/kds_tko/hide_script/mc_style/column2.cgi /kds_tko/hide_script/mc_style/column2.cgi]<br>
-<br>
 FTPでまとめサイトの/WWW_TKSM/kds_tko/hide_script/mc_style/source/にアクセス。<br>
 もともと存在しているやつを削除した後にもろもろをアップロード<br>
@@ 171行目: / 176行目: @@
 確認できたらアップ日を入力（例：2006.5.1）<br>
 確認できたらリンク先のクリップタイトルを入力<br>
-その際にクリップタイトルに'(シングルコーテーション)は含まないこと
+その際にクリップタイトルに'(シングルコーテーション)は含まないこと<br>
 <br>
 さっきメモした画像の高さを順番に入力<br>
 全部入力し終わったら送信をクリック<br>
 さきほどと同じくFTPでまとめサイトにアクセスする。<br>
-/WWW_TKSM/kds_tko/hide_script/mc_style/member/以下にファイルが出来上がっているので<br>
+/WWW_TKSM/kds_tko/hide_script/mc_style/member/以下にファイルが出来上がっているのでローカルにダウンロードする。<br>
-ローカルにダウンロードする。
 <br>
 ====手作業で更新するファイル====
@@ 183行目: / 187行目: @@
 日付をアップ日に変える　(例：2月1日であれば 2.1)　2ヵ所<br>
 <pre><!-- 更新日時 //--></pre>っていうコメントが書いてある部分です。<br>
-一番上に「MC.column…　2/1号掲載いたしました。」を追加し、他の号のリリースの
+一番上に「MC.column…　2/1号掲載いたしました。」を追加し、他の号のリリースのお知らせを消す。<br>
-お知らせを消す。<br>
 ■/news_back/index.html<br>
 一番上に「MC.column… 2/1号掲載いたしました。」を追加<br>
@@ 194行目: / 197行目: @@
 titleタグの中の日付をアップ日に変更<br>
 ■/member/column/list/columnlist_(a～e).php<br>
-一番下に
+一番下に<br>
 <pre><option value="../../20070201/a/content01.php">　・無垢材の食器</option></pre>を追加<br>
-日付を変えるのを忘れずに
+日付を変えるのを忘れずに<br>
 </div>
 ==MCスタイル新トップページでの作業(仮)==
@@ 205行目: / 208行目: @@
 /member/column/new/index.html<br>
 ====更新箇所====
-<p style="padding-top:5px;">■/index.php</p>
+■/index.php<br>
 ・「NEW ARRIVAL」内の[MC.column]の更新日時をアップ日に修正。<br>
-<p style="padding-top:5px;">・「MC column 上質な暮らしの情報を連載コラムでお届けします。」内を下記の方法で修正。</p>
+・「MC column 上質な暮らしの情報を連載コラムでお届けします。」内を下記の方法で修正。<br>
-【修正方法】<br>
+<dl>
-.画像の作成<br>
+<dt>1.画像の作成</dt>
-まず、使用する画像（縦217px・横98px）の作成を行います。アップするコラムの中から客観的に見て内容が良い(？)と思われるコラムを1つ選び、<br>
+<dd>まず、使用する画像（縦217px・横98px）の作成を行います。
-そのコラムに使用されている画像を1つ選びます。原稿から画像を保存し、その画像をリサイズした後、ファイル名を「img_column_（アップ日の日付）.jpg」として、保存してください。<br>
+<br>アップするコラムの中から客観的に見て内容が良い(？)と思われるコラムを1つ選び、そのコラムに使用されている画像を1つ選びます。
-<p style="padding-top:5px;">2.タイトルと文章の追加</p>
+<br>原稿から画像を保存し、その画像をリサイズした後、ファイル名を「img_column_（アップ日の日付）.jpg」として、保存してください。</dd>
-画像の作成で使用したコラムの「タイトル」と「文章」を追加します。文章は全て追加するのではなく、数行程度を追加して<br>
+</dl>
-文章を途中で「……」で切ってください。<br>
+<dl>
-あとは、一番下に表示されている「続きを読む」のリンク先をコラムのリンク先に変更して終了。<br>
+<dt>2.タイトルと文章の追加</dt>
-<p style="padding-top:10px;">■/member/column/new/index.html</p>
+<dd>画像の作成で使用したコラムの「タイトル」と「文章」を追加します。
-【修正方法】<br>
+<br>文章は全て追加するのではなく、数行程度を追加して文章を途中で「……」で切ってください。
-.画像の作成<br>
+<br>あとは、一番下に表示されている「続きを読む」のリンク先をコラムのリンク先に変更して終了。</dd>
-まず、使用する画像（縦99px・横99px）の作成を行います。アップする5つのコラムの中から客観的に見て見栄えが良い(？)画像をそれぞ1つずつ選び、<br>
+</dl>
-原稿から画像を保存して、その画像をリサイズした後、「img_（a～f）_（アップ日の日付）.jpg」として保存してください。<br>
+■/member/column/new/index.html<br>
-<p style="padding-top:5px;">2.タイトルと文章の追加</p>
+<dl>
-アップする5つのコラムの「タイトル」「小見出し」「文章」の3つを追加します。文章は全て追加するのではなく、数行程度を追加して<br>
+<dt>1.画像の作成</dt>
-文章を途中で「…」で切ってください。<br>
+<dd>まず、使用する画像（縦99px・横99px）の作成を行います。
-※リンク先の修正は不要。<br>
+<br>アップする5つのコラムの中から客観的に見て見栄えが良い(？)画像をそれぞ1つずつ選び、原稿から画像を保存してリサイズした後、「img_（a～f）_（アップ日の日付）.jpg」として保存してください。</dd>
+</dl>
+<dl>
+<dt>2.タイトルと文章の追加</dt>
+<dd>アップする5つのコラムの「タイトル」「小見出し」「文章」の3つを追加します。
+<br>文章は全て追加するのではなく、数行程度を追加して文章を途中で「…」で切ってください。
+<br>※リンク先の修正は不要。</dd>
+</dl>
 </div>
 </div>

「MC Styleコラム」の版間の差分

2008年5月2日 (金) 10:04時点における最新版

目次

MCスタイルの更新作業

サイトの構造について

コラムの構造について

更新するファイル

更新手順

下準備

テキストの加工

midashi.txtの作成

見出し画像の作成

MCスタイル作成君

手作業で更新するファイル

MCスタイル新トップページでの作業(仮)

更新するファイル

更新箇所

案内メニュー