桜母ちゃんです(^^)v
ブログの改装を始めて何とはやふた月!
え、もうそんなに経つのっ(汗)
ブログ改装進行中
実は毎日
ブログを触っています(。•̀ᴗ-)✧
それなのに全然記事の更新ができてないっ…
書きたいことは山のようにあるのにネ(^^;
今は日々このブログのデザインカスタマイズを進めています!
やってみたこと
ブログテーマを変えた
タイトルをタイトルヘッダーに変えた
アイキャッチ画像を使うようになった
見出しの形を変えた
グローバルメニューを作った
スマホの下部にボトムメニューを作った
フォントアイコンを使えるようにした
ブログテーマを変えた
まず初めに、ブログテーマを「公式テーマ」から「インストールしたテーマ」にかえてみました!
公式テーマからしか選んだことがなかったので、いざテーマストアのページに移動すると、その数にビックリ(゚ロ゚)!
しかもそのテーマをデザインしている方達はご自分で作られたテーマを提供してくださってる!
なんてことっ!こんな風に自分だけのテーマが作れる人達がこんなにいるなんて!
テーマ選びは、迷って迷って迷って迷って(笑)どれも素敵過ぎるっ!
今回はzuborakaさんの「palette(パレット)」にさせていただきました!
ブログテーマ「palet(パレット)」のインストールはこちら
タイトルをタイトルヘッダーに変えた
ブログテーマがお気に入り色に変えれた所で、次はタイトルを自分好みにしたい!
と言うことで皆さんどうやってあんなに凝ったタイトルをつけてるのかな?と検索検索。皆さんのブログを拝見してフムフム。羨ましすぎる…。
よだれを垂らしながらどうやったら変えられるのか調べてたどり着いたのが、
「画像にタイトルを入れて書き込む」
でした。
へー。なるほど。自分で好きな画像を作って貼ってるんだ!
それを「タイトルヘッダー」と呼ぶのね。
そこでわたしは、PCでもスマホでも隙間時間に編集が出来るソフトを選ぶことにして(もちろん無料でできるもの!)何が良いかなーと調べると。
ありました。『CANVA(キャンバ)』
これならPCで作っていた途中の物をスマホでも共有して続きがつくれるみたい!
後から気が付いたのですが、はてなブログは編集オプションの中の「アイキャッチ画像を作る」の所にCANVAのマークがあるではないですかっ!
そうだったんだ。知らなかった・・・。
画像編集ソフトCANBA(キャンバ)を使って好きな画像を作って、そこにブログタイトルもテキストでいれる。
画像って、どの大きさで作るのかな(・_・;)
はっ!canvaの中に「はてなブログのEpicヘッダー」と言う項目があるではないかっ!スゴイっ
それを使えば大きさ考えなくてもいいかも!
たくさんパターンを作って、どれが一番自分の納得するタイトルになったかな。ずっと使い続けられるな。ウキウキわくわくソワソワ。
そしていざ作った画像をHTMLに記述してみると!
余白が白く残ったーWWW
でもちゃーんとそういうハプニングを回避させてくれる先人様が修正のCSSを残してくださっているのがスゴイっ!こんな素人の母ちゃんが、お気に入りのタイトルを作れた…
ブログカスタマイズ最高です。
楽しすぎるっ
アイキャッチ画像を使うようになった
自分のブログが変わっていくのが楽しくなって、かっこいいブログを真似したい!
そうだ!アイキャッチ画像を作ろう!
調べたいことがあってネットサーフィンしていると、どんなサイトもアイキャッチ画像をつかってる!
と言うことで、タイトルヘッダーでも使ったCANVAを使ってアイキャッチ画像を作るようになりました。
なんてことだ!簡単ではないか…
まだまだセンスが良くなかったり、楽しくてつい色んな要素を入れたくなってしまって、ガチャガチャしたアイキャッチ画像になりがちだけど、シンプルでわかりやすい画像を目指してどんどん作ろうっと!
見出しのデザインを変えた
そもそも最初にやりたかったのがコレ!
何故かどんどん後回しになってしまったけど、色んな方が【コピペOK】を謳ってサイトに残してくださってる(人 •͈ᴗ•͈)
自分好みを探す探す。探しているうちに迷子www
大見出し、中見出し、小見出し、3つ探してCSSを貼り付けるだけ!
と簡単に思っていたけど、これがまたセンスを問われる!
た~くさんある中から種類が似たものを選ぶ?
それともあまり気にせず3つ選ぶ?
あれこれピックアップしているうちに、
オリジナルが作りたいっ!
と思ってしまった母ちゃん♪
2つのコードの前と後ろをくっつけてみたり、
あーでもないこーでもない。
と、たどり着いたのが今の見出しデザインです。
可愛いでしょ(人*´∀`)。*゚+
グローバルメニューを作った
よくブログを読ませていただいている方のタイトルの下に何だかカッコいいメニューがあるのを発見!
「私もあのメニューみたいなのつけたい!」
でも、検索しようにもそのメニューの名前がわからない(・_・;)
「タイトルの下」
「記事の上」
など、もう適当に検索するしかないwww母ちゃんてば、しょーもないなぁと思いながらも地道な検索…
かなり迷子になっていて、けれど見つけました!
その名も
「グローバルメニュー」
おぉぉぉ。カッコいい。
早速グローバルメニューを検索。
出てくる出てくる!
先人様すごーい!!当たり前のようにcss載せてくれてました!
しかしそんなに調べて行き着いたのに実は私がこのブログのテーマにした「palet(パレット)」ではグローバルメニューが標準で実装済みだったー(ノ*0*)ノ
嘘だ。普通に説明読んでたら、簡単だったのにー母ちゃんウッカリ…www
スマホの下部にボトムメニューをつけた
グローバルメニューがつけれたら、次はスマホの方!
スマホの下の方に同じように、メニューバーを作ることにした!
おぉぉ!だんだん本格的に楽しくなってきた。
自分のブログの見た目が変わるとテンション上がるー(≧▽≦)
フォントアイコンを使えるようにした
グローバルメニューとボトムメニューが出来上がったら、今度はそこに可愛い記号が付けたくなった桜母ちゃん。
「どうやって記号貼り付けるのかなー。」
って考えてたけど、
そもそも「記号」でも「貼り付ける」でもなかったー!
上の画像にあるように、グローバルメニューのテキストの前にある
例えば「発達障害」の前にある「 」この葉っぱとか
ボックスに使ってる「 」この肉球とか!
これどちらも「テキスト(文字)」なんです!
だからサイズも色も自由自在!文字のように入れるだけ
これまた楽しすぎる!
これは「Font Awesome」を使っています。
Font Awesomeは基本的に英語ですが、日本語に翻訳することも出来ます!
それに何より、先人様達が沢山使い方を公開して下さっているのですぐに調べて使えるようになりました。
ただ、「はてなブログは特別」で・・・。
フォントアイコンのHTMLを書き込むと、勝手に書き換わったり消えてしまったりするので少し書き換えが必要です。
慣れてしまえば簡単です(^^)
これからやりたいこと
吹き出しを使う
桜母ちゃんのアイコンを変える
ボタンメニューを作る
などなど、小さな事だけど沢山やりたいことがあります!
実は吹き出しは挑戦済み。
なんどやっても画像と吹き出しがずれてしまうのですっ
何としても完成させたい!
桜母ちゃんのアイコンは作成中。
え、さくせいちゅう?
そうなのです!長くお世話になった桜母ちゃんのブログアイコン・・・。
こちらは無料のイラストをお借りしてから早7年・・・。
自分的にはすっかりおなじみの桜母ちゃんの画像っぽくなっていたのですが、なんといってもやはり無料のイラスト。
無料のイラストなので、やはり他の方も使っているのをちらほら見かけます。
そこで、ブログをカスタマイズしているいま、自分のアイキャッチも自分で作ろう!と思い立ち、書いている所なのです(^^)!
こだわって頑張るぞぉ!!
ボタンメニューもいずれ取り入れたいっ!
画像貼ってるだけじゃなんだかやっぱり物足りない
2024.3.6 ブログアイコンを念願のオリジナルアイコンに変更しました! 新しい桜母ちゃんも宜しくお願いします!!
まだまだ進行形
そんなこんなで桜のブログカスタマイズは
まだまだ進行形です!
少しずつ少しずつ変わっていけたら良いな。
そして、もっと勉強したい。と思い始めている私!
最初はみなさんのブログを見て回って勉強させてもらってブログがステップアップしたら良いな。程度だったのですが、だんだん極めたくなってきた!WEBデザインとかやってみたい。なんて思ってみたりして・・・。本を購入して1から勉強いや0から勉強してみようかな・・・。と思っています。
この歳になって、新しいことに挑戦するのって時間と意欲がないと中々できないっ
特に母ちゃんは浮き沈みがあるからね。
浮いた時に頑張って、プカプカ長く浮かべるように頑張ります(. ❛ ᴗ ❛.)
そんな気持ちにさせてくれた、今の環境を私に下さったブログの向こうの皆様と、
ついてきてくれた太陽くん、ひまわりちゃん。
そして、私に居場所を作ってくれた夫ちゃんに感謝して……。
これからも桜は歩いていくよ。
☆今日の桜ニャンズ☆
頑張ってる!あたし!
頑張ってる!天使ママ!
頑張ってる!病気っ子ママ!
頑張ってる!自閉っ子ママ!
頑張ってる!シンママ・シンパパ!
頑張れ!脱モラハラ!
自分らしく生きよう! 桜