ブログ画面のサイドタイトル背景色の変え方♡

はじめまして！ご訪問いただきありがとうございます♡

神奈川県 横浜市　横浜線鴨居駅　徒歩１０分

ＳＷＥＥＴＩＥ ＣＬＡＹマカロンタワー認定校＆ クレイパティシエールアプロンティ
krmberry(クランベリー)＊くるみです

カスタマイズはひとまず。。。と言っていましたが、なかなか皆様にお見せできる粘土製作途中がなくシリコンで型取りをしたり地味な作業でした

しかも失敗に終わりそうなので、また機会改めて挑戦する所存です

 

そんな今日は、自分のブログ画面をパソコンで見たときに

(私は３カラム・右ワイドメニューというデザインを選んでいますので)、

自分のブログ記事が真ん中にあり、左右にプロフィール・最新の記事・カレンダー・テーマ・読者一覧・・・などなどがある

その各タイトルの背景色を変える方法をお伝えします

ご自分でブログヘッダーなどをカスタマイズする時には、多分、

設定＞デザインの変更＞CSS編集用デザイン　を選んでいるかと思います。

このCSS編集用デザインにしないとヘッダーが変えられないからです。

そして、いざやってみて、ヘッダーも変えることができた！となった時に、上記の各タイトルの色がグレーであることに気づきました。

初期色のグレーでも構わなかったのですが、色をつけてタイトルを目立たせた方が皆さんが見たときにわかりやすいかな？と思い変更することにしました。

この変更は本当に簡単で

設定＞デザインの変更＞CSSの編集（CSS編集用デザインを選択済みであること)＞CSSの編集画面に入ります

このCSS編集を今までもしてきたのですが、その最後尾に下記のCSSコードを入力すればOKです。

☆*ﾟ ゜ﾟ*☆*ﾟ ゜ﾟ*☆*ﾟ ゜ﾟ*☆*ﾟ ゜ﾟ*

/* その他、拡張があれば記述 */

.skinMenuHeader{
background-color:#ffb6c1;
}

 ☆*ﾟ ゜ﾟ*☆*ﾟ ゜ﾟ*☆*ﾟ ゜ﾟ*☆*ﾟ ゜ﾟ*

  ＃カラーコード；　はご自分のしたい色にしていただいて構いません♡

ちなみに上のカラーコードは私が使用したピンクになっています

ピンクにもいろいろなピンクがありますから、こちらのピンクの確認は私のブログで見ることができます

機会があったらやってみてください♡

ここまでお読みいただきありがとうございます♡

↓久しぶりにランキングの画像を差し替えてみましたｗ全然見てなかったランキングですが結構上位にいたみたいです笑

折角なので編集してみたので、もしよろしければクリックしてみてください笑

＊みんなの幸せ私時間＊

結婚式準備でお忙しい花嫁様もホッとできるひと時を
お仕事が忙しいOLさんも　　目の前の可愛い世界に集中

子供の育児にお疲れのお母さまも　ご自分の趣味に没頭

少しでも自分だけの時間を持ちたい方に

【自分も皆の心も癒される幸せな時間】を目指して

マカロンタワー＆フェイクスイーツの自宅教室をしています！

レッスンポリシー(ご予約前にご確認下さい)

レッスンスケジュール

マカロンタワーフリーレッスン

マカロンタワー資格取得レッスン

お問合せフォーム

私とブログについて

インスタグラム(卒花嫁レポを１日１記事UP）

ツイッター（日々のご飯をUP）

お読みいただきありがとうございます♡

ランキングに参加しています！！

クリックをしていただくだけで嬉しいです♡
↓１クリック応援お願いします


にほんブログ村


にほんブログ村

メッセージボードを変えました♡カスタマイズについて

はじめまして！ご訪問いただきありがとうございます♡

神奈川県 横浜市　横浜線鴨居駅　徒歩１０分

ＳＷＥＥＴＩＥ ＣＬＡＹマカロンタワー認定校＆クレイパティシエールアプロンティ
krmberry(クランベリー)＊くるみです

 

昨日の記事では、ブログ内の上部・下部の編集をした旨をお知らせいたしました！

ブログ内編集と同時進行で、ブログトップに表示されるメッセージボードの編集も実はしておりました( ´艸｀)(パソコンからだとすぐに見れますので気づいていらっしゃる方もいたやもしれません♡）

このメッセージボードも、色々な方のブログを見ていくと

自分のお教室のコンセプトや由来を書かれていらっしゃる方

お教室までの行き方も記載されていらっしゃる方

ご自分のプロフィールへのリンクやレッスンリンクを貼られていらっしゃる方

などなど本当に様々なことを書かれていらして、自分はどういうのを書いたらいいのか散々悩みました

メッセージボードって、一発でこういうことやっているんだと分かるアイテムだと思います。

初めて訪れたブログを見たときに見やすく、お教室についてなどわかりやすく記載されている方のブログに私は目が惹かれました。

ご自分のお店やお教室のコンセプトなど

こういう想いがこもっています。こういう想いでやっています。

心惹かれる文章になって想いが伝わってくる・・・そんな気がしました。

(その人その人によって最適なメッセージボードの活用方法がある、ということですよね。)

じゃあ自分はどうだろう？何をかけばいいかな？そう考えたときに

どんなお教室なのか？→マカロンタワーのお教室をしています

どんなレッスンがあるのか？→フリーレッスンと資格レッスンがあります

どんな人に来てほしいのか？→プレ花嫁様や資格を取りたい方、日頃の息抜きとしてや趣味として習いたい方など

まずは私のお教室を知ってもらおうと思いました

今まで使っていたメッセージボードにはレッスンメニューとアクセスだけの記載でしたが、

今回はシンプルながらも上記３点の、大切な情報を載せました

メッセージボードへの編集も昨日書いたブログに載せて居る方法と同じで、

一旦普通にブログを書いてから、HTML表示に切り替えてコピーをしておく＞マイページ＞設定＞メッセージボードにコピーを貼り付けています。

＊枠は『アメブロ　枠　カスタマイズ』とかで調べると載せてくださっている方が多いので、ご自分の好みの枠を選ぶといいと思います

最初に貼り付けてOK～と思い、いざブログトップに戻って確認してみると。

メッセージボードとブログの間に大きな空白空間が！！！

なんじゃこりゃ～と思い調べてみると

目には見えないのですが、メッセージボード内に改行がたっぷり入っていたようで・・・

ブログ内にはコピーしてもスペースが見えない(コピーした時って青くなるのでわかる)のに、メッセージボードに貼り付けると、メッセージボード内に既にスペースが沢山いまして。

メッセージボード内の改行スペースを消したらきちんと指定の大きさに戻りました

この状況結構あるあるなようなので、もし同じ状況の方がいらっしゃいましたら、一度メッセージボード内の改行スペースを確認してみるといいと思います

またブログではきちんと改行して文字も合わせてあるのに、いざメッセージボードを確認すると変に改行されていたりすることがありました。

こればかりは自分でちまちまメッセージボードで直しました（メッセージボード編集＞確認＞編集の繰り返し。泣きたい）。

が、どうやらメッセージボード内で改行するためにENTERを押したりスペースで開けたりしていたのですが、<br>を入れると改行の意味になるらしいです。

なので改行したい所には　<br> を挿入するといいと思います。

プロの方に頼んだわけでもないですし、わけわからないCSSの羅列には心がくじけそうになりますし、頑張ってやってもうまく適用されなかった時にはイライラしてしまう時もありますが

でも、そんな時はチョコレート食べたり(だって今日はバレンタインデー)

紅茶を飲んで一息ついたり、肩がこるから回してみたり

少し気分転換に休憩するといいですよ

大変だった分、できたときはそれはもう達成感がすごいです

愛着だって半端ないプロよりいいんじゃないか全然みれるじゃないかなんて思ってしまうほど♡笑

私はハンドメイド感あってとてもいいなぁと思うのですが＾＾♡

皆さんはどうでしょう？

ここまでお読みいただきありがとうございました♡

＊みんなの幸せ私時間＊

結婚式準備でお忙しい花嫁様もホッとできるひと時を
お仕事が忙しいOLさんも　　目の前の可愛い世界に集中

子供の育児にお疲れのお母さまも　ご自分の趣味に没頭

少しでも自分だけの時間を持ちたい方に

【自分も皆の心も癒される幸せな時間】を目指して

マカロンタワー＆フェイクスイーツの自宅教室をしています！

レッスンポリシー(ご予約前にご確認下さい)

レッスンスケジュール

マカロンタワーフリーレッスン

マカロンタワー資格取得レッスン

お問合せフォーム

私とブログについて

インスタグラム(卒花嫁レポを１日１記事UP）

ツイッター（日々のご飯をUP）

お読みいただきありがとうございます♡

ランキングに参加しています
尊敬してしまうサイト様がたくさんありますので是非ご覧ください
↓１クリック応援お願いします


にほんブログ村



にほんブログ村

ブログヘッダーを作ってみました♡

はじめまして！ご訪問いただきありがとうございます♡

神奈川県 横浜市　横浜線鴨居駅　徒歩１０分

ＳＷＥＥＴＩＥ ＣＬＡＹマカロンタワー認定校＆ クレイパティシエールアプロンティ
krmberry(クランベリー)＊くるみです

 

ブログ内お知らせカスタマイズ→記事

メッセージボードカスタマイズ→記事

と、順調にちまちま自分でカスタマイズをしてきました＾＾

そんな今日は一番大きなカスタマイズ！！ブログヘッダー！！！についてです♡

ここ数日ブログヘッダー作成と適用をずっとやっておりました。

ヘッダー画像の作成は、私のパソコンにphotoshopが入っていますのでそちらで簡易ですが作成しました。(加工が得意な方なら凄い加工ができるのだと思いますが、私には簡易加工が限界でしたフォトショップを持て余しています）

メッセージボードも重要だと思いますが、やはり初めて訪問した時に目につくのはヘッダーですので、今回自分のヘッダー画像作成に至りました

ヘッダー画像も、その人その人によって違いますから、

ご自分の作品のお写真全体で表していらっしゃる方や

作品のお写真を何枚か使って表現されている方(色んなレッスンされている方が多い気がします＾＾)

作品写真と文字だけのスペースとで分けられている方

ご自身の画像や風景を組み合している方(ヨガやエステなどやられている方が多いかなと思いました＾＾）

などなど。

どんな風にしようかなと、また頭を悩ます日々。

スケッチブックにデザインを書いたり、自分の作品写真を見たり・・・。

先日撮っていただいたお写真を使ってみたり

やはりマカロンタワーを主役にしようと決めて。

でもこのグレーダマスクだと上品になりすぎてしまって私らしくなく・・・

背景画像のブルーダマスク柄選びに凝ったり、写真回りのぼかしも気にし始めたり

メッセージ文言もちょこちょこ変えて、フォントも気にしたり・・・

そんなこんなでやっと出来ました～

ＣＳＳ編集はこんな感じでうまくいきました(試行錯誤の上)

ﾟ･*:.｡..｡.:*･ﾟﾟ･*:.｡..｡.:*･ﾟ ﾟ･*:.｡..｡.:*･ﾟﾟ･*:.｡..｡.:*･ﾟ

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image: url(http://お好きな画像のURL.png);
height: 300px; /* 画像の高さ */
}

ﾟ･*:.｡..｡.:*･ﾟﾟ･*:.｡..｡.:*･ﾟ ﾟ･*:.｡..｡.:*･ﾟﾟ･*:.｡..｡.:*･ﾟ

カスタマイズで検索するとヘッダー用のCSSコードを載せてくださっている方が多いのですが(有難い！！)、それをコピペして自分のヘッダー画像のURLを入力してもうまくいかなかった(それはもう何度試して適用しても画像が載らない！！)ので

最終的に私よりパソコンが得意な旦那さんに見ていただきましたところ・・・

コピーさせていただいたCSSでは

skin-bgHeader　となっていたのですが、それを

skinHeaderArea　にして直したらうまくいったと。

正直私としてはなんのこっちゃという所でしたが、その文言を変えただけで上手くいったりするのですからCSS編集って奥が深いですよね。そして自分の知識の無さもどうにかせんと(避けては通れぬ道故、勉強しなければ・・・そして旦那に感謝)。

なんやかんやと試行錯誤して完成に至りました嬉しいです

これで画像変えたくなったらURLだけ差し替えればいいので簡単です(そんな頻繁に変えるものではありませんがね)

明日からはひとまずカスタマイズは終わりにして、粘土やその他の製作に入ろうと思います

来月のフェイクスイーツ初級認定講座の課題もありますし、また明日ブログに書きますが、イベント出展が決まったのでそちらも大忙しになりそうです

私でわかるかどうかはわかりませんが、ヘッダー画像やってみたけどうまくいかないとか、使ってみましたとかあったら遠慮なくコメントでもメッセージでも下さいね♡

一緒に考えましょう♡

ここまでお読みいただきありがとうございます♡

＊みんなの幸せ私時間＊

結婚式準備でお忙しい花嫁様もホッとできるひと時を
お仕事が忙しいOLさんも　　目の前の可愛い世界に集中

子供の育児にお疲れのお母さまも　ご自分の趣味に没頭

少しでも自分だけの時間を持ちたい方に

【自分も皆の心も癒される幸せな時間】を目指して

マカロンタワー＆フェイクスイーツの自宅教室をしています！

レッスンポリシー(ご予約前にご確認下さい)

レッスンスケジュール

マカロンタワーフリーレッスン

マカロンタワー資格取得レッスン

お問合せフォーム

私とブログについて

インスタグラム(卒花嫁レポを１日１記事UP）

ツイッター（日々のご飯をUP）

お読みいただきありがとうございます♡

ランキングに参加しています
尊敬してしまうサイト様がたくさんありますので是非ご覧ください
↓１クリック応援お願いします


にほんブログ村



にほんブログ村