サイドバータイトル【応用編・1】 [ソネットブログカスタマイズ]
以前少しだけやったサイドバータイトルは色だけ変更しました。今日はサイドタイトルバーに、画像を入れたり装飾したりしてみたいと思います。
最終的に今日は
↑この変まで出来るようになります。なる・・・はずです(*≧m≦*)ププッ
一応何もいじってないCSSの状態は↓です。(真ん中らへんにあるので↓の記述を探して下さい。まだ何も手をつけてない方は始めからどうぞ)
省略 /*-----Side-----*/ 省略 .sidebar-title { margin:0; padding:3px 5px; margin-bottom:5px; background:#dddcd2; font-size:x-small; } |
少しだけおさらいすると、
.sidebar-title { margin:0; padding:3px 5px; margin-bottom:5px; background:#ff9999;背景色変(カラーコード) font-size:x-small; color:#ffffff;(←追加で、サイドバータイトル部分の文字色が変更出来るようになる。※リンクされている箇所例えばプロフィールの名前部分などはまた別になります。) } (※#containerでbackground:#000000(黒)を指定している状態です) |
こんな感じです。前回までのカスタマイズはコチラをご覧下さい。また質問がある場合はコチラを読んでから質問して下さい。
今度は小さい画像をタイトルの横に入れてみよう。 (画像の入れ方はコチラ) |
スクロールバーの変更 [ソネットブログカスタマイズ]
今日はスクロールバーを変更します。
これはIE独自タグなのでIE以外では表示されません。
前回までのカスタマイズコチラにまとめてあります。
カスタマイズについて質問がある方はコチラを読んでから質問して下さい。
(※日曜は返信が出来ません)
今回はあんまり難しい事を書いてないので、全部最後までサラサラっと読んで作業に取り掛かった方がいいと思います^^
カレンダー[追記アリ] [ソネットブログカスタマイズ]
今回は予告通り「ソネットブログカスタマイズ」の「カレンダーver」でいってみます。
もうカレンダーを触ってる人も、まだ手をつけてない人も、興味がある人は読んでって頂けると嬉しいです。最近はリヴリー以外のお客様や、コレを見てソネブロに返り咲き(w)してくれている方がいらしてとてもやりがいがあります。ありがとうございます^^
すっごい長いです。(作成にトータル10時間くらいかかった(*≧m≦*)ププッ)日曜丸ごと使ってカレンダーカスタマイズしちゃって下さいw
(あ、日曜は出かける事が多いので質問回答は月曜になってしまうと思います)
↑見本でいくつか用意してみました。まぁこんな感じで色々出来ますよ♪ってお話です。前回までのカスタマイズはコチラまで進んでます。今日から始める方は一番はじめから進むとわかりやすいです。ではCSSを開いて下さい。
カスタマイズ質問について [ソネットブログカスタマイズ]
沢山の方が私のど素人「ソネットブログカスタマイズ」記事を読みカスタマイズにチャレンジして下さって、ホントに嬉しいです。書いてる甲斐があるというか・・・張り合いがあるというか・・・とにかくホントに嬉しい限りです。<(__*)> アリガトォ デス。
スキンで大満足、カスタマイズは全く興味ナシ
以外の方。
私自信独学のど素人ですが、誰でも出来るソネブロカスタマイズを心がけて記事にしています。
他のブログをいくつか使用しましたが、ソネットブログは比較的カスタマイズしやすい方だと思います。
まぁ・・・自己満の世界ですが、自分のオリジナルスキン。少しずつ完成していくと、結構私は、楽しい(ハマル)と思いますヨ♪
CSSしか編集出来ないので、出来る事が限られてしまう事も多々ですが、そのうち改善される事を願いつつ、とりあえず今出来る箇所を順番にやっていこうと思います。
「キャプチャーが撮れる」「絵が描ける」「niceプレートが作れる」1つでも当てはまり興味があればオリジナルスキンにチャレンジしてもらえると嬉しいデス(///∇//)テレテレ
(※前回も書きましたが「▽ TSK@なるちょ別館 ▽」さんでブログパーツセット素材配布されてます。)
で、本題。
いつも「質問は受けません」と言っておりますが、
公開している箇所についての質問は受け付けます。 |
はじめから順番にすすんでってどぉ~しても行き詰った際は、
その行き詰った記事のコメント欄に
(例) body { background:FF0033; } こう書いたが、背景の色が変わらない。 (※この例だと、この記事のコメント欄) |
と、記述したタグを必ず記載して、そのわからなかった記事のコメント欄で質問して下さい。
同じ悩みがある人が居るかも知れないので、必ずその記事内のコメ欄にお願いします。
(1日1回程度、コメント欄は全てチェックするのでたぶん見落とさないと思います。)
自分の勉強にもなると思い質問を受け付ける事にしました。
とりあえず、誰でもわかるように一生懸命記載していますので、まずは順番にはじめてみてください。
ただ、ド素人の為わからない事もあるかも知れない事をご理解下さい(; ̄ー ̄A アセアセ・・・
また、こんな質問は受けませんのでご了承下さい。 |
●まだやっていない箇所の質問は受けれません。
(例えば、このブログで使用しているカスタマイズの質問など、まだ記事にしていない箇所については、私自信があまり理解していないので、順番に勉強しながら載せているので、お待ち下さい。)
●記事に関係ない箇所にある質問
●明らかに説明を読んでない質問
●画像などの作成(私が教えて欲しいくらいです。未知)
(`□´) 以上である!(w)
追記 8/30 17:00
即答出来ない質問の際は、cssを覗く事になりますのでご了承ください。また、質問した際はcssはそのままの状態で回答をお待ちください。
[header]画像分割しないver [ソネットブログカスタマイズ]
以前やった「headerの背景色・背景画像」篇で「header」の画像と「タイトル」の画像を2枚用意して表示させる方法を載せましたが、1枚で出来ました。苦労して2枚作った方ごめんなさい。
(゜◇゜)~ガーン、(゜◇゜)~ガーン、(゜◇゜)~ガーン
と思ってるそこのアナタ・・・すいませんでした(*_ _)人
1枚で出来る方法は武槻さんが教えて下さいました。(人-)謝謝(-人)謝謝
「質問やリクエストは受けません」
といつも横暴な私に皆さんいつも暖かく色んな情報を寄せて頂きなんとお礼を言って良いのやら・・・本当にいつもありがとうございます(_ _(--;(_ _(--; ペコペコ
私のカスタマイズは、完全に独学なので「こーゆーやり方で私は出来ました」報告みたいなもんなんです。ある程度cssを自分が理解出来るようになったら「ソネットブログ」の「スキン」を配布しようと思ってるので、その時に「自分がわかりやすいように」記事にしています。この「ソネットブログカスタマイズ」の記事を書くようになってだいぶわかるようになってきました。
・・・そんなド素人カスタマイズですが、今後も応援して頂けるとありがたい限りでございます。
前回までのカスタマイズのまとめはコチラです。
今回、1枚の画像ででheaderの部分もイケルってことだったので、画像の上の方だけ30px程半透明にした1枚の画像を作りました。(作ったというより今回のはバレンタインイベントのただのキャプチャーを770pxの幅に合わせて切っただけですw)
↑画像は縮小しています。今回横幅は770px。縦190pxのタイトル用の画像を用意しました。
ではcss編集していきます。
リンクの装飾 [ソネットブログカスタマイズ]
前回やった枠内色変更で全体的な文字色は変わっていますが、まだリンクの文字に触れると#cc0000←この色になってます。
それを今日は↓な感じや
その他リンク表示の色んな装飾についてやっていきます♪
とりあえずいつものようにcss編集を開きます。前回までのカスタマイズはコチラです。
枠内色変更+α [ソネットブログカスタマイズ]
色を変えるだけでかなり自分色に仕上がります。今日は、枠の色変更についてcss欄に直接説明を入れていきます。
前回までのカスタマイズのまとめはコチラです。
わかりやすいように、派手派手に色をつけました。
カラーコードはコチラなどからお好みの色をチョイスして#以下6ケタをそのまま書き換えて下さい。
ではcss編集を開き以下を自分好みの色に変更していきます...((((=・o・)ノ ゴーゴー♪
リストマークの変更 [ソネットブログカスタマイズ]
私の「記事を参考にカスタマイズ出来ました!」の報告を最近何件か頂きました
コレを見に行くのが何よりの励みで、うまく出来ているとかなり嬉しいです(〃▽〃)
前回の「タイトル・説明文を消し画像へリンクを挿入」で出来ました報告を頂いたorsacchiottoさんのブログ「Fedelissima」さんはすごく可愛いブログで、タイトルの部分に私が説明した通りに、しっかりリンクが入っていて完璧っ!頑張ってカスタマイズ記事を書いた甲斐がありました。
thanksですヽ(●´ε`●)ノ
ではでは何回目?か忘れましたが、今回は、リストマークの変更をやっていきます♪
デフォルトだと四角い黒いマークを他の色や形、画像に変えられます。
前回までのカスタマイズはコチラから検索または、ブログのカテゴリー「ソネットブログカスタマイズ」をご覧下さい。
タイトル・説明文を消し画像へリンクを挿入 [ソネットブログカスタマイズ]
前回はタイトルの文字位置変更をやりました。
今回はそのタイトルと説明文を消し、且つタイトル画像へ自分のサイトのトップページのリンクが入る方法です。
また、当サイトのソネブロカスタマイズのまとめ目次ページのようなものを作ってみました。
このページはブログカスタマイズ記事更新ごとに目次ページも更新するようにする予定です。