タグ: HTML
Hexoにテキストリンクのシェアボタンを設置する
Hexoのブログの記事下にシェアボタンを設置する方法。現在このブログには、思想信条上の理由でシェアボタンは設置していないのですが…。 昔このブログに使って...
Hexoの月別アーカイブをプルダウン式(select要素)にする
Hexoでプルダウン式の月別アーカイブをサイドバーに置く方法。 Hexoでサイドバーに月別アーカイブを設置する際は、あらかじめ用意されているHelperを...
Hexoのmarkdon-itが脚注で出力するHTMLを整える
Hexoのプラグイン、hexo-renderer-markdown-itでMarkdownをレンダリングした際、脚注の部分に下のようなHTMLがはき出され...
Hexoでパンくずリストの構造化マークアップをする
(2020-07-30) コードを書き直しました。こちらをご覧ください。 前回はページにパンくずリストを表示させましたが、今回は構造化マークアップ...
Hexoでプラグインを使わずパンくずリストを表示する
(2020-07-30) コードを書き直しました。こちらをご覧ください。 このブログはHexoで構築しており、全ページにパンくずリストを設置してい...
Google Adsenseが読み込まれる前にローディングアニメーションを表示する
Google Adsenseって微妙に読み込まれるのが遅いですよね。空白の部分にいきなり広告が現れるとなんかびっくりするというか… ということで、広告が表...
スマホ表示時のGoogle Adsenseで左右に余白(padding)を適用する
Google Adsenseでレスポンシブタイプの広告ユニットは、デフォルトではスマホ版で表示した際に、横幅が100%になります。 だったら<div...
クリックで開閉するドロップダウンメニューをCSSとJavaScriptで作ってみよう
目に見えるところに貼るほど重要ではないけど、開閉メニューでリンクを格納しておきたいというケースがあるかと思います。 今回はボタンクリックで開閉するシンプル...
aタグにclassを1つ追加するだけでリンクをブログカード風に変身させる
最近はブログにリンクを貼る手段として、テキストリンク以外にも、カード型のリンクを埋め込むことが増えてきました。 よく見るブログカードは、サムネイルや投稿日...
2行以上の長いタイトルでも１行に収まるように文字サイズをJavaScriptで調整する
記事タイトルが長くなって折り返され、２行になってしまっている…だけど、文字サイズを小さくしてでも１行にきっちり収めたい…！！Webサイトをデザインしている...
Hexoのカテゴリーリストにcurrentクラスを付けて現在地をハイライト表示する
HexoではHelperという機能が備わっており、よく使う機能は簡単に出力できるようになっています。その機能を利用すると下のように記述することで、簡単にカ...
Hexoで画像にloading="lazy"を自動で追加して画像を遅延読み込みする
Chromeでいよいよ画像の遅延読み込みがネイティブでサポートされました。 imgタグにloading="lazy"属性を指定するだけ...
クリックで画像を拡大するプラグイン(Lightbox)をjQueryなしで自作してみる
Lightboxという単語は死語感が漂っており、今どき需要もなさそうですが…。 というのはさておき、このブログで画像拡大プラグインを導入するにあたり、Ph...
contenteditable属性で入力したCSSがページにリアルタイムで反映されるフォームをつくる
.stylebox{display: block;margin: 20px 0;height:400px;overflow:auto;padding: 1...
CSSだけで文章を折りたたむ（続きを読む）その1
今回はHTMLとCSSのみでコンテンツの開閉、いわゆる「続きを読む」を再現してみます。 CSSだけでクリックイベントを扱うには、主にtargetを使う方法...
Hexoでheadに挿入される<meta name="generator">タグを消す
Hexoではデフォルトで、<head>間に下のようなmetaタグが自動で挿入されます。 1<meta name="genera...
CSSとChrome拡張機能でGoogle Adsenseの自クリックを防止する【全サイト対応】
Google Adsenseは自分で運営しているサイトに貼り付けた広告をクリックすることは規約で禁止しており、クリックするとペナルティを受けてしまいます。...
CSSのみでクリックで画像を拡大する（Lightboxもどき）
画像をクリックするとポップアップで拡大表示するプラグインを、HTMLとCSSのみで再現してみます。いわゆるLightboxやfancyboxのようなもの...
HTMLだけでコンテンツを開閉できるdetailsタグを試してみる
<details>タグはHTML5.1で追加されたタグで、コンテンツを開閉できるウィジェットを生成します。 概要 1234<detail...
【Swiper.js】縦横比を保ったまま横幅いっぱいのスライダーをつくる
Swiper.jsという、jQueryなしで動く高機能なライブラリがあります。 このライブラリで縦横比を保ったままウインドウ幅いっぱい + レシスポンシブ...