月とあなたと音楽と♪ 〜 1 / f yumi L@b〜

〜カウンセラーが占う「本当のあなたに出会う」タロット・ホロスコープ〜 本来のあなたの人生を!スピリチュアル心理セラピー🎵

続・新年早々 ❤︎ はてなブログのテーマを変更してみました

今回のブログカスタマイズでお世話になったサイトさまたちなど

(ブログテーマ変更・備忘録)

 

f:id:yumiring3131:20200103154240p:plain



✴︎自動広告をやめた(でも再開した)

Minimalismに変更して、すぐに自分のブログを見てみたら、

なんと、ブログタイトル画像のすぐ下に、

ブログタイトルよりも大きな、アンカー広告・・・

 

写真撮っとけばよかったんですが、泣きながら対処したので、びっくりするほどの大きな広告が居座っていた時の状態は残ってません。。。

 

対処方法は、なんとGoogleアドセンスさまのヘルプ。

ページ上部のアンカー広告を無効にする - AdSense ヘルプ

 

このヘルプにあるコードを、

はてなブログダッシュボード設定詳細設定

の下の方にある、

headに要素を追加 にペーストします。

 

この箇所や、デザインの設定画面にある、

CSSHTML の場所は、改行してどんどんブッ込んでいっても、今の所はわたしのサイトは特に問題はありません。

(素人仕事なのですみません)

 

以下を参考にしてみてください ♪

help.hatenablog.com

 

ちなみに!!

それでも消えてないように見えてしまい、泣きながら作業していたのですが、

他に改善する方法が見つからず、

 

もしかして・・・と思ったら、

わたしのPCのキャッシュが残ってただけでした。

広告の部分が空白で残ってしまっている場合などは、キャッシュのクリアもよろしくお願いしますー!!

 

 

✴︎文字が小さくて老眼にはつらいから、フォントサイズ大きくした

PCサイトで、みやすいフォントサイズは、16px以上だそうです。

 

確かに、Minimalismに変更して、ブログを確認したところ、

びっくりするくらい文字が小さくて繊細でした。(笑)

 

これはいかん。ということで、フォントサイズの変更をしました。

 

今回のテーマ変更において、一番お世話になりました、

「くうかんしんぷるライフ」さま♡

サイトも可愛く、文章もやさしく、そしてセンスが良い。

たくさんありがとうございました ヾ(๑╹◡╹)ノ"

 

www.kurasitotonoe.com

 

フォントもメイリオ好きなので、そのままコードをCSSにペタペタ貼り付けさせていただきました。

 

 

✴︎ナビゲーション メニューの追加と背景色変更

グローバルナビゲーションメニューの変更追加は、

Minimalism 作者さんのサイトをそのまま参考にしました。

 

hitsuzi.hatenablog.com

 

 

本当は、各カテゴリメニューに「アイコン」がついているのですが、

わたしのカテゴリに合ったアイコンが見つけられず、

アイコン部分のコードを削除してしまいした。

<i class="fa fa-○○-hidden="true">

 

削除の方法と、ナビゲーションメニューの背景色の変更は、

こちらのサイトさまを参考にしました。

 

www.inside-shiina.com

 

ちなみに、わたしの背景色のカラーは、

「#e6edfa」 ですー。

(どうでもいいか。笑)

 

 

✴︎フッターにコピーライトを入れてみた

ブログサイトの一番下、

「Powerd by Hatena Blog」の部分を、自分のサイト名に変更してみました。

参考にしたのは、このサイトさまです。

 

blog.minimal-green.com

 

サイトの名前と、yumi L@b の追加、

背景色は、ナビゲーションメニューと同じにして、

文字色はグレーにしてみました ♡

 

 

✴︎モバイルサイト下部に固定メニューを追加

スマホで見たときに、いろんなメニューに飛びやすくするため、

 ・ホームボタン

 ・カテゴリ検索

 ・検索

 ・ツイッターフォローボタン

を追加してみました!

 

このサイトさまの通りにやってみた!!

 

www.bambi.pro

 

そしたら、一部エラーになるところがあるんだけど、

なんとか探して改善した!!(笑)

出来上がりは、すごく満足 ٩( 'ω' )و ♡

 

よーくみてもわからなかったので、エラーコードのところをお伝えしますね ♪

 

<!-- ↓↓項目4. ツイッター ↓↓の部分の書き換えが必要です-->
	<!-- screen_name=自分のツイッターID" ←@マーク以降のIDを入れる -->
        <a href="https://twitter.com/intent/follow?screen_name=自分のツイッターID">
	<i class="blogicon-twitter"></i><br><span class="mini-text">Follow</span>

 

上記コードの、

<a href="https://twitter.com/intent/follow?screen_name=自分のツイッターID">

の、

自分のツイッターID"」の「ID」の後ろのダブルクォーテーション「」が、

多分全角になってしまっているので、

半角英数に直せば使えますー!

 

 

✴︎タイトル画像を最適サイズで作ってヘッダーに貼り付けた

はてなブログのヘッダー画像の最適サイズは、

「1000×200」だそうです。

 

 

わたしも「Canva」を使って、ヘッダー画像を作りました ʕ•ᴥ•ʔ ♡

 

f:id:yumiring3131:20200102205148p:plain

 

 


 

PCで見えるサイズと、スマホで見えるサイズが違ったので、

 

スマホ用のヘッダー画像のサイズ調整は、このサイトさまにお世話になりました。

CSS に、追加するだけです。ありがたやー。

 

affiliate-couple.hatenablog.com

 

 

ついでに、ナビゲーションメニューを、画面サイズ横いっぱいまで広げてみました。

横いっぱいに広げる方法を調べたのは、こちらのサイトさま

 

www.crypto-ksw.com


 

あとは、ありすぎのカテゴリをほんのちょっとタイトにしたり、

プロフィールをちょっと変更したり、

 

そうやって、ほぼ1日使っちゃった。笑

 

でも、大好きな部屋を着飾るのと同じように、

ブログを整えるのも楽しかったです。

 

WEB素人の割には、よくできました ٩( 'ω' )و ♡