Movable Type.net

MovableType.net 活用ブログ

MovableType.net の新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。

【後編】Web制作の経験がなくてもできる!MovableType.net の用語や概念を確認しながら無料トライアルを試してみよう!

Web制作の経験がない方に向けて、 「MovableType.net で知っておきたい用語」と、「アカウントを作成したら挑戦してみたい6つのこと」を2回に分けてご紹介する【後編】になります。ぜひ▶【前編】Web制作の経験がなくてもできる!MovableType.net の用語や概念を確認しながら無料トライアルを試してみよう!を読んだ後に、ご覧ください。

OGP

前編では、

  • アカウント作成・ウェブサイト作成
    -用語解説:テーマとは
  • 閲覧パスワード設定
    -用語解説:MovableType.net におけるウェブサイトとブログの違い
  • ベーステーマの再適用
    までを解説しました。

今回の後編では、

  • ウェブサイトの画像差し替え
  • お問い合わせフォームの設置
  • ニュース記事更新
    -用語解説:本文と続きの違い

を解説します。

では早速、始めましょう!

① テーマ「Simple Corporate」に使われている画像を好きな画像に差し替える

今回はテーマ「Simple Corporate」を使って解説していきますので、始めに前編でも解説したテーマの再適用で、ウェブサイトのテーマを「Simple Corporate」にしてください。差し替え後のイメージは以下になります。

差し替え後のキービジュアル

  1. 最初に画面左側のメニューから[ デザイン ]-[ ファイルマネージャ ]をクリックします。すると、images と js というファイルが出てくるので、images の方を開いてください。この images の中には現在適用しているテーマ「Simple Corporate」の中に使われている画像が収納されています。

    では、images の中に収納されている5つの画像が、ウェブサイト上のどの位置で使われているか確認してみましょう。

    • bg-top-main.jpg(サイズ目安:2000px × 1333px)→キービジュアル(メイン画像)の背景
    • favicon.ico(サイズ目安:16px × 16px)→ファビコン画像
    • logo.png(サイズ目安:高さ 50px 程度)→画面左上のロゴ画像
    • main-img.png(サイズ目安:435px × 170px)→画面中央のサイト名画像
    • ogimage.png(サイズ目安:1200px × 630px)→「og:image」という単語をご存知の方はピンとくると思うのですが、Facebookなどに記事をシェアするときに表示される画像です。もちろん MovableType.net では記事ごとにその記事にあわせた画像を設定することができるのですが、ここで設定する画像は、記事にog:imageを指定しなかった場合や、記事以外にもウェブサイトトップなどをシェアしたときに表示されます。

    imagesフォルダに入っている画像の詳細解説

    今回は「bg-top-main.jpg →キービジュアルの背景」と「main-img.png →画面中央のサイト名画像」の2つを差し替えてみたいと思います。

    CSSやHTMLを触らずに画像を差し替える際、確認するべきことは、

    • 差し替える画像のサイズ
    • 差し替える画像のファイル名

    の2つです。もともとテーマで使用されている画像と同じサイズの画像を用意すればCSSで高さや幅を調節する必要もないのでスムーズです。また、差し替える画像のファイル名を、imagesの中にもとから入っているファイル名と同じにすることで、ファイルが上書きされ、テンプレートを触らなくてもウェブサイトに表示させる画像を差し替えることができます。(例えば、logo.pngを差し替えたい場合、新規でアップロードする画像の名前もlogo.pngにしておくということ)

    今回は以下に差し替え用のサンプル画像が入ったzipファイルを添付していますので、画像はこちらをご利用ください。

    SimpleCorporate-sample-images.zipをダウンロード

  2. 新規の画像をアップードする方法は、現在のフォルダ:の右側にある+ボタンをクリック。

    新しい画像をアップロードする方法

    [ ファイル選択 ]をクリックして、zipでダウンロードしたbg-top-main.jpg またはmain-img.pngを選択したら、[ アップロード ]をクリック。すると画像が差し替わります。

    「本当にアップロードできたの?」と感じたときは、bg-top-main.jpgの横の投稿日を確認してみてください。上手くアップロードできていたら最新日時に更新されています。

    もしも、もともとimagesの中に入っている画像と違う名前で画像をアップロードした場合は、画像が上書きされないため、画像の件数が一件多く表示されます。その場合は、新規でアップロードする画像の名前を修正して、アップロードしなおしてみてください。すると差し替えた画像がウェブサイトに反映されます。

  3. ウェブサイトに画像が反映されたかを確認するときは、前編でご紹介したテーマの再適用の時と同じく、ダッシュボードの右上にある矢印マークをクリックして確認してみてください。

    プレビューが見たいときの方法

② お問い合わせフォームを設置する

MovableType.net では、外部サービスを利用しなくても簡易的なメールフォームを設置する事ができるので、いわゆる「お問い合わせ」ページを簡単に作成できます。お問い合わせページを設ける場合は、一般的にウェブサイトの配下にウェブページとして作成します。

※ここで「ウェブページ」と「記事」の違いが気になった方は▶記事とウェブページの使い分けをご参照ください。

  1. 設置方法は、まず画面左側のメニューから[ フォーム ]-[ 設定 ]をクリック。お問い合わせフォームで送信された内容を受信するメールアドレスを「メールアドレス」項目に入力し[ 変更を保存 ]をクリック。

    次に「フォーム設定」タブをクリックし、お問い合わせフォームで表示させたい項目を選択します。ここで入力必須にしたい質問は[ 必須項目にする ]のチェックボックスにレ点を入れればOKです。設定が完了したら、[ 変更を保存 ]をクリックし「基本設定」タブに戻ります。そこで表示されている埋め込みコードをCtrl+C (Windowsの場合)などでコピーします。

  2. それでは、コピーした埋め込みコードをウェブページに貼り付けていきます。(大丈夫です!カンタンですよ)

    画面左側のメニューの[ ウェブページ ]-[ 新規 ]をクリック。タイトル部分に「お問い合わせ」と入力し、フォーマット:リッチテキストを選択したら、□HTMLの編集 にレ点を入れます。そして、本文のところに先ほどコピーした埋め込みコードをCtrl+V(Windowsの場合)などで貼り付けてください。最後に右側の「公開」ボックスの中にあるファイル名の枠の中にform と入力し、保存をクリックすれば設置完了です。

    ウェブサイトにフォームのタグを貼り付ける
    ※画像が小さくて見えづらい場合、画像をクリックするとポップアップで大きく表示できます。
  3. では、管理画面右上のプレビューマークをクリックして、ウェブサイトにフォームが反映されているか確認してみてください。うまく設置できたらウェブサイトの上のメニューに「TOP」「ニュース」にくわえて「お問い合わせ」が表示されているはずです。表示されていたら、ぜひテスト送信をするなど試してみてください。

③ ニュースに記事を書いてみる。

企業のWeb担当の方や、広報の方など実際に記事を更新する人は、きっと書き心地を試してみたいはず。ということで実際にニュースに記事を書いてみましょう。

  1. 画面左側のメニューから、[ 記事 ]-[ 新規 ]をクリック。感覚的に想像できると思うのですが細い枠が記事のタイトル、下の大きな枠が本文を入れる枠です。

    まず、フォーマット(どの形式で文章を書くか)を設定します。MovableType.net のフォーマットの種類は「なし」「改行を反映」「Markdown」「リッチテキスト」の四種類です。今回は、HTMLが分からなくても記事をWordのように書くことができる、「リッチテキスト」を選択します。もちろんHTMLが分かるよ、Markdownで書けるよという方は他のものを選んでいただいてもかまいません。各フォーマットの違いについての詳細は下記のドキュメントを参照して下さい。

    ▶テキストフォーマットについて

    フォーマットが選べたら、記事を書いていきます。

  2. 用語解説:『本文』と『続き』の違いは?
    
    Write-a-report4.png
    『本文』と『続き』という2つのフィールドがあることによって、1つの記事を2つに分割できると考えてください。 では記事全体の文章が2つに分けられることによって何が得られるのか。ということですが、例えば記事冒頭のこの部分だけ表示させて、残りは「この記事を読む」などで読ませたい場合に、『本文』に冒頭を入れて『続き』に残りの文章を入れることで可能になります。もちろん、わざわざ記事を分割させて表示させる必要がない場合、『本文』だけを使って記事を書くことも可能です。『本文』と『続き』の使い方は、ウェブサイトを設計するとき、または運用方法を考えるときに決まってくるということになります。
  3. 「タイトル」、「本文」、「続き」にテキストを入れてみてください(何度も言うようですが、フォーマットでリッチテキストを選択している場合はテキストをpタグでくくったりする必要はありませんよ^^)ちなみに、テーマ「Simple Corporate」では本文に入れたテキストが記事タイトルとともにウェブサイトトップのニュース欄に表示されるようになっています。

    今回は編集画面下部にある、キーワードの枠と概要の枠は、空白の状態でOKです。

    ↓このようにテキストを入れると↓

    記事を書く例

    ↓ウェブサイトトップのニュース欄でこのように表示されるはずです。↓

    書いた記事の表示例

    「No image」と表示されているところに画像を表示させたい!という場合、テーマ「Simple Corporate」では、、記事内で一番最初にアップされた画像が記事のイメージ画像になるようにデフォルトで設定されています。試しに記事の中に画像を挿入してみてください。

    ↓このように記事に画像を挿入すると↓

    記事に画像を挿入する

    ↓このように表示されます。↓

    記事の表示例2

    画像の挿入はどうすれば良いの?という方いらっしゃいますよね。このあたりは、別記事で「記事の書き方編」という形で解説したいと思っていますので少々お待ちを。

    画像が問題なく挿入できるよという方、MovableType.net には記事に画像を挿入するときに使える便利な機能があります。ぜひ以下の記事をご参照ください。特に画像の最大サイズを設定する方法は知っていて損はないですよ♪

    ▶アイテム複数アップロード機能を使って効率よく記事を書く方法

    ▶ウェブサイト・ブログ毎に画像の最大サイズを設定できる新機能のご紹介

以上でWeb制作の経験がなくてもできる!MovableType.net の用語や概念を確認しながら無料トライアルを試してみよう!【後編】はおしまいです。

MovableType.net はアカウントを作成すればいくつでもウェブサイトを作成することができ、作成したウェブサイトごとに無料トライアルを14日間お試しいただけます。

「Simple Corporate」をはじめとした、MovableType.net のベーステーマは、見た目のデザインだけでなく、運用時のことも考えてひとつひとつカスタマイズされていますので、ぜひ色んなテーマをさわってみてくださいね♪

MovableType.net の特長や、仕様に関して直接シックス・アパートの人に質問してみたい!という方がいらっしゃいましたら、ぜひ全国各地で開催している MovableType.netハンズオンセミナーにご参加ください。

▶MovableType.net に関するセミナー情報を確認する

アカウント作成は無料! 同じアカウントでウェブサイトをいくつでも作成でき、作成したウェブサイト毎に14日間無料で利用可能です。

アカウント作成

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス