ライブドアブログのタイトルテキストを画像にしてみよう

ライブドアブログのタイトルテキストを画像TOP

今回はライブドアブログのヘッダーの中にあるタイトルテキストを画像(ロゴ)に変えるカスタマイズの方法をご紹介!

ライブドアブログのヘッダー画像は管理画面のかんたんタイトル画像から簡単に変更でき、タイトルテキストを表示したり隠したりも出来ます。

ヘッダーの画像を作るときにブログのタイトルも画像の中に入れてしい、画像をアップロードしてタイトルテキストを隠してしまえばいいのですが、画像全体がリンクしてしまうので、ヘッダー画像はリンクしないで、タイトル画像だけリンクしてみましょう。

スポンサーリンク

ライブドアブログのタイトルテキストを画像にする方法

今回のライブドアブログで使うテンプレートはデフォルト2012です。

はじめのヘッダーは一色で味気ないこんな感じですね。

デフォルトのheader

ヘッダーに使用する画像をあらかじめ作成しておき準備しておきましょう。

無料画像編集ソフトGIMPで作ってみました。

GIMPを無料ダウンロードするには、GIMPをダウンロードしよう【初心者ナビ】

ヘッダーに使用する画像

このヘッダー画像をライブドアブログの管理画面から「かんたんタイトル画像」にアップロードします。

かんたんタイトル画像の設定はこちらをご覧下さい。

タイトルテキストを隠さずにしたのがこんな感じ。

タイトルテキスト表示

タイトルのロゴ画像を用意しよう

次にタイトルロゴを無料画像編集ソフトGIMPで作ります。

タイトルロゴ作成
スポンサーリンク

タイトルロゴの画像をアップロードしよう

ライブドアブログの管理画面にいき、先ほど作ったタイトルロゴの画像をアップロードします。

マイページ画像/ファイルアップロード

画像の管理からアップロードした画像の名前の上で右クリックし、リンクを新しいタブで開くを選択。

画像の名前の上で右クリック

新しいタブを開き、画像のURLをコピーして、メモ帳などに控えておきます。

画像のURLを控える

HTMLの編集をしよう

ライブドアの管理画面に戻り、ブログの設定デザインの設定PCカスタマイズトップページを選択。

HTMLで編集していきます。

HTMLの中の

<!-- ブログタイトル、説明 --> <header id="blog-header" <ifblogheaderimageurl=""> class="show-image<ifblogheaderhidetext> hide-text</ifblogheaderhidetext>"> <div id="blog-header-inner"> <h1 id="blog-title"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1> <ifblogdescription><p id="blog-description"><$BlogDescription$></p></ifblogdescription> </div> <ifblogheaderimageurl><img src="<$BlogHeaderImageUrl$>" id="blog-header-image"></ifblogheaderimageurl> </header> <!-- /ブログタイトル、説明 -->

<$BlogTitle ESCAPE$>の部分を下記に書き換えます。

<img src="http://livedoor.blogimg.jp/test151515/imgs/0/5/05d73e80.png" title="ビューティー比較">

※上記のURLはあなたが先ほど作ったタイトルロゴのURLの置き換えましょう。

また、タイトルも変更しておきましょう。

変更後

<!-- ブログタイトル、説明 --> <header id="blog-header" <ifblogheaderimageurl=""> class="show-image<ifblogheaderhidetext> hide-text</ifblogheaderhidetext>"> <div id="blog-header-inner"> <h1 id="blog-title"><a href="<$BlogUrl$>"><img src="http://livedoor.blogimg.jp/test151515/imgs/0/5/05d73e80.png" title="ビューティー比較"></a></h1> <ifblogdescription><p id="blog-description"><$BlogDescription$></p></ifblogdescription> </div> <ifblogheaderimageurl><img src="<$BlogHeaderImageUrl$>" id="blog-header-image"></ifblogheaderimageurl> </header> <!-- /ブログタイトル、説明 -->

これでプレビューを選択してみてみましょう。

プレビューで確認

タイトルロゴが表示されていることが確認できたら、個別記事ページ カテゴリアーカイブ 月別アーカイブのHTMLそれぞれ<$BlogTitle ESCAPE$>の部分を書き換えます。

全てのプレビューを確認して問題がなければ、保存するを選択。

CSSを編集しよう

次に、ブログの説明文が見ずらいので、CSSで色を変えます。

ブログの設定デザインの設定PCカスタマイズCSSで進んでいき、

#blog-description { color: #;fff font-size: 14px; font-weight: normal; line-height: 1.4; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }

color: #;fffの部分のfffのところを666に変更。これで黒になります。

あと、影がかかっているのでtext-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);を削除します。

説明文をもうちょっと右に寄せたいので、padding:0px 0px 0px 10px;を付け足します。

変更後

#blog-description { color: #666; font-size: 14px; font-weight: normal; line-height: 1.4; padding:0px 0px 0px 10px; }
タイトルロゴの位置変更

タイトルロゴの位置が気に入らない場合はCSSで編集します。

ブログの設定デザインの設定PCカスタマイズCSSで進んでいき、

/* ブログのヘッダー、タイトル、説明 ----------------------------------------------- */ #blog-header { border-radius: 4px 4px 0 0; height: 160px; background-color: #287cba; background-image: -webkit-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #287cba 100%); background-image: -moz-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #287cba 100%); background-image: -ms-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #287cba 100%); background-image: radial-gradient(left top, ellipse cover, #2e8fc4 0%, #287cba 100%); position: relative; } #blog-header-inner { padding: 20px; } #blog-title { color: #fff; font-size: 24px; font-weight: bold; line-height: 1.2; padding-bottom: 4px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);

の中のpadding-bottom: 4px;をpadding:100px 0px 0px 0px;に書き換えます。

書き換え後

#blog-title { color: #fff; font-size: 24px; font-weight: bold; line-height: 1.2; padding:100px 0px 0px 0px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }

プレビューで位置を確認してOKなら保存するを選択。

思った位置と違うなら、数字の部分を変えます。

上下の位置を動かしたい場合、最初の数字を変えます。

例えば、100のところを80にしてみたりとかして位置調整をしていきます。

padding:100px 0px 0px 0px;

ちなみにpadding(パディング)とは、内側の余白の設定です。

左から 上・右・下・左

プレビューをを見ながら位置を調整していき、OKなら 保存するをクリック。

変更後

これで、ライブドアブログのタイトルが画像になりました。

タイトルが画像に

おわりに

この作業はHTMLとCSSを触るので、万が一むちゃくちゃになった場合でも、復帰ができるように必ず前もって、HTMLとCSSは触る前にコピーしてメモ帳などに保存しておきましょう。

HTML・CSSをさわる前に必ずバックアップしておきましょう。