タグ:エキサイトブログ ( 22 ) タグの人気記事

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

カスタマイズ用のスキンを使用するときに、
このグレイの部分いらないのになー、と常々思います。

a0342241_14471804.png

もはやサイトのタイトルとかは画像にしたいなーと思う方も多いはず。
やれSEOだのでブログのタイトルはテキストの方が良いなど言われておりますが、やっぱり画像だと見栄えがいいですよね。
そんなわけで今回はブログのロゴを作って背景画像を自分で作成しようと思います。

オリジナルのロゴを作る

最近のサービスは本当にありとあらゆることがweb上でできますね。まずはロゴサービスから。
割と有名でしょうか?知る人は知るロゴ作成サイト。結構格好いいロゴができます。

a0342241_14494036.png
http://www.squarespace.com/logo

今回はこんなロゴを作ってみました。あなたのブログタイトルで作るといいですね!

a0342241_14532372.png

背景となる画像を用意する

ロゴができたら上に載せる背景を探しましょう。ロゴだけでも良いのですがやっぱり背景があった方が雰囲気が出ますね。
今回は女子向け画像に定評のあるGIRLY DROPというサイトで画像をゲット。女子っぽい。

a0342241_14555132.jpg
GIRLY DROP

画像を合成する

画像が二つ用意できたら合成しましょう。合成って言ってもこの場合は空いた真ん中のスペースにロゴを配置します。
だけどphotoshopなどのペイントソフトなんて持っていないよというあなたに朗報です!
これまたweb上で完結できるサイトがあるんですね。便利。

a0342241_14580535.png
pixlr.com

上部メニューのファイル→画像を開くから背景となる画像とロゴ画像を開きましょう。開いたら右側のレイヤーを背景画像にドラッグ&ドロップ。

a0342241_15065193.png

やっつけですがこんな感じで完了!

a0342241_15074645.jpg

スキンに反映

できた画像をエキサイトブログにアップロードしてURLを控えましょう。それができたらスキンに反映させていきます。まずはデザインスキン→カスタマイズから、お好きなカスタマイズカラムをチョイスしてください。
編集から画面に入ります。

a0342241_15130277.png

HTMLの修正

画像はHTMLに書かれているので、HTMLの上から2番目の行をみてください。赤枠の箇所がURLになります。
ここに先ほど作ったロゴ入り画像のURLを入れます。一回保存。

a0342241_15130256.png

不要なものを消していく

保存してプレビューするとスキンが崩れているのがわかります。せっかく画像にロゴ入れたのでこの灰色の部分はまるっと不要。
CSSを使って消していきましょう。CSSの一番下に下記を挿入しましょう。

a0342241_15121311.png
#titlearea { display: none;}

display: none;は、画面上から要素を消してくれる便利なCSSです。
他にもこれはいらないなー、という部分があればクラス名を指定してセットしてあげると消えてくれます。
削除するとなくなってしまいますが、display: none;は、タグ自体はそこにあるけど非表示にしているだけ、という概念なので
また戻したいときなどに便利ですね。

a0342241_15210232.png

そんなわけで、ブログスキンのカスタマイズの完成です!
ちなみに元画像のサイズは、800×300です。これを目安につくると変に崩れたりしないのでできればこのサイズで作るといいかも。
あなたのブログでも是非試してみてくださいね。


[PR]
by exblog-tips | 2016-02-25 16:07 | ヘッダー周り | Comments(0)

エキサイトブログの「夏の海」のスキンを作って、イラストの差し替えを行ってみましょう。
スタンダードなテンプレートのヘッダーは下記です。

a0342241_15512737.png

好きな画像を用意する

ヘッダーに置く新しい画像を書くorフリー素材などで探してみましょう。
今回はガーリー素材のイラストサイトからイラストをいくつか落としてみました。
どれにするか決めたら、エキサイトブログにアップロードしてURLを控えておきましょう。
細かいアップロードの仕方はエキサイトブログのcolorfulのブログを使って背景画像をアレンジの記事で確認してください。

a0342241_15443573.png

とても可愛らしいイラストが満載の素材サイトです。
ガーリー素材

CSSを変更する

CSSから .header-wrap を検索しましょう。下記のコードからURLを入れ替えます。

a0342241_16011401.png

サイズを調整したい場合は、background-size の数値を変更してみてください。

background: url("ここにURLを入れる") no-repeat right center;background-size: 200px;

完成です!

a0342241_16041181.png

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

エキサイトブログで、メニューのカテゴリやタグをクリックすると、それに紐付いているブログの記事が一覧で出てきますよね。
ですがこれ、ぐしゃっとしていてわかりにくい・・・。
むしろ消したいなーと思ったので消し方をあげときます。

a0342241_18533339.png

全部消すとなんのページだかわからなくなってしまうので、最低限カテゴリ名の部分だけ残しました。

a0342241_18540782.png

CSS

基本的にはCSSに追加しましょう。背景が白い場合はうまくいくと思います。

#category-page .post:first-child { padding: 0; margin: 0; }
#category-page .post:first-child .post-body { display: none;}
#tag-page .post:first-child { padding: 0; margin: 0; }
#tag-page .post:first-child .post-body { display: none;}
#archive-page .post:first-child { padding: 0; margin: 0; }
#archive-page .post:first-child .post-body { display: none;}

色をつけたい場合

場合によっては下記のように白が残ってしまい変な感じになってしまいます。背景色と同じ色にしてなじませましょう。

a0342241_19000704.png
#category-page .post:first-child .post-title,
#tag-page .post:first-child .post-title,
#archive-page .post:first-child .post-title { background: ここに背景の色を入れる;}

[PR]
by exblog-tips | 2016-02-01 19:06 | Comments(0)
a0342241_13581461.png

更新情報やお知らせをどこかに表示しておきたい・・・な時に使える、
エキサイトブログスキンでお知らせを表示する方法です。
記事自体を未来の日付にして一番上に上げる方法もあるのですが、ちょっと面倒くさいですよね。

HTMLとCSSで直接いれられるようにしましょう。

スクエアベーシックのブログスキンを編集する

「設定」→「デザインスキン」→「スクエアベーシック2」→「編集」からスキンを編集していきましょう。

a0342241_13545071.png

HTMLをセットする

HTMLのタグの中から<div class="post-contents cf">を探しましょう。そのタグの下に下記のHTMLをコピペして貼りましょう。

a0342241_14022080.png
<div class="my-info">
<h3 class="my-info-title">おしらせ</h3>
<dl>
  <dt>1月30日</dt>
    <dd>〜のイベントを開催します!こぞってご参加下さい。</dd>
  <dt>2月4日</dt>
    <dd>xxxxをスタートしました、お問い合わせは<a href="#">こちら</a></dd>
</dl>
</div>

CSSをセットする

CSSの最後に下記を加えましょう。

.my-info {  
  background: #fff;
  color: #333;
  margin-bottom: 30px;
  padding: 30px;
}
.my-info dt {
  float: left;
}
.my-info dd {
  margin-left: 72px;
}

年月日とテキストを好きなものに修正して使ってみてくださいね!


[PR]
by exblog-tips | 2016-01-28 15:50 | 本文周り | Comments(0)

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

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

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

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


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

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


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

エキサイトブログでも背景を大きく使ったスキンが増えてきましたね。
今回はエキサイトブログスキン「Photo Style」を使って背景画像を自分の好きなものに変えてみましょう。

a0342241_11445901.png

マイスキンを編集する

今まで適用してから編集していたのですが、編集してから保存もできたのでまずは編集からいきましょう。

a0342241_11514646.png

CSSのタブを開いて、下記のタグを探しましょう。

#main-area
a0342241_11514065.png

background: urlの中に反映したい画像のアドレスを入れましょう。
既存の画像の幅は1280pxですが、高さに合わせて拡大縮小されるので小さい画像を入れても大丈夫でした。
ただし、背景画像いっぱいに表示されるので、画像によってはいい位置にできない、などあると思います。
その場合はbackground-attachmentを消してみましょう。

background-attachment: fixed;

表示したい位置が明確に決まっている場合はbackground-positionを変更してみましょう。

右、下を表示したい場合

background-position: right bottom;
a0342241_12062610.png

写真を変えるだけでガラッと違うイメージになるので、ぜひ好きな写真に変えてみてくださいね。


[PR]
by exblog-tips | 2016-01-21 12:07 | マイスキン | Comments(0)

エキサイトブログのスキン、「テキストカスタマイズ右カラム」のスキンをベースに、メニューの「+」のアイコンを変えてみましょう。

a0342241_16363200.png

文字で置き換える

「デザインスキン」→「カスタマイズ」→「テキストカスタマイズ右カラム」のスキンを自分のブログに適用したら、
編集のCSSから下記のコードを探しましょう。

.menu .menu-title:before { content: "+"; /*---メニューリストアイコン---*/ }

ご丁寧にメニューリストアイコンってつけてくれていますが、デフォルトで入っている+はここで設定しているのですね。
この部分を文字で変更してあげると好きなものにできます。!とか○とか×とか。

a0342241_16441458.png

♡などの機種依存文字もいけるかもしれませんが、環境によっては見えないでしょう。
よくよく調べると、コードで入れてあげれば見えるみたいです。

例)✿ こんなお花だとか(\00273f) ♥ ハートマーク(\002665)

[css] contentプロパティで挿入できるコンテンツ
色とか入れてあげるとかわいいですね。

a0342241_16573301.png
content: '\002665';
color: #e74c3c;

言葉でもいけますね、文字数も1文字でなくても大丈夫です。


a0342241_16453436.png

画像にする

文字なら比較的簡単に変更することができました。
画像ではどうでしょうか?
画像の場合は、contentの中身を空にして、代わりにbackgroundで背景画像を指定しましょう。
画像サイズが小さい場合はそのままでも大丈夫ですが、大きかったりサイズが合わない場合は
background-size: 18px; など背景画像のサイズを提示してあげましょう。

.menu .menu-title:before {
content: "";
background: url(画像URL) no-repeat;
padding-left: 18px;
}
a0342241_10581770.png

[PR]
by exblog-tips | 2016-01-20 11:11 | メニュー周り | Comments(0)

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


by エキブ