Custom Happy https://ameblo.jp/custom-happy/ アメブロをハッピーカスタマイズしよう！少しずつ変化するのでチェックしてくださいネ！ ja 記事タイトルに背景画像は設置しよう！ クリックリンクのデザイン変更の［スキンCSSの編集］をクリックして編集するよ！
まずは画像編集ソフト等で背景画像を用意してアップロードしよう！
アップロードはスキンCSS編集の上に画像を追加する箇所があるよ↓
画像の追加
次の箇所にコードを追加して背景画像を配置しよう！
/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader{
margin:0 29px;
padding:8px 10px 0 37px;/* 記事タイトルの位置の調整 */
border-left:0px solid #e4e4e4;/* ボーダーの幅を0にする */
background-image :url(http://stat.blogskin.ameba.jp/blogskin_images/20111019/15/9b/1d/j/o04230034custom-happy1319005829603.jpg);/* 画像のURL */
background-repeat :no-repeat;/* 画像の繰り返し表示なし */
margin-top :0px 0px 0px 0px;/* 画像の余白 */
width :423px;/* 画像の幅 */
height :35px;/* 画像の高さ */
}

次のコードで記事エリアの枠をなくそう！
/* skinArticle 記事エリア */
.skinArticle{
/* 注　ベースのcssに margin-bottom の記述有り */
padding:16px 0;
border:0px solid #dddddd;/* 記事内エリアの枠の幅を0にする */
background:#ffffff;/* ←記事に背景を敷きたいとき */
}

記事タイトル背景画像前

変更前の記事タイトル


記事タイトル背景画像後

変更後の記事タイトル

次背景画像の色にあった文字の色を選び調整してね！

/* skinArticleTitle 記事タイトル文字 */

.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited{

font-size:1.31em;

font-weight:bold;

color:#690;/* 記事タイトル文字色 */

}


※不具合が生じたときはコチラでは責任は負いかねます。編集はご自身の責任で行ってくださいね！よろしく！
※編集する前のCSSのコードをコピーし保存しとくと安心だね！

 ]]> https://ameblo.jp/custom-happy/entry-11052782295.html Wed, 19 Oct 2011 16:51:47 +0900 ページ送りのボタンを変えてみよう！ クリックリンクのデザイン変更の［スキンCSSの編集］をクリックして編集するよ！
ボタンをグリーンに文字色を白に文字を太くしてみよう！
マウスオーバーは背景色をオレンジにするよ！
以下のコードで編集するよ！！

/* (2-3) ページ送りボタンの  << 次へ 、前へ >> 、「次の記事タイトル」 >> ボタン
--------------------------------------------*/


.skinSimpleBtn,.skinSimpleBtn:visited,.skinSimpleBtn:hover,.skinSimpleBtn:focus{
border:1px solid #690;
font-weight:bold;/* フォントを太く */
background:#690;/* ボタンの背景の色をグリーンに */
color:#ffffff !important;/* 文字色を白に */
}


/* ボタンにマウスオーバー */
.skinSimpleBtn:hover,.skinSimpleBtn:focus{
border:1px solid #DF8313;/* 線の色をオレンジに */
font-weight:bold;/* フォントを太く */
background:#DF8313;/* ボタンの背景の色をオレンジに */
color:#ffffff;/* 文字色を白に */
}

ボタンの色や文字の色は自分の好みにしてね！

以下のサイトで好きな色が見つかるよ！

スタイルシート見出しメーカー

http://midashi-maker.v-colors.com/

送りボタン変更前

↑送りボタン変更前

送りボタン変更後

↑送りボタン変更後

以ハッキリ！スッキリした感じ(＝⌒▽⌒＝)
※不具合が生じたときはコチラでは責任は負いかねます。編集はご自身の責任で行ってくださいね！よろしく！
※編集する前のCSSのコードをコピーし保存しとくと安心だね！


]]> https://ameblo.jp/custom-happy/entry-11051743239.html Tue, 18 Oct 2011 14:50:39 +0900 中日ドラゴンズの底力 ドラゴンズはの底力あっぱれです！
優勝なのに落合監督は辞めるのかなあ

ちなみに今年も5位確実のカープファンです！とほほ
CSに残って欲しかった！

来年はドジャーズの黒田投手もカープに復帰

来年こそ優勝だあ
]]> https://ameblo.jp/custom-happy/entry-11048791522.html Sat, 15 Oct 2011 17:02:22 +0900 サイドバーのリストの行間を変えてみよう！ クリックリンクのデザイン変更の［スキンCSSの編集］をクリックして編集するよ！
margin-bottomを追加してラインの下側を少し広げるよ、またline-heightで行間も広げよう！
以下のコードで変更するよ！

/*　　サイドバーのリストの行間　　*/
ul.skinSubList li{
margin-bottom:10px;/*下マージン*/
line-height:1.8em; /*行間*/
}
数字を変える事でお好み行間に調整できるよ！

サイドバーリスト行間変更前
サイドバーリストの行間変更前

サイドバーリスト行間変更後

サイドバーリストの行間変更後

行間広がって少し読みやすくなりました！

※不具合が生じたときはコチラでは責任は負いかねます。編集はご自身の責任で行ってくださいね！よろしく！
※編集する前のCSSのコードをコピーし保存しとくと安心だね！
]]> https://ameblo.jp/custom-happy/entry-11048769480.html Sat, 15 Oct 2011 15:54:48 +0900 スティーブ・ジョブズ MacのPCを何台替え変えたかな？数えてみると10台くらいは購入したかな！現在も3台元気に動作しますよ！
Macは外観もおしゃれでOSも使いやすくほんとに素晴らしいPCです。iPodでも音楽を詰め込みドライブなどで便利に楽しめました！
今はMac miniが気に入って仕事にプレイベートに使用しています。
10月5日に訃報がとどき残念でなりません。また、これからのAppleも心配です！
スティーブ・ジョブズ氏のご冥福をお祈り致します。
]]> https://ameblo.jp/custom-happy/entry-11041766868.html Sat, 08 Oct 2011 16:22:27 +0900 本文の行間を変えてみよう！ ディフォルトでは本文の行間が少し詰まって見えるので行間を変更するよ！
クリックリンクのデザイン変更の［スキンCSSの編集］をクリックして編集するよ！

本文行間


行間を指定するコードはline-height:2.4em; 数字は自分の好みで変えようここでは2.4emで少し広めの行間にしたよ！いろいろ数字を変えて表示の確認をしてみよう！
ついでに文字サイズも変えてみようfont-size: 12px;にしてみたよ！
以下のコードをスキンCSSの編集を開いて編集してみよう！
※不具合が生じたときはコチラでは責任は負いかねます。編集はご自身の責任で行ってくださいね！よろしく！

/* 記事／メッセージボード文字 */
.skinArticleBody,.skinMessageBoard{
font-size: 12px; /*文字サイズ*/
line-height:2.4em; /*行間*/

行間を変更すると本文が読みやすくなったよね


ペタしてね
]]> https://ameblo.jp/custom-happy/entry-11041744585.html Sat, 08 Oct 2011 15:49:57 +0900 マウスオーバーしたときのリンク文字の変更 ↓ディフォルトの状態は下線が表示され、文字の色はピンク！

マウスオーバーしたときの文字の変更

Amebaロゴの下のクリックリンンク→デザインの変更の［スキンCSSの編集］をクリックして以下のように変更してみました。同時にＮＥＷの文字の色と文字の太さを変更。

マウスオーバーしたときの文字の変更箇所

以下のCSSコードを追加しました。

下線をなくすCSSコード

text-decoration:none;

フォントを太くするコード

font-weight:bold;

実際の投稿記事で変更した箇所を確認して下さいネ


ペタしてね

]]> https://ameblo.jp/custom-happy/entry-11041516502.html Sat, 08 Oct 2011 10:45:47 +0900 CSS編集用デザインを選んで文字の色を変えよう！ カスタマイズ挑戦1日目



Amebaロゴのすぐ下にあるクリックリンクのデザイン変更→スキンの選択を選びCSS編集用デザインを選択。デザイン変更→スキンCSSの編集を選び文字の色を変えよう！


↓変更前


文字の色変更前



↓変更後
文字の色変更後


 



↓スキンCSSの変更箇所［デザイン変更→スキンCSSの編集ピンクで囲まれた部分を編集して好きな文字のいろに変えよう！
CSSの変更部分



以下のサイトで好きな色が見つかるよ！


スタイルシート見出しメーカー


http://midashi-maker.v-colors.com/


今日はここまで又次の更新をお楽しみに！！


このアメブロがどんな風に変わるか自分でも楽しみです。


ペタしてね ]]> https://ameblo.jp/custom-happy/entry-11040810306.html Fri, 07 Oct 2011 17:39:26 +0900