人気ブログランキング | 話題のタグを見る

コメント解放宣言

こんなことできないかな?をゆるっと募集中!
みたいなことを言っていたくせに、コメントをずっと閉じていたため、募集もクソもなかったことに気がつきました。
そんなわけで、コメント開いたのでエキブロユーザーの方でもし何かあればお気軽に話しかけてくださいー。

即返信はできないかもしれませんが、お返事返せれば返します。
まぁでも聞く前に一旦ググろーね!グーグル先生に聞けば大抵のことは解決しますので。

最近エキブロでは、デザインも大きく変わって
無理やりしかできなかったタイル式みたいな見せ方も導入されて
一段と使いやすくなりましたね。
このブログも近々リニューアルしたいところです。



にほんブログ村 ブログブログ ブログノウハウへ
# by exblog-tips | 2017-11-16 18:03 | お役立ち

エキサイトのブログスキンによっては、文字がちょっと小さいものがありますよね、もしくはその逆で大きいとか。
今回は文字の大きさを調整する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


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


# by exblog-tips | 2016-06-23 18:02 | 本文周り

ブログのイメージを左右する、サムネイル画像。
Wordpressなどでは自由にサムネイルをアップロードすることができますが、エキサイトブログでもちょっと裏技的ですが可能です!
ちなみにエキサイトブログでは、PC画面ではサムネイルという概念自体がないのですが
SPだと下記のように自動でサムネイルが抽出されますね。
この画像を意識して設定してみましょう。ポイントは記事を書く時です。

エキサイトブログで画像のサムネイルを好きなものにする_a0342241_10491720.jpg

サムネイルにくる画像は、独自タグを使用した場合だけ

ブログを書く前に、まずはどの画像をサムネイルにするか決めていますか?
記事投稿画面の左にある画像のアップロードから何気なくチョイスしていませんか?

エキサイトブログで画像のサムネイルを好きなものにする_a0342241_11101895.png
エキサイトブログではこのアップロードした画像をテキスト上でクリックすると、下記のようなタグが勝手に作られます。

[ #IMAGE|a0342241_適当な数字.jpg|201605/18/41/|mid|750|1334# ]

この独自タグで作られた最初の画像がサムネイルになる仕組みです。
なので、一番最初に使う画像は意識して使うと良いかもしれません。

でも、どうしても話の順序的に、3番目の画像を使いたいの…!という場合。

一番初めの画像は前置きで必要だけど、サムネイルにはちょっと微妙。
そんな時にn番目の画像をサムネイルにするには。
ずばり、n番目より前の画像を独自タグを使わない。
というわけで、n番目より前の画像は下記のタグを用いましょう。

<img src="" alt="">

画像のURLも簡単にとれます。使いたい画像の上で右クリック!
「リンクアドレスをコピー」を選びましょう。

エキサイトブログで画像のサムネイルを好きなものにする_a0342241_11270050.png

imgタグにあてはめて、下記のようにすれば画像が表示されるはず。
n番目より前の画像はこのやり方で表示させてあげましょう。

<img src="http://pds.exblog.jp/pds/1/201605/18/41/a0342241_11270050.png" alt="">


# by exblog-tips | 2016-05-18 15:50 | 本文周り

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

エキサイトブログスキン「ベーシック2」のヘッダーの色を変更する_a0342241_15352309.png
現状選べるカラーは
  • black
  • dark brown
  • brown
の三種類。早速変更してみましょう。

1. 変更する色を決める

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

エキサイトブログスキン「ベーシック2」のヘッダーの色を変更する_a0342241_15400787.png
こちらのサイトは、1色の色を入れるだけで、暗い色明るい色でカラーパレットを作ってくれます。
下の方に行くと細かいグラデーションパターンも出てくるので気に入った色を入れてみましょう。

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

エキサイトブログスキン「ベーシック2」のヘッダーの色を変更する_a0342241_15422122.png
フラットデザインを紹介するサイトですが、色ごとにまとまっているページがあります。
こちらはいけてるデザイナーさんたちが使っている色なので安心な感じ…w

今回は下記の2色に決めました。
エキサイトブログスキン「ベーシック2」のヘッダーの色を変更する_a0342241_15442413.png
エキサイトブログスキン「ベーシック2」のヘッダーの色を変更する_a0342241_15442480.png

2. CSSを変更する

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

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

エキサイトブログスキン「ベーシック2」のヘッダーの色を変更する_a0342241_15480505.png

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

エキサイトブログスキン「ベーシック2」のヘッダーの色を変更する_a0342241_15480522.png

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

完成です!

エキサイトブログスキン「ベーシック2」のヘッダーの色を変更する_a0342241_15355325.png


# by exblog-tips | 2016-05-13 16:00 | ヘッダー周り
ブログスキン「梅」をカスタマイズする_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に変えてみましょう。


# by exblog-tips | 2016-05-12 15:12 | ヘッダー周り

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


by エキブロまん