公開日：5/24/2020
    シェア：

    Bloggerのオリジナルテーマに画像を使う

    　
    Bloggerでアップロードをした画像を使うときが来ました。サイトのデザインをする中で、たくさんの画像を使うことはなくても、サイトのロゴくらいはオリジナル画像にしたいもの。

    でも、画像をBloggerにアップロードしてもどこに保存されているかがわからない！
    そこで、画像を公開しないページに設置してアドレスを確認してから、オリジナルテーマに使う方法を紹介します。

    Bloggerのヘッダーにオリジナルの画像を設置する

    せっかくオリジナルの画像を設置するので、ブログのロゴを作って設置していきましょう。このサイトでも、PowerPointで作ったロゴを設置しています。


    作り終わったら、保存をしてブルグにアップしていきます。今回は”公開をしない”ページをつくってそこを画像置き場とします、

    画像置き場のページをつくって画像URLを取得

    画像置き場のページは、ページ→「+」です。

    タイトルは分かるようにしておけば大丈夫ですが、例では「画像置き場」にしておきます。
    続いて、画像ボタンを押して、作ったロゴをアップロードしましょう。



    ロゴが設置されたら、画像をクリックしてから鉛筆マークをクリック。サイズを「元のサイズ」にしてから「適用」をクリックします。

    画像が大きくなったら、画像を右クリックして、画像のアドレスをコピーをクリックします。

    これで画像のURLが取得できました、アドレスはメモ帳などに貼り付けておきましょう。

    HTMLコードに画像を設置する

    それでは、オリジナルテーマにロゴを設置しましょう。ヘッダーの部分を書き換えていきます。
    <!--ヘッダーエリア-->
    <div id="header" class="row" style="text-align: center;">
    <b:section id='header'>
    <b:widget id='Header0' type='Header' >
    <b:includable id='main'>
    <a expr:href='data:blog.homepageUrl' style="color: black;">
    <h1><data:blog.pageTitle/></h1>
    </a>
    </b:includable>
    </b:widget>
    </b:section>
    </div>
    の部分を下のように変更します。
    【コード13】
    <!--ヘッダーエリア-->
    <div id="header" class="row" style="text-align: center;">
    <b:section id='header'>
    <b:widget id='Header0' type='Header' >
    <b:includable id='main'>
    <a expr:href='data:blog.homepageUrl' style="color: black;">
    <img src="〇〇〇〇" width="100%"   />
    </a>
    </b:includable>
    </b:widget>
    </b:section>
    </div>
    長くコードを抜き取っていますが、書き換えるのは<h1>~</h1>の部分だけです。
    〇〇の箇所には先程メモ帳などに貼り付けておいたURLを貼り付けます。

    では、プレビューを見てみましょう。

    これでWEBサイトらしさがアップします！