スポンサーサイト

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

Mr.ポンバシのブログ改造術part24-1

最近更新した別の記事

6月新作紹介 part3

こんばんは!! Mr.ポンバシです(-^□^-)

Mr.ポンバシのブログ


パンチラだけど外部にうpしてるから大丈夫なはずwww


ってかこれで大丈夫だったら全然er画像もうpできますねwww


といっても、あからさまなやつはあまりうpしないと思いますがwww


Mr.ポンバシのブログ



PCからこのページにアクセスしたときに、少し変化があったことにお気づきでしょうか?


ヘッダーのところに

Mr.ポンバシのブログ
Mr.ポンバシのブログ


この二人がいると思います♪ゝ(^O^)丿


これをクリックすると、記事のタイトル、コメント欄のところに一気にスキップできます。


前々から、記事のところまでスクロールするのが面倒くさいと思っていたかたも多いと思いますが、これで万事解決です♪


ぜひとも活用してください(*´ω`*)


Mr.ポンバシのブログ


さて、それではブログ改造のほうに移りたいと思います♪



今回は、"記事タイトルの背景を画像に変える方法"を紹介します!



記事タイトルは、最初の状態では、

Mr.ポンバシのブログ


Mr.ポンバシのブログ


これを、

Mr.ポンバシのブログ


Mr.ポンバシのブログ


このように、画像にする方法を説明します。





  1. まず、記事幅と同じ幅の画像、もしくは横に繰り返しても違和感がない画像を2つ用意します。

    Mr.ポンバシのブログ


    Mr.ポンバシのブログ



  2. 前者が記事上のタイトル部分の画像(ヘッダー画像)で、後者が記事下の仕切り線の画像(フッター画像)です。


    両方とも同じ画像でいいなら、二つ用意する必要はありません。



  3. 次のコードをCSSの最後に追記してください。


    .entry{
    width: 100%;
    margin-bottom:30px;
    }

    .entry .entry_head{
    padding:0;
    height:114px;/*ヘッド画像の高さ*/
    background: url(画像のURL);
    background-repeat: no-repeat;
    background-position: left top;
    }

    .entry_head span.date{
    display: block;
    background-color: transparent;
    padding: 20px 0 0 240px;/*①、②*/
    font-size:15px;
    color: #000000;
    border:none;
    }

    .entry .title{
    padding:0px;
    text-align:center;
    font-size:30px;
    }

    .entry .theme{
    display: block;
    padding:0px;
    font-size:30px;
    text-align:center;
    }

    .entry .contents{
    margin: 0;
    padding:50px 0px 50px 0px;
    }

    .entry .foot{
    padding: 0px 0px 150px 0px;/*③*/
    background-image: url(画像のURL);
    background-repeat: no-repeat;
    background-position: bottom;
    }


    赤字のところを自分の画像に合わせて変更してください。


    ちなみに各番号の値は下の画像と照らし合わせて設定してください。

    Mr.ポンバシのブログ

    Mr.ポンバシのブログ



    ③についてはフッター画像の幅から50px引いた値を書いて頂ければ丁度いいと思います。


    また、画像の幅が記事幅を同じ場合は「no-repeat」の部分はそのままでいいですが、もし横に繰り返したい場合は、「no-repeat」の部分を「repeat-x」 に変更してください。






以上で説明を終わります!


今回は一見面倒臭そうに見えますが、画像さえ用意できればすぐにできる改造なので、ぜひとも試してみてください♪


ではノシ
スポンサーサイト
web拍手 by FC2

コメントの投稿

非公開コメント

1 ■ふむふむφ(.. )

これは簡単にできそうですね!!

素材が用意できたら試してみますかね( ̄▽+ ̄*)

2 ■無題

改造術タメになりまふ~www


rewiteの曲とは恐れ入りました~~

3 ■無題

最近改造記事が多くていいね!
かなり勉強になるよ!

俺もしたいけどまだ先かな~w
やる時は一気にやりたいからねww

4 ■無題

これは簡単そうですね^^

今ブログ改造考えてて、素材集め最中なので、ぜひ集め終わったら手を出してみたいと思いますねw

5 ■無題

すごいですね

そろそろちょっといじろうかななんて思っていたので
その時の参考にさせてもらいます

6 ■無題

おぉ!毎回ありがたいです!ほんとw

休みとか時間があるときにほかのまとめてやりたいと思います(`・ω・´)

7 ■無題

CSS覚えるとホント色んなことができるんですね。
勉強になります。

8 ■無題

今回もタメになる改造術が!!!!

CSSは本当に色々と便利なんですね。

9 ■無題

早速やってみましたが、なかなか合う素材がないですねぇ┐( ̄ヘ ̄)┌

やっぱ作るしかないのか…( ̄▽ ̄)=3

ヘッダーでもフッターでも貼れる画像はやっぱ1枚だけなんですかねぇ(。・д・。)?

10 ■無題

ご名答!前回のキャラは「うたわれるもの」のエルルゥですよー。

そんな事言わずに、表現の自由の限界に挑戦してみても良いのではww?

なるほど、やってみたいのですが、自分のモニタは未だにスクエア型なので、幅がどうなるのか心配で、なかなか踏み切れません。スクエア型のモニタでちゃんと表示されても、ワイド型では、横に空白できそうですし…。ワイド型に買い換えたらやってみたいと思います。

11 ■無題

おおーすげーです≧(´▽`)≦

素材作るか、見つけなきゃw

12 ■おっす、オラ松風。

デフォルメキャラカワイイよね(^3^)/

ん~、オラも改造した方がいいんかね?

したい気はあるけど、メンドイ用なきがさぁ、二の足を踏んでんのさ( ̄▽ ̄)b

13 ■無題

なるほど、なるほど
勉強になります!
時間と素材があればさっそく挑戦しますね♪

14 ■無題

素敵な改造術伝授ありがとうございます!
早速使わせていただきます!!(`・ω・´)ゞ

15 ■無題

ポンにぃ改造すきやねーw
男らしい!!←
あたしは、やっぱり結果どっかで失敗する子なんで・・・w
プロフィール

ポンバシ

はじめまして!Mr.ポンバシです。
呼び名は「ポンバシ」「ポンさん」などなどです ^ ^
2次元をこよなく愛しており、エロゲ、ギャルゲ、アニメ、ラノベなんでも話を振ってください。
コメントしてくれると天に昇る勢いで喜びますww


アクセスランキング
[ジャンルランキング]
ゲーム
6074位
アクセスランキングを見る>>

[サブジャンルランキング]
PCゲーム
823位
アクセスランキングを見る>>

アクセスカウンター

カテゴリ

最新コメント

全記事表示リンク

全ての記事を表示する


月別アーカイブ

OHPバナー
紅い瞳に映るセカイ 応援中!!

「魔女こいにっき」応援中

恋がさくころ桜どき

すたじお緑茶『南十字星恋歌』応援中!

検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

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