MENU
Web・IT関連のニュース、ツールの紹介・使い方、自分の体験談について書いています。
Webトピッ
    1. ホーム
    2. ブログ関連
    3. [FC2ブログ]背景画像付き見出しの設定方法

    [FC2ブログ]背景画像付き見出しの設定方法

    2022 11/02
    ブログ関連
    2013年1月14日2022年11月2日

    fc2blog

    「FC2ブログ」での背景画像のアップロードから、見出しのスタイリング方法までを解説します。

    <見出しデザインの流れ>

    1. 背景画像を用意する
    2. 背景画像をアップロードする
    3. スタイルシートを編集する
    目次

    背景画像を用意する

    まずは、見出しの背景に使用する画像を用意します。

    背景画像は自分で作成することができない人は、フリー素材を配布しているサイトからダウンロードするとよいでしょう。「見出し フリー素材」や「見出し 画像 無料」などでWeb検索してみてください。

    今回は以下のような背景画像を用意しました。Fireworksで作成しています(フリー素材ではありません)。

    h3_bgi

    この程度の画像なら「GIMP」などのフリーソフトでも、簡単に作成できると思います。

    背景画像をアップロードする

    「FC2ブログ」で画像を使用するには、デフォルトで用意されている画像サーバーにアップロードする必要があります。PicasaやFlickrにアップロードしてから、その画像を参照する方法もあります。

    今回はデフォルトの画像サーバーにアップロードする方法を解説します。

    FC2ブログの管理画面にログインして、「ツール」→「ファイルアップロード」と進みます。「ここにファイルをドロップできます」と書かれているエリアに画像をドラッグ&ドロップします。

    2013-01-14_13h10_13

    画像ファイルに間違いがないことを確認したら、「アップロード」をクリックします。「アップロード完了」と表示されればOKです。

    2013-01-14_13h13_57

    アップロードが完了したら、ページの下端にスクロールします。表示されている画像のサムネを右クリックして、画像のURLをコピーします(ブラウザがIEの場合は、右クリック後に「ショートカットをコピー」でできます)。

    2013-01-14_13h26_20

    このURLはスタイルシート編集の際に使用するのでメモしておきましょう。

    画像のアップロードについて詳しくは、FC2ヘルプ | FC2ブログ | 記事に画像(写真)を載せる を参照指定ください。

    スタイルシートを編集する

    見出しタグは<h3>からか<h4>からか

    「FC2ブログ」の場合、使用するテンプレートの構造によってスタイルを適用する対象が変わります。というのは、記事のタイトルが<h2>で指定されている場合と<h3>で指定されている場合があるからです。

    記事のタイトルが<h2>の場合は、必然的に見出しは<h3>から始めます。<h2>の直後に<h4>などが出現すると、構文エラーになってしまうからです。

    したがって、ページのソースを開いて記事のタイトルが<h2>なのか<h3>なのかをチェックする必要があります。

    ブラウザがChromeの場合は「Ctrl + Shift + C」、Firefoxの場合は「Ctrl + Shift + I」で開発ツールが起動するので、これを利用すれば簡単にチェックできます。

    Chromeのデベロッパーツール
    2013-01-14_13h43_02

    上記の画像の例では記事のタイトルが<h2>なので、見出しは<h3>から指定すればOKです。

    見出し<h3>の編集をする

    「FC2ブログ」でのスタイルシート(CSS)の編集は、管理画面の「環境設定」→「テンプレートの編集」から行います。

    「Ctrl + F」でページ検索バーを開いて「h3 {」と入力します。すると、マッチした位置に瞬時に移動できます。

    2013-01-14_14h10_20

    1つもマッチしなかった場合は、新規でスタイルシートに「h3 {}」を追加してください。

    見出しの<h3>には以下のようなスタイルを記述します。

    h3 {
        background-image: url(“画像のURL”);
        background-repeat: no-repeat;
    }

    urlの()内には先ほどメモした、画像のURLを貼り付けます。

    「background-repeat:no-repeat;」では背景画像を繰り返さないように指定しています。

    さらに、以下のようなスタイルを記述して見栄えを整えるとよいでしょう。

        font-size: 120%;
        font-weight: bold;
        text-indent: 10px;
        line-height: 38px;

    「font-size:120%;」は文字の大きさです。「font-weight:bold;」は文字を太字にしています。「text-indent:10px;」は左側の余白の大きさです。「line-height:38px;」は文字の高さで、背景画像の高さ(Height)と同じ値を指定するとうまくいきます。

    完成形
    2013-01-14_14h23_37

    見出し<h4>の編集をする

    記事が長くなって見出しが複数必要になった場合に備えて、<h4>のCSSの編集もしておきましょう。<h4>は画像なしのCSSのみでデザインしてみます。

    参考になる記事:デザインに役立つCSSで作成する見出しタグのサンプル集 | KOBO TAKE

    今回は以下のようなCSSを記述しました。

    h4 {
        border-bottom: 1px solid #71D471;
        border-left: 7px solid #71D471;
        font-size: 115%;
        font-weight: bold;
        margin: 23px 0 8px 8px;
        padding: 5px 0 5px 10px;
        width: 460px;
    }

    「border」は枠線、「margin」は外側の余白、「padding」は内側の余白、「width」は横幅です。

    最後にCSSの編集が完了したら、右下にある「更新」を忘れずにクリックしましょう。

    テスト投稿記事
    2013-01-14_14h39_26

    ブログ関連
    css
    よかったらシェアしてね!
    • URLをコピーしました!
    • URLをコピーしました!
    • Wordpressで背景画像付きの見出しをデザインする方法
    • Jane Styleに内蔵された画像ビューワの使い方

    関連記事

    • WordPressで背景画像付きの見出しをデザインする方法
      2013年1月13日
    • [Blogger]独自ドメインの設定方法(仕様変更対応)
      2012年11月23日
    • FC2ブログで有料プランにするメリットと注意点
      2012年7月5日

    コメント

    コメントする コメントをキャンセル

    最近の投稿
    • トータルリターン3000万円!インデックス投資で6年積立てた投資結果を公開します2024年10月26日
    • トータルリターン2500万円!インデックス投資で5年半積立てた投資結果を公開します2024年4月25日
    • インデックス投資で5年間積立てた投資結果を公開します2023年10月29日
    アーカイブ
    カテゴリー
    • コラム
    • ニュース
    • ハウツー
    • ブログ関連
    • まとめ
    • レビュー
    • レポート
    • 会社運営
    • 体験記
    • 保険
    • 投資
    • 未分類
    • 税金・保険料
    • 連載

    © Webトピッ.

    目次