No.169
なんか イライラする
ちょっとしたことに
はらがたつ・・・
そんなときは
「つかれてるんだ」と
おもって しっかり
やすもう
こころのよゆうは
パワーに かんけい
しているよ
しっかりやすんで
じゅうでんできたら
また やさしいこころが
もどってくるよ
だいじょうぶ♪だいじょうぶ♪♪
新元号が発表されました
平成も いよいよ残り僅か
「令和」は どんな
時代になるのか
楽しみですね
さて 昨日 予告しましたが
今日は CSSを使った
ブログデザインの変更方法を
お伝えします
Dream Tech Schoolの
ブログは こんなカンジに
カスタマイズしました
カスタマイズしたところ
１）背景
背景：オリジナル画像
背景色：３色グラデーション
２）タイトル
文字色：オレンジ色 影付き
背景色：半透明の白色
３）説明文
文字の大きさ：ミディアム
背景色：半透明の白
幅：３００ピクセル
４）ヘッダー
背景：オリジナル画像
５）サイドバータイトル
背景色：オレンジ
文 字：白・太字
６）ブログ記事エリア
枠線：角丸四角形
以上６か所を
修正しました
それでは カスタマイズの
方法から お伝えします
1.ブログ管理から「デザインの設定」を
クリックします
２．画面下部の方の「カスタム可能」
をクリックします
３．色々なデザインがありますが
オリジナルなデザインにしたい場合は
「CSS編集用デザイン」を選びます
４．選んだら「CSSの編集」を
クリックします
５．下の画面が出てきたら まず必要な
画像をアップしておきます
これで 準備が整いました
それでは いよいよ
カスタマイズ
していきましょう～
まずは
1）背景
＜各部の解説＞
linear-gradient←背景をグラデーションにします
rgba(224,255,255,0.5)←ピンクの文字は
色のコード・青は透明度
自分の好きな色は
RGBという数値に変換しなくては
いけません
RGBに変換してくるHPは
こちらにも あります
RGBAのAとはalphaの略で
透明度を指定します
カンマ（，）で区切られた
最初の３つの数字が色のコード
最後の小数が透明度です
花ちゃん先生は
薄い青→濃い青→薄い青
のグラデーションに設定しています
urlは画像の指定です
５．で必要な画像をアップした時に
「この画像のパス」があるので
このパスをコピーして貼り付けます
これで背景が設定できました
次は
２）タイトル
オレンジの影付き文字に
設定します
color:#ffa500;←文字色
text-shadow: 1px 1px 1px #999999;←影の設定と色
font-weight:bold;←太字
こんなカンジで
カスタマイズしています
今日は長くなったので
この辺でおしまいです
続きはまた後日～
Dream Tech School
牛田・古田台・舟入・宇品・庚午
比治山・伴中央・こころ・光明学園
フランチャイズ教室
田中学習会
東京学習社
学校教育
なぎさ公園小学校 プログラミング授業担当
広島工業大学付属高校 エンカレッジコース
プログラミング授業担当
オンラインマンツーマン講座
随時開講中
プログラミング for Pepper
牛田教室で開講中
ホームページは こちら です