<   2016年 05月 ( 3 )   > この月の画像一覧

ブログのイメージを左右する、サムネイル画像。
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="">


[PR]
by exblog-tips | 2016-05-18 15:50 | 本文周り | 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)

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


by エキブロまん