こんにちは。
面倒くさがりの主婦です。
日々、苦手な家事に奮闘しながら生活しています。
昨日から１週間チャレンジとして「自分のブログ」に成長させるべく、少しずつ記事のリライトやブログデザインを整えています。
mendokusainoyada.hatenablog.com
この記事では初心者の方用にヘッダ画像の設置方法とページトップへ戻るアイコンの設置について説明しています。
ステマ対策についてはそっくりそのまま真似をし、設置させていただいたサイトがありますのでそちらをご紹介させていただいております。
１、ヘッダ画像の設置
目的は
パッと見ただけでアフェリエイトをしている記事だと分かるように忘れず記載しておきたかったから。（青矢印）
画像の作成には、
ブログ編集画面の右側、歯車マークの「編集オプション」を選択。
そこにある「アイキャッチ画像を作る」で開くことができるCanvaを使います。
まずは、
別のウィンドウでこのCanvaを検索して開きます。
未登録の方はまず登録していただく必要がありますが、これまでにブログ編集で使用したことある方は登録の必要はありません。（無料で利用できます。）
はてなブログに適応するサイズは1000×200ということなのでこのサイズを入力します。
色々試してみましょう。文字のデザインや大きさも変更できますよ。
あまり端っこにテキスト（文字）を入れてしまうと設置した際に切れてしまう場合があるので気をつけてください。
画像が完成したら、
これでPCに画像がダウンロードできます。
そして、はてなブログの「デザイン」に進みます。
スパナのマーク（赤丸）をタップし、「ヘッダ」を選択。
すると、「画像をアップロード」の下に『ファイルを選択』と出てくるので、そこからPCにダウンロードされている先ほど作成した画像を選択して設置します。
実際に設置された画像を確認してみて、もしテキストがズレていたり上手くはまっていなければ、もう一度デザインし直してみましょう。
できたら必ず「変更を保存する」で保存してください。
ちなみに、スマホ用に画像を編集したい場合は、スパナマークの横にスマホのマークがあるのでそこから同じような流れで画像を設置することができます。サイズは特に1000×200から変更せずにいけました。ただ、テキストは中心にまとまるように配置し直しました。
２、ページトップへ戻るアイコンの設置
黄色矢印のアイコンのことです。
目的は長い記事に付けたいから。
アイコンはこちらのサイトのHTMLとCSSを使用させていただきました。
スクロールすると出てくる「トップへ戻る」ボタンの作り方 | コトダマウェブ
このサイトの中にいくつかアイコンのデザインがあるので一つデザインを選びます。
リンク先の画像にグレーのHTML、CSSというボタンがあります。（カーソルを置くと色が変わり選択することができます）
一つのデザインを入れるためにそれぞれ、HTMLというものとCSSというものが必要という事です。
これは二種類それぞれ貼る場所が異なり、更に必ずHTMLとCSSの両方を貼らないと使えません。
HTMLは文書の構造に使用して、CSSはその細かいデザインに使用する、という感じです。
まず、HTMLを表示させてコピペしていきます。
場所は先ほどヘッダーの画像設置にも使ったスパナマークの「フッタ」のところに貼ります。
既に何か他のHTMLが入力れている場合はそれらより上の一番上にペーストしましょう。
次に、CSSをコピペします。
コピーしましたら、先ほどと同じくスパナマークの今度は「デザインCSS」というところにペーストします。
先ほどと同じく他のCSSがあれば、そこより上の一番上にペーストしましょう。
そして、よーく見ると、CSS内にbackgroundやcolorという文字があると思います。
ここの♯の部分をWEB色見本 原色大辞典 - HTMLカラーコードを参考に入力し直すと色が変更できます。（例 「♯fff;」を「♯000000;」に変えると黒色になる）
できたら必ず「変更を保存する」で保存してください。
３、ステマ対策
先ほど１でも画像内に入れることで対策をしていますが、念の為記事の中にも違う文言で入れました。
参考にさせていただいたサイトはこちらです、
こちらを完璧に真似しました☺️ぽこさんありがとうございました⭐️
これで一安心⭐️
まずは言葉が色々分からなかったので、一つ一つ言葉を調べて、分かりやすく説明できるよう心がけました。
初心者のため解釈間違えなどがあるかもしれません。
その際は是非教えていただけるとありがたいです！！
まだまだやることたくさんですが頑張ります！
この記事が面白いと思ってくださった方は押していただけますと励みになります！よろしくお願いいたします☺️
こちらからハピちわの楽天ROOMに入れます🐶
最後までお読みいただきありがとうございました！
