クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

css

【はてなブログ】テキストにグラデーションをかけるCSS!

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

【はてなブログ】テキストを縁取りするCSS!より目立たせたい時や白文字の時にオススメ!

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

【はてなブログ】記事下にサムネ付きフォローボタン(スマホ版)を設置する方法!ほぼコピペOK!

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

【はてなブログ】引用元を右寄せにする方法!引用の使い方も合わせて紹介します

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

【はてなブログ】アンダーラインの見た目を調整する方法まとめ!コピペOKで波線や点線を設定可能!

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

【はてなブログ】記事下にサムネ付きのフォローボタン(この記事が気に入ったら〜)を設置する方法!

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

【はてなブログ】アンダーラインを点線にするtext-decorationの使い方!コピペOK!

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

【はてなブログ】アンダーラインを二重線にするtext-decorationの使い方!コピペOK!

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

【はてなブログ】CSSでアンダーライン(下線)を波線にするtext-decorationの使い方!コピペOK!

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

【はてなブログ】画像を縁取りしてハッキリさせる方法!特定の画像だけに設定も可能!コピペOK

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

【はてなブログ】ドロップダウンのグローバルヘッダーを設置する方法!カテゴリーが多い時にオススメ!

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

【はてなブログ】プロフィール画像を動画にする方法!GIF画像を使えば超簡単でした!

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

【はてなブログ】コメント時の注意点を記事下に追加する方法!事前に知らせておきたいときにオススメ!

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

【はてなブログ】特定のページだけ動作するCSSまとめ

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

【はてなブログ】蛍光ペン風カスタマイズに使えそうなカラーまとめ

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

【はてなブログ】CSSで蛍光ペンを使ったようにテキストを目立たせる方法!

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

【css】テキストをハイライト(強調)させない時にもselectionが便利!

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

【css】テキストだけを強調(ハイライト)して色を変更するselectionの使い方!

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

【css】強調(ハイライト)の色を変更して好きな色を設定する方法!

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

【css】ボックス全体がリンクのボタンを使えばページ移動しやすくなって回遊率がアップするかも!

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

【css】emとかpxとか%ってどんな違いがあるの?使い分けできるようにしよう

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

【css】四則演算(足し算)ができるcalcを使えばcssで計算式が使えちゃう!

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

【はてなブログ】会話形式の吹き出しを記事内で使う!ちょっとした工夫で記事を見やすくカスタマイズ!!

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

【はてなブログ】画像を中央寄せにする方法!見た目とバランスが良くなるかも!?

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

【はてなブログ】サイドバーに追従するメモ帳を作ってみた!

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

【css】アニメーションの再生を終了時で固定する方法!

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

【はてなブログ】読者になるボタンを画像にしてめっちゃ目立たせてみた!

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

デベロッパーツールの背景を黒にして親しみやすいデザインに変更しよう

こんにちはクリアメモリです! 私は普段、SublimeTextという無料のエディタを使ってプログラミングをしています。そのエディタは、背景を黒に変更しているため、デベロッパーツールの背景が白くて違和感がありました。 そこで今回は、デベロッパーツールの背…

デベロッパーツールで100ずつ調整するコマンドが超便利だった!

こんにちはクリアメモリです! はてなブログやWordPressなんかでサイトのカスタマイズを行っていると、デベロッパーツールで値を確認したり調整したりしますよね。そのような場合に値を0.1ずつや100ずつ、10ずつ調整する方法があるので紹介します。

display:noneとvisibility:hiddenの違いって何?実際に比べてみた

こんにちはクリアメモリです! cssでカスタマイズをしていて要素を隠したいなんて時がありますよね。 そのような時に、よく「display:none;」や「visibility:hidden;」を使うことになると思うのですが、これらはどちらも要素を隠すためのcssなんです。

新着記事