【WordPress】見出しから目次を自動生成。プラグイン不要！コピペでOK
ブログ記事で目次を自動的に見出しから生成する方法を紹介します。WordPressプラグインは使わないで、自力でJavaScriptで設置してみました。 ゆめぴょんです。こんちはっ(^^)/ 私のブログでは文字数の多い記事もあるため、目次を設置したいと思ってました。一時期WordPressプラグインを用いて設置していましたが、意外と簡単に自前設置できるので制作してみました。 目次は上に表示されていると思います。クリックするとゆっくりとその見出しまでスクロールしていきます。読者にも便利なナビゲーションになります。 今回は「WordPressプラグインはずし特集」の第8弾です。今までの特集記事は全て下のリンクにまとめています。 今回、不要になるWordPressプラグイン これまた昨年くらいから、いろんなブログで紹介されている有名プラグイン「Table of Contents Plus」です。
[CSS]日本語にもマッチする、見出しの文字をかっこよくするスタイルシートのまとめ | コリス
This is a Headline ブラウザはChrome, SafariのWebkit系でご覧ください。 各スタイルとともに、スタイルシートを紹介します。 とその前に、HTMLはごくシンプルです。 <h1 class="vintage">美しい日本語</h1> ヴィンテージ風にスタイルします。 .vintage{ background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat; text-shadow: 5px -5px black, 4px -4px white; font-weight: bold; -webkit
jQueryでヘッダーに現在の見出し要素を表示する「DisplayHeadingプラグイン」
jQueryでヘッダー部分に現在の見出し要素を表示する「DisplayHeadingプラグイン」を公開します。 このプラグインは以下のページの振舞いに触発されて作りました。 Phusion Passenger users guide, Apache version １．サンプル サンプルを用意しました。 サンプル スクロールして見出し要素が通過するたびにページ上部のヘッダー部分に見出しのタイトルを表示します。 逆スクロールしても、同じように見出しのタイトルを遡って表示します。 ２．プラグインのダウンロード 下記のリンクからプラグインをダウンロードして、ファイル名を「jquery.displayheading.js」にリネームしてください。 jquery.displayheading_0.0.1.js 以下、設定方法です。 ３．HTML 見出しの内容を表示させたいHTMLを、body終了タグ
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
見出しデザインに迷ったら！吹き出しやリボンも一瞬で作れるCSS見出しジェネレーター。
見出しやパラグラフのフォントサイズや行間をemベースで簡単に設計できるオンラインツール -Em Baseline Generator
