せっかくブログをつくったので
デザインにもこだわりたい。
もともとロゴとかをつくるのが嫌いではないので
まずはタイトルロゴから変更してみます。
変更してみたいと思います。
① マイページの「画像/ファイル」をクリックします
② 画面上部に準備したロゴ画像のファイルをドロップしてアップロードします
③ すると下のリストにアップロードしたファイルが表示されるので
右クリックして「リンクのURLをコピー」をクリックして
画像のアドレスをコピーします

④ マイページに戻り
「ブログ設定」→「デザイン/ブログパーツ設定」内のPCをクリック
⑤ 「カスタマイズ」から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″属性で
画像の幅を指定しています。
これはアップロードした
画像のサイズに合わせて変更してください。
これで下のような元のトップページが

このように変わります。
ただ、これでは元々設定した
ライブドアブログのタイトルと
ダブってしまいます。
そのため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);
さらにブログ説明文の位置も
イマイチなので
上のような箇所をいじって
少し調整します。
最終的にはこのようになりました。
⑥ トップページだけではなく
個別記事ページ、カテゴリアーカイブ、
月別アーカイブのHTMLについても
同様の変更を行います。
同様の変更を行います。
2.スマホ用ページのタイトルロゴを変更
① マイページから
「ブログ設定」
→「デザイン/ブログパーツ設定」内の
スマートフォンをクリック
② 「レイアウト」タブ内から
「ブログタイトル」
→「設定」をクリック
③ 新しいウィザードから
ブログタイトル欄の「画像」を選択
画像URLのボックスに
PC用ページで使用した
画像のURLを入力し
「保存する」をクリック
④ この変更をトップページ、
個別記事ページ、カテゴリアーカイブ、
月別アーカイブのHTMLに行います。
これでスマホ用のブログタイトルも
ロゴ画像に変更できました。
(変更前)

(変更後)


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