どうも！LSSです！！
はてなブログに記事を書く際に、
[:contents] と書くと、その部分が記事中に入れた「見出し」の一覧、「目次」になります。
今回は、その「目次」をCSS装飾で遊んでみました。
コード
<style>
ul.table-of-contents{
transform-style:preserve-3d;
perspective:500px;
background-color:transparent!important;
box-shadow:0 0 0 0 transparent!important;
border:0!important;
}
ul.table-of-contents li{
transform-origin:0% 50%;
background-color:#aaaaff;
transform:rotateY(30deg) translateZ(-40px);
border:6px outset #8888ff!important;
transition:0.5s ease-in-out;
}
ul.table-of-contents li:hover{
transform:rotateY(30deg) translateZ(40px);
}
</style>
作ってみたものの…
元のテーマや、デザインCSSによる装飾の影響を受けるため、万人向けではないかもです^^;
例えば、今回のコードにしても、
background-color:transparent!important;
box-shadow:0 0 0 0 transparent!important;
border:0!important;
の部分はLSSがデザインCSSで設定した内容を上書きするための指定で、元々これらの項目を指定されていない方の場合は削ってしまっても差し支えがなかったりしそうですね。
また、１文字めの背景色が違うのも
LSSがデザインCSSで別途指定したものの影響を残しているものですので、今回のコードをコピペしてもこうはならなかったり…というのもあったりします。
という事で、コピペしていただいてももちろん良いのですが、今回記事タイトルに「テスト」とつけておくという逃げを打っておきますねｗ
ちなみに、１文字めだけ背景色を指定するのは
ul.table-of-contents li:first-letter{
font-size:1.4em;
background: #b0dcfa; /*背景色*/
}
こんな指定です。
「font-size:1.4em;」で、ついでに文字を少し大きくしています。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
