便利なアプリの紹介など幅広く雑多に記録するブログ。8分5秒clrmemory今回は、はてなブログの「読者になるボタン」を画像にして、より目立つようなデザインに変更する方法を紹介します。画像はなんでも良いので、自分のサイトアイコンや好きな画像を使って実装してみてください。まとめはじめに今回紹介する方法で必要になるのが「読者になるボタンにする画像」です。こちらは各自用意しておいてください。サイトのアイコン画像や自分でデザインした読者になるボタンでも良いかも。基本的にコードを書き換える場合は、必ずバックアップをとった上で全て自己責任でカスタマイズしてくださいね。今回の作業では、このような画像を使って読者になるボタンを実装してみます。やばいイラストですねー。ちなみにこちらは「いらすとや」様からお金につられて罠にかかる人のイラストを使わせていただきました。画像が準備できたので早速カスタマイズしていきましょう。今回の流れはてなブログの読者になるボタンを画像にする場合、以下のような手順で行うことができます。画像アップロードまずは、読者になるボタンを任意の位置に配置する必要があります。HTMLを追加していきます。サイドバーのモジュールを追加ボタンから追加してみましょう。ここに画像とリンクに関する処理を記述していくのですが、その前にまず画像をアップする必要があります。はてなブログの場合、はてなフォトライフに画像が保存されるため、記事から画像をアップロードしてみました。記事の新規作成を選択して、その中に普段ブログを書くときのように画像を設置してください。右側に画像が表示され、プレビューがこのようになっていればOKです。スポンサーリンクスポンサーリンク画像のURLを取得では、画像のURLを取得しましょう。こんな感じのコードが表示できたら、コード内から「h.ttps://cdn-ak.f.st-hatena.com/=images/fotolife/-----.png」というように書かれた部分があるのでダブルクリックしてくださいするとURLの部分だけを選択できるので、メモ帳などに貼り付けておきましょう。やり方がわからなかったら、記事を一度公開してから画像を新しいタブで開くと、URL欄に画像のリンクが表示されるのでこちらでも大丈夫です。これでURLの用意ができました。リンクを設定HTMLを編集する前にもう一つ用意しておくURLがありますよね。読者になるボタンをクリックした時に表示するリンク先です。こちらは管理画面からチェックできます。管理画面から「設定」を選択して、表示されたページから詳細設定を開いてください。下の方に行くと「読者になるボタン」と言う項目が見つかるので、その中のURLから必要な箇所をコピーします。/subscribe」までです。iframeやheightと書かれた部分は不要なので注意してください。読者になるボタンのURLも取得できたので、先ほどデザインから設置した「HTML」モジュールを編集していきましょう。HTMLの中に以下のように記述してください。url(画像のURL);"></a></div>このコードのそれぞれを先ほど用意しておいたURLに書き換えます。今回の場合、画像のサイズによって多少コードが変わってくるため、コピペで一発!というわけにはいかないかもしれません。その点を踏まえた上で、こちらからコードを確認してください。pointer;}このコードをデザインCSSの一番下あたりに追加しましょう。コードの編集が必要になる可能性があるのは「height」の部分です。画像やサイドバーの横幅によって最適なサイズが変わってくるため、heightの値は各自調整してみてください。これで「読者になるボタン」を画像にするカスタマイズは完了です。実際に確認してみても、読者になるボタンが画像になっていて、クリックすると読者登録ページに遷移したかと思います。ちなみにサイドバー以外(記事下など)に読者になるボタンを表示する場合は、javascriptが必要になるかもしれません。その方法については、コメントや問い合わせなどでリクエストがあったら記事にしようかなと思っています。スポンサーリンクスポンサーリンクまとめ今回紹介した方法を使えば、はてなブログの読者になるボタンを画像にすることができました。デフォルトの読者になるボタンだけではなく自作のイラストを使うことができるので、より目立つ読者になるボタンをカスタマイズできるかと思います。【はてなブログ】お問い合わせフォームを設置する方法!Googleフォームを活用すれば超簡単!2017.11.10今回は、はてなブログに「お問い合わせフォーム」を設置する方法を紹介します。お問い合わせフォームには「Googleフォーム」を使用。フォームを設置したおかげでレビュー依頼などをいただける機会が増えたので、まだ設置していない人は参考にしてみてください。...ぜひ試してみてください。【はてなブログ】cssの見出しカスタマイズ例55種+α!シンプルデザイン編2017年7月13日デベロッパーツールの背景を黒にして親しみやすいデザインに変更しよう【css】アニメーションの再生を終了時で固定する方法!記事を探すプロフィールクリアメモリクリアメモリは、プログラミングに関する記事やガジェットのレビュー、便利なアプリケーションの紹介など、幅広く雑多に記録するブログです。Wizardがすごい!クリアメモリ。