はじめに

ブログのテンプレートには、とても洗練されたものが多くありますが、メインサイト内の一部としてブログを活用する場合などは、訪問者が戸惑わないためにもメインサイトと同じようなイメージを持たせた方がいい場合もあります。

ブログの見栄えはスタイルシートで設定しています。スタイルシートを変更できるブログであれば見栄えを変更することが可能です。

しかし、スタイルシートを変更するためにはスタイルシートのソースを書き込む必要があります・・・そこで、ここではビルダーにスタイルシートのソースを作成してもらい、できたソースをブログサイトのスタイルシート設定箇所に貼り付けてブログの見栄えを変更してみます。

操作方法の一部は拙著『「ホームページビルダー」でブログをカスタマイズする本』でもご紹介しています。(書籍の対象としているビルダーのバージョンはV10以前のものです。)

操作対象のビルダーバージョンについて

ホームページビルダーは、バージョン11からスタイルシートの設定画面が大きく変わっています。ここでは、ホームページビルダー・V11/V12を対象とした操作方法です。

デザインを変更するブログについて

ここでご紹介しているブログの操作方法は、「ココログ(フリー)」と「JUST BLOG(ジャストシステムブログ)」です。この二つのブログはTypePadをベースにしているので「TypePad」や「ブログ人」とも共通すると思います。(できたスタイルシートのソースは[カスタムCSS]の個所へ貼り付けます。)

調整が必要な場合があります

ここで紹介する方法でスタイルを設定しても実際のブログサイトへ反映させた時に広告などの影響により調整が必要な場合があります。(それでも一から入力するよりは楽だと思います。)

開設したばかりのブログ

上図が開設した時のブログです。

このブログの見栄えを当サイトと同じような見栄えにします。
「ホームページビルダー作成報告」のサイトは、凝ったデザインではないため比較的簡単に似たようなデザインにできると思います。

見栄え変更後のブログ(JUST BLOG)

見栄え変更後のブログ(ココログフリー)

レイアウトの選択・テーマの選択

ブログサイトにて[現在のデザイン]を変更、または[新しいデザインを作成]します。

[レイアウトを変更][表示項目を選択][並べ方を変更]を操作してメインサイトと同じレイアウトとなるように、「左にサイドバー」「右がメインコンテンツ」となるようにしました。

次に[テーマを変更]で[カスタムテーマ]を選び背景色や文字色などをメインサイトと同じようにします。

このような感じになりました。このページを元にビルダーでスタイルシートを作成していきます。

・・・・とビルダーでの編集に移る前に、スタイルシートを貼り付ける所も確認しておきましょう。スタイルシートを貼り付ける場所は「カスタムCSS」です。「JUSTBLOG」の場合、既にヒントとなる内容が書き込まれているのでそれを参考にしてビルダーでの作業を進めていきます。

カスタムCSS

ブログサイトの[現在のデザインを編集]の中にある「カスタムCSS」を使ってメインサイトと同じようなデザインへと変更を行います。

「コメントアウトすることにより有効になる」とは？

例えば・・・

/*
div#banner
{
background-image: url(http://abcdomain.jp/abc.jpg);
background-repeat: no-repeat;
background-position: center;
}
　*/

とある場合、ソースの上に「/*」　とあり、ソースの下に「/*」とあります。
これらで囲まれている間のものは「コメント」として扱われるため、スタイルシートの設定としてデザインに反映されません

デザインとして反映させるには、ソースの上の「/*」　とソース下の「/*」を削除します。↓このように

div#banner
{
background-image: url(http://abcdomain.jp/abc.jpg);
background-repeat: no-repeat;
background-position: center;
}

ビルダー上でバナー部分をデザインしてみる

ブログページをビルダーで編集・・・とは言っても実際のブログページのデザインが変更になるわけではありません。

ここでは、例としてバナー部分のデザインをビルダー上で編集してみます。
(サイドバーや記事タイトルなどの部分もバナー部分の編集と同じ要領で操作していけばデザインを変更することができます。)

※ビルダー12、ビルダー11でのスタイルシートの設定方法を元に記事を作成しています。ビルダー10以前のビルダーでは一部操作可能ですが、全て下記のとおりには操作できません。

ビルダーにページを取り込む

まず、現在のブログページをビルダー編集画面に取り込みます。
メニューバーより、[ファイル]→[URLから読み込み]→[ブログページのアドレスを入力し[OK]ボタンをクリックしてページ編集画面へ取り込みます。(「安全ではないコンテンツを含む・・・」のメッセージが表示されたら[いいえ]をクリックしてダウンロードを継続します。)

以上の操作でビルダーの[ページ編集]画面にブログのページが表示されます。[ページ編集]画面ではレイアウトが崩れて表示されるかもしれません。ページ確認は[プレビュー]画面で行うようにします。

また、[プレビュー]画面に切り替えた時、「スクリプトエラー」が表示されるかもしれません。その場合「このスクリプトを実行し続けますか？」と聞いてくるので[いいえ]をクリックします。

※今回はバナー部分の変更のみなので、他の部分のレイアウトの崩れは気にしないように。。

スタイルシートのファイルを作成する

 
1. スタイルシートマネージャーを起動して新しく外部スタイルシートを作成します。
   【関連】外部スタイルシートの新規作成
 
2. [スタイルシート情報]には図のように二つのスタイルシートが表示されます。
     一つはブログサイトの用意しているスタイルシート。もう一つは先ほど作成したスタイルシートです。この内で編集するのは、下の段にあるビルダーで作成したfile:///～のスタイルシートです。
      

カスタムCSSの内容を参考にスタイルシートを作成する

 
1. [スタイルシート情報]にあるfile:///～(作成したスタイルシート)をクリックして[追加]ボタンをクリックします。参考<図1>
   
2. [スタイルの設定]画面が表示されます。
3. ブログサイトにある「カスタムCSS」の「バナー部分の中身」の個所を参考にして、HTMLタグ名の個所には div#banner-inner (JUSTBLOGの場合)   と入力します。 (ココログフリーの場合は、#banner )
4. どの部分に適用されるのか試しに[背景色]を設定して確認してみます。

　ワンポイント・・どの部分にスタイルが反映されるかわからない場合はとりあえず背景色を設定してみると、スタイルの反映される箇所の色が変更になるためわかりやすいですよ。

5. [プレビュー]画面で確認すると、バナー全体のスタイルを設定できるようです。
   
     div#banner-innerには、バナー全体の背景色または背景画像のスタイルを設定します。【関連】[スタイルの詳細設定]

※当サイトの場合は、バナーの背景画像と高さを設定しました。また、余白をなくすためマージンとパディングを0ピクセルに設定しています。

※スタイル設定後のスタイルシートマネージャー<図1>

タイトル文字のサイズ変更

 
1. 上記『カスタムCSSの内容を参考にスタイルシートを作成する』と同じ要領でスタイルの設定画面を表示します。
2. ブログサイトにある「カスタムCSS」の「バナー部分の中身」の個所を参考にして(JUSTBLOGの場合) 、HTMLタグ名の個所には
       div#banner-inner h1#banner-header と入力します。 (ココログフリーの場合は、#banner h1 )
   
3. スタイルの設定画面では、[フォント]タブをクリックして文字サイズを設定します。文字色を変更する場合は[色と背景]タブをクリックして表示される画面の[前景色]を設定します。【関連】[スタイルの詳細設定]

※当サイトの場合は、文字[サイズ]を「12ピクセル」　[文字の属性]で「太い」　をチェックしています。また、タイトル文字の左余白をとるため、[パディング]を設定を「左方向　10ピクセル」と設定しています。

サブタイトル文字のサイズ変更

 
1. 上記『カスタムCSSの内容を参考にスタイルシートを作成する』と同じ要領でスタイルの設定画面を表示します。 
2. ブログサイトにある「カスタムCSS」の「バナー部分の中身」の個所を参考にして、HTMLタグ名の個所には
       div#banner-inner h2#banner-description (JUSTBLOGの場合) と入力します。 (ココログフリーの場合は、#banner h2 )
3. 上記『タイトル文字のサイズを変更』の3.と同じ要領でスタイルの設定行います。
4. 以上でバナー部分のスタイルの設定は完了です。次はビルダーで出来あがったソースをコピーして貼り付けます。

※ビルダー上で設定したスタイル

スタイルシートのソースをコピーする

1. [スタイルシート情報]にあるfile:///～(作成したスタイルシート)をクリックして[CSSエディタで編集]ボタンをクリックします。
   
2. CSSエディタが開きます。画面中央にスタイルシートのソースがあるので、それらをすべてコピーします。(点線で囲んだ箇所のソースをコピーする)
   
3. ブログサイトの「カスタムCSS」の「バナー部分の中身」の所にコピーしたソースを貼り付けます。この時、JUSTBLOGの場合「コメントアウト」を忘れないようにして下さい。画像を利用していない場合は、この作業で終了です。「カスタムCSS」を保存してブログを[再構築](反映)します。　画像を利用している場合は、続けて次の操作を行います。
     【関連】コメントアウトするとは？
4. 背景画像を利用している場合は
     background-image : url(file:///C:/Users/○○/○○/○○/abc.gif);
     とfile:///～で始まっている箇所があるので画像ファイル名だけ残してfile:///～の部分を削除します。このように↓
     background-image : url(abc.gif);
     ソースを修正したら、「カスタムCSS」を保存します。
5. 次に、画像ファイルをブログサイトへ転送します。
     操作は次のとおりです。
     [コントロールパネル]→[ファイル]→[ファイルマネージャー]が開きます。ここでは、わかりやすいようにスタイルシートの保存場所と同じところ(styles.cssの保存されている場所)へ背景画像を保存したいと思います。私が利用しているブログの場合スタイルシートの保存場所は、blogフォルダにあるようですのでblogフォルダをクリックして開きます。
    
     blogフォルダが開いたら、[ファイルをアップロード]箇所の[参照]ボタンをクリックして背景画像ファイルを選択し、[アップロード]をクリックします。
6. 以上の操作でとりあえずは完成です。ブログの再構築(反映)を行い確認しましょう。サーバーによっては広告などが自動的に挿入されるためビルダーで編集した時とは少し違うように表示される場合もあります。その時は再構築(反映)したブログ画面を確認しながら再度ビルダーで調整するか「カスタムCSS」のソースを直接変更して調整してみてください。

以上の要領を用いて、他の個所のスタイルも設定することが可能です。ちなみにサイドバーの見栄えを変更する時は、JUSTBLOGの場合「サイドバー・モジュールの指定」箇所を参考にスタイルを設定していきます。

「カスタムCSS」を利用して見栄えを変更したブログ(JUSTBLOG)

「カスタムCSS」を利用して見栄えを変更したブログ(ココログ　フリー)

スタイルを設定するクラス名を探す

ビルダーの編集画面に取り込んだブログページを頼りに、「スタイル　クラス」ツールバーに表示されるクラス名を確認します。

「スタイル　クラス」ツールバーを表示するには、メニューバーより[表示]→[ツールバー]→[スタイル　クラス]にチェックを入れます。
←[スタイル　クラス]ツールバー

スタイルを設定したい個所をクリックしてスタイルクラスツールバーを確認するとその部分に設定されているクラス名を確認することができます。

※クラス名は1部分のみに設定されているとは限りません。他の部分にもデザイン変更の影響を及ぼす可能性があるので注意してください。

タグ一覧ビューを利用すると、より詳しく知ることができます。

ページ編集画面の右端にある、[タグ一覧]ビューでは、クラス名だけではなく文書構造やID名を確認することができます。