Luxeritas

Luxeritasは標準でシンタックスハイライターが実装されているので、ソースコードを簡単にハイライト表示させることができます。 長いソースコードを掲載する場合、記事がソースコードで占有されてしまうので、 初期状態では冒頭部分を表示して、閲覧者が必要に応じて開閉できるといいですね。 Luxeritasでソースコードをハイライト表示させるには Luxeritas 3.6.2 のバージョンから、ブロッ ...

WordPress

長い文章の冒頭部分をグラデーション表示させておいてボタンをクリックすると開き、またボタンをクリックすると閉じるというものです。開閉動作はアニメーションにしました。 概要 本文中にユーザーが必要に応じて開閉できるボックスを設置したくて作成してみました。例えば、長い補足説明とか解説、ソースコードなどを対象にするといいでしょう。 CSSだけで実現する方法もありますが、HTMLが複雑になる(input要素 ...

WordPress

テキストに蛍光マーカー風の下線を付ける方法はあちこちで紹介されています。また、WordPressのテーマには最初から実装されているものもあります。当ブログで使用しているLuxeritasにも実装されているのですがちょっと配色等がちょっと好みと違うということで、クレヨン風なのものなどいろいろ作成してみました。 よくある蛍光マーカー 蛍光ペンとかマーカーで検索すると背景色にCSSグラデーションを使った ...

WordPress

Luxeritasのカスタマイズにはまっているhatenaです。今回は見出し(h要素)をカスタマイズでどうせなら連番を付けようといろいろ調べました。 シンプルなHTMLで見出しに連番を付加する方法を紹介し、さらに当ブログのLuxeritasに実装したものも紹介します。 シンプルなHTMLへの実装例 CSSカウンターを使います。詳細は下記のページに解説してあります。 CSS カウンターの使用 - 開 ...

WordPress

ブログの記事一覧でタイトルと抜粋文を表示することはよくあります。抜粋文が長いときは文字数制限して「 ... 」を付加するなどということをします。それを徐々に消えるような表示にするTipsの紹介です。シンプルなHTMLに適用するサンプルコードと、当ブログで使っているWordPressテーマのLuxeritasの記事一覧に適用する場合のサンプルコードも紹介します。 シンプルなHTMLに適用するサンプル ...

Luxeritas

WordPressテーマによっては記事冒頭にアイキャッチ画像を自動で表示する機能が実装されてますが(Cocoonとか)、Luxeritasには現時点では機能は実装されてません。そこで、 記事冒頭にアイキャッチ画像を自動で表示させて、さらにそこにキャプションを重ねて表示させるようにカスタマイズしてみました。この記事の上の画像のようになります。 記事冒頭にアイキャッチ画像とキャプションを表示させる ア ...