人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

ブログパーツにご用心

2017年 08月 06日
エキサイトの常時SSL化の告知によると、ブログパーツの更新が必要なもの、もはや利用が不可なもの、等がある様です。 最近、私が設置していた「ユニクロカレンダー」が、表示されなくなったので、これに関係するかと思ったのですが、どうやらデータ配信元のユニクロがこれを終了した様子。 多くのブログサイトのSSL化が影響したのかも知れませんが。

下の様に「ユニクロカレンダー」のインポーズされたいた部分が空白になってしまいました。

ブログパーツにご用心_a0349576_11253947.png

今後に別パーツを入れるかも知れないし、ブログスキンの基本は弄らず、擬似要素の「::after」を使った追加項目で対処することにしました。 SSL化してから、改めてこの部分は整理する方針です。



先ずは擬似要素で、文字を追加。 大きな文字で「We are in trouble」と長い文字列ですが、改行した文字列を表示するというのが、そもそも試したかった事です。

.BLOGPARTS::after {
content: "We are in trouble";
font-size: 32px;
color: #777; }

ブログパーツにご用心_a0349576_11380942.png

「.BLOGPARTS::after」のセレクタ表記で、上の様な位置に文字が出ました。 「::before」や「::after」を使う場合、先ず指定を試してから考えた方が早い。「::before」も可能かも知れませんが、今回は「::after」の方が簡単そうでした。

文字の配置位置調整は「position: relative;」を使うと楽です。 マイナスmarginでも可能ですが。 上方に移動させるため「top: -170px;」を追加指定します。

    position: relative;
top: -170px;
left: 0px;

ブログパーツにご用心_a0349576_11451977.png

ここからが肝心なところ。 私は今まで知らなかったのですが、CSSコード「content: "~";」の文字列「~」で、文字列を改行して表示させる方法がありました。
●要素に「white-space: pre;」を指定する。 この条件下で、
●文字列内に「\A」の記述をすると、改行コードとして扱われる
というものです。 この方法に従って、以下の書き換えと追記をしました。

    content: "We are\Ain\Atrouble";
white-space: pre;

ブログパーツにご用心_a0349576_12004136.png

文字列の中央揃えにしようと「text-align: center;」を指定しても、それだけでは効きません。 これは、文字列がインライン要素なのが原因らしく、「display: block;」でブロック指定するとセンタリングが効きました。

    text-align: center;
display: block;

ブログパーツにご用心_a0349576_12073047.png

文字列の行間隔が足りません。 そして右に寄り過ぎなので、以下の指定を追加。

    line-height: 36px;
left: -27px;

ブログパーツにご用心_a0349576_12104547.png

ほぼ完成に近付きました。 行間隔を変えたので、配置を「top値」で修正します。
また「 position: relative;」は、本来の位置に自身の範囲を占拠したままになります。 上図の青枠の部分がそれで、行間隔を拡げたのでひとつ上の図より高さも増えています。 この青部分を改善するのが「margin-bottom: -110px;」で、自らの高さ分をマイナスしたわけです。

    top: -210px;
margin-bottom: -110px;

ブログパーツにご用心_a0349576_12211034.png

上手く収まりました。

コードをやりくりして出来上がった項目を纏めると、以下の様なものです。

.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」という予想の付かないコードを知ったのが収穫です。 こういうの上手く検索しないと出てこないもんです。




この記事はカテゴリ「スキン編集」にトラックバックしています。



by Ataron | 2017-08-06 12:50 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。