どうも！LSSです！！
既にお気づきの方もおられると思いますが、今朝（2021/11/5 AM）、このブログのタイトル部分の装飾をリニューアルしました！
今回のリニューアルデザイン
はてなブログの「デザインCSS」に、下記のコードを追加しました。
コード
#blog-title-content{
display:inline-block;
background-image:linear-gradient(to bottom right,#aed58180 50%,#00000080 51%);
padding:15px;
text-shadow:3px 3px 0px #555555;
}
「#blog-title-content」は、このタイトルや説明文を取り囲んでいるdivタグにつけられているidですね。
他に、以前から書いていたCSSで影響していそうなのは…
#title a {
position: relative;
padding: 0.25em 0;
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
font-weight: 900;
color:white;
}
#title a:after {
content: "";
display: block;
height: 4px;
background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}
#blog-description {
background:none;
text-shadow:0px 0px 10px #000000;
}
↑このあたりでしょうか。
中の文字に対する指定ですね。
ちなみに、はてなブログのシステムが書き出しているHTMLは、
<header id="blog-title" data-brand="hatenablog">
<div id="blog-title-inner" >
<div id="blog-title-content">
<h1 id="title">
<a href="https://little-strange.hatenablog.com/">Little Strange Software</a>
</h1>
<h2 id="blog-description">スマホアプリの開発を行う LittleStrangeSoftware のブログです。</h2>
</div>
</div>
</header>
↑このようになっています。
一応、コード解説
今回 書き足した部分について、簡単に解説します。
display:inline-block;
この指定を入れておかないと、divタグは「可能な限り横幅が広がるのがデフォルト」となっているために、 inline-block を指定する事で「内容に応じた幅に収まる」ようにしています。
例えて言えば「慎みを覚えろ」って感じですねｗ
background-image:linear-gradient(to bottom right,#aed58180 50%,#00000080 51%);
これが今回のデザインを実現する最大の肝となる部分です。
【CSS】対角線を描くのが難しいけど、解決した話 - Little Strange Software
【CSS】卍レイアウトと対角線グラデーション【実験】 - Little Strange Software
で「こんな事ができるんだ！」と知った事で、今回のデザイン変更が出来るようになりました^^
「#aed581」というカラーコードがこんな色で、その後ろにさらに「80」を付けて、半透過としています。（うっすら背景の木目画像が透けて見えています。）
参考記事：【CSS】色指定 様々な方法（色名・RGB・HSLなど）
それを50%まで表示して、51%からは「#000000（黒）」を同じく「80」を付けた半透過で「対角線を境にした黄緑と黒」というデザインになっています。
padding:15px;
内部余白をつける事で、中の文字を枠から少し距離を取りつつ、
text-shadow:3px 3px 0px #555555;
黒い部分でもかろうじて見える程度の灰色（#555555）の影を「右に3px、下に3px」ずらした位置につけて完成！です！！
さて、この対角線の黄緑と黒のデザインですが
ずっとこのブログを見ていただいている方の中には、見覚えがある方もおられるのではないでしょうか？
いつもお世話になっております、さじさん(id:conasaji)の↑の記事の「パターンC」の真似ですｗ
この記事はLSSをネタにしていただいていながら、とてもかっこよくて、中でもこの「対角線で区切られた黄緑と黒」がいいなぁと思っていました。
以前にもSVGで真似てみた事はありましたが、その時はまだ自分がCSSで対角線を容易に描く方法を知らなくて、できるようになったところでのリニューアルと相成ったわけです^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
