オンラインＷｅｂマスター養成講座　：　きた甲斐ねっと tag:www.kita-kai.net,2010-01-21:/online//2 2011-08-26T23:17:13Z 実施したウェブマスター養成講座をオンラインで公開します Movable Type Commercial 4.27-ja HTMLエディタ tag:www.kita-kai.net,2010:/online//2.17 2010-01-21T11:51:39Z 2010-01-29T06:29:23Z HTMLエディタの一番のお奨め。Crescent Eveをインストールしましょう。 リワーク職人 crescentEVE.gifホームページ作成用ツールの導入の一番手は、HTML文章を作成するHTMLエディタです。

推奨ソフトの名称：Crescent Eve

ダウンロードサイト：
http://www.kashim.com/eve/get.html



特徴
  • 入力支援　：　入力可能な候補を表示し、選ぶだけで簡単に入力できます。
  • 文法チェック　：　Eveでは文法チェックを、保存時等に自動的に行えます。
  • HTMLプレビュー　：　内蔵ビューワ、及び各種ブラウザとの連携によるHTMLプレビューが利用可能です。
  • リンク・画像・相対パスの挿入　：　ダイアログでファイルを選択するだけで、リンク(A要素)・画像(IMG要素)・相対パスを挿入できます。
  • スタイルシートへの対応　：　色分け表示を行うほか、CSS 2.1に基づき Property Nameの入力支援を行います。
  • 文字コード　：　世界標準であるUTF-8に、対応しています。
大変軽快に、サクサク動きますし、使っているうちに文法が身につくので、おすすめです

「レンタルサーバーとドメイン取得」につづく
]]> レンタルサーバーとドメイン取得 tag:www.kita-kai.net,2010:/online//2.18 2010-01-24T04:01:45Z 2010-05-26T08:09:24Z ホームページの置き場所：Webサーバー 　ホームページのデータを収納し、公開する... リワーク職人 サーバーとドメイン取得ホームページの置き場所：Webサーバー
　ホームページのデータを収納し、公開するためには、Webサーバーと呼ばれるものが必要です。


サーバーの住所：ドメイン
　また、ホームページの置き場所を公開するための住所（アドレス）も必要になります。
この住所は本来IPアドレスといって、192.168.1.203といったような表示になるのですが、大変わかりにくいし、覚えにくいので、呼称としてドメインという表示を使います。
「○○ドットコム」とかいう、あれです。

さて、ホームページの公開をするためには、以上の二つが必要です。
通常インターネットプロバイダと契約すると、ホームページを公開できるスペースも、サービスとして付属することも多いのですが、ビジネスでホームページを利用するなら、是非とも上記の２つは、別個に用意するようにしましょう。
最近は、高機能で容量も多く、安価なレンタルサーバーサービスが、沢山出ています。
ショッピングカートやブログ運用などを考えると、月額500円程度の出費は、安いものだと思います。

「おすすめのレンタルサーバー比較」　につづく


]]> おすすめレンタルサーバー比較 tag:www.kita-kai.net,2010:/online//2.19 2010-01-26T06:02:14Z 2010-01-28T01:52:26Z いろいろなレンタルサーバーが出ていると思いますが、私の周りで実際に活用しているレ... リワーク職人 レンタルサーバーいろいろなレンタルサーバーが出ていると思いますが、私の周りで実際に活用しているレンタルサーバーの4種類を機能と費用で比較検討してみます。



項目ロリポップステップサーバーさくらインターネットエックスサーバー
プラン名プラス１GプラススタンダードX10
容量２GB２．５GB３GB１０GB
MovableType導入可能
マニュアルあり		可能/マニュアル
自動インストール		可能
マニュアルあり		可能/マニュアル
自動インストール
Mysql5.1.345.0.X5.1.X5.0.77
PHPPHP5PHP4PHP5PHP5
SSL通信使用不可可能可能可能
ドメイン年額
.COM		500円1400円1800円1575円
ドメイン年額
.JP		3360円3500円3800円5250円
ショッピングカートありありなしなし
メールアカウント無制限無制限無制限無制限
メール転送5ヵ所まで10ヶ所まで複数可能複数可能
初期費用1,575円600円1,000円3,150円
月額費用368円400円500円1,050円
お試し期間10日間10日間14日間10日間
まとめ：インターネットショップにチャレンジするなら、ステップサーバー。
　　　　会社紹介のホームページ運用なら、さくらインターネット。
　　　　沢山のサイトを運用するような場合は、エックスサーバーがおすすめ
         でしょうか。

良く研究して、決めましょう。あわせて、各サーバーでドメインも取得できます、他で取得したものも使えますが、それぞれのサーバーで取得すると設定も簡単なので、おすすめです。

ステップサーバーでは、ステップドメイン。
さくらインターネットでは、さくらドメイン。
Xserverでは、Xserverドメインです。
]]> Movable Type tag:www.kita-kai.net,2010:/online//2.20 2010-01-26T10:18:42Z 2010-05-26T06:42:53Z SixApart社のMovableType（ムーバブルタイプ）という、ブログ作... リワーク職人 movabletype
SixApart社のMovableType（ムーバブルタイプ）という、ブログ作成システムは、記事を書くとHtml形式で書き出し、静的なページを作成するため、検索エンジン対策上非常に有効であるといわれています。
また、システムのウェブサービスでは、様々なpingサーバーに更新pingを自動的に通知することもできるため、能動的に更新情報を通知できるという点で、キャンペーン記事などの掲載には向いているともいえます。

さらに自社サイト内で運用できるため、ブログの機能を使うことで、他サイトへのコメントやトラックバックを通じて、主体的に被リンク数を増加させることが出来るとともに、ページの追加も容易であり、SEO上効果的といわれる、サイトボリュームの増加も、同時に実現が可能である。

無償利用が前提であるWorldpress と異なり製品版がベースであるが、無償利用が可能なMovableTypeOpenSouse（MTOS）も公開されているので、利用上の敷居も低くなりました。

2010.1.26現在、MTOSはMTのバージョンアップと連動し、バージョン５も公開されていますが、サーバー環境が対応していない可能性もあり、ひとまずバージョン4.27　をおすすめします。

MTOS4.27のダウンロードサイトは、こちら

それでは、早速、上記MTOSサイトからMTOSをダウンロードし、自分が借りたサーバーにシステムをインストールしましょう。

次は、「新しいブログの作成」です
]]> 新しいブログの作成 tag:www.kita-kai.net,2010:/online//2.21 2010-01-26T11:08:58Z 2010-01-29T06:34:39Z システムのインストールが終わったら、対話式に設定が進みます。ベータベースは、大... リワーク職人 新しいブログの作成
システムのインストールが終わったら、対話式に設定が進みます。
ベータベースは、大きなシステムになりそうならMysql。あまり大きくならないようならSQliteを、おすすめします。感覚的に、SQliteのほうが再構築に費やされる時間が、短いように思います。

ブログもデフォルトで「first_blog」という名前のものが作成されますが、名称はその都度変更が出来ます。
ブログの名称と、公開パスは、事前に決めておきましょう。

また、追加して新しいブログを作るときは、システムメニューの新規作成から、ブログを選択します。

新しいブログの設定
順次、マニュアルを見ながら、詳細設定をしてゆきます。 基本設定が出来たら、再構築して、サイト表示します。 サイト表示ボタン

続いて、「スタイルを適用する」です。 ]]> スタイルを適用する tag:www.kita-kai.net,2010:/online//2.22 2010-01-26T11:40:27Z 2011-08-26T23:02:52Z 新規ブログを立ち上げると、デフォルトでは「minimalist-red」というス... リワーク職人 新規ブログを立ち上げると、デフォルトでは「minimalist-red」というスタイルが適用されます。

デフォルトスタイル

 

 

このスタイルを変更するには、管理画面のメニューバー「デザイン」→「スタイル」を選択します。

MTスタイルライブラリー

 

 

好みのデザインを選び、あわせてレイアウトも選択できます。

レイアウトの選択


レイアウトには、2カラム、3カラムがあり、更にはナビゲーション部分が右寄せのもの、左寄せのものなど、 選択できるようになっています。
デザインの適用をおこなったら、再び「再構築」ボタンをクリックして、見栄え確認をしてみます。

参考）左上に緑色の＋マークがあるので、これをクリックすると、
　　　　「スタイルシートまたはリポジトリのURL」を聞いてくるので、
　　　　テンプレートを提供してくれるサイトのURLを指定すれば、
　　　　デフォルト以外のデザインを適用することも可能です。
　　　　（Dr.Blog用　URL　http://drblog.jp/style4　注:ここは商用利用不可！）

次は、カスタマイズ編「看板画像の入れ替え」です

]]> 看板画像を入れ替える tag:www.kita-kai.net,2010:/online//2.23 2010-01-27T02:40:57Z 2011-08-26T23:19:21Z 自分だけのブログデザインをしたい！ブログのカスタマイズではじめに手がけたいのは、... リワーク職人 自分だけのブログデザインをしたい！

ブログのカスタマイズではじめに手がけたいのは、「看板画像を入れ替える」ことでしょう。
まずは、HTMLソースと外部スタイルシートの位置関係を確認しましょう。

トップページのHTMLソースは、テンプレートのメインページが適用されます。
同じくテンプレートのスタイルシートが、すべてのページに適用されていますから、
中味を確認してみます。

スタイルで「cityscape-sf」（サンフランシスコ）を選択した場合、スタイルシートの中味は

スタイルシート内容


つまり基本となるblog.css　のスタイルシートの上から、選択したテーマの（サンフランシスコ用）スタイルシートが適用されているのです。 したがって、この場合は「cityscape-sf」というテーマのフォルダ内の看板画像が、表示されているのです。

 FFFTPなどで、サーバーの上記フォルダにアクセスします。

テーマフォルダ内部


看板画像　header.png　をダウンロードして　Jtrm　などの画像ソフトでサイズを確認。 同じサイズの看板画像を作成したら、同じ場所に同じ名前でアップロードすれば、自分流の看板の出来上がりです。（使用しているMTのバージョンによっては、別の名称や拡張子、pngではなくgif等の場合もあります。良く確認して、ファイル名を決めてください。場合によっては、スタイルシートも改編します）

どうでしょう。看板画像、変わりましたか？

]]> サイトポリシーの表示 tag:www.kita-kai.net,2010:/online//2.24 2010-01-27T03:37:03Z 2011-08-26T23:12:32Z カスタマイズの第二弾はメインページのトップに「サイトポリシーを表示する」です。見... リワーク職人 カスタマイズの第二弾はメインページのトップに「サイトポリシーを表示する」です。
見栄えとしては、以下のようになりますが、画像を含めたサイトの趣旨説明・ご挨拶といったところです。

メインページ見本

 

 

この部分は、ウェブページを作成し、その記事部分をメインページに流し込んでいます。
それでは、テンプレートソースをカスタマイズしてゆきましょう。
確認する場所は、「テンプレート」→「メインページ」です。
およそ、20行目近辺に<div id="alpha">
                              <div id="alpha-inner"> の表示があります。
（注：MT4.1では、<$mt:Include module="バナーヘッダー"$>　という行になります）

これ以降が、メインカラムの内容部分になります。
（ちなみに、2カラムのナビゲーション部分は、<beta>　３カラムのサブナビゲーションが<gamma>です。）
それでは、<div id="alpha-inner">の後ろに空白行をいれ、そこに以下のようなソースを貼り付けます。

　<mt:Pages tag="挨拶" lastn="1">
　<mt:PageBody />
　</mt:Pages>

このソースは、挨拶　というタグを指定したウェブページの最新の記事内容部分のみ（記事タイトルを含まない）をひとつだけ表示させます。 貼り付け終わったら、「保存と再構築」をおこないます。

早速、新規作成からウェブページを選択し、サイトの趣旨説明記事を作成しましょう。タグ欄に「挨拶」の指定を忘れずに。

挨拶記事のタグ指定



なお、挿入する画像の横サイズは、カラムの形態の応じてサイズが違いますので、ソースを確認しながら、「width：100%」とします。またheight指定は削除します。文法上では、問題がありますが、これによって自動的にalpha-innerの横幅と同じ幅の写真が表示されます。

ちなみに、デフォルトのウィジェットモジュールのページ一覧では、この記事もリスト
アップされます。それを避けるためには、いくつかの工夫が必要になります。
「＠タグ」（プライベートタグといわれる）などの利用もそのうちの一つだと思います。
記載場所がわかりにくいのですが、詳細は、「MovableType　4.2　Perfect　Guide」等に
記載記事があります。参考にしてください。

次は、メインページの下に「新着記事一覧を表示する」　です。

]]> 新着記事一覧を表示する tag:www.kita-kai.net,2010:/online//2.25 2010-01-27T07:57:10Z 2011-08-26T23:17:13Z カスタマイズの第三弾は、メインページの下部に「新着記事一覧を表示する」です。 ... リワーク職人 カスタマイズの第三弾は、メインページの下部に「新着記事一覧を表示する」です。

通常はサイドバーに適用されるウィジェットセットを利用してみました。
ウィジェットセットの利点は、良く使うツールを「ウィジェットテンプレート」として作成しておけば、必要に応じて簡単にコンテンツの入れ替えが可能ところです。
ここでは、新着記事リストを、5件表示させるウィジェットテンプレートを作成し、メインページに表示させましょう。
前回同様に、「デザイン」→「テンプレート」→「メインページ」を開きます。
「サイトポリシーを表示する」の項目で挿入した　～</mt:Pages>の後ろの　<mt:Entries>　から　</mt:Entries>　までを削除します。（この削除する部分は、ブログシステムのメイン部分の最新記事の概要表示を指定しているソースコードです。）
この代わりに、ウィジェットセットを挿入するソースコードを書き加えます。

ウィジェットセット挿入



以下のようなソースコードが自動意的に挿入されますので、名前を"news"と入力し、変更を保存します。

<$mt:WidgetSet name="news"$>
 
ウィジェットセットへのリンク













テンプレートソースの窓の右側に、新規作成の表示が見えるので、クリックしウィジェットセットを作成します。

内容が空の状態のままで、保存します。

ウェジィットセット作成

 

アクションツール

ウィジェットテンプレート「最近のブログ記事」を開き、右下のアクションツールで「複製」をクリックします。（MTのバージョンによっては、複製メニューがない場合があります。その場合は、[デザイン」→「ウィジェット」の画面に行き、「ウィジェットテンプレート」から「作成をクリックします。

ウィジェットテンプレート作成



「最近のブログ記事コピー」を開き、タイトルを「新着記事」と直し、ソースには以下のものを貼り付けます。（新規作成した場合は、タイトルを「新着記事」とし、ソースを貼り付けます）

<mt:If tag="BlogEntryCount">
    <mt:Entries lastn="5">
        <mt:EntriesHeader>
<h2 class="news">新着記事</h2>
     <div class="asset-header">
        <ul>
        </mt:EntriesHeader>
            <li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a>（<$mt:EntryDate format="%y/%m/%d"$>）<br />
<$mt:EntryExcerpt$>
</li>
        <mt:EntriesFooter>
        </ul>
    </div>
        </mt:EntriesFooter>
    </mt:Entries>
</mt:If>



ウェジィットセットのnews(左側表示部分）に、作成した「新着記事」ウェジィットテンプレートをドラッグアンドドロップでインストール済みに移動して「変更を保存」します。
あらためて、システムを再構築し、出来栄えを確認してみましょう。

 
]]>