QLOOKアクセス解析
ホーム > スポンサー広告 > トップページを見栄え良くしようのつづき(*´▽`*)ホーム > fc2ブログ > トップページを見栄え良くしようのつづき(*´▽`*)
 1件ずつ表示 
--.--.-- --

スポンサーサイト

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

続きを読む
Category: スポンサー広告
2014.11.24 Mon

トップページを見栄え良くしようのつづき(*´▽`*)

おはようございます(*´▽`*)

前回の トップページの見栄えを良くしよう は解説で終わって何のことやら??という方も多かったと思うので、

今日は画像を使いながらこんなこともできますよ!ってかんじでいこうと思います(^^♪

俺のブログにリンゴ・・・でしたよね。

しつこく言いますが、HTML編集・CSS編集画面を触るときはバックアップを必ずとっておきましょう!(^^)!

メモ帳にコピペでもいいので。

まずリンゴのマーク(表示させたい画像)をアップロードしておきます。

りんご
今回はこれを使います。アップロードすると、画像URLがつきましたよね?http:で始まるものです。

ちなみにこのリンゴの画像URLは http://blog-imgs-42.fc2.com/i/l/l/illustrator989/20141124082807db6.png です。

h2(ちょっと大きい見出しタグ)をつけたときにリンゴのマークが表示されるようにしてみましょう(≧▽≦)

<h2>ここにリンゴのマークを表示させちゃうよーー!!</h2>

と本文の編集欄に打って記事を保存します。

テンプレートの設定→CSS編集(下段のボックス)で最下段に次のように入力してみましょう。バックアップ取ってからね♪

設定

h2{background:url(表示させたい画像のURL) no-repeat;}

先ほどのリンゴのURLを入れるだけです。
h2{background:url(http://blog-imgs-42.fc2.com/i/l/l/illustrator989/20141124082807db6.png) no-repeat;}

で更新ボタンを押す。

でブログに戻って更新してみると、

ここにリンゴのマークを表示させちゃうよーー!!



って表示されてますよね? ちょっと感動した 涙

ちなみに私の記事タイトルが今回の設定でこうなりました。。

タイトル

記事タイトルに h2 の見出しタグが使われていたんですね。

画像とタイトルが思いっきりかぶってますけども。。。

えー、上記の原因がわかるブロ友の方、修正方法をどしどしお待ちしておりますm(__)m

自分で調べんのんかい( `ー´)ノ  自力だといつになるか分かりませんので。。。

と、朝に書いておいたら、さっそくあると♪さんから回答がありました!(^^)!

タイトル

おおーーーー!!なんてイイ感じなんだーー!!感動です(≧▽≦)

リンゴとタイトルの間に隙間ができて、しかもタイトルが折り返しになってる!


ビフォアーのCSS編集

h2 {
font-size: 160%;
text-align:right;
padding: 20px 0px 0px 0;
background:url(http://blog-imgs-42-origin.fc2.com/i/l/l/illustrator989/20141124082807db6.png) no-repeat;
}



アフターのCSS編集

h2 {
font-size: 160%;
text-align:left;
padding: 20px 0px 0px 55px;
background:url(http://blog-imgs-42-origin.fc2.com/i/l/l/illustrator989/20141124082807db6.png) no-repeat;
}

 
赤文字のところを修正しました。右寄せ→左寄せ、左の余白に55px。

リンゴの大きさが50×51の大きさだったのでそのくらいの余白でちょうどでした(*´▽`*)

※background:url(http://blog-imgs-42-origin.fc2.com/i/l/l/illustrator989/20141124082807db6.png) no-repeat;だけ追加で

あとの設定はもともとのテンプレートで設定されていたものです。

今回はリンゴで設定しましたが、background:url の画像を変えることでブログの雰囲気が変えられます。

CSS編集のここを変えるだけで、h2設定された見出しの画像全部が一気に変わるのがポイントです。

画像のようにひとつひとつ設定する手間が省けます。いやー、便利ですねえ(*´▽`*)

今回は何やってるかよく分からなかった方も、今後しつこくやっていくので大丈夫です♪

まだやるのかよ・・・と思わないでね(^^♪

私の目指しているところは、このブログを読むとサイトが自力でつくれるようになるというもの

私は教科書の1ページ目から始めるようなお勉強の仕方は嫌いなのです。

素人だろうがなんだろうが、やりたいことを今すぐやりたい!!

基礎は大事だけど、やりたいこと・必要なことをやりたい!!

今分からなくても、そんなことがどんどん積み重なると、ある時全てがつながる瞬間がある。

それこそ勉強というものだと私は思ってます(*´▽`*)

熱く語るのはいいんですけど、あなたの一番大事なことは月5万稼ぐ方法をこのブログで伝えることでは?。。。

っていうまっとうなツッコミはなしでお願いしますm(__)m

今回解決方法を教えてくれたあると♪さんのブログです。

ここのブログは本当に同じテンプレートだったの?というくらいカスタマイズされてかっこいいものになってます。

初心者でも自分のブログに取り入れられる面白いことあれこれを記事にしています。

あると♪さんのおかげで周りのみんなが最近HTML/CSSの知識をメキメキつけてきてますからぜひ覗いてみてください(*´▽`*)




ブログランキング・にほんブログ村へ


貼るだけでお小遣い貰えます♬(忍者ADMAX)↓↓


関連記事

続きを読む
Category: fc2ブログ Comments (4) Trackbacks (0)

この記事へのコメント:

おはようございます♪

見出しにオリジナルのマーク(画像)を付けるのもイイですね♪

ちなみに重なるのを避ける為にはCSSに以下のように「padding-left: ○px;」ってのを追加すると良いと思います♪

h2 {
background:url(http://blog-imgs-42-origin.fc2.com/i/l/l/illustrator989/20141124082807db6.png) no-repeat;
padding-left:55px;
}

画像のサイズが50px程だったので、数字は適当に55pxにしてみました♪

お好みで調整してみて下さいね♪
ひーさん 更新お疲れ様です。

HTML編集では私も一度失敗しておりますので、記事を参考にさせていただいて今後に役立てさせていただきますね。

今後の躍進を楽しみにまたお邪魔させていただきます。
おおww

イイ感じになりましたね♪d(≧∀≦)b

また記事中で私のブログまでご紹介頂いてw( ̄ε ̄〃)ゞ

何だか恐縮です♪w

でも確かに、HTMLやCSSの知識が付いてくると表現の幅も広がるので良いですよね♪d(* ̄∇ ̄)
ひーさん

昨日来た時、可愛いリンゴ付いてるよぉ。と、思っていましたが
記事見てなるほど、こんな事だったのねぇ。って、思いました。
WordPressも頑張りましょう、って、自分全然進んでませんが・・・

この記事へコメントする:


    

この記事のトラックバックURL:

http://illustrator989.blog.fc2.com/tb.php/77-75359ea9

この記事に対するトラックバック:

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