Studio TA Subsite の案内とお知らせ

タグ:CSS・HTML ( 160 ) タグの人気記事

スキンコードの世代交代

2018年 03月 25日
先日、この私のブログページのスキンを触って、コードの一部を書換えました。 ちまちまやっている事で、外から見て代り映えしないのですが、今回はちょっとした節目の意味があり、覚書き程度にまとめました。



レイアウトにかかわるコードの変遷



〔第1世代〕


当初のスキンは「table」タグを使用したものが多く、これはいかにも旧いスタイルです。 本来「table」は表を構成するためのタグです。 しかし、2次元の画面を要領良く構成するには「table」を利用すると都合が良く、エキサイトの旧時代のブログのスキンにも多用されていました。

私が最初にアレンジ元にしたスキンは「ワイド」ですが、ブログタイトル部(ブログヘッダー)、本文とサイドメニューの配置、本文のタイトル部、ページャー部など、ページのレイアウトは全て「tableタグ」で行っているとさえ言えるものでした。

a0349576_10425898.png

このスキンの「HTML全体」は以下で、「tableタグ」による構成が良く判ります。


<TABLE>
<TR>
<TD><DIV>
<DIV><$header$></DIV>
<DIV><$blogurl$></DIV>
</DIV>
</TD>
</TR>
</TABLE>
<TABLE>
<TR>
<TD></TD>
<TD><DIV>
<$post$>
<HR>
<TABLE>
<TR>
<TD><$prepage type=1$></TD>
<TD></TD>
<TD><$nextpage type=1$></TD>
</TR>
</TABLE>
<BR><BR>
</DIV>
</TD>
<TD>
<DIV>
<DIV><$adminmenu type=1$></DIV>
<DIV></DIV>
<DIV>
<DIV>
<CENTER><$logoimage type=1$></CENTER>
<$description$><$nick$>
</DIV>
<$calendar type=1$>
<DIV><$menuright$></DIV>
</DIV>
<DIV></DIV>
<CENTER><$banner type=1$></CENTER>
<$xml$>
</DIV>
</TD>
<TD></TD>
</TR>
</TABLE>


私のアレンジも、これを見よう見まねで変形させたに過ぎず、当然「tableタグ」をそのまま使っていました。


〔第2世代〕


HTMLやCSSの知識が増えて来るに従い、デザイン(配置構成)の目的で「table」を使用するのは望ましくないという事を知りました。 これは、自動読み上げアプリは「table」を実際の「表」と受け取って読み上げる事を想像すれば、その意味が判ります。 並んだcellは関連した内容のはずが、デザイン目的の「table」はそんな関連性がありません。 検索ロボットは意味の判り難いページと判断するでしょう。 現在では、ページ内容の本質はHTML、デザインはCSSに分化させる事で、それぞれの高度化がはかられているのです。

私はその条件に準拠が必要と考え、スキンのHTMLコードから「table」を無くす事にしました。 そもそも「table」が用いられたのは、「div」などの要素が、ページ上で上から下方向に縦に並び、普通は横方向に並ばないからです。 2次元平面上のレイアウトをさせたい場合には、何らかの工夫が必要で、そのひとつが「table」利用だったわけです。

調べると、横並びレイアウトのために良く用いられるのが「float」プロパティでした。 しかし、常にその後処理「clear:both;」が問題となる様で、私は利用を避けました。 そして行き着いたのが、「display: table;」「display: table-cell;」というCSSプロパティです。 これを「div」要素に指定すると、そのまま「table」「cell」としてのレイアウトが可能で、「tableタグ」の書き換えには有難いプロパティです。 この導入で、HTML上の「tableタグ」を全て「div」タグに置き換えることが出来ました。

この段階で、もはやアレンジ元スキンのHTML構成に頼る必要が無いことが判って来ました。 何かアレンジ元のスキンを用意して、それを叩き台に一からスキンを作る目的で探したのが「ハルハル」というスキンでした。 構成がシンプルで、私のそれまでのデザインの移植先に良さそうで選んだのですが、現在Chromeからではアクセス出来ず、提供スキンの一覧にはありません。

a0349576_12302260.png

この公式スキンをベースに、メインサイトは基本フォントサイズを16px、サブサイトは13pxとして、スキンを組んでいます。


〔第3世代〕


「div」要素の2次元レイアウトを可能にする手法として、「display: table;」は初期のCSSには無かったプロパティでした。 しかし、スマートフォンの利用拡大に応じて、更に便利な「display: flex;」や「display: grid;」というプロパティが登場して来ました。 これらのプロパティは要素の2次元的配置そのものを目的に開発され、とても柔軟に扱えます。

今回は、いままで「display: table;」を使っていた場所を、全て「display: flex;」に置き換えました。 それは、本文とサイドメニューの配置で「display: flex;」が明らかに適していたからです。

「display: table;」「display: table-cell;」の指定では、「div」はあたかも「table」の様な振る舞いをします。 本文とサイドメニューを横並びにするため、これを使用していたわけです。 ところが、サイドメニューが無い場合は、本文の幅は「table」全体の幅になろうとします。 これも「table-cell」指定による特徴です。 これが原因して、ページの読み込み時に、本文幅が一旦横に広がり、メニューが読み込まれて縮まる表示になっていました。

a0349576_13181838.png

この落ち着きなさを改善するため、本文の幅指定を試みました。 ところが、どうしても「table-cell」としての振る舞いが邪魔をして、上手く行きません。 これが「display: flex;」に置き換えた理由です。 そして「display: flex;」に換えると、こちらの方が目的にかなった指定だと確信しました。

「display: table;」を「display: flex;」に換えるだけで、直下の内部要素は自動的にFlex配置になります。 更に配置の様式を直下の要素に細かく指定出来ますが、実際上は余り知らなくてもOKです。



Flexレイアウトとした結果


今回の「display: flex;」の導入で、サイドメニューの有無に影響を受けず、本文幅を指定する事が出来る様になりました。 以下のCSSコードは置き換えの中心で、「/* */」の部分は実際は置き換えて削除しています。 本文幅はウインドウ幅から「calc」によって指定しています。 また、ウインドウ幅が一定以上に狭まっても、従来と同様に本文幅が狭くならない様に「min-width」の指定をしています。

#W_CONTENTS {
/* display: table; */
display: flex;
width: 100%; }

#CONTENTS {
/* display: table-cell; */
/* vertical-align: top; */
width: calc(100vw - 288px);
min-width: 720px; }

#NAVIGATION {
/* display: table-cell; */ }

この書き換えで、ページ読込み時に本文幅の変化する事がなく、遅れて読み込まれたサイドメニューは空いた場所にすっと表示される様になりました。 特に前後のページへ移動した際に、以前より落ち着いた読込み表示になっています。





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



[PR]
by Ataron | 2018-03-25 14:02 | ブログスキンのアレンジ | Trackback | Comments(0)

エキサイトヘッダー 穏やかなアレンジ

2018年 03月 17日

穏やかなヘッダーアレンジ


前ページでエキサイトヘッダーの積極的なアレンジについて纏めました。 しかし、私自身のページではエキサイトヘッダーを残したアレンジをしたままです。 これは、左隅の「お知らせリンク」やブログ内メニューなど、今に至るまでのアレンジの蓄積が多過ぎ、手を着けにくいからです。

で、いざ自分のページを見直すと、もっとエキサイトヘッダーを弄っても良いのではと思い出しました。 いわば「穏やかなアレンジ」になりますが、こちらはシンプルで殆どのスキンに適応し易いアレンジです。 実際に、このページのヘッダーには、このアレンジを施しています。



ヘッダー背景色とページとの境界線


デフォルトのエキサイトヘッダーは白か黒の背景色しか選択できず、ページデザインと合わせたい場合もありますね。 以下の指定は、ヘッダーを淡い灰色の背景色とした私の例です。

.exHeader {
background: #eee !important;
border-bottom: #eee !important; }

「background」がヘッダー背景色の指定、「border-bottom」はページとの境界線(ヘッダー下縁)の色指定です。「#eee」の部分を変えて好みの配色を指定できます。



検索窓の省略


下はアレンジ前の状態です。「検索窓」はエキサイトヘッダーが出来てから、長く手を着けずに来ました。 なんとなく必要かと思ったのですが、これを使う機会が全くありません。

a0349576_10201500.png

この窓幅の無駄で、ウインドウが狭い場合に肝心のメニューが隠れます。 サイドメニューの「ブログ内検索」があれば全く困らないので、ヘッダー側を削除する事にしました。

下は、ヘッダーの「検索窓」を見えなくするコードです。

#exSearch {
width: 40px !important;
opacity: 0;
pointer-events: none; }

透明化して幅を狭めるコードにしていますが、これは隙間の幅調節に透明化して利用しています。

a0349576_10301692.png



区切り線の透明化


次に、ヘッダーのメニュー「投稿」「設定」等の間の「 | 」を消します。

a0349576_10330130.png

これは、この要素の色を透明化を指定して、見えなくするだけです。

#toollink li {
color: transparent !important; }

この指定で、メニユーは下の様にすっきりします。

a0349576_10364368.png



フォバー時のアンダーラインを無くす


マウスを乗せた時に、デブォルトではアンダーラインが付きます。 これは余り美しくないので、ほんのりとボタン背景が明るくなる形に変えます。

#toollink li a:hover {
text-decoration: none !important;
background: #fff !important; }

a0349576_01431993.png



メニューのボタン化


左隅の「お知らせ」と統一して、もう少しメニューらしいデザインにしました。 これは「投稿」などの「a要素」に、ボーダー枠や背景色を着けるものです。 ごちゃごちゃ指定が続きますが、なるべく体裁の良いボタンにするためです。 margin値はボタンの上下位置やボタンの間隔を調節します。

#toollink li a {
display: block;
margin: 3px 2px 0;
padding: 2px 8px 0px !important;
line-height: 18px;
height: 19px;
color: #000;
border: 1px solid #bbb;
border-radius: 3px;
background: #f8f8f8; }

これで「文字」がボタンデザインになります。

a0349576_10502488.png

出来上がったコードを、他ブラウザからどう見えるかチェックしました。 IEは「!important」を付けないと反映しなかったり、思わぬ問題があります。「フォロー中のブログ新着」の文字が薄いなと思っていたら、これだけは「span要素」で表示されていました。 以下のコードを追加して改善しました。

#toollink li span {
color: #000 !important; }

a0349576_11583241.png



アレンジコードのまとめ


下は以上のコードをひとまとめにしただけです。 スキンCSSの末尾に追記すると、アレンジが反映します。 各段階のアレンジコードを独立して使用してもOKです。


/* エキサイトヘッダーのソフトアレンジ */

.exHeader {
background: #eee !important;
border-bottom: #eee !important; }

#exSearch {
width: 40px !important;
opacity: 0;
pointer-events: none; }

#toollink li {
color: transparent !important; }

#toollink li span {
color: #000 !important; }

#toollink li a {
display: block;
margin: 3px 2px 0;
padding: 2px 8px 0px !important;
line-height: 18px;
height: 19px;
color: #000;
border: 1px solid #bbb;
border-radius: 3px;
background: #f8f8f8; }

#toollink li a:hover {
text-decoration: none !important;
background: #fff !important; }





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


[PR]
by Ataron | 2018-03-17 15:19 | ブログスキンのアレンジ | Trackback | Comments(0)

エキサイトヘッダーの本格的なアレンジ

2018年 03月 17日

エキサイトヘッダーは出島の仕様


エキサイトの他のユーザーのページを開いた時に、エキサイトヘッダーに「新着コメント○件」の表示が出た場合、クリックすると自ブログのコメント管理ページが開きます。「フォロー」「マイブログ」「投稿」「レポート」等のメニューが並ぶ「エキサイトヘッダー」ですが、他のエキサイトユーザーのページ上なのに、全て自分ページの様に機能します。

一方、有料会員でヘッダー非表示のページでは、「新着コメント」などのメニューが無くなります。 それを補う形で、ブログタイトル周辺に「フォロー」「マイブログ」等のリンクが表示されます。 非表示の場合は、自他のユーザーが困らない様にメニューが差替えられるわけですが、ブログ所有者自身に「新着コメント」が表示されない欠点があります。 また、ヘッダーがあった部分のエリアが残されたままとなる公式スキンが多く、デザイン上で気になる場合もあるでしょう。

エキサイトヘッダー非表示の場合、「新着コメント」のチェックは、コメント欄を直接見るか、ブログトップに行く必要があります。 コメントは一番最近のページに来るとは限りませんから、ヘッダー非表示とすると案外と不便です。 今回のアレンジは、この改善を試みたものです。



見る側によって変化するメニュー内容


ヘッダー部のメニューは、ページを見るユーザーに合わせて「差し替え」が行われます。 アレンジするには、この差替えの仕様を知っている必要があります。

以下の表は縦に「見る側」の区別、横を「ヘッダー表示設定」の区別として、表示される「メニュー項目」を整理したものです。 判り易くするために「メニュー項目」の並び順はページ上と異なります。

a0349576_14161303.png

表の「★」マークは必要度の高いメニューです。 ヘッダー非表示の列を見ると、Exユーザー自身には「新着コメント」「レポート」が足りません。 他の点では、ヘッダー非表示の不便は特になさそうです。


アレンジの方針


アレンジは、一旦環境を「ヘッダー表示」に設定し、「エキサイトヘッダー」側のメニューから必要なものを選択して、「ブログ内」の必要なメニューと併せて、自由な場所に配置する事にしました。

「アレンジ1」は、ブログ所有者はフルメニューが使え、訪問したExユーザーには適度に簡素化したメニューが表示されるタイプです。 これはアレンジの基本型にしています。

は全てのメニューを省略せず集めています。 これらは、ブログ所有者以外からは見えませんから、メニューがページデザインを損ないません。 特に「新着コメント」がブログ所有者のみに見えるのがポイントです。
訪れたExユーザーに、 自ブログのフォローしてもらう「フォロー」の表示は重要です。 また、訪れたユーザーが自ブログに戻る「マイブログ」も、使われる事が多そうです。(デザイン上でマイブログは省略したい場合はあるかも知れません)
何かの理由でログアウトになった場合を考えると、あらゆる場合で「トップ」はある方が良いでしょう。

「アレンジ2」はデザインより、他のExユーザーの便利を優先したタイプです。

の部分だけが異なります。 訪れた他のExユーザーに対して、フルメニューを表示します。 場合によってはヘッダーのデザインとした方が綺麗かも知れません。(元のエキサイトヘッダーよりスマートに出来ると思います)


差し替えられるHTMLの内容


メニューが見る側に合わせて変化するのは、「#toollink」という要素のHTML差替えで実現しています。 以下は、最もメニューが増えた状態を纏めたものです。 実際は、全メニューが常に並ぶわけではありません。


Exユーザ自身のブログで自身に示されるメニュー(新着コメント有り)
<ul id="toollink">
<li><a class="comment" href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/comments/">新着コメント 1 件</a>|</li>
<li><a href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/entry/">投稿</a>|</li>
<li><a href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/config/basic/">設定</a>|</li>
<li><a href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/access/blog/">レポート</a></li>
</ul>


他のExユーザーで未フォローのブログで示されるメニュー(自身に新着コメント有り)
<ul id="toollink">
<li><a class="comment" href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/comments/">新着コメント 1 件</a>|</li>
<li><a href="#" data-ex-id="register-bookmark" data-ex-value="{&quot;blog_id&quot;:&quot;x7777777&quot;}">フォロー</a>|</li>
<li><a href="https://atstudiota.exblog.jp/">マイブログ</a>|</li>
<li><a href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/entry/">投稿</a>|</li>
<li><a href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/access/blog/">レポート</a></li>
</ul>


他のExユーザーでフォロー中のブログで示されるメニュー(自身に新着コメント有り)

<ul id="toollink">
<li><a class="comment" href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/comments/">新着コメント 1 件</a>|</li>
<li><a href="https://www.exblog.jp/mydata/favorite/new/"><span>フォロー中のブログ新着</span></a>|</li>
<li><a href="https://atstudiota.exblog.jp/">マイブログ</a>|</li>
<li><a href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/entry/">投稿</a>|</li>
<li><a href="https://userconf.exblog.jp/team/login/?blogid=b0000000&amp;redirect_url=/access/blog/">レポート</a></li>
</ul>


ログアウトした訪問者に示されるメニュー

<ul id="toollink">
<li><a href="https://www.excite.co.jp/?lin=1&amp;si=blog&amp;ru=http%3A%2F%2Fatstudiota.exblog.jp%2F">フォロー</a>|</li>
<li><a href="https://www.excite.co.jp/?lin=1&amp;si=blog&amp;ru=http%3A%2F%2Fatstudiota.exblog.jp%2F">ログイン</a>|</li>
<li><a href="https://www.exblog.jp/new/pr/">ブログを作る!(無料)</a></li>
</ul>


上のHTMLの中で色付きの文字は、アレンジでメニューの表示/非表示を選択するためのキーに利用しました。

特に「blogid=b0000000」の部分は、「ブログID」と呼ばれる「アルファベット1文字」+「数字7桁」のIDコードです。 これは公開されていませんが誰でも調べる事が出来、特別な秘密性はありません。 システムがブログを特定するためのIDです。


ブログIDの調べ方


アレンジを行うには、「ブログID」をコードに書き込む必要があるので、ここに調べ方を記します。

自分のブログのヘッダー部を右クリックして、Chromeでは「検証」、Firefoxでは「要素の調査」、IE11 / Edgeでは「要素の検査」を押します。 以下はChromeの場合ですが、いずれも同様のHTMLが表示されるので、「exHeader」の項目を探します。(下図の青い部分で、エキサイトヘッダーを非表示にしていると、この項目はありません)

a0349576_19585624.png

そのすぐ下方に、「data-ex-blogid="b0000000"」の記述があります。これは例ですが、これが自ブログの「ブログID」です。



エキサイトヘッダーをアレンジする手順


先ず最初に、

●ブログの「設定」で「エキサイトヘッダー表示」に設定します。

以下に掲載するアレンジの基本型は、メニュー構成は「アレンジ1」に相当し、およそ以下のデザインです。

 ◎ブログのヘッダー設定は「エキサイトヘッダー表示」が必須です。
 ◎メニューは文字色が白、「新着コメント」は白背景で文字色は赤です。
  (従って、ヘッダー部の背景は濃い背景色が適しています)
 ◎メニューの配置は元のエキサイトヘッダーの高さで、右隅に寄った場所です。
 ◎エキサイトヘッダーの本来あったヘッダーエリアを、上方に詰めたデザインになります。

基本型が使用中のスキンに適さない場合は、後半の応用例を参考に修正します。


アレンジの基本型


●以下の枠内のコードをメモ帳等にコピーします。
●コード中で「b0000000」の部分を、自ブログの「ブログID」を調べて置き換えます。
●書き換えたコードを「PCデザインスキン」で使用中のスキンの「CSS最後尾」に追記します。
●編集をしたCSSを保存します。



/* エキサイトヘッダーのアレンジ */

/* ヘッダーエリアを詰める */
#hasExHeader {
margin-top: 0 !important; }


/* エキサイトヘッダー メニュー */
.exHeader {
background: transparent !important;
border-bottom-color: transparent !important;
top: 0;
left: initial;
right: calc(50% - 325px);
min-width: 0;
width: auto; }

.exHeader > *:not(#toollink) {
display: none !important; }

#toollink li {
color: transparent !important; }

#toollink li a {
font-family: Meiryo;
color: #fff;
text-decoration: none; }

#toollink li a.comment {
background: #fff;
border-radius: 4px;
padding: 1px 6px 0px;
margin-right: 5px; }


/* 表示対象コントロール */
#toollink li a:not([href*="blogid=
b0000000"]) {
display: none; }

/* マイブログを表示する */
#toollink li a[href$="exblog.jp/"] {
display: block !important; }

/* フォローを表示する */
#toollink li a[href="#"] {
display: block !important; }


/* ページ内ヘッダー メニュー */
#blog-head .inner {
position: static; }

#blog-admin {
font-size: 0;
position: absolute;
top: 5.2px;
right: calc(50% - 400px);
margin: 0;
z-index: 10000; }

#blog-admin a {
font-family: Meiryo;
font-size: 12px;
color:
#fff; }

#blog-admin a:nth-child(n+2) {
display: none; }



〔注意〕
現在使用中のスキンに対して、これまでに一度もアレンジをした事が無い場合は、スキンは「公式スキン」のままなのでアレンジを反映しません。 その場合は、一度だけ「マイスキン」に登録しなおす必要があります。 この手順は以下に纏めているので、初めての方は参照ください。



このアレンジによるヘッダー部の例で、下はExユーザ自身の表示です。(表のに相当)

a0349576_19412513.png

他のExユーザがこのブログを見た場合、下の様に見えます。(表のに相当)

a0349576_19415423.png

ログアウトしたExユーザーやExユーザー外の人がブログを見た状態です。(表のに相当)

a0349576_19433214.png


応用A: メニュー項目の変更


「アレンジ1」のコードで以下の部分は、赤のブログIDに関する「メニュー項目」以外は表示しない指定です。 他のExユーザーがこのブログを見た時、システムは訪問者のブログIDをメニュー項目のHTMLに組み込むため、それらのメニュー項目は非表示になります。

/* 表示対象コントロール */
#toollink li a:not([href*="blogid=b0000000"]) {
display: none; }

●このコードを削除する

基本型のコードからこの部分を削除すると、訪問したExユーザーにはフルメニューが表示されます。 これは「アレンジ2」に相当し、表示されるメニューはの状態になります。 なお、「フォロー」「フォロー中のブログ新着」は、両方同時に表示される事は無い様です。

下はこの項を削除した場合に、他のExユーザーに表示されるメニューです。

a0349576_20261276.png


応用B: 表示位置の移動


表示されるメニューは、おおむね何処にでも移動出来、ページの上部のデザインに合わせて配置出来ます。 配置に関するコードは「アレンジ1」のコード中で、ピンク色の数値です。 下は2ヵ所のtop値に「80px」「82.5px」として下方に80px下げたものです。 数値の増減は、常に両側で等量にします。

a0349576_20415669.png


応用C: メニューの文字色


基本型はメニュー文字色が「白」ですが、背景が白の場合は文字が見えません。 文字色の指定は「アレンジ1」のコード中の2ヵ所の「#fff」です。 例えば、白背景なら「#000」(黒)等のカラーコードに変更します。


応用D: メニューに背景色を付け、エキサイトヘッダー風にする


デザインを元に戻した様になりますが、表示されるメニュー内容は異なり、無駄なアレンジではありません。 また、ヘッダーの背景色は好みに変更が出来ます。

#hasExHeader {
margin-top: 29px !important;
background: #0077FF !important; }

上は「#0077FF」の青色を背景とするコードの例ですが、デザインに適したカラーコードを探して指定します。

ただし、上記のコードはhtml全体に色を指定するので、ページ下端などにこの背景色が露出する場合があります。 htmlへの色指定は避けて、ヘッダー周辺の背景画像などを利用した方が良いかも知れません。



「新着コメント」とデザインの可能性


このアレンジは「新着コメント」がブログ所有者に表示され、同時に上部ヘッダー枠の無いデザインを可能にします。 また、デザイン重視で訪問者の便宜を気にしない「ブログ所有者以外には一切のメニューを表示しないアレンジ」も、これを再アレンジすれば可能です。

スキンによっては、ここに挙げたコードの手直しが必要な場合があるかも知れませんが、ヘッダー周辺のアレンジの参考になれば幸いです。




この記事はスキン編集にトラックバックしています。



[PR]
by Ataron | 2018-03-17 00:06 | ブログスキンのアレンジ | Trackback | Comments(0)

フォントってもともとアートなのです

2018年 03月 06日

まる文字革命


大昔、「まる文字」というのが流行って、当時は「若者文化」と言われたものです。 その時代、今から半世紀前の時代にはインターネットは無く、若者の交流は学校などに限られているのが普通で、それらはやはり学生達の間から流行って行ったものと思います。「まる文字」が拡散する力を持ったのも、交流の場があったからに違いありません。

「まる文字」の発生する以前の時代は、殆どの場面で目にする活字が「明朝」だったと思います。 看板や宣伝の領域ではゴシックが有っても、文章のタイトルや本の表紙も「明朝」か「太い明朝」という事が多く、 丸い文字を求める気持ちは人々の中に潜在的にあったのではないでしょうか。

その潜在的欲求が「まる文字」を書く若者達を増やし、ついにはアンアン・ノンノなどの流行誌の活字に、丸ゴシックを使わせる結果になった様に思えます。 印刷業界の当時の活字の問題は定かに判りませんが、これらの流行誌のヒットに、丸い活字は欠かせなかったはずです。

〔注〕この事を調べて行くと、下の記事を見つけました。 興味のある方は参照ください。




現在はネットという場があるが


今ではネットやスマホがあります。 非現実な前提があるものの、交流の場は半世紀前と比べてずいぶん広くなったといえるでしょう。 しかも、ネットには年代層や社会的な背景などの枠はもともとありません。 これは流行を生み出す場として強力に機能しているはずです。 今のTVを見ていると、昔の流行の仕掛け主が、ネット上の流行を漁って逆輸入しようとしている様に見える時があります。

若者言葉は言葉の本性、言葉は生き物の様に変わって行くもの、という事を最近は良く耳にします。 なるほどと、まるで言語学者になった様に納得するのですが、今や別に若者でなくても新しい言葉を生成しうる場所に居るわけです。「新しい言葉」は、その時代に必要とされている、ある物や意味を表すのにとても適した言葉で、それまで適した言葉が無かったら、嫌でも「新語」として流通すると思います。 もっとも、その言葉を必要とする人達が多数派でなければ、業界新用語の枠を超えた新語にはなり得ないでしょう。

一方、フォントという部分に目を向けると、「まる文字」の様な大きな流行は無い様に見えます。 これには幾つか理由が考えられます。
 ◎フォントは受動する対象で、選択は出来るが普通のユーザーが簡単に作れない。
 ◎従来、フォントは通信機器やOSの制約を強く受け、選択出来るだけも良い位とされて来た。
 ◎現在の各種のシステムは、おうよそ人々のフォントの欲求をある程度満たしている。
もう、人々の間から生まれた新しいフォントの大流行という様な事は、あり得ないのかも知れません。 セリフもサンセリフも明朝もゴシックも、なんでもあるんだから。



私が通った道


私はメイリオが好きなのですが、その背景には「まる文字」「丸ゴシック」を求めた流れがあります。「まる文字」は直接の筆記文字ですから、魅力的に思ったが私は上手く書けませんでした。 そのうちワープロというものが出来て、初期の機種は「明朝」しか扱えません。 しかし、私も丸い文字が書きたかったのですね。 ワープロで「細丸ゴシック」が使える様になった時は、もうこれしかないと思って飛び付きました。

PC時代になるとフォントが自由に選べ、「MSゴシック」がまあ合格ライン。 印刷はやはり「細丸ゴシック」を使いました。 そして高解像の時代に入り、最後に「メイリオ」が現れました。 これはモニター上でも素晴らしい。 ゴシックと明朝の良いとこ取りをしている様に感じます。

この様に振り返ると、だんだんと好みのフォントを操れる様になって来たのだなと思います。 もちろん、その背景にはデジタル技術の進歩があります。 最初は、鉛筆とペンに始まり、シャープペンやロットリング等に勤しみ、定規を当てて書いたり、ペンを裏向にして書いたり、それは文章を書くよりも、絵を描く事に近い作業。 今では、キーボードをコトコトとやってますが。



でも何か足りないと思う事が無いわけではない


少し前までブラウザ表示で使えるフォントは、PC側の制約があったのですが、ウェブフォントの発展で条件が変わって来た様です。 動画が普通に扱える時代に、表示速度はそう問題ではない様です。

以前より自作フォントを発表している人達が居る事を知って居ましたが、最近は利用方法がウェブフォント化に進んでいる様です。 下はPCにインストールできるフリー自作フォントを紹介するページです。


その気で環境を用意すれば、これらの自作フォントをウェブフォント化して、ブログ誌面で使える時代になった様です。 それにしても自作フォント、よくまぁ頑張って作ったもんだと思います。

こんな人達が昔に居たら、最初にこぞって「まる文字」を作った可能性が強いでしょう。 先に書いた様に、丸い文字の欲求は、現代の丸ゴシックフォント類によって吸収され、もはや創作対象になりにくい様に思います。 でもその内に、今まで無かった種類のフォントデザインが、強く求められる時が来るかも知れません。



フォントとアートの接点


タイポグラフィーという言葉があります。 何かは下のリンクを見れば、一目瞭然です。


文字を書く事は、幼い時は絵を書く事と余り区別されたものでは無かったはずです。 タイポグラフィーを見ていると、文字のデザインがアートの本性を表明している様です。



より優れた手書き入力装置とアプリが必要かも


私は、時々思い出した様にペンタブレットを取り出して使ってみますが、とっても使いこなせません。「高級なヤツだともっと使い易い」「最新式だってそう変わらない私が下手なだけ」と2つの考えの間を行き来します。 手書き風のフォントを作った人のブログを読むと、やはりペンタブレットを使って文字を作って行く様です。 また、アマチュアが使えるデザイン画からフォントファイルを構成するためのアプリは、希少なものだそうです。

必要な入力装置(タブレット)やアプリが、もっと敷居の低いものになれば、沢山のアマチュアフォントが生まれる時代が来るかも知れません。 潜在的に、人の中には文字を愛する要素、文字を自分の好みに表現したい欲求があると思います。 それは、音楽を聴くだけでなく、自分で奏でたり歌ったりしたいのと同じで。

とりとめ無く書きましたが、フォントについて、この頃気になった事を書き連ねたしだいです。



[PR]
by Ataron | 2018-03-06 19:04 | PC環境(ハード/ソフト) | Trackback | Comments(0)

ページ上方にスクロールして戻るボタンを設置する / エキサイトブログ

2018年 03月 04日

新しいCSS機能「scroll-behavior」


ページの上方に戻るボタンを備えたページは見慣れたものになりました。 エキサイトブログのトップ画面にも、下方へ少しスクロールすると黒いスイッチが出て来ます。 これはエキサイトが用意したスクリプトで演出しているので、ブログページ上でもそのスクリプトが利用出来ないか試したのですが、残念ながら駄目でした。 そこで色々調べると、最近はCSSの「scroll-behavior」というプロパティを使い、これに近い演出が出来る事を知りました。

ブロック等に、このプロパティを「scroll-behavior: smooth;」と指定すると、そのブロック内でのリンクによる移動が「ジャンプ」ではなく「スクロール」になるそうです。 しかし、エキサイトのブログ画面で試すとなかなか上手く行きません。 色々設定を試すと「html」にこの指定をした場合だけ、スムーズな「スクロール」をする事が判りました。

未だブラウザ対応がまちまちですが、Chrome と Firefox で動作する事が確認出来ました。 しかし、指定方法で次の様な違いがあります。「〇」がスクロール動作OKで「×」はスクロールがジャンプになります。

◎Chrome
  「html」にプロパティ指定「〇」 「body」や他の包括要素にプロパティ指定「×」
  「href="#"」のリンク先表記「〇」

◎Firefox
  「html」にプロパティ指定「〇」 「body」にプロパティ指定「〇」
  「href="#"」のリンク先表記「×」

両ブラウザで正しく動作させるには、
  プロパティ指定は  html {scroll-behavior: smooth;} 
  リンク先は、ページ上の実在のアンカーが必須  <a href="#~~~"></a>

という事になりました。 以上は私の環境で2018年初期に確認した事で、差異や間違いがあれば御指摘ください。



ボタンデザインの実際


実際に設置した時のボタンは下の様なデザインです。

a0349576_18262156.png

少し拡大すると、半透過で下にメニュー等があると少し透けて見えます。

a0349576_18270951.png

ページを下の方にスクロールしてメニューの下端を越えると目立ち、メニュー上にある時は余り邪魔にならない様に半透過としています。 マウスを乗せると、透過がなくなり下の様にはっきりします。

a0349576_18283008.png



ボタンを実装する


エキサイトブログであれば、どのタイプのスキンでも実装が可能と思います。

◎スキン編集でHTMLとCSSに加筆します。
◎PC表示にのみボタンは表示され、スマホ表示には影響がありません。
◎ブログの背景色、メニユー配置、などに合わせて最適なサイズ、配置、配色、に調整してください。
◎FontAwesomeを導入すれば、ボタンデザインを色々と選べます。
◎Chrome と Firefox でスクロール動作を確認しています。 非対応ブラウザでは従来のジャンプになります。
◎現在使用中のスキンが既にアレンジを施したものである場合は、万が一の場合に備えて下記〔手順4〕のスキンのバックアップをしてからアレンジされる事をお勧めします。



手順1 HTMLのペースト 


ブログ「設定」メニューの「デザイン設定」→「PCデザイン設定」→「PCデザインスキン」の画面で、「現在使用中のスキン」の「編集」を押します。(以下は公式スキンの場合の一例です)

a0349576_18535150.png

HTML & CSS編集の画面の「全体」を開き、下図の様に編集枠を一番下までスクロールして、「全体」の最末尾を表示します。

a0349576_19053760.png

一番最後の </div> の手前にカーソルを入れ、2~3回「Enter」を押し、下図の様に空行を作り、空行部分に以下のコードをペーストします。 エキサイトヘッダーがブログページに有るか無いかで、どちらかを選びます。

◎エキサイトヘッダー有りの場合
<div class="nav-top"><a href="#toollink"></a></div>

◎エキサイトヘッダー無し(有料会員でヘッダー無しを選択の場合)
<div class="nav-top"><a href="#hasExHeader"></a></div>

下図の様に間違いなくコードがペースト出来たらOKです。

a0349576_19541648.png



手順2 CSSのペースト


次にCSSのタブを押してCSS編集画面を表示し、やはりCSS編集枠の末尾までスクロールします。 今度は、CSSの一番末尾で改行を2度ほどして、下の様にCSSの末尾に空白行を作ります。

a0349576_19502663.png


CSSの最末尾に以下のコードをペーストします。


/* ページ上方に戻るボタン */
html {
scroll-behavior: smooth; }

.nav-top {
position: fixed;
bottom: 20px;
right: 20px; }

.nav-top a {
display: block;
opacity: 0.7;
width: 40px;
height: 40px;
border-radius: 40px;
background: #2196F3;
text-decoration: none; }

.nav-top a:before {
content: "▲";
margin: 8px;
font: bold 24px/40px Meiryo;
color: #fff; }

.nav-top a:hover {
opacity: 1; }




下図の様に間違いなくペーストができた事を確認して、最後に「作成する」のボタンを押します。

a0349576_20331120.png



手順3 編集したスキンをスキンに適用する


注意〕手順3は、使用中のスキンを始めて編集した場合の手続きで、使用中のスキンが以前にスキン編集を行ったものである場合は不要です。

「PCデザインスキン」の画面に戻り、「スキン選択」で「マイスキン」を選択します。 既に「マイスキン」が開かれている場合はそのまま先に進みます。

下図の下半分(スキン選択)には、過去に選択し使用したスキンや、編集をしたスキンが、履歴として並んでいます。 一番左上が最近の履歴で、これが先に編集し作成したスキンです。(赤枠のスキン)

a0349576_20362516.png

この下の赤枠のスキンの「適用」を押します。 初回の編集でこの操作がないと、編集結果が反映しません。 「現在使用中のスキン」が下の様に「プレビュー」「編集」の2ボタンに変わり、日付が現在のものに変っていたらOKです。

a0349576_20461001.png

これ以降は、再びこのスキンを編集をしても、手順3の操作は不要になります。



手順3 アレンジが反映したかを確認する


上の画面の「プレビュー」を押すと「上に戻るボタン」がウインドウの右下隅に表示されるはずです。 但し、プレビュー画面はリンク動作をしないので、実際のブログ画面を表示して動作を確認します。 もし動作がおかしかったり、デザインに問題があれば、再びこの「PCデザインスキン」の画面で「編集」をします。

万が一、ブログ画面がままならない崩れ方をして元に戻せなくなっても、慌てる事はありません。 その場合は、「PCデザインスキン」の「スキン選択」で、マイスキンでないカテゴリで元のスキンを探して適用すれば良いわけです。



手順4 スキンアレンジをしたらバックアップを手元に保存しておく


但し、注意が要るのは、これまでにスキン編集をしてアレンジして来た内容がある場合は、アレンジしたスキンのバックアップをとっていないと再現できなくなります。

スキン編集の前に、HTMLやCSSの編集画面で、右クリックをして「すべてを選択」を押し、スキンのコードをメモ帳などにコピーしておくと、まさかの場合にも完全に元に戻す事が出来ます。「全体」「本文」「右メニュー」「CSS」の4つのテキストファイルがバックアップになります。

a0349576_21092907.png



ボタンデサインのカスタマイズ


ボタンにFontAwesomeのフォントを使う


ボタンにFontAwesomeのアイコンフォントを使用すると、デザインを拡張出来ます。 このフォントの使用は、CSSの先頭に「@import」指定が必要です。 以下のページの「@import」指定の部分を参考にしてください。



「@import」指定を書き込んだ上で、上記のCSSコード中で「.nav-top a:before」の項のみを以下に置き換えます。


.nav-top a:before {
content: "\f106";
margin: 10px;
font: bold 32px/36px FontAwesome;
color: #fff; }


文字の種類、配置や大きさ等は、上のコードの次の値を調整します。
  FontAwesome の「文字コード」:「\f106」
  文字の左右位置:「10px」
  文字サイズ:「32px」
  文字の高さ位置:「36px」
  文字色:「#fff」

下図は「\f106」の文字を使った場合です。

a0349576_21472147.png



ボタンの配置を変更する


メニューの位置やその他のレイアウトで、ボタンの位置を変えたい場合があり得ます。 配置はウインドウの左右隅で下隅が一般的ですが、これは簡単に変えられます。

上記のCSSコード中で、以下の部分がボタンの配置に関係します。


.nav-top {
position: fixed;
bottom: 20px;
right: 20px; }


「bottom: 20px;」はウインドウ下辺からの距離、「right: 20px;」は右辺からの距離です。 下はそれぞれの値を「0;」とした状態で、値が増えた分だけ隅から離れます。

a0349576_22335778.png

また、「bottom: 20px;」「left: 20px;」とすれば、ウインドウ左下隅の配置になります。




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



[PR]
by Ataron | 2018-03-04 22:39 | ブログスキンのアレンジ | Trackback | Comments(4)

ページャーをアレンジする(続2) / エキサイトブログ

2018年 02月 27日

「direction: rtl;」はブラウザによって様々な表示になる


おおまかには統一された文字の並びになるが、問題となった記号文字に対する文字配置に関しては、ブラウザによる表示が様々な事が判りました。

◎Chromeの「unicode-bidi: plaintext;」の指定は、IE11やEdgeではサポートされず「unicode-bidi: embed;」と同じ扱いになる。
◎この事を利用し「plaintext」指定で Chrome、IE11、Edgeで同じ結果となるコーディングをしたところ、今度は「plaintext」に対応する Firefoxで、Chromeと異なる表示になる場合を発見。
◎そこでCSSハックで Chromeのみに「plaintext」の指定をした所、Forefoxでまた別の場所が異常表示になる。

この様に、一部を修正すれば他所に問題が出る事が続きました。 要するに、細部でブラウザによる挙動の差異があるので、「direction」をこの場合の文字配置に利用する事は不適切と判断せざるを得なくなりました。



要素の並ぶ方向を変えるには「flex-direction: row-reverse;」を使う


ここで問題になっている事を整理します。

▪「a要素」に対して「before擬似要素」「after擬似要素」を指定する必要がある。
▪ 3要素は、「before擬似要素」「a要素」「after擬似要素」の順に表示される。
▪「a要素」はボタン実体で、「overflow: hidden;」指定で3要素の一部を表示する。
▪「a要素」のマウスフォバーでボタンサイズを拡げ、3要素全てを表示するデザイン。
▪ 一般にボタン上に3要素は左側から並び、アンフォバー時は右端が隠れる。
▪ しかし、右側ボタンは3要素を右側から表示し、アンフォバー時は左端を隠したい。

この必要で、要素の並びを逆順にする必要があり、苦労して来たわけです。「direction」に代わるプロパティとして思い浮かぶのは「flex」です。「flex」を指定した要素に「flex-direction: row-reverse;」を指定すれば、要素の並びを左右反対に出来るのでは。 早速テストして見ると、うまく行きました。 今度は、変な問題が出ないでしょう。

●「次のページ」を表示する「a要素」に対し「display: inline-flex;」「flex-direction: row-reverse;」を指定して、ページャー部のコードを書き直しました。



アレンジの概要


ウェブフォントの「FontAwesome」を使用するので、スキンCSSの編集で下の「@import」指定をCSSの 最初の行に書き込む 必要があります。

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

なお、以下のサンプルの「」と異なったデザインのマークを使用したい場合は、以下のページから好みのものを探してください。



表層ページャーのアレンジ


以下のサンプルコードは、アレンジをする場合の参考として挙げたもので、全ての公式スキンに適合するかは不明です。

◎スキンCSSの表層ページャーに関連する部分を探し、以下のコードに置き換えるのが理想的。 関連する部分が不明な場合は、スキンCSSの最後尾に書き込む。
◎上記ページより取得したFontAwesomeの文字コードで、以下の「青文字」部分を置き換えて、矢印を好みのデザインとする事が出来ます。
◎FontAwesomeの文字の位置ズレや大きさが不適当になる事があります。 それらはコード上の「赤文字」を書換えて、配置やサイズを調整します。
◎その他にも、ボタン幅やページャー全体の幅調節が必要な場合もあります。

適合する公式スキンの場合で、ボタン文字の配置等を調整すれば、以下の例の様になります。 スキン本来のボタン枠線や背景色などの指定を受け継ぐので、それらのアレンジが必要な場合があります。

a0349576_18471028.png
a0349576_18482557.png

表層ページャーのアレンジサンプルCSS


/* 表層ページャー ***************** */
.pagerNavLink {
white-space: nowrap;
width: 100%; }


/* 中央部の5択ボタン */
.pagerNavLink .current,
.pagerNavLink a,
.pagerNavLink a:hover {
line-height: 23px !important;
overflow: hidden;
position: relative; }

.pagerNavLink .current {
color: #000 !important;
background: #ddd !important;
font-weight: normal !important; }

.pagerNavLink a:hover {
color: #000 !important;
background: #eee !important;
text-decoration: none !important; }


/* 左端のジャンプボタン */
.first a {
width: 24px; }

.first a::before {
content: "\f053\f053";
font-family: FontAwesome;
font-size: 12px;
color: #0080c0;
margin-right: 15px;
position: relative;
top: 0px;
left: 3px; }


/* 前のページ */
.pagerNavLink .previous a {
padding: 0 0 0 4px !important;
width: 50px !important; }

.previous a::before {
content: "\2006\2003Newer\2002";
margin-left: -1px; }

.previous a::after {
content: "\f053";
font-family: FontAwesome;
font-size: 12px;
color: #0080c0;
position: absolute;
top: 0px;
left: 3px; }


/* 次のページ */
.pagerNavLink .nextpage {
margin: 0 11px 0 10px !important; }

.pagerNavLink .nextpage a {
padding: 0 0 0 8px !important;
width: 46px !important; }

.nextpage a::before {
content: "\2003Older\2003\2003";
margin-left: -8px; }

.nextpage a::after {
content: "\f054";
font-family: FontAwesome;
font-size: 12px;
color: #0080c0;
position: absolute;
top: 0px;
right: 3px; }


/* 右端のジャンプボタン */
.last a {
width: 24px; }

.last a::before {
content: "\f054\f054\2003\2003";
font-family: FontAwesome;
font-size: 12px;
color: #0080c0;
position: relative;
top: 0px;
left: 5px; }




深層ページャーのアレンジ


深層ページャーは、公式スキンに多種のセレクタと構造が散在します。 そのため、適応率の悪いサンプルしか提示出来ませんが、以下の3種をアレンジの叩き台に挙げます。

◎「@import」指定は、「表層ページャー」と同様です。「表層ページャー」のアレンジで指定した場合は、再度指定する必要はありません。
◎以下の3種の内で、深層ページャーの表示が一番適当になるもの1種を探して利用します。
◎スキンCSSの深層ページャーに関連する部分を探し、以下のコードに置き換えるのが理想的。 関連する部分が不明な場合は、スキンCSSの最後尾に書き込む。
◎上記ページより取得したFontAwesomeの文字コードで、以下の「青文字」部分を置き換えて、矢印を好みのデザインとする事が出来ます。
◎FontAwesomeの文字の位置ズレや大きさが不適当になる事があります。 それらはコード上の「赤文字」を書換えて、配置やサイズを調整します。
◎その他にも、ボタンの幅やページャー全体の幅調節が必要な場合もあります。

セレクタが適合する公式スキンの場合で、文字配置を最適に調整した場合、深層ページャーは下の様なデザインになります。(ページ背景色やボタンの枠線や背景色は同じとは限りません)

a0349576_06011541.png

セレクタが一部しか適合しない場合、下の様なデザインになる場合が多くあります。

a0349576_06421862.png

この様な場合で、深層ページャーが上下に2行にあふれない場合なら、「」の配置を調整して以下の様にして使う事が可能です。

a0349576_06422227.png

深層ページャーのアレンジCSS (タイプ1)

/* 深層ページャー *****タイプ(1)********* */
#pager {
width: 80% !important;
margin-left: auto !important;
margin-right: auto !important; }

#pager .pre,
#pager .next {
width: 40% !important; }

#pager .pre a,
#pager .next a {
padding: 2px 10px 0 !important;
overflow: hidden;
white-space: nowrap; }

#pager .pre a:hover,
#pager .next a:hover {
color: #000 !important;
background: #fff !important; }


/* 前のページ */
#pager .pre .newer_page {
position: relative;
width: 45px !important;
margin-right: -200px;
float: left;
text-align: left;
text-decoration: none !important; }

.newer_page {
white-space: nowrap;
position: relative; }

.newer_page::before {
content: "Newer\2003";
margin-left: 12px; }

.newer_page::after {
content: "\f053";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: 2px;
left: 7px;
color: #0080c0; }

#pager .pre .newer_page:hover {
width: 300px !important; }


/* 次のページ */
#pager .next .older_page {
display: inline-flex !important;
flex-direction: row-reverse;
position: relative;
width: 45px !important;
margin-left: -200px;
float: right;
text-align: right;
text-decoration: none !important; }

.older_page {
display: inline-flex !important;
flex-direction: row-reverse;
white-space: nowrap;
position: relative; }

.older_page::before {
content: "\2002\2003Older";
margin-right: 10px; }

.older_page::after {
content: "\f054";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: 2px;
right: 5px;
color: #0080c0; }

#pager .next .older_page:hover {
width: 300px !important; }



深層ページャーのアレンジCSS (タイプ2)

/* 深層ページャー ****タイプ(2)********** */
#pageMove {
width: 80% !important;
margin-left: auto !important;
margin-right: auto !important; }

#pageMove .pre a,
#pageMove .next a {
padding: 2px 10px 0 !important;
overflow: hidden;
white-space: nowrap; }

#pageMove .pre a:hover,
#pageMove .next a:hover {
color: #000 !important;
background: #fff !important; }


/* 前のページ */
#pageMove .pre .newer_page {
position: relative;
width: 45px !important;
margin-right: -200px;
float: left;
text-align: left;
text-decoration: none !important; }

.newer_page {
white-space: nowrap;
position: relative; }

.newer_page::before {
content: "Newer\2003";
margin-left: 12px; }

.newer_page::after {
content: "\f053";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: 2px;
left: 6px;
color: #0080c0; }

#pageMove .pre .newer_page:hover {
width: 300px !important; }


/* 次のページ */
#pageMove .next .older_page {
display: inline-flex !important;
flex-direction: row-reverse;
position: relative;
width: 45px !important;
margin-left: -200px;
float: right;
text-align: right;
text-decoration: none !important; }

.older_page {
display: inline-flex !important;
flex-direction: row-reverse;
white-space: nowrap;
position: relative; }

.older_page::before {
content: "\2002\2003Older";
margin-right: 12px; }

.older_page::after {
content: "\f054";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: 2px;
right: 6px;
color: #0080c0; }

#pageMove .next .older_page:hover {
width: 300px !important; }



深層ページャーのアレンジCSS (タイプ3)

/* 深層ページャー *****タイプ(3)********* */
.pageTool {
width: 80% !important;
margin-left: auto !important;
margin-right: auto !important; }

.pageTool .pre {
margin-right: -80%; }

.pageTool .next {
margin-left: -80%; }

.pageTool .pre a,
.pageTool .next a {
padding: 2px 10px 0 !important;
overflow: hidden;
white-space: nowrap; }

.pageTool .pre a:hover,
.pageTool .next a:hover {
color: #000 !important;
background: #fff !important; }


/* 前のページ */
.pageTool .pre .newer_page {
position: relative;
width: 50px !important;
float: left;
text-align: left;
text-decoration: none !important; }

.newer_page {
white-space: nowrap;
position: relative; }

.newer_page::before {
content: "Newer\2003";
margin-left: 12px; }

.newer_page::after {
content: "\f053";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: 2px;
left: 7px;
color: #0080c0; }

.pageTool .pre .newer_page:hover {
width: 300px !important; }


/* 次のページ */
.pageTool .next .older_page {
display: inline-flex !important;
flex-direction: row-reverse;
position: relative;
width: 50px !important;
float: right;
text-align: right;
text-decoration: none !important; }

.older_page {
display: inline-flex !important;
flex-direction: row-reverse;
white-space: nowrap;
position: relative; }

.older_page::before {
content: "\2002\2003Older";
margin-right: 12px; }

.older_page::after {
content: "\f054";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: 2px;
right: 7px;
color: #0080c0; }

.pageTool .next .older_page:hover {
width: 300px !important; }





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


[PR]
by Ataron | 2018-02-27 21:05 | ブログスキンのアレンジ | Trackback | Comments(0)

ページャーをアレンジする(続1) / エキサイトブログ

2018年 02月 26日

問題のある「direction」プロパティ


非常に首尾よく導入出来たかに見えた「direction」プロパティですが、最初に対応が怪しいEdgeの問題に遭遇しました。 これは「unicode-bidi: plaintext;」を「unicode-bidi: embed;」に置き換えて改善したのですが、今度はまた別な問題が出て来ました。

下はChromeでの表示ですが、"」"(かぎ括弧)が変な所に表示され、ボタンの文字が左にズレています。

a0349576_19563299.png

「次のページ」のタイトルは、"「ブログ内検索」の検索ページを... >>"というものですが、ボタンにマウスを乗せて引用されたタイトルを見ると、頭の""がなくなっています。

a0349576_22154291.png

""は上図の場所に移動し、しかも向きが回転しています。 回転ではなく、""に対応する""の括弧に置き換わったと言うべきかも知れません。

この様な異常表示は、タイトル先頭に「括弧」がある場合らしく、場合はそう多くないでしょうが、放っておけません。



バグなのかと思ったが根は深く複雑な様子


下の様に DevToolsでタイトルを直接書き換え、色々なタイトルをテストすると、更に深刻な状況が判って来ました。

a0349576_20132421.png

●タイトルの先頭に半角の記号文字(アルファベットと数字を除いた全文字)があると、その文字はボタン側に飛ばされます。

a0349576_20235373.png

半角の括弧も同様に飛ばされますが、漢字の括弧と同様に対応する側の括弧に置き換わっています。

a0349576_20242762.png

●飛ばされるのは1文字ではなく、アルファベットと数字の半角、例えば"a""8"とかが出て来るまで、飛ばされてボタン上に現れます。

a0349576_20290218.png

上の真ん中は、本当のタイトルは "8+6=を計算する" というものです。 本来"8" で始まったものは飛ばされないはずが、これらが数式と判断されたのか、"=" "8+6"と何等かの基準で分断した上で飛ばされています。
また上の右端、半角括弧で挟まれた"123"は、本来は半角数字"1"から後は飛ばされないはずが、括弧でくくられているので纏めて飛ばされた様です。

こういった飛ばしには明らかな基準があり、「direction: rtl;」の機能に従っているらしく、単なるバグでは無いと思えます。

●全角文字(漢字)についても、ほぼ同様の基準がある様です。

a0349576_20395608.png

「ひらがな」「カタカナ」「数字」等は飛ばされませんが、タイトル先頭にある「記号文字」「括弧」等やその連続は、上図の様に飛ばされます。



タイトル先頭の飛ばしを引き起こす条件


下は先頭の "「" が飛ばされるタイトル例のHTMLです。

a0349576_20545003.png

「before擬似要素」は FontAwesomeの「>」マークを表示させ、「position: absolute;」でタイトル後方のボタン位置に移動します。「after擬似要素」は「Older」の文字をタイトル後方に表示させるコードです。

タイトル幅は色々と変わるので、「position: absolute;」を使用しないとボタンの定位置に「>」マークを置けません。 このコードで「absolute」指定は必須です。 しかし、この「absolute」指定を入れるとタイトル先頭文字の飛ばしが生じます。 何らかの関係がある様ですが、「direction」指定のある場で「position: absolute;」を使用すると、その文字配列に影響する事は事実です。

また、これを嫌って「before擬似要素」自体を削除しても、再び飛ばしが生じます。 どうも「absolute」指定が無くても「擬似要素」自体が相性が悪い様です。

これではどうにもならないのですが、Edgeの非対応で撤回した「unicode-bidi: plaintext;」を指定すると「direction: rtl;」の飛ばしが無くなり、全く問題なく使えます。 どうもこれが正しい指定の様に思え、遅れたブラウザ Edgeなどは無視したくなります。

とは言え、現在はコードを見直して、回避策、代案を練っている所です。




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


[PR]
by Ataron | 2018-02-26 21:37 | ブログスキンのアレンジ | Trackback | Comments(0)

ページャーをアレンジする / エキサイトブログ

2018年 02月 25日

何度もアレンジして来たページャー


エキサイトのページャーは、何度もアレンジして来たパーツです。 拘って来た事のひとつは矢印ですが、最近までのデザインは「>」「>>」というエキサイト本来のフォントを使ったデザインです。

ページャーは実際は2種類あり、私は「表層モード」「深層モード」と勝手に名前を付けてます。
「表層モード」は自ブログの先頭から複数記事を纏めて表示するモードで、下の様なデザインです。

a0349576_14381023.png

「深層モード」は1記事ずつ表示し、前後ページにのみ移動できるデザインです。

a0349576_10280220.png

上の2図は本来のページャーをアレンジしたものですが、機能は全てのスキンと同様です。

一時期は全てグラフィックに置き換えたり、矢印のみをグラフィックとしたり、色々と弄って来たのですが、次第に拡大しても綺麗なベクターフォントを使う様になって来ました。 ただ、この矢印は余りしまりがなく(特にメイリオの場合)、FontAwesomeを試して見ました。


アレンジの問題点


●「Newer」「Older」の文字列に「FontAwesome」のマーク文字を詰め込む事は可能ですが、色が他の文字と同じだと目立ち過ぎてしまう事、周囲の文字との並びの配置やサイズが調節できないなどの問題が出て来ます。 既に「< Newer」「Older >」を「擬似要素」で表示しているので、使っていない「before擬似要素」「after擬似要素」で「<」「>」に相当するマーク文字を入れる必要があります。

●両端の「>>」に使うマーク文字も含めて行くと、案外と使えるマーク文字が無いものです。 以下は色々試したもの。

a0349576_15143227.png
a0349576_15145467.png
a0349576_15152684.png

最終的に、最後のデザインを採用しました。 なお、マーク文字を青色に着色しているのは、他の文字と同じ黒ではマークが目立ち過ぎるからです。

●特に深層モードで問題になった事ですが、「Older」側はある問題に引っかかりました。 下は、ページャーにオンマウスしない場合に隠されてた文字列を表示していて、ページャー内で文字の並ぶ方向を「→」で示しています。

a0349576_11111802.png

「Newer」は「before擬似要素」で「< Newer << 明石公園 …」と、左端に埋め込んで右側を隠し、簡単にボタンが出来ます。 これと対称の配置をするため、「Older」を「after擬似要素」で「明石公園 … >>」の右端に埋め込むと、上図の様に文字列右端の「Older」をボタン(inline-block)内に表示できなくなります。

実は今までは、「before擬似要素」で「Older > 明石公園 … >>」と左側に埋め込んで、右側を隠せたのですが、今回は「>」が別追加になり、「> 明石公園 … >> Older」の形にする必要が出来たのです。

これはCSS指定の「右端寄せ」などで出来そうに思いますが、これがテコでも駄目です。 そして辿り着いたのが、右側から文字を並べる言語に対応した「direction」プロパティです。 普通、「a要素上のテキスト」は左から右へ文字が並びますが、「direction: rtl;」指定でアラビア文字の様に逆並びになります。 また「unicode-bidi」指定が一緒に必要です。 これは、単語内部を「redlO」とするのか、単語はそのままとするのか等の指定で、ここでは「unicode-bidi: embed;」「unicode-bidi: plaintext;」が適し、特に後者が一番良さそうでした。

この指定で、コードが完全に対称化が出来、シンプルになります。

a0349576_12074530.png


〔追記〕
「unicode-bidi: plaintext;」は最適ですが、Edgeでサポートが無く甚だしく表示が崩れてしまう様です。 Chrome上で「unicode-bidi: embed;」の指定で目的の表示になる様に調整したものはEdgeでも問題が無い様なので、下のサンプルコードは「embed」のみを使ったものに改めました。

〔追記〕2018.02.27
「embed」使用では、Chrome / Firefox でタイトル先頭の記号文字がボタン上に表示される問題があり、深層モードに関しては以下のコードは改善が必要と判断しています。 ページャーをアレンジする(続1)(続2)を参照ください。



「表層モード」ページャーのアレンジ


今回のスキンアレンジの前提として、ウェブフォントの「FontAwesome」をブログ画面上で表示出来る様に「呼び込んでおく」必要があります。 これは、「@import」指定をスキンのCSSの最初の行に書き込む必要があります。 最近は以下のコードが推奨です。

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

これによって、以下のページのフォントを利用できる様になります。


以下のコードは当方スキンで有効なコードですが、全ての公式スキンに適合するかは不明です。 以下はアレンジをする場合の参考として挙げるものです。

◎スキンCSSの表層部分に関連する部分を探し、以下のコードに置き換えるのが理想的。 表層部分が不明な場合は、スキンCSSの最後尾に書き込む。
◎上記ページより取得したFontAwesomeの文字コードで、以下の「青文字」部分を置き換えて、矢印を好みのデザインとする事が出来ます。
◎FontAwesomeの文字の位置ズレや大きさが不適当になる事があります。 それらはコード上の「赤文字」を書換えて、配置やサイズを調整します。
◎その他にも、ボタンの幅やページャー全体の幅調節が必要な場合もあります。


表層ページャーのアレンジCSS



/* 表層ページャー ***************** */
.pagerNavLink {
white-space: nowrap;
width: 100%; }


/* 中央部の5択ボタン */
.pagerNavLink .current,
.pagerNavLink a,
.pagerNavLink a:hover {
line-height: 24px !important;
overflow: hidden;
position: relative; }

.pagerNavLink .current {
color: #000 !important;
background: #ddd !important;
font-weight: normal !important; }

.pagerNavLink a:hover {
color: #000 !important;
background: #eee !important;
text-decoration: none !important; }


/* 左端のジャンプボタン */
.first a {
width: 24px; }

.first a::before {
content: "\f053\f053";
font-family: FontAwesome;
font-size: 12px;
color: #0080c0;
margin-right: 15px;
position: relative;
top: 0px;
left: 3px; }


/* 前のページ */
.pagerNavLink .previous a {
padding: 0 0 0 4px !important;
width: 50px !important; }

.previous a::before {
content: "\2006\2003Newer\2002"; }

.previous a::after {
content: "\f053";
font-family: FontAwesome;
font-size: 12px;
color: #0080c0;
position: absolute;
top: 0px;
left: 3px; }


/* 次のページ */
.pagerNavLink .nextpage {
margin: 0 11px 0 10px !important; }

.pagerNavLink .nextpage a {
direction: rtl;
unicode-bidi: embed;
padding: 0 0 0 8px !important;
width: 46px !important; }

.nextpage a::after {
content: "\2003\2003Older";
margin-right: 17px; }

.nextpage a::before {
content: "\f054";
font-family: FontAwesome;
font-size: 12px;
color: #0080c0;
position: absolute;
top: 0px;
right: 3px; }


/* 右端のジャンプボタン */
.last a {
direction: rtl;
unicode-bidi: embed;
width: 24px; }

.last a::before {
content: "\f054\f054\2003\2003";
font-family: FontAwesome;
font-size: 12px;
color: #0080c0;
position: relative;
top: 0px;
left: -3px; }






「深層モード」ページャーのアレンジ


こちらは、エキサイトが旧ページャーの形式を継いだため、公式スキンに多数のセレクタと構造が散在します。 それを画一的にアレンジする事は出来ず、「表層モード」より更に適応性の悪いサンプルしか提示出来ません。 FontAwesomeを使ったアレンジの叩き台として、一応以下の3種のサンプルコードを挙げておきます。

当方で33件のユーザーページを調べたところ、10件が適合、19件が調節が必要だが使用可、4件は本文幅が小さ過ぎる等の理由で崩れて不可、という結果でした。


◎「@import」指定は、「表層モード」と同様です。「表層モード」のアレンジで指定した場合は、2度指定する必要はありません。
◎以下の3種の内で、一番の適当なもの1種を探して利用します。
◎スキンCSSの深層部分に関連する部分を探し、以下のコードに置き換えるのが理想的。 深層部分が不明な場合は、スキンCSSの最後尾に書き込む。
◎上記ページより取得したFontAwesomeの文字コードで、以下の「青文字」部分を置き換えて、矢印を好みのデザインとする事が出来ます。
◎FontAwesomeの文字の位置ズレや大きさが不適当になる事があります。 それらはコード上の「赤文字」を書換えて、配置やサイズを調整します。
◎その他にも、ボタンの幅やページャー全体の幅調節が必要な場合もあります。


深層ページャーのアレンジCSS (タイプ1)

/* 深層ページャー *****タイプ(1)********* */
#pager {
width: 80% !important;
margin-left: auto !important;
margin-right: auto !important; }

#pager .pre,
#pager .next {
width: 40% !important; }

#pager .pre a,
#pager .next a {
padding: 2px 10px 0 !important;
overflow: hidden;
white-space: nowrap; }

#pager .pre a:hover,
#pager .next a:hover {
color: #000 !important;
background: #fff !important; }


/* 前のページ */
#pager .pre .newer_page {
position: relative;
width: 45px !important;
margin-right: -200px;
float: left;
text-align: left;
text-decoration: none !important; }

.newer_page {
white-space: nowrap;
position: relative; }

.newer_page::before {
content: "Newer\2003";
margin-left: 12px; }

.newer_page::after {
content: "\f053";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: 2px;
left: 7px;
color: #0080c0; }

#pager .pre .newer_page:hover {
width: 300px !important; }


/* 次のページ */
#pager .next .older_page {
direction: rtl;
unicode-bidi: embed;
position: relative;
width: 45px !important;
margin-left: -200px;
float: right;
text-align: right;
text-decoration: none !important; }

.older_page {
white-space: nowrap;
position: relative; }

.older_page::before {
content: "\f054";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: 2px;
right: 7px;
color: #0080c0; }

.older_page::after {
content: "\2003Older";
margin-right: 12px; }

#pager .next .older_page:hover {
width: 300px !important; }



深層ページャーのアレンジCSS (タイプ2)

/* 深層ページャー ****タイプ(2)********** */
#pageMove {
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important; }

#pageMove .pre a,
#pageMove .next a {
padding: 2px 10px 0 !important;
overflow: hidden;
white-space: nowrap; }

#pageMove .pre a:hover,
#pageMove .next a:hover {
color: #000 !important;
background: #fff !important; }


/* 前のページ */
#pageMove .pre .newer_page {
position: relative;
width: 45px !important;
margin-right: -200px;
float: left;
text-align: left;
text-decoration: none !important; }

.newer_page {
white-space: nowrap;
position: relative; }

.newer_page::before {
content: "Newer\2003";
margin-left: 12px; }

.newer_page::after {
content: "\f053";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: -1px;
left: 0px;
color: #0080c0; }

#pageMove .pre .newer_page:hover {
width: 300px !important; }


/* 次のページ */
#pageMove .next .older_page {
direction: rtl;
unicode-bidi: embed;
position: relative;
width: 45px !important;
margin-left: -200px;
float: right;
text-align: right;
text-decoration: none !important; }

.older_page {
white-space: nowrap;
position: relative; }

.older_page::before {
content: "\f054";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: -1px;
right: 0px;
color: #0080c0; }

.older_page::after {
content: "\2003Older";
margin-right: 12px; }

#pageMove .next .older_page:hover {
width: 300px !important; }


深層ページャーのアレンジCSS (タイプ3)

/* 深層ページャー *****タイプ(3)********* */
.pageTool {
width: 80% !important;
margin-left: auto !important;
margin-right: auto !important; }

.pageTool .pre {
margin-right: -80%; }

.pageTool .next {
margin-left: -80%; }

.pageTool .pre a,
.pageTool .next a {
padding: 2px 10px 0 !important;
overflow: hidden;
white-space: nowrap; }

.pageTool .pre a:hover,
.pageTool .next a:hover {
color: #000 !important;
background: #fff !important; }


/* 前のページ */
.pageTool .pre .newer_page {
position: relative;
width: 50px !important;
float: left;
text-align: left;
text-decoration: none !important; }

.newer_page {
white-space: nowrap;
position: relative; }

.newer_page::before {
content: "Newer\2003";
margin-left: 12px; }

.newer_page::after {
content: "\f053";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: 2px;
left: 7px;
color: #0080c0; }

.pageTool .pre .newer_page:hover {
width: 300px !important; }


/* 次のページ */
.pageTool .next .older_page {
direction: rtl;
unicode-bidi: embed;
position: relative;
width: 50px !important;
float: right;
text-align: right;
text-decoration: none !important; }

.older_page {
white-space: nowrap;
position: relative; }

.older_page::before {
content: "\f054";
font-family: FontAwesome;
font-size: 12px;
position: absolute;
top: 2px;
right: 7px;
color: #0080c0; }

.older_page::after {
content: "\2003Older";
margin-right: 12px; }

.pageTool .next .older_page:hover {
width: 300px !important; }







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


[PR]
by Ataron | 2018-02-25 13:56 | ブログスキンのアレンジ | Trackback | Comments(0)

最初のページ表示の瞬間をデザインする / エキサイトブログ

2018年 02月 18日

ブログページ表示の最初でもたつく事がある


SSL移行に関係する問題なのか、ブログ表示の最初に、以前に気にならなかった状態が一瞬表示されます。 表示される時間はアクセスした場合で異なります。 長い場合でも1秒足らずですが、下の様にヘッダーの背景画像がロードされず、みっともない感じです。

a0349576_14471562.png

私のスキンのペースデザインは何年も昔のもので、ヘッダー部の背景に軽い画像を2個使う、「ロードの遅い環境」でも問題の出難いタイプのスキンデザインです。 現在は大きな(重たい)背景画像を使う公式スキンも珍しくないのですが、私は本文の画像を見易くするために、ヘッダーや背景などはシンプルな方が良いという方針のアレンジです。

それにもかかわらず、軽い背景画像のロードでもたつくのは問題です。 今後も改善しない可能性があり得るので、少し対策をしました。 重たい背景画像を使うスキンでロード待ちが気になる場合は、このページの対策が少しは参考になるかも知れません。



ブログページが表示されるまでのステップ


ブログページが表示されるまでのステップを細かく観察してみます。 一旦ページが表示された後、ページャーで移動する場合は、ブラウザのキャシュが機能しますから、あくまでも最初にページを開く場合を調べました。 これはスキンによっても異なる可能性がありますが、以下は私の環境を前提とした話です。

下は、ページを開く最初の1秒位のおおまかなステップです。

a0349576_15105822.png

興味深いのはページャーと右メニューが最後に呼び込まれる事です。 私のスキンの場合、下部ブロックを「本文」と「右メニュー」が分割しているので、先に表示された「本文」が「右メニュー」で後から押されて幅変化します。 こういう変形は無い方がスムーズですが、今のところ改善方法がみつかりません。



背景画像がロードされるまで 背景色で時間稼ぎする


ヘッダー背景画像が遅れる場合、最も簡単な対処方法は、デフォルトの背景色を指定しておく事でしょう。

#HEADER {
background-color: #b8dcef;
background-image: url("//pds.exblog.jp/pds/xxxxxxxxx.gif");

上は一般例ですが、「background-color: #b8dcef」という背景色の指定と、「//pds.exblog.jp/pds/xxxxxxxxx.gif」という背景画像の指定を同時に行っています。 後方に背景画像を指定しているので、背景画像が無い状態(未ロード)では背景色の方が表示され「間つなぎ」になり、背景画像がロードされると、それが優先表示されるという塩梅です。

「間つなぎ」の表示は下の様になります。

a0349576_16052213.png

Htmlのヘッダーへの書き込みやスクリプト等を使えないエキサイトでは、この方法が妥当と思います。 立体感などはないですが、白い素のヘッダーに比べると本来の背景画像に似た色の背景色があれば、かなり印象が違います。



メニューをフェードイン表示する


実は、最初にページ全体のフェードインを試したのですが、これも効果があります。 背景画像が無い最初の表示をぼかしてしまうわけです。 しかし、このロード遅れは最初にページを開く時だけで、ページャー移動時などでは遅れがなくなります。 ところが、ぺージのフェードインはページャー移動でも常に実行されるので、ちょっと「余計」な印象で却下しました。 これは好みの問題ですが。

一方、右メニューの表示遅延、本文の押し戻しに関しては、ページャー移動時も毎回生じます。 そこで、メニューをフェイドイン表示してみる、ちょっと良い感じになりました。 メニューにはこのフェードインを採用する事に。

#R_MENU {
display: table-cell;
width: 180px;
animation: fadeIn .5s ease-out 0s 1 normal; }

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1} }


上は一般的なメニューの例ですが、太字の部分が「0.5sec」のフェードインをさせる指定です。 こういう指定を「body」等に指定すれば、ページ全体のフェードインになります。




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



[PR]
by Ataron | 2018-02-18 16:36 | ブログスキンのアレンジ | Trackback | Comments(0)

スキン「レインボー」の惜しい部分をアレンジ

2018年 01月 21日
いつも拝見しているページで、タイトル部分が非常に気になるスキンがあります。 このブログ主、細かい背景のズレなんか気にしてないって感じ。 ブログ内容が豊富で、そんな些細な事にかまってないところがまたカッコイイんですが、見るたびにタイトルに目が行くので...

で、ついスキンアレンジをしてしまう。 きっと彼の耳には届かないだろうけど。



時代を感じさせるスキン


このスキンは、未だ「border-radius」「box-shadow」等のCSS修飾機能が流布しない時代のスキンで、タイトル背景には「画像」が使われてます。 デザイン自体は個性的で愛用している方を他でも見ます。

タイトル文字数が少ない場合、綺麗に背景の枠に収まります。

a0349576_10092282.png

しかしタイトルが複数行の場合、下の様に背景枠からはみだして残念です。 背景の画像サイズが変わらないので仕方がありません。

a0349576_11224241.png

また、タイトルが背景に対して左に偏っています。 これは、投稿日付を右側に入れる案が途中で中止になった結果らしく、気になる部分です。



勝手にCSSアレンジ


タイトル枠の背景を、最近のCSSで描画する様にアレンジしてやれば、複数行のタイトルなら背景枠もそれに応じて自動的に拡がる様に出来ます。

アレンジ前
a0349576_10242747.png

アレンジ後
a0349576_10254933.png

背景のタイトル枠は、本来の「画像」をなるべく忠実に真似たCSSによる描画です。

上の例は、たまたまタイトル文字数が元スキンのタイトル幅にぴったりで、アレンジ前は2行目がキリ良く「~」で始まってます。 アレンジ後の方は「~」が1行目に廻り、逆に悪くなった様ですが、これは偶然です。 タイトル中にスペースを入れる等で行送りを調節して来た場合は、このアレンジで狂いが生じますが、そうでないなら、多くの場合で行送りは良い方に結果するでしょう。(これまでの投稿も含めてです)

下は良い結果の例です。

アレンジ前
a0349576_10352401.png

アレンジ後
a0349576_10361158.png

エキサイトのスキンは、タイトル文字はユーザーの意図で改行出来ません。 このアレンジで、タイトルの一列の文字数が増えます。 また、左右のバランスが改善されると思います。



CSSコード


スキンをアレンジするには、ブログ設定の「デザイン設定」の「PCデザイン設定」でスキン編集を行う必要があります。 エキサイトのスキンは「HTML」「CSS」のセットになっています。 その「CSS」の末尾に以下のアレンジCSSを追記すれば、ブログページの表示がアレンジされます。

タイトル枠背景のアレンジCSS


DIV.POST_HEAD {
padding: 0;
margin-bottom: 50px;
overflow: visible; }

.POST_HEAD table {
position: relative;
top: 10px;
left: 10px;
width: 550px;
padding: 15px !important;
background: #fff; }

.POST_HEAD tbody {
display: block;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
border-radius: 8px;
background: #f9f9f9;
box-shadow: inset 2px 2px 4px #ccc; }

.POST_HEAD td:first-child {
width: 100%; }

.POST_HEAD h2 {
margin: 10px 30px 8px; }




(注意)
同じスキン「レインボー」で、他の配色を利用している場合は、枠周囲の配色が異なるものがあります。その場合は、上のコードの色指定の部分を変更すれば使えます。 他配色が必要な方がおられましたら、コメントください。

スキンアレンジが初めての場合、CSSを書き換えても上手く反映しない事があります。 以下のページの手順を参照ください。




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



[PR]
by Ataron | 2018-01-21 12:12 | ブログスキンのアレンジ | Trackback | Comments(0)