うしごや ~さとり男子の考察牧場~

現実世界でのストレスを糧に、好き放題白黒ハッキリした映画レビューをしていきます(笑)感想&妄想寄りの考察(゜-゜)?他雑記!

うしごや ~さとり男子の考察牧場~

ピックアップ

【はてなブログ】カスタマイズ!簡単コピペで記事内の箇条書きをデコってみた!!

箇条書きカスタマイズ

こんばんは、うしぞうです!今回は、はてなブログにおいて記事内の箇条書きを縁取ったり、背景を付けたりしちゃうカスタマイズです

 

合わせて読みたい

 

 

はてなブログの箇条書きとは?

 

まずはてなブログの記事内の箇条書きってなんぞやと言ったらコレです。

 

編集画面

 

初心者に優しいはてなブログでは、記事の編集画面にあらかじめ、ある程度の文字装飾や配置カスタマイズができるようになってますよね。

 

の!箇条書きボタン!!皆さんは使われていますか?押しただけで勝手に箇条書きになるのは便利だけど、何もしてないと・・・ちょっと質素ですよね(゜-゜)

 

箇条書きデフォ

 

先に結果も載せちゃったけど、コレをツイート添付画像のようにデコってみました

デザインを適用するには邪魔者が2人・・・

 

実はこの箇条書きのリスト表示をデコること自体はめちゃめちゃ簡単です。

 

参考

お馴染みのサルワカさんのサイトより、完成形であるリストデザインのコピペをいただけばいいって寸法よ。

 

ul, ol
{ background: #f1f8ff; box-shadow: 0px 0px 0px 10px #f1f8ff;/*線の外側*/
border: dashed 2px #668ad8;/*破線*/
border-radius: 9px; margin-left: 10px;/*はみ出ないように調整*/
margin-right: 10px;/*はみ出ないように調整*/
padding: 0.5em 0.5em 0.5em 2em;}

 

例えばこのサンプルCSSを貼り付けると、箇条書き部分が、先ほどのツイート添付画像のような水色のステッチ模様に切り替わります。

 

簡単じゃん。

 

と思いきや問題点が2つ!!

 

このテンプレをそのままデザインCSSに書いてしまうと、サイト内のリスト表示全てに作用してしまうため・・・

 

箇条書きグロ

 

ワーオ。

 

ブログ内の全てのリスト表示(ul、li部分)がエラいことになってしまいます。

箇条書きカスタマイズの範囲を、記事内のみに抑えなければいけません

 

それに加えてもう1つの問題が

 

目次

 

記事内の『ul、li』部分には、当然『目次』も含まれてしまいます。

 

なので、CSSを記事内のみに適用したうえで、さらに目次を除外してカスタマイズを作用させる必要がある・・・というややこしい状況ですな(゜-゜)

 

それでは2つ一気に解決していきまーっす!(*´∀`*)

子要素のみに適用『>』

 

問題を解決するにもサルワカさんに頼りっきりです(笑)

 

サルに頭が上がらない牛である。

 

今度はこちらの記事より

 

参考

CSSには追記することによって様々な効果が得られるものがあります。

ということで『>』を使います!!なんて読むん?

 

『>』は、簡単に言うと指定した範囲内にのみCSSを適用する表記

 

.entry-content > ul

 

とすることで、entry-contentの中のみの『ul』に効果を表すということ!

『entry-content』とは、はてなブログにおいて『記事内』を指すセレクタです(^^)

 

これでブログ内の他のリスト表示をおかしくすることなく、記事内のみの箇条書きにカスタマイズが適用されます

否定セレクタ『:not(〇〇)』

 

そして記事内で邪魔をしてくるもう1つの存在が目次です!

お次は『〇〇以外に適用する』という意味を持った表記で対策!!

 

ul:not(.table-of-contents)

 

『:not(〇〇)』です!

この表記は直前の要素の内、括弧に包まれた〇〇の部分以外に適用するという意味!

 

『table-of-contents』とは、はてなブログにおいて記事内の目次を指すセレクタです!

 

つまり『>』と『:not(〇〇)』を組み合わせて指定することにより、ブログ内の記事中に限り、目次を除いたリスト表示にカスタマイズを適用するというCSSの完成です

 

お疲れさんでした!

 

カスタマイズまとめ

 

  • できあがったものが
  • こちらになります!!
  • へへっ!!!

 

ちなみにデザインはまた変えたので先ほどのツイート画像ともまた違う見た目のハズ・・・(笑)長々と記しましたが、早い話がサルワカさんのデザインの『ul』部分に

 

.entry-content > ul:not(.table-of-contents

 

このように付け加えてしまえば、はてなブログ記事内の箇条書きが勝手にデザインされるので楽チンですよってことどうぞお試しあれ~!!

 

ありがとうございました!

 

うしごやよろしく!

 

超・箇条書き―――「10倍速く、魅力的に」伝える技術

超・箇条書き―――「10倍速く、魅力的に」伝える技術

  • 作者:杉野 幹人
  • 出版社/メーカー: ダイヤモンド社
  • 発売日: 2016/06/17
  • メディア: 単行本(ソフトカバー)
 
にほんブログ村 にほんブログ村へ