<   2016年 01月 ( 11 )   > この月の画像一覧

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)

ブログの背景を自分の好きな背景に変えたいことってありますよね。
エキサイトブログのスキン「colorful」、このスキンをベースに、背景画像をオリジナルのものに変えてみたいと思います。

背景にしたい画像を用意する

背景を変更するにはお好きな背景が必要です。
今回は、継ぎ目のないシームレスパターンを使って背景を設定します。
もちろんゼロベースから画像を作成してもいいのですが、面倒くさいですよね。
手っ取り早く背景画像をゲットしたいならとりあえず検索しましょう。
【photoshop パターン】とかでググると大量に出て来ますね。

Photoshopを使う際にデザインの幅が広がる無料のパターン素材80選
【Photoshop パターン】シームレスでフリーなパターン素材まとめ

今回はこの方眼用紙系のパータンに変更してみたいと思います。

a0342241_11420769.png

画像をアップロード

画像が用意できたら、エキサイトブログの左メニュー「画像管理」から画像をアップロードしましょう。
添付でもドロップでもお好きな方で。

a0342241_11441404.png

画像のアドレスをコピーする

アップロードができたら、該当の画像の上で右クリック。
「リンクアドレスをコピー」で画像のアドレスをコピーします。

a0342241_11474880.png

ブログスキンを「colorful」に設定

「設定」→「デザインスキン」でスキンを「colorful」に設定します。

a0342241_11363720.png

CSSを変更する

「colorful」のブログスキンの「編集」→「CSS」から、「/* excite blog skin css */」という箇所を見つけましょう。
一番上にbodyタグの記載があると思います。
このタグの上から9個目、下記のタグを先ほどコピーしたアドレスにしてみましょう。

background: url("http://pds.exblog.jp/pds/1/201601/15/41/a0342241_11420769.png") repeat scroll;
a0342241_11543715.png

保存して完了!

保存すれば完了です。いろいろなパターンを使ってお気に入りのブログを作りましょう!

a0342241_12000122.png

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

エキサイトブログでは、ブログのタイトルはテキストになっていますが画像にしてちょっと格好良くしたいですよね。最近ではロゴジェネレーターなるものも登場していて、自分でロゴを作ることのハードルもかなり下がってきています。

Squarespace Logo
簡単!ロゴ作成やフライヤー作成にオススメのツール22選

そんなわけでブログタイトルを画像化してみましょう。

ヘッダーのタグを探す

「デザインスキン」→「編集」→「HTML&CSS編集」→「全体」の中から下記のタグを探しましょう。

<$header$>
a0342241_10310442.png

このタグはエキサイトの独自タグになっていて、自動でブログのタイトルを出力してリンクを貼ってくれるタグです。ですがこのタグ、なんと必須ではないのですw
なのでこのタグを消して、新しいタグと入れ替えてあげましょう。

HTMLを差し替える

画像を入れる場合は下記のタグを入れてみてください。画像が表示されるはずです。

<a href=“自分のブログURL”><img src=“画像URL”></a>
a0342241_10342952.png

差し替え完了です!


[PR]
by exblog-tips | 2016-01-14 10:35 | ヘッダー周り | Comments(0)

他のブログを読んだりすると、twitterの引用を良くみかけたりします。
これってエキサイトブログでもできないのかなーと思ったのでやってみました。

埋め込みたいツイートを開く

早速やってみます。試しに流れてくるプロモーションツイートを埋め込んでみましょう。
埋め込みたいツイートを開いたら右下らへんの「・・・」のメニューをクリック

a0342241_11412181.png

画像を埋め込むボタンを押す

メニューが開くので上から3つめの「ツイートをサイトに埋め込む」をクリック

a0342241_11412134.png

HTMLをまるっとコピペ

モーダルウィンドウが出てくるので、以下のコードをコピーして〜のboxの中のHTMLをまるっとコピーします。

a0342241_11412196.png

エキサイトブログでエラーが出る

エキサイトブログのHTML編集の部分にコピーしたテキストを貼り付けます。
がしかし、えらーになる・・・

a0342241_11471649.png

だがあきらめない

だがここでエラーメッセージをよくみると、「<script async src="//platform.twitter.com/widgets.js" charset="utf-8">タグは使用できません」となっている。
じゃあこのタグとっちゃおう。

a0342241_11412167.png

それっぽくできた

そんなわけでscriptとっても見た目的には問題なさそうだったのでこんな感じで完成。

画像も埋め込めるか?→埋め込めた!!!


[PR]
by exblog-tips | 2016-01-12 11:34 | 本文周り | Comments(0)
a0342241_14213215.png

エキサイトブログのサイドメニューにある、検索バー。ただそのまま入っている、って感じで結構しょぼいんですよね。
今回はこのパーツをもっと見栄え良くしたいと思います。

ボタンを枠線のみのフラットにする

今回はCSSがわりとややこしいので、CSSのコピペ用コードだけ置いておきます。

a0342241_14510185.png
.menu-body table {    
    width: 100%; 
}    
.menu-body table tbody tr:nth-child(2) td:first-child,
.menu-body table tbody input+tr td:first-child {
    width: 150px !important;
}    
.menu-body table tbody tr:nth-child(2) td:nth-child(2),
.menu-body table tbody input+tr td:nth-child(2) {
    width: 10px !important; 
} 
.menu-body table tbody tr:nth-child(2) td:nth-child(3),
.menu-body table tbody input+tr td:nth-child(3) {      
    width: 20px !important; 
}
.menu-body table input[type="submit"] {  
    background: none;  
    border: none;  
    border: 1px solid #ccc; 
    padding: 4px 5px;
}

ボタンを塗りつぶし

色を変えてカスタマイズ!

a0342241_14582604.png
.menu-body table {    
    width: 100%; 
}    
.menu-body table tbody tr:nth-child(2) td:first-child,
.menu-body table tbody input+tr td:first-child {
    width: 150px !important;
}    
.menu-body table tbody tr:nth-child(2) td:nth-child(2),
.menu-body table tbody input+tr td:nth-child(2) {
    width: 10px !important; 
} 
.menu-body table tbody tr:nth-child(2) td:nth-child(3),
.menu-body table tbody input+tr td:nth-child(3) {      
    width: 20px !important; 
}
.menu-body table input[type="submit"] {  
    display: block;    border: none;    width: 40px;    height: 30px;    background: #666;    border-radius: 4px;    color: #fff;
}

ボタンを画像化

お好きな画像で試してみてください。
画像のサイズ似合わせてbackground-sizeとwidth、heightを変えてあげればいい感じになるやも

a0342241_14510103.png
  .menu-body table {
    width: 100%;
}    
.menu-body table tbody tr:nth-child(2) td:first-child,
.menu-body table tbody input+tr td:first-child { 
    width: 150px !important;
}
.menu-body table tbody tr:nth-child(2) td:nth-child(2),
.menu-body table tbody input+tr td:nth-child(2) {
    width: 10px !important; 
}
.menu-body table tbody tr:nth-child(2) td:nth-child(3),
.menu-body table tbody input+tr td:nth-child(3) {      
    width: 20px !important; 
}
.menu-body table input[type="submit"] {      
    background: url(好きな画像のアドレス) no-repeat;
    background-size: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden; 
    display: block;
    border: none;
    width: 30px;
    height: 30px;
}

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

このブログでもちょこっと装飾をしているんですが、今回は↓このように本文の画像の装飾をしていきたいと思います。

スクリーンショットだとだいぶ味気ないですが、いい感じの写真だとよりよく見えるような気がしますね。
エキサイトブログでは、画像を貼り付けた時(中央配置の場合)に「.IMAGE_MID」という名前のクラス名が自動で付くようです。
なので、「.IMAGE_MID」にCSSを追加しましょう。

写真風のdesign

まずは定番の写真風。

.IMAGE_MID {    
   box-shadow: rgba(221, 221, 221, 0.9) 5px 5px 12px -2px;
   padding: 10px;
   border: 1px solid #ddd;
}

シンプルボーダーdesign

一番簡単にアクセントがつけられます。好きな色で装飾してみましょう。

.IMAGE_MID {    
   border: 10px solid #eee;
   box-sizing: border-box;
}

斜めストライプのカフェ風のdesign

新しいCSSでは、とうとう斜線も描けるようになったんですね、本当にすごい。
簡単にかけるのでわざわざ画像を作る手間が省けますね。

.IMAGE_MID {    
  -webkit-background-size: 10px 10px;
  background-size: 10px 10px;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0,
            color-stop(.25, #ddd), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, #ddd),
            color-stop(.75, #ddd), color-stop(.75, transparent),
            to(transparent));
  background-image: -webkit-linear-gradient(45deg, #ddd 25%, transparent 25%,
          transparent 50%, #ddd 50%, #ddd 75%,          
          transparent 75%, transparent);
  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%,
          transparent 50%, #ddd 50%, #ddd 75%,
          transparent 75%, transparent);
  padding: 0 10px 10px 0;
}

こんな感じでアレンジは多種多様。様々なパターンを公開しているサイトさんもたくさんあるので探してみてください。

Box Shadowのエフェクトサンプル & 便利な素材まとめ

[PR]
by exblog-tips | 2016-01-07 14:29 | 本文周り | Comments(0)

エキサイトブログを書いている時に、よく使う人と使わない人がわかれる[more]機能

a0342241_11260649.png

よく見かける使い方としては、序文であおってから本文にいかせるというパターンでしょうか。
TOPページを見た時に文章が長いとページがすっごく長くなってしまいますよね。
読み込みが重いとユーザーストレスがたまるし、序文だけ書いてきになる人は見てねの方がもしかしていいのかも。。。と今更思ったりします。
公式がめっちゃ宣伝していますがここがわりと分かりやすい例かもしれません。
これもエキサイトブログなんですねー。

Moreのクラスを変更してみる

それでは早速CSSをいじっていきましょう。moreのクラスは一律下記となっています。

class="more-post"

まずは、ボタン自体を右寄せ・中央寄せ

右寄せ

続きを読む
  .more-post {
    float: right;
    font-size: 15px;
  }

中央寄せ

続きを読む
  .more-post {
    font-size: 15px;
    text-align: center;
    display: block;
  }

fontサイズは適宜変更してください。次はもっとボタンぽくしてみましょう。

Moreをボタン化

先ほどのクラスに足して・・・と言いたいところですが、リンクがある場合は、aタグに対して色をつけてあげましょう。

右寄せ+色

続きを読む
  .more-post {
    float: right;
    font-size: 15px;
  }
  .more-post a {
    background:#E15B5F;
    padding: 8px 20px;
    color: #fff;
    border-radius: 3px;
  }

中央寄せ

続きを読む
  .more-post {
    font-size: 15px;
    text-align: center;
    display: block;
  }
  .more-post a {
    background:#E15B5F;
    padding: 8px 20px;
    color: #fff;
    border-radius: 3px;
  }

Hover時の処理

上記までのボタンにカーソルを合わせると、アンダーラインがでてきます。このままでもいいのですが、色が変わったりした方がそれっぽいっですよね。
そんなわけで、もう少しいじってみましょう。

右寄せ+色+hover時色を変更

続きを読む
  .more-post {
    float: right;
    font-size: 15px;
  }
  .more-post a {
    background:#E15B5F;
    padding: 8px 20px;
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
  }
  .more-post a:hover {
    background:#E15B5F;
  }

中央寄せ+色+hover時 透過0.7

続きを読む
  .more-post {
    font-size: 15px;
    text-align: center;
    display: block;
  }
  .more-post a {
    background:#E15B5F;
    padding: 8px 20px;
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
  }
  .more-post a:hover {
    opacity: 0.7;
  }

ボタンデザイン集などもググればあるので、この辺をうまく使ってカスタマイズしてみましょう!

5つの効果で作る、よく使うCSS3ボタンデザインサンプル集
[PR]
by exblog-tips | 2016-01-05 11:34 | 本文周り | Comments(0)

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


by エキブ