gradationブログの記事一覧でタイトルと抜粋文を表示することはよくあります。」を付加するなどということをします。それを徐々に消えるような表示にするTipsの紹介です。シンプルなHTMLに適用するサンプルコードと、当ブログで使っているWordPressテーマのLuxeritasの記事一覧に適用する場合のサンプルコードも紹介します。下図は記事一覧を2列タイル表示にした場合の表示サンプルです。制限文字数を長いタイトルに合わせると短いタイトルの時の下部の空白が気になります。短いタイトルに合わせて文字数制限を大きめにすると長いタイトルの時、はみ出てしまいます。HTMLとCSSは下記になります。<p>ブログの記事一覧でタイトルと抜粋文を表示することはよくあります。<p>ブログの記事一覧でタイトルと抜粋文を表示することはよくあります。はみ出した部分は非表示にしてます。指定文字数に制限するのはPHPかJavaScriptでブログラムすることになりますが、Luxeritasは設定で可能です。グラデーションで徐々に消えるサンプル記事一覧を2列タイル表示にした場合の表示サンプルです。抜粋は文字数制限をしないか、大きめにしておきます。タイルの下部で徐々に消えていきますので、空白は気になりません。HTMLとCSSは下記になります。class="excerpt">ブログの記事一覧でタイトルと抜粋文を表示することはよくあります。」を付加するなどということをします。それを徐々に消えるような表示にするTipsの紹介です。シンプルなHTMLに適用するサンプルコードと、当ブログで使っているWordPressテーマのLuxeritasの記事一覧に適すようする場合のサンプルコードも紹介します。位置を指定できるようにします。背景をCSSグラデーションで透明度を透明から徐々に不透明になるように設定します。これを親要素(tile)の底辺に配置することで、徐々にテキストが消えていくように見えます。.tile:beforeの高さで消え始めの位置が決まります。透明度0ということなので白色の不透明ということになります。グラテーションの開始位置を表します。上記の設定は、親要素の底辺から150px上から徐々に消え始めて、底辺から20pxの位置(120px-100px)で完全に消えるという設定になります。底辺から20pxは親要素のpadding量にあわせました。考え方は親要素の疑似要素に透明から不透明に変化するグラデーションを設定して底辺に配置するということなので、これが理解できていれば、実装は簡単だと思います。下図はLuxeritasの設定で抜粋の文字数を45に設定しています。下図は抜粋の文字数を200に設定して徐々に消える設定にしたものです。記事一覧は下記の記事で設定したレイアウトを基準とします。...https://hatena19.com/customize-article-list-page/上記と同じでなくてもグリッドレイアウトでタイル型を選択していれば使えます。文字数を大きめに設定します。空欄にして非表示にしておきます。サムネイルかタイトルをクリックすれば記事に移動しますので必要ないと思います。下記のCSSを挿入します。.toc:not(#bottom-area)となります。除く)という意味になります。セレクターの指定は慎重に検討する必要があります。適当にすると他の部分に影響を与えてしまいますので。relative;は設定してませんがテーマのCSSに既に設定してあるようなので追加CSSでは必要ないです。まとめ記事一覧のタイル表示などで高さに制限がある場合、概要文を文字数を制限して表示する代わりに、徐々に消える表示にする方法を紹介しました。最初のシンプルなHTMLに適用するサンプルで設定法や仕組みが理解できれば、WordPressのテーマやホームページに適用することができると思います。タイル型の表示にしている場合に適用する場合のCSSを紹介しました。hight)を調節すれば実装できます。...CSSで蛍光マーカーいろいろ、クレヨン風などテキストに蛍光マーカー風の下線を付ける方法はあちこちで紹介されています。コメントをキャンセルメールアドレスが公開されることはありません。