クリアメモリ

プログラミングやモーショングラフィックス、便利なアプリケーションなど雑多に記録するブログ

css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

デベロッパーツールで0.1とか100ずつ値を変更するコマンドが超便利だった!

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

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

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

【はてなブログ】cssの見出しカスタマイズ例55種+α!上級デザイン編

前回、はてなブログの見出しカスタマイズ例を紹介しました。そこで紹介したのはシンプルなデザインだったのですが、今回はちょっと手の込んだカスタマイズをする「ちょっと上級編」です。 基本的にコピペでも使えるので試してみてください。

【はてなブログ】cssの見出しカスタマイズ例55種+α!シンプルデザイン編

前回、はてなブログのcssを使って見出しのデザインをカスタマイズする準備が整いました。そこで今回は実際に見出しのデザインcssをカスタマイズしていきましょう。 今回紹介するのは「シンプル」な見出しデザインです。

【はてなブログ】cssの見出しカスタマイズ例55種+α!準備編

こんにちは! 今回から数回に分けて「はてなブログの見出しデザインのカスタマイズ」について紹介していきます。色や細かい調整はあるものの、基本的にコピペで実装できるので試してみてください。 まずは、見出しデザインのカスタマイズをする前に幾つかの…

display:noneってSEO的に使わない方が良いの?対策は?

こんにちは! cssのカスタマイズを行っていると、頻繁に使いたくなるのが「要素の非表示」ですよね。こういった時にdisplay:noneを使うことになるのですが、SEO対策としてはあまり良くないようなので調べてみました。

【はてなブログ】記事のカテゴリーでn個目以降を非表示にする方法!

先日、サイドバーのカテゴリーに表示数制限を追加する方法という記事を公開しました。 その記事では、デザインから追加したサイドバーのカテゴリーでのみ動作するものだったので、今回は記事内に表示されるカテゴリーの数を調整する方法を紹介します。

【はてなブログ】サイドバーのカテゴリーに表示数制限を追加する方法!

こんにちは! 今回は、はてなブログでサイドバーに追加した「カテゴリー」ユニットで、表示されるカテゴリーの数に制限をつけてみようと思います。自分で決めた数だけカテゴリーを表示させることで、アクセスしてもらいたいカテゴリーを限定できますし、見栄…

はてなブログにPush7を導入してはてなユーザー以外の読者を集めよう!

はてなブログには、読者になるという機能がありますよね。これによって、読者登録してくれたユーザーの方に記事が公開された通知を送ることができます。 ですが、はてなブログの読者登録は、はてなIDを持っている方しか利用できません。そこで今回は「Push7…

【はてなブログ】あのサイトのテーマかっこいい!って時に調べる方法

はてなブログで書かれたサイトを見ていて、この人のカスタマイズいいなー テーマ何使ってるんだろう?ってなることがあるかと思います。 実ははてなブログは、アクセスしたサイトのテーマを簡単に確認することができるんです。そこで今回は、自分以外のサイ…

【はてなブログ】特定の記事だけnoindexを追加する!クリックだけで超簡単に設定できるようにしてみた

今回は、はてなブログの記事を検索結果から除外する【noindex】を、特定の記事だけ追加する方法を紹介します。 他のサイトを調べたところ、記事の最初にコードを記述するというような方法の紹介が結構あったのですがこれは微妙です。編集すると元に戻ってし…

【はてなブログ】シェアボタンをスマホページの下に追従させるカスタマイズ

先日、はてなブログにシェアボタンを設置する方法を紹介しました。 その中では、シェアボタンを記事上や記事下に設置したのですが、今回はスマートフォンでアクセスした場合のみ、シェアボタンを画面の下に追従させる方法を紹介します。

【はてなブログ】cssをトップページやカテゴリページなど特定のページでだけ処理する

はてなブログでサイトをカスタマイズしていると、トップページでだけ実行したいcssやカテゴリページだけで実行するcssを作成したい時があります。 そういった時に、ちょっとした記述を追加するだけで、それぞれの処理を使い分けることができるので紹介します…

【はてなブログ】スマホ版のデザインCSSをカスタマイズする方法

はてなブログでサイトのデザインをカスタマイズする場合、【デザインCSS】という欄にcssを記述していくと思いますが、スマホ版だとこの項目が存在しませんでした。 そこで、今回はスマホ版のデザインCSSをカスタマイズする方法を紹介します。

新着記事