マツアズブログ 松本市安曇野市周辺地域コミュニティポータルサイト 松本市

何かが生まれるそんな場所。「マツアズ」とは松本と安曇野、この地域で生活するすべてのひとのための情報コミュニティです。

7.カスタマイズ

7-0.ヘッター画像の変え方

マツアズでは、一部デザインの変更が可能になりました。 今回は、ページ上部のヘッター画像を変更してみます。

このようにヘッター画像をメニーちゃんに変えてみましょう。
実際には、この部分は、皆さんのオリジナル画像にすることも可能です。

今回は、theme_green用に画像を作りましたので、まずブログのデザインをtheme_greenに変更してください。

それでは、やり方です。

  • まず、必要ファイルをダウンロードしてください。
    ダウンロードしたら解凍しておいてください。
    ファイルのダウンロードはこちら
  • ディレクトリを作成します。
    コントロールパネルの「ファイル管理」をクリックして

    「stylesheet」というディレクトリを作成します。

    ディレクトリができるとこのようになります。

    今回作成したディレクトリを図にするとこのようになります。
  • ファイルを所定の場所にアップロードする。
    2.で作成した「stylesheet」というディレクトリに先ほどダウンロードした「style.css」ファイルと「header.jpg」をアップロードします。
    ファイル構成は、下の図のようになります。
  • ブラウザを更新する。
    最後にブラウザを更新するとヘッター画像がメニーちゃんに切り替わります。
  • 今回アップロードした「style.css」や「header.jpg」は自由に編集する事ができます。
    ここからは、その方法をやってみます。

    まず、ヘッター画像を作成します。
    画像編集ソフトを使って、ヘッター画像を作ってください。
    その際に、画像の横幅に注意してください。
    使用しているテーマ(テンプレート)よりも大きい画像を作ってしまいますと、レイアウトが崩れる原因になります。

    ==ヘッター画像の横幅の参考==
    defalut:760px
    theme_aqua,theme_brack,theme_brown,
    theme_classic,theme_green,theme_orange:750px
    ここに挙げたテンプレートはシンプルなものですので画像の変更がしやすいです。

    次に、「style.css」を編集します。
    ここで編集する部分は、オリジナルヘッター画像の横幅、縦幅の設定です。
    先ほどダウンロードした「style.css」をテキストエディターで開いて、

    /* ヘッター画像変更 ↓↓ */
    #header {
    background: url(header.jpg) no-repeat center top;
    width: 750px;
    height: 176px;
    color: #ffffff;
    }
    /* ヘッター画像変更 ↑↑ */

    赤字の部分を変更します。
    width: 750px が横幅です。
    height:176px が縦幅です。

    背景画像に合わせて、文字の色を変更します。

    /* ヘッター文字色変更 ↓↓ */
    #header,#header a:link, #header a:visited, #header a:active {
    color: #ffffff !important;
    }
    .blogDescription {
    color: #ffffff !important;
    }

    /* ヘッター文字色変更 ↑↑ */
    上記の赤字の部分をお好みの色に変更してください。
    色は、カラーコードで指定する必要がありますので、ご注意ください。

    変更が終わったら、保存します。

    最後に、「3.ファイルを所定の場所にアップロードする。」
    の手順で、それぞれのファイルをアップロードすれば完了です。

    ※オリジナルヘッターに関しましては、上記のマニュアルをもってサポートとさせて頂きます。画像の変更等の作業は、個人の責任にて行って頂くようお願い申し上げます。