エキサイトの常時SSL化の告知によると、ブログパーツの更新が必要なもの、もはや利用が不可なもの、等がある様です。 最近、私が設置していた「ユニクロカレンダー」が、表示されなくなったので、これに関係するかと思ったのですが、どうやらデータ配信元のユニクロがこれを終了した様子。 多くのブログサイトのSSL化が影響したのかも知れませんが。
下の様に「ユニクロカレンダー」のインポーズされたいた部分が空白になってしまいました。
今後に別パーツを入れるかも知れないし、ブログスキンの基本は弄らず、擬似要素の「::after」を使った追加項目で対処することにしました。 SSL化してから、改めてこの部分は整理する方針です。
+
先ずは擬似要素で、文字を追加。 大きな文字で「We are in trouble」と長い文字列ですが、
改行した文字列を表示するというのが、そもそも試したかった事です。
.BLOGPARTS::after {
content: "We are in trouble";
font-size: 32px;
color: #777; }
「.BLOGPARTS::after」のセレクタ表記で、上の様な位置に文字が出ました。 「::before」や「::after」を使う場合、先ず指定を試してから考えた方が早い。「::before」も可能かも知れませんが、今回は「::after」の方が簡単そうでした。
文字の配置位置調整は「position: relative;」を使うと楽です。 マイナスmarginでも可能ですが。 上方に移動させるため「top: -170px;」を追加指定します。
position: relative;
top: -170px;
left: 0px;
ここからが肝心なところ。 私は今まで知らなかったのですが、CSSコード「content: "~";」の文字列「~」で、文字列を改行して表示させる方法がありました。
●要素に「
white-space: pre;」を指定する。 この条件下で、
●文字列内に「
\A」の記述をすると、改行コードとして扱われる
というものです。 この方法に従って、以下の書き換えと追記をしました。
content: "We are\Ain\Atrouble";
white-space: pre;
文字列の中央揃えにしようと「text-align: center;」を指定しても、それだけでは効きません。 これは、文字列がインライン要素なのが原因らしく、「display: block;」でブロック指定するとセンタリングが効きました。
text-align: center;
display: block;
文字列の行間隔が足りません。 そして右に寄り過ぎなので、以下の指定を追加。
line-height: 36px;
left: -27px;
ほぼ完成に近付きました。 行間隔を変えたので、配置を「top値」で修正します。
また「 position: relative;」は、本来の位置に自身の範囲を占拠したままになります。 上図の青枠の部分がそれで、行間隔を拡げたのでひとつ上の図より高さも増えています。 この青部分を改善するのが「margin-bottom: -110px;」で、自らの高さ分をマイナスしたわけです。
top: -210px;
margin-bottom: -110px;
上手く収まりました。
コードをやりくりして出来上がった項目を纏めると、以下の様なものです。
.BLOGPARTS::after {
content: "We are\Ain\Atrouble";
white-space: pre;
text-align: center;
position: relative;
top: -210px;
left: -27px;
display: block;
margin-bottom: -110px;
line-height: 36px;
font-size: 32px;
color: #777; }
これをブログスキンのCSSの最後に追記しました。
+
今回は「\A」という予想の付かないコードを知ったのが収穫です。 こういうの上手く検索しないと出てこないもんです。
+
この記事はカテゴリ「
スキン編集」にトラックバックしています。