こんにちはクリアメモリです！ 今回は、はてなブログで「トップに自動スクロールするボタン」を設置する方法について紹介します。 このボタンをクリックすることで、ページの一番上までスクロールさせることができます。 記事のボリュームが大きくてスクロー…

こんにちはクリアメモリです！ 今回は、「はてなブログで中央寄せの記事を書く方法」について紹介します。 CSSを使わずに実装もできるので簡単です。 また、「記事ごとに中央寄せ」を設定したい時にも使えるのでチェックしてみてください。

こんにちはクリアメモリです！ 今回は、CSSを使って「特定のsrcを持つ画像」だけ見た目を調整する方法を紹介します。 特定のドメインだけ見た目をカスタマイズしたり、任意の文字列が入っていれば調整できました。 WordPressやはてなブログのカスタマイズで…

こんにちはクリアメモリです！ 今回は「はてなブログでテキストにグラデーションをかける方法」を紹介します。 ほぼコピペOKでテキストの見た目をカスタマイズ可能です。 また、今回紹介するCSSを応用すれば、はてなブログ以外でも利用できるのでチェックし…

こんにちはクリアメモリです！ 今回は、はてなブログで設置したテキストを縁取りする方法について紹介します。 1行の簡単なCSSを追加するだけで、簡単に縁取られたテキストにすることができます。 白背景の中で、明るい色のテキストを目立たせたい時に活用し…

こんにちはクリアメモリです！ 今回は、以前紹介した「はてなブログの記事下にフォローボックスを設置する方法」のス マホ版について紹介します。 基本的な設置方法はPC版とほぼ同じ。 指定するCSSを変更しただけの簡単なカスタマイズなので、ぜひチェックし…

こんにちはクリアメモリです！ 今回は「はてなブログ」のマークダウンモードで記述した「引用」を、部分的に右寄せで表示させる方法を紹介します。 ”〇〇より引用”みたいな行だけを右寄せにすることで、引用元がわかりやすくなりますし、設定方法も簡単なの…

こんにちはクリアメモリです！ 今回は「はてなブログのアンダーラインをカスタマイズする方法」をまとめてみました。 過去に紹介してきたアンダーラインの設定方法とコードの例を合わせて紹介します。 アンダーラインの見た目は、CSSだけで設定できて超簡単…

こんにちはクリアメモリです！ 今回は、はてなブログの記事下に「フォローボタン」を追加する方法を紹介します。 その記事のサムネイルと一緒に「この記事が気に入ったら〜」を表示することで、フォローしてくれる可能性が増えたり、読者を増やすことができ…

こんにちはクリアメモリです！ 今回は、はてなブログのアンダーラインを「点線」にするCSSを紹介します。 これまで紹介してきた「波線」や「二重線」と同じように「text-decoration」を調整することで実装できるので、ぜひ試してみてください。 今回のCSSも…

こんにちはクリアメモリです！ 今回は、はてなブログのアンダーライン（下線）を「二重線」にするCSSを紹介します。 先日、アンダーラインを波線にするCSSを紹介したのですが、似たような方法で二重線にすることもできるので、サイトのデザインや好みに合わ…

こんにちはクリアメモリです！ 今回は、はてなブログで使用した「アンダーライン（uタグ）」で、 下線の見た目を「波線」に変更する方法を紹介します。 波線を使うことで、 より目立つテキストを実装できるようになるのでチェックしてみてください。 もちろ…

こんにちはクリアメモリです！ 今回は「はてなブログで設置した画像を縁取りする方法」を紹介します。 コピペOKの超簡単なCSSを設定するだけで実現できるので、ぜひ試してみてください。 今回の方法では「全ての画像を縁取りする方法」と「特定の画像だけを…

こんにちはクリアメモリです！ 今回は「はてなブログのグローバルヘッダー（ヘッダーメニュー）をドロップダウン形式で表示させる方法」を紹介します。 ドロップダウンで表示させることで、カテゴリーの数が多い場合でもスッキリした見た目になるので試して…

こんにちはクリアメモリです！ 今回は、はてなブログのプロフィール画像を動画にカスタマイズする方法を紹介します。 プロフィール画像を動画にすることで、より目立たせることができますし、GIF画像を使うだけで簡単に実行できるのでぜひ試してみてください…

こんにちはクリアメモリです！ 今回は「はてなブログコメント欄」下に、”コメント時の注意点”のようなリンクを設置する方法を紹介します。 もらったコメントへの返信に関する説明や、コメント方法に対しての注意点をあらかじめ知らせておくことで、よりスム…

こんにちはクリアメモリです！ 今回は、はてなブログで「特定のページごとに適用されるCSS」のまとめです。 CSSの記述方法によって、適用される範囲が決まるので覚えてみてください。

こんにちはクリアメモリです！ 先日、はてなブログのテキストを蛍光ペン風にカスタマイズする方法を紹介しました。 その記事では、イエロー系の蛍光ペンを例にとったのですが、今回はそれ以外の色を設定する方法を紹介します。

こんにちはクリアメモリです。 今回は、はてなブログで「選択範囲に蛍光ペンを使ったように目立たせる」CSSの使い方を紹介します。 目立たせたいテキストをわかりやすくできますし、記事にメリハリをつけられるようになるので、ぜひカスタマイズしてみてくだ…

こんにちはクリアメモリです！ 先日・その前と続き、cssを使って強調（ハイライト）の色を設定してきました。同じ方法を使って、逆にハイライトさせないようにすることもできるので紹介します。

こんにちはクリアメモリです！ 先日、cssで強調（ハイライト）の色を変更する方法を公開しました。その記事の中で、テキストだけを強調表示させることができると書きました。 そこで今回は、cssでテキストだけを強調（ハイライト）して色を変える方法を紹介…

こんにちはクリアメモリです！ サイトないのテキストをドラッグすると部分的に色が変わりますよね。これを強調やハイライトなどと呼ぶのですが、今回はcssでこの色を制御する方法を紹介します。 PC側で設定されていても、自分のサイト内でだけは任意の色に変…

こんにちはクリアメモリです！ cssでデザインをカスタマイズしていて、aタグで設置したリンクのクリックできる範囲に困ったことはありませんか？ちょっとしたコードを使えば、ボタン全体をリンクにすることができるので紹介します。

こんにちはクリアメモリです！ 今回は、cssで使われる単位の「px」「em」「%」はどのような違いがあるのかについて紹介します。これらはそれぞれ、使われるタイミングが変わってくるので参考にして見てください。

こんにちはクリアメモリです！ cssでレイアウトをカスタマイズしている時、横幅を「100％から50pxだけ少ない値にしたい」というような時はありませんか？そのような場合は、四則演算を使う「calc」というコードで実装できるので紹介します。

こんにちはクリアメモリです！ 今回は、はてなブログで書いた記事の中に「会話形式」の吹き出しを導入する方法を紹介します。 cssで吹き出しのような見た目に調整すれば、読者の方にも読みやすくなるのでぜひ試してみてください。

こんにちはクリアメモリです！ 今回は、はてなブログで表示した画像を中央寄せにして、真ん中に表示させる方法を紹介します。画像の表示方法をちょっと変えるだけで、より目立たせたり見やすくなったりするので使いこなしてみてください。

こんにちはクリアメモリです！ 今回は、はてなブログのサイドバーに追従する「メモ帳」を表示させてみました。記事を読みながらメモを取れて、最終的にまとめてコピーもできるので試してみてください。

こんにちはクリアメモリです！ cssでアニメーションを実装すると、アニメーションが完了した時に最初へ戻ってしまいますよね。もしそのような場合に、アニメーションを終了地点で止めておくことができるので紹介します。

こんにちはクリアメモリです！ 今回は、はてなブログの「読者になるボタン」を画像にして、より目立つようなデザインに変更する方法を紹介します。画像はなんでも良いので、自分のサイトアイコンや好きな画像を使って実装してみてください。