タグ:ブログスキン ( 4 ) タグの人気記事

エキサイトのブログスキンによっては、文字がちょっと小さいものがありますよね、もしくはその逆で大きいとか。
今回は文字の大きさを調整するtipsをご紹介します。

HTMLベーシック3のフォントサイズを変えてみる

a0342241_18062453.png
シンプルで使い勝手のいい、HTMLベーシック3のデザインスキンをベースに、フォントの大きさを変更してみます。
悲しいかな年々目が悪くなってきていて、本文が少々小さくて読みにくいのです…。
HTMLベーシック3のスキンの場合、【body】のfont-sizeを変更してあげれば、全体が一気に変更できます。
ただし、スキンによっては変更できなかったりするので、ご注意くださいね。

a0342241_16481066.png

body {
margin: 0;
padding: 0;
border: none;
list-style-type: none;
font-style: normal;
font-weight: normal;
font-size: 78%;
text-align: left;
background: #fff ;
white-space: normal;
color: #fff;
line-height: 1.6;
font-family: "游ゴシック体", "メイリオ", "ヒラギノ角ゴ Pro W3", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif !important;}

font-size: 78%; の部分を好きな数字にしてみましょう。100%に近いほど大きく、小さいほど文字も小さくなります。


before

a0342241_17432681.png

after

a0342241_17432646.png


だいぶ見やすくなりましたね!


[PR]
by exblog-tips | 2016-06-23 18:02 | 本文周り | Comments(0)

今回は、エキサイトブログのシンプルなスキン「ベーシック2」のヘッダーの色を変更してみたいと思います。

a0342241_15352309.png
現状選べるカラーは
  • black
  • dark brown
  • brown
の三種類。早速変更してみましょう。

1. 変更する色を決める

このスキンではヘッダーと日付の部分の二箇所に色がついています。
ヘッダーだけ変えただけだとちぐはぐになってしまうので、「二色」色を決めておきましょう。
基本的に何色でも構いませんが、1色だけなんとなく色が決まっているという方は下記のサイトで色を決めるのがオススメです。
>指定した色の明るい色・暗い色を作成するツール

a0342241_15400787.png
こちらのサイトは、1色の色を入れるだけで、暗い色明るい色でカラーパレットを作ってくれます。
下の方に行くと細かいグラデーションパターンも出てくるので気に入った色を入れてみましょう。

また、色何色にすればいいかも悩む…というあなたにはこちらがオススメ。
>Flat Inspire

a0342241_15422122.png
フラットデザインを紹介するサイトですが、色ごとにまとまっているページがあります。
こちらはいけてるデザイナーさんたちが使っている色なので安心な感じ…w

今回は下記の2色に決めました。
a0342241_15442413.png
a0342241_15442480.png

2. CSSを変更する

色が決まったら早速CSSを変更しましょう。今回変更するのは下記の2箇所です。

*ヘッダー部.header-wrap .ttl-wrap .header-inner

a0342241_15480505.png

*日付部#blog-main .post-outer .post-inner .post-date

a0342241_15480522.png

それぞれ、backgroudの箇所にさっき選んだ色を入れて保存しましょう。

完成です!

a0342241_15355325.png


[PR]
by exblog-tips | 2016-05-13 16:00 | ヘッダー周り | Comments(0)
a0342241_15115443.png

ブログスキンの「梅」背景の水彩はとってもいい感じですよね。でもこれ、梅なしの方がいい気がする…
と勝手に思ったのでカスタマイズしてみましょう。

1. ブログスキン「梅」を編集する

設定>デザインスキンから梅を探しましょう。

a0342241_14361007.png

編集を押したら、CSSから下記のクラスを探します。

.header-wrap .ttl-wrap:after

a0342241_14360351.png

2. クラスを削除orコメントアウトする

このクラスごっそり消すと、梅が消えます。
心配な方はコメントアウトしてみましょう。こんな感じで不要なテキストをくくるとコメントとしてみなされてCSSに反映されません。/* 不要なテキスト */

/*
.header-wrap .ttl-wrap:after {
content: '';
position: absolute;
background: url(http://md.exblog.jp/skn/img/a/01/34/6/top_visual.png) no-repeat right top;
width: 630px;
height: 250px;
top: -10px;
right: -134px;
background-size: contain;
z-index: -1;
}
*/

3. できあがり

作成ボタンを押して、マイスキンに登録しましょう。
a0342241_15014162.png

こんな感じで梅が消えました!簡単ですね。
代わりの画像を入れてみたい方は上記のurlの部分をお好きなurlに変えてみましょう。


[PR]
by exblog-tips | 2016-05-12 15:12 | ヘッダー周り | Comments(0)

ブログを投稿した後にページが崩れた、なぜでしょう?というお問い合わせをたまにいただきます。
アプリから投稿している人に多いらしいのですが、そういう場合、決まって投稿した記事のHTMLがおかしなことになっている場合が多い。
そういう場合に簡単になおす裏技をご紹介します。

PC or スマホから記事を保存しなおす

たったこれだけです。
崩れた時の記事も含め、前後5記事くらい「記事一覧」→「編集」→「保存」で、

何もせず保存だけしなおしてみましょう。


HTMLやCSSとか触っていないのに、という方はだいたいこれで元に戻ります。

これってどうやら、HTMLのタグがきちんと閉じられていなかった場合、
PC・SP(web)では自動調整で、余計なタグを消してくれるんですが、
アプリだと調整が入らないので崩れちゃうことがあるみたいです。
アプリで書いている人はかなりクリティカルかもしれませんね・・・
参考になれば幸いです。


[PR]
by exblog-tips | 2016-01-21 16:56 | 本文周り | Comments(0)

エキサイトブログをとことん使い倒すブログです。こんなことできないかな?をゆるっと募集中!


by エキブロまん