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

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

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

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

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

Sponsored Links

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

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

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

デフォルトのheader

 

 

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

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

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

ヘッダーに使用する画像

 

 

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

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

 

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

タイトルテキスト表示

 

 

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

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

タイトルロゴ作成

 

 

Sponsored Links

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

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

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

 

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

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

 

 

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

画像のURLを控える

 

 

HTMLの編集をしよう

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

HTMLで編集していきます。

HTMLの中の

 

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

 

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

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

 

変更後

 

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

プレビューで確認

 

 

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

 

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

 

CSSを編集しよう

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

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

 

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

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

 

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

 

変更後

 

 

タイトルロゴの位置変更

 

 

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

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

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

 

書き換え後

 

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

 

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

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

 

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

 

 

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

左から 上・右・下・左

 

 

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

 

 

変更後

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

タイトルが画像に

 

 

おわりに

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

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

お疲れさまでした。

Sponsored Links

SNSでもご購読できます。

コメントを残す

*

CAPTCHA