ライブドアブログのタイトルテキストを画像にしてみよう - 初心者でもできる画像の編集+加工

ブログURL変更のお知らせ

いつも「初心者でもできる画像の編集+加工」をご覧いただきありがとうございます。

このたび、ブログURLを変更しましたのでお知らせいたします。新しいURLは以下のとおりです。

新URL:http://gazocustomize.xyz/

旧URLにアクセスしても新しいURLに転送されるようになっています。

今後も「初心者でもできる画像の編集+加工」をどうぞよろしくお願いします。

GIMP編集
無料画像編集ソフトGIMP2.8で画像の編集+加工の記事一覧はこちら

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

20160328-1.jpg

今回はライブドアブログのヘッダーの中にあるタイトルテキストを画像に変えてみよう。

ライブドアブログのヘッダー画像は管理画面のかんたんタイトル画像から簡単に変更でき、

タイトルテキストを表示したり隠したりも出来ます。

ヘッダーの画像を作るときにブログのタイトルも画像の中に入れてしい、

画像をアップロードしてタイトルテキストを隠してしまえばいいのですが、

画像全体がリンクしてしまうので、ヘッダー画像はリンクしないで、

タイトル画像だけリンクしてみましょう。
今回のライブドアブログで使うテンプレートはデフォルト2012です。

はじめのヘッダーはこんな感じ。
20160328-2.jpg


ヘッダーに使用する画像を用意します。
無料画像編集ソフトGIMP2.8で作ってみました。
20160328-3.jpg


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

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

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


次にタイトルロゴを無料画像編集ソフトGIMP2.8で作ります。
20160328-5.png


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

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


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


ライブドアの管理画面に戻り、ブログの設定⇒デザインの設定⇒PC⇒カスタマイズ⇒トップページを選択。
 
HTMLで編集していきます。

HTMLの中の

class="show-image hide-text">

<$BlogTitle ESCAPE$>


<$BlogDescription$>







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


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

変更後

class="show-image hide-text">


<$BlogDescription$>







これでプレビューを選択してみてみましょう。
20160328-10.jpg


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

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

次にブログの説明文が見ずらいので、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;
}


20160328-11.jpg


タイトルロゴの位置が気に入らない場合は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;


ちなみに左から 上・右・下・左

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

変更後
20160328-12.jpg


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

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

お疲れさまでした。



この記事を読んだ人はこんな記事も読んでます




Comment
非公開コメント

Track Back

http://gazocustomize.blog.fc2.com/tb.php/104-3332d312

スプレッドで比較

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。