かあびいのぷるぷるBlog

共働きワーママが子育て、キャリア、家事等のヒントを発信しています。

かあびいのぷるぷるBlog ―おいしいもの大好きな共働きワーママの子育て―

MENU

はてなブログの改善(2023年1月)

こんにちは、かあびいです。
昨朝は大寒波の影響で本当寒かったですね・・・。私の住んでいる地域では雪は積もらなかったですが、全国的には大雪、吹雪とのニュースがたくさん報道されておりました。みなさんの地域は大丈夫でしたか?

さて、今回は昨日今日でカスタマイズした「はてなブログ」について書きたいと思います。

なぜカスタマイズをしたのか

年初に仕事について、以下の記事で「今年は昨年ゆるかった(?)分、こちらのウェイトを高めにしてガンガン攻めていきたい」と書きました。

仕事は本気でやっているのですが、今私が対応すべきものがなくなってしまいまして(どちらかというと、現在担当プロジェクトや案件は全て相手が玉持ちの状況)、仕事が落ち着いてきたのです。そのため、必然と研究する余裕が出てきました。以前からこんなことやってみたいなぁと思うものを色々試していく中で、うまくいったものを今回はリリースしています。そんな大きなカスタマイズとかはないんですけど、どなたかの参考になればと思い、記事として書くことにしました。

改善①「トップへ戻る」ボタンを設置

当初からカスタマイズしたかったのが、こちらの機能です。読者の方はご存じかと思うのですが、私の記事はだいたい1,000~4,000字前後のボリュームでそれなりに量があります。そのため、TOPへ戻るには記事を最後まで読んだ後にマウスを一生懸命スクロールしクリックする必要がありました。スマホであれば、なおさらですよね。
そういった小さなフラストレーションを解消したいと思い、今回CSSとHTMLをいじりました。モノクロのボタンでもよかったのですが、やっぱり当ブログのテーマカラーであるパープルやラベンダー基調に統一してみましたが、どうでしょうか?

新旧対象画像①トップへ戻る

新旧対象画像①トップへ戻る

上記カスタマイズにあたり、参考にさせていただいたブログはこちらです。
「2. 追従するボタン」で記載されている各コードをコピーし、CSSの一部項目を自分好みに修正(ここはやらなくてもOK)して、各場所に貼り付けるだけです。

以前他の方の記事をみて実験したことがあったのですが、私のテーマではCSSがうまく効かなくて諦めておりました。やっと実装できて、うれしい♡

改善②サイドバーの「Profile」を見やすく

デザイン>カスタマイズ>サイドバー内のデフォルトの「プロフィール」からだと、なぜかプロフィール画像が荒くなってしまう問題(何度も画像を直したのに・・・)。これが気になり、ここをカスタマイズしたいと思いました。新しい方ではプロフィール画像は鮮明になり、白囲みでよりポップな表現ができました。
ついでに、「読者になる」ボタンもアイコンにして、「Follow me」と書いてみました。女子っぽい(笑)

新旧対象画像②Profile

新旧対象画像②Profile

つづいて、上記カスタマイズにあたり、参考にさせていただいたブログはこちらです。
デザインは「プロフィールデザイン1」にして、「プロフィール作成フォーム」に各種情報を入力して完成したHTMLコードを少し自分好みに修正して、サイドバー>HTMLを選択し貼り付けました。

改善③吹きだしを導入

開設当初は導入するつもりはなかったけど、他のブログをみて羨ましくなった機能です(笑)先程も上段で申し上げましたが、私の記事はそれなりの量があり、文字だけではなかなか読むのが苦しいかと思います。アンダーライン引いてみたり、文字色を変えてみたりと工夫していますが、写真がない時の記事は本当目によろしくない・・・。ということで、少し目をお休みさせて読みやすくさせることを目的に、吹きだしを導入してみました。
せっかくなので、家族のアイコンも書き上げて、登場させることに(笑)

新旧対象画像③吹きだしを導入

新旧対象画像③吹きだしを導入

アイコンは私のプロフィール画像も含めて、私が「ペイント」アプリを使って、マウスで書いています(笑)お絵描きの領域ですが、立派な私の作品たちです!

↑の画像では分かりづらいので、吹き出しを試しに使ってみます。

かあびいです。

かあびいの旦那です。

あぐ~(かあびいの子どもです)。

こんな感じです。画像を含めていかがでしたでしょうか?旦那さんと子どもは二重なのですが、うまく表現できなくてこんな仕上がりになりました。旦那さんは目がクリクリ系なので、二重がうまくいかなかった分太い線で表現しました。手作り感(笑)

さて、上記カスタマイズにあたり、参考にさせていただいたブログはこちらです。
更にこのブログの中にある別の方のブログも参照しつつ、作成しました。個人的には一番時間がかかったのが、この機能ですね。

まとめ

ちなみにですが、私はHTML、CSSのコーダーでもWebデザイナーでもありません。ちょっとだけHTMLの知識が仕事で身に着いたくらいの初心者で、専門的なことはわかりませんので、悪しからず・・。それでは、また  

・。・。・。・。・。・。・。・。・。・。
頑張って投稿してまいりますので、ぜひ読者になってくださいね!

 ランキングに参加しています。応援していただけると嬉しいです。
にほんブログ村 子育てブログへ ブログランキング・にほんブログ村へ