せっかくブログをつくったので
デザインにもこだわりたい。

もともとロゴとかをつくるのが嫌いではないので
まずはタイトルロゴから変更してみます。

the_wonder_road

Contents

  1. PC用ページのタイトルロゴを変更
  2. スマホ用ページのタイトルロゴを変更

1.PC用ページのタイトルロゴを変更

まずはPC用ページのタイトルから
変更してみたいと思います。


① マイページの「画像/ファイル」をクリックします
ライブドアブログ_マイページ

② 画面上部に準備したロゴ画像のファイルをドロップしてアップロードします

③ すると下のリストにアップロードしたファイルが表示されるので
  右クリックして「リンクのURLをコピー」をクリックして
  画像のアドレスをコピーします

ライブドアブログ_画像_ファイル


④  マイページに戻り
  「ブログ設定」→「デザイン/ブログパーツ設定」内のPCをクリック
ライブドアブログ_マイページ_2
ライブドアブログ_ブログ設定


⑤ 「カスタマイズ」からHTMLとCSSを変更します。
   まずはトップページのHTMLの
  "header"タグ内に下記を追加します。
<!-- ブログタイトル、説明 -->
<header id="blog-header">
    <hgroup>
        <h1 id="blog-title"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1>
      <!--(追加部分)-->
                <p id="blog-img"><a href="(ブログのURL)">
                <img src="(アップロードした画像のアドレス)"
                border="0" width="300px"></a></p>
                 <!--(追加部分終わり)-->
        <h2 id="blog-description"><$BlogDescription$></h2>     
    </hgroup>
</header>

上の文では″width″属性で
画像の幅を指定しています。

これはアップロードした
画像のサイズに合わせて変更してください。

これで下のような元のトップページが

Top_Page_before

このように変わります。

Top_Page_aft

ただ、これでは元々設定した
ライブドアブログのタイトルと
ダブってしまいます。

そのためCSSを変更します。
/* ブログのヘッダー、タイトル、説明
----------------------------------------------- */
#blog-header {
}
#blog-header hgroup {
    padding: 10px;
    text-align:left;
}
#blog-title {
    color: #333;
    font-size: 150%;
    font-weight: bold;
    line-height: 1.2;
    padding-bottom: 15px;
    margin-bottom: 15px;
    text-shadow: 0 1px 0 rgba(255, 255, 255,1.0);
    display: none;
}

まず元々のタイトル表示を消すため
#blog-title{ }内に
″display: none;″を追加します。

ついでに中央よりも左端に表示させたいので
″text-align″を″center″から″left″へ変更します。
    color: #333;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.4;
    padding-left: 170px;
    padding-bottom: 15px;
    margin-bottom:10px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    
さらにブログ説明文の位置も
イマイチなので
上のような箇所をいじって
少し調整します。

最終的にはこのようになりました。

Top_Page_final


⑥ トップページだけではなく
  個別記事ページ、カテゴリアーカイブ、
  月別アーカイブのHTMLについても
  同様の変更を行います。

2.スマホ用ページのタイトルロゴを変更

①  マイページから
  「ブログ設定」
  →「デザイン/ブログパーツ設定」内の
   スマートフォンをクリック

マイページ_ブログの設定_sp

② 「レイアウト」タブ内から
  「ブログタイトル」
  →「設定」をクリック
ブログタイトル設定_sp


③ 新しいウィザードから
  ブログタイトル欄の「画像」を選択
  画像URLのボックスに
  PC用ページで使用した
  画像のURLを入力し
  「保存する」をクリック
ブログタイトル設定ウィザード



④ この変更をトップページ、
  個別記事ページ、カテゴリアーカイブ、
  月別アーカイブのHTMLに行います。

これでスマホ用のブログタイトルも
ロゴ画像に変更できました。


(変更前)
トップページ_sp_before


(変更後)
トップページ_sp_aft



ちなみにこれらの変更は
スマホからは操作できませんので
ご注意を。