以前からこのブログでは記事下に「この記事が気に入ったらいいね」のいいねボタンを読者登録などのフォローボタンにしたものを使っていました。これは記事の画像に「その記事の最初の画像」を使っていたのですが、これを「アイキャッチとして設定された画像」に変更しました。 追記（2018.03.17） Feedlyの部分のコードを少し修正しました。ついでにボタン部分のテキストに下線がつかないようにしました。（.iine-icon a{text-decoration:none;}のところ。） 以前のものと新しいものの比較 これが以前の「この記事が気に入ったらフォロー」です。 こちらが新しい「この記事が気に入ったらフォロー」です。 …ぶっちゃけ、見た目はほとんど変わっていません。ただし、表示している画像は「記事の最初の画像」から「アイキャッチとして設定された画像」に変わっています。私の記事はいつもアイキャッチ

ドロワーメニューまたはスライドメニュー 呼び方は様々ありますが、スマホのアプリ等でもお馴染みの、 横からスライドインしてくるメニューです。 レスポンシブでもよく使われます。 JSのプラグインだと、mmenuやDrawerなどがありますが、 現在ではCSS3もほとんどのブラウザで利用可能になりましたので、 簡単なものであればCSSでも実装可能です。 ※IEでは9以降で動作します。 動作デモ まずはデモを用意しました。実際に動かしてみてください。 See the Pen Gjygdy by leo (@leo-trym) on CodePen. ソース HTML <label class="toggle" for="open"><i class="fa fa-bars" aria-hidden="true"></i> </label> <input id="open" type="checkb

HTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。 IE7+からサポートされており、「position: sticky;」の代替になる便利なスクリプトです。 Fixed Sticky- GitHub Fixed Stickyの特徴 Fixed Stickyのデモ Fixed Stickyの使い方 Fixed Stickyの特徴 Fixed Stickyで貼り付ける要素の位置は、親要素に依存します。 つまり、スクロールしてぴたっと貼り付く位置は、常に親要素となるコンテナ内です。 基本的な動作を見てみましょう。 まずは、要素に「top: 20px;」を指定してみます。

ホームページで必ずと言っていいほど必要になる要素といえば「見出し」です。しかし、ホームページに合わせて1からデザインするのは作業工数がかかる上に、毎回同様のデザインになってしまいがちです。また、CSSについてあまり知らない人にとっては、デザインしたくても自ら実装するのはハードルが高いと言えるでしょう。 そこで今回は、見出しをオシャレに装飾できるCSSのコードを紹介している記事をピックアップしました。 オシャレな装飾ができるCSSの見出しまとめ 1. 見出しをお洒落に装飾するCSSを紹介 http://ideahacker.net/2015/05/26/10208/ 11とおりのオシャレな見出しデザインを紹介している記事です。左と下にボーダーがあるもの、1文字目だけが大きいもの、といった定番デザインの見出しが作れるコードを掲載しています。 2. CSSのコピペだけ！オシャレな見出しのデザイン