Movable Type.net

MovableType.net 活用ブログ

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

「企業サイトとスタッフブログ」のようにウェブサイトとブログを組み合わせる方法

コーポレートサイトを運用しているけど、ニュースとは別にスタッフブログが欲しいな。この場合サイトはサイト、ブログはブログで運営した方がいいのかな?など検討されることがあると思います。

でも、ブログ記事も大事なコンテンツ、検索対策としてもドメインの配下にある方がいいんです♪

企業サイトの中にブログを設置するなんて、結構色々大変なんじゃない?と思いがちですが、ウェブサイトの配下に複数ブログを作成できる(※上限あり) MovableType.net なら簡単にできちゃいます!

今回は、企業サイトの中でスタッフブログを運営するケースを例に、ヘッダーメニューをサイトとブログで共通にする方法や、ブログの更新情報をサイトのトップに表示する方法などをご紹介します。

staffblog.jpg

今回はベースとして、 中規模企業サイトに最適なテーマ「General Corporate」と、ブログ向けテーマ「General Blog」を使います。このGeneralシリーズは組み合わせて使うことを考慮して設計されています。

この記事を参照しながら、すぐに試せるサンプルテーマもインポート可能なファイルとして掲載しますので、是非実際に試してみてください!

実際に反映されたデモサイトは以下になります。

サンプルテーマのダウンロードは以下になります。general-set-website.zipがウェブサイト用で、general-set-blog.zipはその配下のブログ用になります。

実際利用する際の注意点としては、スタッフブログを作る時のブログURLのフォルダ名を blog にし、識別子blog にしてください。

settings.jpg

ヘッダーメニューを共通化する

headermenu.jpg

ウェブサイトとその配下のブログはテンプレートは基本的に別ですが、同じウェブサイト内の他のブログのモジュールを読み込むといったことも可能です。

今回はスタッフブログの方でその親にあたるウェブサイトの情報を引っ張ってくる、という方法をご紹介します。

まず、親であるウェブサイトの方のヘッダーメニュー部分である、header-menuとスマホ時のメニューであるleft-menuモジュール内にそれぞれ、以下のスタッフブログへのリンクを追加します。aタグ内のblog/の部分が先ほどブログを作る際にフォルダ名をblogにしたことに関係します。

<li><a href="<$mt:BlogRelativeURL$>blog/">スタッフブログ</a></li>

header-menuの追加位置
header-menu.jpg
left-menuの追加位置
left-menu.jpg
以上で、ウェブサイトのメニューに配下のブログへのリンクが追加されました。

続いて、スタッフブログの方のメニューをみていきます。こちらもheader-menuleft-menuモジュールを親であるウェブサイトと全く同じ内容にした上で、以下のタグでくくります。※テンプレートのソースに関してはサンプルテーマをご参照ください。

<mt:BlogParentWebsite> </mt:BlogParentWebsite>

headermenublog.jpg

このタグはそのブログが所属している親ウェブサイトの情報を取ってくる、ということになるので実際表示される内容は親であるウェブサイトと同じものになります。

これによって、ヘッダーメニューが共通化され、自然に行き来できるようになりました。

内容が共通なモジュールは1つで共用する

info-0331de25.jpg

サイドバーに表示しているInformationなどまったく同じ内容でMTタグの影響を受けないものは、共通で1つ作り同じものを読み込む運用がおすすめです。

今回は親ウェブサイトにinformationというモジュールがあるので、スタッフブログのwebpage-sidebarnews-sidebarのmt:Includeタグ内で、モジュールを指定した後にparent="1"と指定することによって親ウェブサイトのモジュールを呼び出しています。

parent.jpg
これにより、親ウェブサイトのモジュールを変更するだけで配下のブログの該当部分も変更できます。

共通のバナーや広告などを設置するときなどに便利ですね。

ウェブサイトに特定のブログの記事一覧を表示する

staffblog-b731e608.jpg

最後に紹介するのは、ウェブサイトのトップページに配下の特定のブログの記事一覧を表示する方法です。今回はスタッフブログの記事一覧を表示します。

具体的にはウェブサイトのメインページ内に、ニュース一覧と同じ内容を複製し見出しなどを変更し、mt:Entriesタグにinclude_blogs="blog"を追加するだけです。

includeblog.jpg
include_blogsを入れることによって、そこで指定したブログの記事一覧を表示することができます。

ここでのポイントは、ブログを作成した後に識別子としてblogを指定したことです。識別子を指定しておくことによりinclude_blogsなどで指定でき、ウェブサイトとブログをセットにしたテーマを作りやすくなります。

以上、ウェブサイトと配下のブログを組み合わせる方法の一例をご紹介してきましたが、ここからさらに CSSを1つにし共通化していくなどより管理しやすいようにすることができると思います。

実際のサンプルテーマを試しつつ、是非色々な運用をお試しいただければと思います!

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

アカウント作成

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

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