calendar

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
2930     
<< April 2018 >>

最新記事

recent comment

  • 未定ですが、ワードプレスへ引っ越そうと思っています
    ハル (04/10)

categories

archives

        

スマホ版への切り替え

スポンサードリンク

スポンサードリンク

テンプレート変更(ヘッダー部に画像を入れる)

  • 2017.08.01 Tuesday
  • 00:02
0

    先日からJUGEMのテンプレートの変更をぼちぼちおこなっています。

     

    まだまだHTMLの理解が浅く、壁にぶち当たりながらも徐々にらしくなってきました(^^)

    これは自分の記録も兼ねて作業内容のメモ記事です。

     

    ヘッダー部に画像を入れる

     

    今回は、テンプレートのヘッダー部(ブログタイトルが入っているトコ)のに画像を入れる作業です。

    初歩ですね(笑)なのに意外と苦戦してしまった。。。

     

    使うテンプレートは「custom06」3カラム左右メニュー版です。

    デフォルトだとこんな感じ。

     

    ↓この画像をブログタイトルのある青枠の所に入れます。

     

    ↓こうなります。

     

    コード

     

    コード的には、HTML・CSS編集のCSS部の

     

    /*ブログ名と説明文、トップ画像*/
    #header {
        width:910px;  /* B */
        height:130px;
        clear:left;
        margin:0 auto 20px;
        padding:0;
        background-color:#ffffff;  
       

     background-image:url(http://imaging.jugem.jp/template/custom/img/bg_title_blue910.jpg);  ←この部分をURLをアップロードした画像のURLにさしかえればOK。

     

    画像登録

     

    画像は、JUGEM管理者ページの「データ管理」>「画像の管理」の中でアップデート出来、アップデートした画像の所の「画像の説明 / 画像を呼び出すタグ」のhttp以降が上記の差し替えるURLです。

     

    まとめ

     

    文章で書くと簡単そうですが、簡単です(笑)

    私が手こずったのは画像サイズが合わなかったからです。。。

    画像サイズは width:910px;(横)、height:130px;(縦)なので、これと画像サイズを合わせてください。

    ちなみに私が差し込んだ画像は width:910px;(横)、height:150px;(縦)にしました。

     

    画像が入るだけでかなり印象が変わりオリジナリティが出ますね。

     

    今回はここまで。

     

     

     

    スポンサードリンク

    同じカテゴリー内の記事

    コメント
    コメントする