便利なアプリの紹介など幅広く雑多に記録するブログ。5分49秒clrmemory今回は、はてなブログのアンダーライン(下線)を「二重線」にするCSSを紹介します。先日、アンダーラインを波線にするCSSを紹介したのですが、似たような方法で二重線にすることもできるので、サイトのデザインや好みに合わせて選択してみてください。まとめはじめに今回紹介する内容は「はてなブログのアンダーラインを二重線にするCSS」です。先日紹介した「はてなブログのアンダーラインを波線にするCSS」は、以下の記事をチェックしてみてください。基本的なコードは、今回も一緒です。下線の見た目を「波線」に変更する方法を紹介します。目立つテキストを実装できるようになるのでチェックしてみてください。過去に設定した「下線(uタグ)」にも適応できます。...ではまず、はてなブログでCSSを追加する方法からおさらいしておきましょう。CSSを追加するはてなブログの場合、CSSを追加する場所は以下のようになります。デザインCSSあとで紹介するコードを「デザインCSS」に追加することで、アンダーラインの見た目をカスタマイズすることができます。タイトル下などに追加してみてください。アンダーラインを設定するはてなブログでアンダーラインを設定する場合「uタグ」を使います。アンダーラインを引きたいテキストを選択した状態で、記事編集画面にある「U」ボタンをクリックすると以下のような表示になったと思います。<u>選択したテキスト</u>画像は「Markdownモード」で確認しましたが、基本的な設定方法は「見たままモード」でも同じです。実際のCSSをチェックしていきましょう。text-decorationを使うはてなブログのアンダーラインを調整する場合、使用するCSSは「text-decoration」です。これは、波線にカスタマイズした時と同じですね。underline」までは前回と同じ。変わったのは「double」の部分ですね。このようにすることで、アンダーラインを二重線にすることができました。実際に表示してみると「こんな感じのアンダーライン」になります。アンダーラインの色だけを変更したい場合は、以下のCSSを参考にして記述してください。green;}「double」の後ろに「カラーコード」を指定することで、アンダーラインのカラーを変更することができました。実際の動作は「こんな感じのアンダーライン」になります。分割して記述するこれに関しては、波線の指定方法と同じ。「ライン」「スタイル」「カラー」の3つを個別にカスタマイズすることもできるんです。うまく活用することで、複数の要素に対して「別々のCSS」を設定したいときに便利です。cyan;}このように記述した場合、aというクラスを持つテキストは「黄色の二重線」になり、bというクラスを持つテキストは「シアン色の二重線」になるということ。テキストを書く量が減りますし、後から見やすくなりますよね。うまく使いこなしてみてください。スポンサーリンクスポンサーリンクまとめ今回紹介した方法を使うことで、はてなブログのアンダーラインを「二重線」にすることができました。アンダーラインを目立たせることができるので、前回の「波線」と合わせてチェックしてみてください。【はてなブログ】ドロップダウンメニューをタブレットに対応させる!クリックで表示・非表示!2018.3.6先日「はてなブログのグローバルヘッダーをドロップダウンにする方法」を紹介しました。その記事の中で、マウスカーソルが乗った時の動作を実装したのですが、これだと「タブレット」によるアクセスに対応できていませんでした。そこで今回は、ドロップダウンをタップした時にも動作させる方法を紹介します。Analytics】レバテックキャリアに記事が掲載されました!【はてなブログ】アンダーラインを点線にするtext-decorationの使い方!コピペOK!記事を探すプロフィールクリアメモリクリアメモリは、プログラミングに関する記事やガジェットのレビュー、便利なアプリケーションの紹介など、幅広く雑多に記録するブログです。Wizardがすごい!クリアメモリ。