サイトの作り方

SOY CMSのブログテンプレート作成－トップページのヘッダー編

目次

前回は、ブログテンプレートのトップページのメインコンテンツ部分を作成しました。今回は、ヘッダー部分を作成します。

ヘッダー部分は、<head>～</head>とページ上部のタイトルを作成します。

メニューもヘッダー部分に含まれていますが、今回はテンプレートにする部分がないため、メニューの書き換えは行ないません。

HTML のヘッド部

HTML のヘッド部とは、<head>～</head>のことです。

この部分では、タイトルフォーマットを書き換えます。

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="all" href="/sampleblog/css/sanitize.css" />
<link rel="stylesheet" href="/sampleblog/css/style.css">
<meta name="keywords" content="SOY CMSのすすめ,サンプルサイト">
<meta name="description" content="SOY CMSのすすめで使うサンプルサイトです。">
<title>サンプル商事株式会社</title>
</head>

上記のうち、<title>部分のみ以下のように書き換えます。

<title>@@blog_name;</title>

この「@@blog_name;」というのは、SOY CMSで使える置換文字列のことです。詳細は以下のページにあります。
SOY CMSで使える置換文字列

<meta name="keywords">と<meta name="description">は、トップページにおいては書き換えを行わないため、今回はなにもしません。

書き換える方法もある

プラグインを使うことで、「keywords」と「description」はトップページでも書き換えることが出来ますが、今回は割愛します。

ページ上部のタイトル

ページ上部のタイトル部分を書き換えることで、ブログタイトルを自由に変えることができます。

ここのところです。

では、実際にブログタイトルを書き換えてみます。

テンプレートエディタから以下の部分を見つけます。

<div class="header-wrapper">
<h1><a href="index.html">サンプル商事株式会社</a></h1>
</div>

これを、以下のように書き換えます。

<div class="header-wrapper">
<h1><a href="@@blog_url;">@@blog_name;</a></h1>
</div>

ここでも、置換文字列を使っています。

@@blog_url;は、ブログのトップページのURLです。
@@blog_name;は、ブログ名です。

こうすることで、例えばドメインを引っ越しても、トップページのURLは引越し先のURLに書き換えてくれます。

終わりに

ヘッダー部分の書き換えを行いました。思ったより簡単だったのではないでしょうか。

実際のHTML のヘッド部ではSNSの設定もできるのですが、今回はブログテンプレートを作成するのが目的なので割愛しました。

次回は、トップページのサイドバーの設定を行います。

ブログページ テンプレート作成

これまで様々なCMSを試してきました。デザインの自由度が高いブログ型CMSとしてSOY CMSを推しています。現在はSOY CMSの解説記事とSOY CMSのテンプレートを作成しています。