文系×ド素人のブログカスタマイズ記録です。
以前よりずーーーっと気になってて、でも難しそう…
と思って避けていた「この記事が気に入ったらフォロー」のバナーを遂に設置しました！
先人達の記事を参考にしつつ自分なりにアレンジをしたので、今回は記録に残しておこうと思います。
はじめに：こんなバナーにしたい！という方向けの記事です
- バナーの画像はアイキャッチではなく、固定の画像を使いたい
- 文面を自分で考えたい
- スマホでも横長に、スッキリ表示させたい
当てはまった方、さあ先へ進みましょう。
参考にした記事（王道2記事）
色々記事を探していると、はてなブログに関してはこの2人の記事が最も参考になりました。
私のカスタマイズもこの2つの記事から引っ張っています。
@minimalgreenさん
@c-miyaさん
minimalgreenさんの作られたはてなブログテーマはサブブログで使わせていただいており、c-miyaさんが作られたはてなブログテーマは今まさにこのブログのテーマとして使わせていただいております。
ありがとうございます！！🙇♀️🙇♀️🙇♀️
アイキャッチでOK！という方は上記2人の記事を参考にして設置されると良いと思います。（どちらもコピペOKです）
私には合わなかった点
ただ残念ながら上記2名の方の記事をコピペするだけではどうも私のイメージとは合わなかったんです。
2人のコードをそのままコピペ（ID関連や画像URLのみ変更）したらこんな表示になりました。
▼minimalgreenさんのコード
▼c-miyaさんのコード
私の場合、アイキャッチに色んな文字を入れこんでしまっており、それをそのまま使うとゴチャゴチャしていてちょっと合わないなぁ…という感じ。
それであれば固定の画像を使いたいなと思いました。
また、文面も「フォローしてね！」を全面に出すより、もう少し柔らかい文章を作りたいなと思いました。
ただ、スマホ画面でも横長でスッキリさせたかった私としてはc-miyaさんのスマホ表示の、画像の上に文字を乗せるという形はそのまま使いたいなと思いました。
というわけで、c-miyaさんのコードをベースに、少しHTMLをいじってみることに。
カスタマイズ：下準備
バナーに使う画像をはてなフォトライフにアップデート&画像URLを取得
コードでははてなフォトライフにアップロードされている画像URLを引っ張ってくるような仕様になっています。
そのため、使いたい画像をあらかじめはてなフォトライフにアップロードしておく必要があります。
画像URLの取得は色々ありますが、このやり方が一番簡単だと思います。
各ID、ブログURLをメモに控えておく
HTMLで必要になる各個人用のIDはコチラの一覧。
- はてなID
- ブログURL
- ブログドメイン（ブログURLからhttp://を抜いたもの）
- twitterのユーザーID（twitterアカウントの@を抜いたもの）
カスタマイズ：HTML
設置場所
「デザイン」⇒「スパナマーク」⇒「記事」⇒「記事下」
コード
書き換えの場所
下記に準備しておいたURL&IDを書き換えて下さい。
- 使いたい画像URL：3行目
- 文章：5行目、6行目、12行目
- はてなID&ブログドメイン：8行目（2ヶ所）
- ツイッターID：9行目
- ブログURL：10行目
カスタマイズ：CSS
設置場所
「デザイン」⇒「スパナマーク」⇒「デザインCSS」に下記コードを入力
コード
CSSはc-miyaさんのスマホ表示カスタマイズ記事のコードを修正せずそのままコピペしています。
私は「画像を背景にする」ver.のコードを使っています。
多分他のver.でもそのまま使えると思います。
完成したバナー
こんな感じでシンプルで、PCもスマホも同じ仕様になりました！
まとめ
アイキャッチじゃなく、フツーの画像に変えるだけで四苦八苦してしまいました💦
他の方のブログを拝見するとアイキャッチを使われている方が多いので、そちらの方がメジャーかとは思うのですが、もし固定画像を使いたくて、私のように初心者過ぎてよく分からないという方の参考になれば嬉しいです。
