CSS

CSS

スマートフォン向けのサイトメニューの作成

はじめに このサイトでは、はてなブログを使用していますが、スマホでサイトを表示させると、以下の左の図のようにメニュー内の文字が収まらずにはみ出してしまいます。 一方、今回改善した結果が右の図のようになります。     右の改善した方の...
CSS

サイト上で対象物を半透明に表示する方法

はじめに 今回は、はてなブログにおいて「サイト上で対象物を半透明に表示する方法」を試してみました。 はてなブログを使用しての説明となりますので、何卒ご了承ください。 はてなブログを使用していない方でも、CSSコードを記述する場所に注意す...
CSS

マウスオーバーに合わせて拡大、縮小させる方法

はじめに 私のサイトにも色々な動きを取り入れてみたいと思い、今回は「マウスオーバーに合わせて拡大、縮小させる」という動きを実装してみました。  参考サイト 今回は以下のサイト様を参考にさせていただきました。 要素を拡大・縮小させるCSSア...
CSS

グローバルメニューのカスタマイズへの第一歩

はじめに 今回はサイト上で新たにグローバルメニューを作ろうと思いました。 右も左も分からない状態から、自分なりに調べてなんとか作成することができました。  参考サイト ・【はてなブログカスタマイズ】ドロップダウンメニューを付けてみた。 -...
CSS

ページ内リンク先へ滑らかに動かす方法

はじめに 今回は、ページないリンクをクリックした時に滑らかにスクロールするように設定してみました。 これを機に、このサイトでも目次の各項目をクリックした際も滑らかにスクロールするように設定してありますので、試しにクリックしてみてください。...
CSS

CSSでリストの余白を作る方法

はじめに 記事を書いている際に、上のように目次という章を作成して、サイト内リンクを設定する場合があると思います。 これは前回の記事でも少し説明したように、HTMLコードのみで作成する事はできます。 私はこれまで、目次を作成する際には、...
CSS

パンくずリストのデザイン変更

はじめに はてなブログにおいて、パンくずリストを少しデザインを変更しようとふと思いました。 はてなブログのデフォルトのデザインでは少し物足りない感じが否めません。 今回は実際に調べて実践し、その結果を紹介して見たいと思います。  パン...