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

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

ブログの背景を自分の好きな背景に変えたいことってありますよね。
エキサイトブログのスキン「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)
a0342241_18313813.png

SNSなどで、プロフィールが表示される時、円形に表示されることが多いですよね。
エキサイトブログでも画像を丸くすることができます。
これをすると最近のお洒落なブログっぽくなるのでオススメです。

クラス名を確認する

自分のブログをchoromeの検証から、プロフィールに使われている画像のクラス名を調べてみましょう。
>>choromeの検証機能の使い方はこちら

例えば、PCデザインスキンの「カスタマイズ」→「カスタマイズ3カラム」の写真を入れ替えて使うことのできるスキンならプロフィールの画像名のクラスは[ LOGO ]となっています。
このCSSに追加で角を丸くする指示を与えてみましょう。
ちなみに、画像を表すタグにclassの表示がなかった場合は、その上の階層のクラスからこんな風に書くことができます。

HTML

  <div class="logoimage">    
    <a href="#">      
      <img src="~~.jpg">
    </a>
  </div>

CSS

  .logoimage img { 
    border-radius: 100px;
 }

ポイントはあくまでもimgタグにあたるようにCSSを書くことです。
円にする方法自体はとっても簡単。下記のように記載しましょう。元々は四角の角を丸くするという指示ですが、角を丸くしすぎるといずれ円になりますよね。この数値をいろいろ変えて変化を実感してみましょう。

CSSを書き加える

  .LOGO { 
    border-radius: 100px;
 }
a0342241_09451133.png

横長の画像にしている方はこんな風に画像がつぶれちゃうことも。。。
その場合はimgタグではなくその上の階層のタグに角丸をつけてあげるとうまくトリミングできると思います。


[PR]
# by exblog-tips | 2016-01-05 09:46 | メニュー周り | Comments(0)
a0342241_16411078.png

ブログをちょっとホームページ寄りにしたい時、フッターを作るとそれっぽいかも
リンクやサイト名などを入れてもいいかもしれませんね!
HTMLは、一番最後に付け加えましょう。
クラス名は適宜変えてください

HTML

<div class="footer-set">Copyright © 2016 exblog-tips All Rights Reserved.</div>

CSS

.footer-set {
  background: #dcdcdc;
  font-size: 11px;
  font-size: 0.6875rem;
  text-align: center; 
  padding: 10px 0;
  margin-top: 100px;
}

[PR]
# by exblog-tips | 2015-12-25 16:39 | フッター | Comments(0)

choromeの検証機能を使おう

CSSを触る時に、どれがどれやらよくわからない。。。
読みにくい英語のテキストの羅列を読むのは結構大変ですよね。
そこでさくっとクラス名を見ることのできるツールを紹介します。
用意するのはchoromeのブラウザだけ。

a0342241_13364778.png

まずは自分のブログをchoromeで開いてから右クリック!(もしくはこのブログでも!)
そして一番下の「検証」をクリックしましょう。

a0342241_13380130.png

そうすると、右側もしくは下側に何か出てきます。
これがページのソースになります。
上部がElementになっていることを確認してから、その中に書いてある色のついたコードを適当に触ってみましょう。

a0342241_13402552.png

触っていくと、左側のページで反応する箇所があるはずです。例えば上記で言う所の
<p class="postdate-wrap">...</p>
となっている箇所を触ると、左側のページの上下の線がついている日付の箇所の色が変わります。

これは単純にリンクしている箇所ということです。

なのでこの場所のクラス名は「postdate-wrap」になります。
この場所のデザインをいじりたい場合は、スキンデザインのCSSの編集画面で上記の名称を検索してみるときっと同じ名前のものがあるはずです。

CSSをchoromeで直接変更してみよう

CSSを書き換える時、どんな風になるのか、エキサイトのページを更新するまでわかりませんよね。
ですがCSSをさわっていておかしくなってしまった、というのはよくあること・・・
choromeの検証なら、画面上でリアルタイムにCSSをチェックすることができます。

a0342241_13470129.png

先ほどのCSSで今度は<h2 class="post-title">...</h2>という箇所を見てみましょう。
Elementの下にStyleと書かれたタブがあります。
上記の赤枠で記したクラス名「post-title」の部分。ここがCSSです。
今「post-title」には

font-size: 18px; font-weight: bold;

というCSSが入っています。
この18pxと書かれたところをクリックすると編集ができるようになるので、
試しに40pxと入れてみましょう。

a0342241_13573927.png

すると、右側のテキストが大きくなりました!
これはCSSのフォントサイズを18から40pxに変更したためです。
同様にfont-weight: bold;の右側のチェックボックスを外してみるとフォントが細くなるはずです。
ここで変更したCSSは特に保存されませんので、あくまでも検証でうまくいくか使ってみるのが良いでしょう。
うまくいったら、実際にエキサイトブログのデザインスキンのCSS編集で実際に変更してみるのが近道です。

直接記述することもできる

choromeの検証機能では、もともと書いてあるもの以外にも直接記述することも可能です。
先ほどのクラス名「post-title」のCSSの } の右横あたりをクリックすると新たに記述するようなカーソルに変化するはず。
そこへ背景の設定をする「background: red;」と書いてみましょう。
そうすると左側のタイトルの背景が赤くなるはず。

a0342241_14063284.png

こんな感じでCSSの練習がてらいろんなことを試してみると良いですね!
リアルタイムで反映するので、うまく反映しない時は、書く場所が間違っていたり、他の要素に影響している可能性があるので
根気強く該当箇所を探してみましょう。


[PR]
# by exblog-tips | 2015-12-25 14:10 | お役立ち | Comments(0)

エキサイトブログではかなり自由にナビゲーションを作ることができます。
上部にナビゲーションが欲しかった方は是非お試しを〜。


a0342241_13281251.png


【本文】

<div class="nav-wrap">
<ul class="nav-list">
<li><a href="#">TOP</a></li>
<li><a href="#">はじめに</a></li>
<li><a href="#">プロフィール</a></li>
<li><a href="#">メール</a></li>
</ul>
</div>

【CSS】

.nav-wrap {
background: #E4E9ED;
margin-bottom: 48px;
padding: 18px 0; }
.nav-list li {
display: inline-block;
margin-right: 48px; }
.nav-list {
text-align: center;
font-size: 14px;
font-size: 0.875rem;
line-height: 14px; }

本文の挿入位置はhederの下らへんがいいでしょう。
headerのdivタグが終わった後に入れてみましょう。
<a href="#">の#の中にリンクさせたいURLを入れます。テキストは好きに変えてください。

背景の色を変えたい場合は、CSSの background: #E4E9ED; を変えてみてください。


IE8以下は崩れるかもしれません。



[PR]
# by exblog-tips | 2015-12-24 18:29 | ヘッダー周り | Comments(0)

エキサイトブログでもブログを書くときに、通常編集とHTML編集という二つがあるのですがこれがあまりいけていない。
というのも勝手にHTMLが生成されるわけなんですが
一言で言うとめちゃめちゃに生成されます(笑)
ここまでの書いた文章をHTMLで見てみると…↓

-----------------------------


-----------------------------

改行にいたっては divタグにbrが挟まれるという始末・・・
これ詳しい人なら直接書けばいいのですがよくわからない人にとって
どうやって編集したらいいかわからないですよね。
編集中の変な動き(改行とか文字の位置とか)はだいたいこのHTMLのせいだったりします。
そこで、そんな人でもキレイにタグがかけるよう、HTMLでテンプレートを作成することをおすすめします。

あらかじめ登録しておけば呼び出すだけだし、HTMLもキレイになって一石二鳥ですね。
とりあえず全くHTMLがわからない人はググってもらうとして…押さえておきたいタグは4つです。

<div> …主にブロックを司る。
<p> …段落
<br> …改行
<ul><li>…リスト

基本的にはテキストをメモ帳とかに書いておいてそのあとに
マークアップするのがベター。
例をあげると

讃岐うどんは、香川県(旧讃岐国)特産のうどんである。
伝来時期などは明らかでないが、元禄時代(江戸前期)の屏風絵にうどん屋を認めることができる。
古くから小麦、塩、イリコ、醤油といった讃岐うどんの原料が、この地域で容易に入手でき、かつ特産品でもあった。
なお、「讃岐うどん」という特別な呼称ができたのはそれほど古くはなく、他県から香川県のうどんが名物と認知されだした1960年代頃と考えられている。

マークアップ

<div>
<p>讃岐うどんは、香川県(旧讃岐国)特産のうどんである。</p>
<p>伝来時期などは明らかでないが、元禄時代(江戸前期)の屏風絵にうどん屋を認めることができる。古くから小麦、塩、イリコ、醤油といった讃岐うどんの原料が、この地域で容易に入手でき、かつ特産品でもあった。なお、「讃岐うどん」という特別な呼称ができたのはそれほど古くはなく、他県から香川県のうどんが名物と認知されだした1960年代頃と考えられている。</p>
</div>

基本的にはブロックは<div>でくくり、段落は<p>、改行は<br>を使います。
初心者でありがちなのは<br>を多用すること。
これはあまり良い書き方ではないので、上下にスペースが欲しければその分<p>にマージンをつける、などで対応するのが本当はベター。
さらに見た目を変更するためにタグごとに名前をつけていきます。

<div class="udon-content">
<p class="udon-title">讃岐うどんは、香川県(旧讃岐国)特産のうどんである。</p>
<p class="udon-text">伝来時期などは明らかでないが、元禄時代(江戸前期)の屏風絵にうどん屋を認めることができる。古くから小麦、塩、イリコ、醤油といった讃岐うどんの原料が、この地域で容易に入手でき、かつ特産品でもあった。なお、「讃岐うどん」という特別な呼称ができたのはそれほど古くはなく、他県から香川県のうどんが名物と認知されだした1960年代頃と考えられている。</p>
</div>

上記の例では、divのくくりに「udon-contet」、タイトルに「udon-title」、テキストに「udon-text」という名前をつけました。
この名前を使って、見た目のデザインを変えていきます。

前置きが長くなりましたが、とりあえずテンプレート登録をやってましょう。
まずは「設定」→「テンプレート」から登録。

a0342241_11251480.png

未登録1と書いてあるところをくりっくしてもらうと1−5まで登録できることがわかります。
テンプレート名を適当に入れて、HTML編集のタブを押したら中に先ほどのテキストを入れましょう。
うどんのやつそのまま入れても良いのですが、今後使い回すたびに消すのが面倒なので最低限の内容を入れておきます。

<div class="udon-content">
<p class="udon-title">タイトルを入れる</p>
<p class="udon-text">本文用</p>
</div>

テンプレートに登録ができたら次にCSSを登録します。

.udon-title {
font-size: 20px;
font-size: 1.25rem;
text-align: left;
font-weight: bold;
margin-bottom: 24px; }

.udon-text {
font-size: 16px;
font-size: 1rem;
line-height: 2;
padding: 12px 0; }

フォントの大きさや太さ、行間などを設定しました。
最初の段階でこのようにルールを作ってテンプレート登録しておくと、
後々デザインを変更したくなった時に一気に変更できるので大変便利です。
「設定」→「デザインスキン」→「現在使用中のスキンーー編集」からCSSのタブをクリックして一番下に先ほどのCSSを入れてみましょう。

a0342241_12471284.png

登録したら、早速記事を書いてみましょう!コードはこんな感じで書いてみました。

サンプルページと見比べてみてください。

<div class="paragraph-content">
  <p class="paragraph-title">概要</p>
  <p class="paragraph-text">
香川県民の生活の中で、うどんは特別な位置を占めている。香川県におけるうどん生産量の推移(ゆで麺・生麺・乾麺の合計、香川県農業生産流通課調べ)は、1980年代は1万トン台中盤から2万トン台中盤、1990年代は3万トン強から4万トン台後半、2000年代前半は5万トン弱から6万トン台中盤であった[1]。2009年の生産量は59,643トン(小麦粉使用量)、全国1位であり、2位の埼玉県の2倍以上となっている。1980年にはわずか5%でしかなかった日本国内シェアは、以後四半世紀で四半分に迫るほどの伸びを見せた[2]。
  </p>
  <p class="paragraph-text">
うどんは観光客向けの名物というよりは、老若男女問わず県民の生活に密着した食物・食習慣となっている。うどん店は県全域に分布し、たとえば観光用に「讃岐うどん通り」といった店鋪の特定集中区域はない[3][4]。<br>
ある統計では県民一人あたりの年間うどん消費量は230玉、週に何杯ものうどんを平らげていることになる[5]。彼らは県外に出てもうどんへのこだわりを隠さず、里帰りにうどんを食し帰郷を実感するほどである[6][注 1]。
  </p>
  <p class="paragraph-text">
うどんにまつわる地域行事も存在する。半夏生(7月2日頃)にうどんを食べるという慣わしがあり、この習慣に基づきさぬきうどん協同組合が毎年7月2日を「さぬきうど んの日」と制定しているほか[7]、大晦日には年越し蕎麦ではなくうどんを食べる県民が一定の割合で存在しており(ただし2010年の四国学院大学の学生による調査では「年越し蕎麦派」が「うどん派」を上回っている[8][9])、玉売のうどん店や製麺所は多忙を極める。また新たな行事やイベントのプロモーション活動にも余念なく、2009年からは「年明けうどん」をプロデュースするなどしている[10][11]。
  </p>
</div>
<div class="paragraph-content">
  <p class="paragraph-title">名称</p>
  <p class="paragraph-text">
   日本国内で「讃岐うどん」「さぬきうどん」の名称を使用する場合、現在のところ制限はない[13]。理由として、全国生麺類公正取引協議会と公正取引委員会は「どこで      作っても物は同じ」との見解を示している[13]。この要因によって全国各地で「讃岐うどん」「さぬきうどん」を名乗るうどんが作られている[14]。2000年代初旬頃まで    うどん業界では「讃岐うどんは香川産」という常識が存在していたが、人気の全国的な拡大によってこの常識は崩れていった[13]。<br>ただし、生めん類[注 2]において「    名物」「本場」「特産」などを表示する場合にのみ、公正競争の立場から次のような規制が適用される
  </p>
</div>

[PR]
# by exblog-tips | 2015-12-24 17:58 | 本文周り | Comments(0)

エキサイトブログの基本的な構造

さて、マイスキンの下準備ができたら早速HTMLを入れていきましょう。
エキサイトブログのマイスキンは4つに分かれています。それぞれに絶対必要な独自タグがあり、それを必ず入れなければなりません。

  1. 全体
  2. 本文
  3. 右メニュー
  4. CSS

全体

<$adminmenu$>
<$post$>
<$prepage$>
<$nextpage$>
<$banner$>
<$xml$>
<$menuright$>

本文

<$postsubject$>
<$postadmin$>
<$postcont$>
<$posttail$>
<$cmtjs$>

メニュー

<$mntitle$>
<$mnbody$>

詳細の意味などはこちらで確認してください。基本的にはこの独自タグさえ入っていればどんなレイアウトにしようが問題なしです。
とりあえず今回はすでにあるカスタマイズ用のHTMLとCSSを使います。

a0342241_15150234.png

「デザインスキン」→「スキン選択:カスタマイズ」
おすすめは、カスタマイズの中のテキストカスタマイズをベースとして使うといいでしょう。
シンプルなので追加は容易いです。
編集ボタンを押したら、[HTML&CSS編集]の「全体」「本文」「右メニュー」「CSS」を全部コピペしてマイスキンに登録しましょう。
ついでに[基本設定]のサイズ(本文・ロゴ・メモ帳)も同じにしておきましょう。
実はこのスキンを適用してから「編集ボタン」→「作成」を押してもマイスキンに登録されます。ただスキンイメージ・レイアウトは変えられません。

ここまで準備が整ったら続いてCSSを直接追加!


[PR]
# by exblog-tips | 2015-12-24 14:46 | マイスキン | Comments(0)

早速マイスキンを作成してみましょう。

a0342241_17341802.png

管理画面の左のメニューから「デザインスキン」→「マイスキンを作成」を押す。
すると下記の画面になります。

a0342241_17365965.png

ここで新たにスキンを登録するわけですが、上から順に名前入れて画像入れてってやるとレイアウトで選び直したときにすべて消えます。。。。完全に罠です。
なので先に[レイアウト]から選びましょう。
こういう地味なところから改善してほしいんですが…。
[レイアウト]を選んだら次にやっとスキン名を入力しましょう。なんでもいいです。

そしてその次[スキンイメージ]なのですが、これ、必須です。
毎回作らないといけないんかいとすごく面倒なのですが…75x75のgifのデータが必要です。
凝り性の方は毎回作ってもいいのですが、今回はテストなのでダミー画像をサイトからDLしましょう。http://placehold.it/75x75.gif

a0342241_17484785.png

そして最後に[サイズ]ここはとりあえずデフォルトで構いません。後から変更します。
これなんで入れるかっていうと、ここに入っている数字に合わせて画像が自動縮小されるらしいです。
本文を500pxにすると500px以上の幅のサイズでもぴったり500pxになってくれるというわけ。
ロゴとメモ帳ってやつも同じで画像とか入れたときにうまいことやってくれます。
ここまで出来たら[HTML&CSS編集]はそのままで[登録]ボタンを押しましょう。

a0342241_17502556.png

こんな感じでできているはず!とりあえず登録まで終わったので次の記事で中身を登録していきましょう!


[PR]
# by exblog-tips | 2015-12-22 17:52 | マイスキン | Comments(0)

今までninjyaやらはてなブログやらでブログを運用してみましたが、エキサイトブログが結構使いやすい。
やりようによってはかなり自由なことが出来そうなのでこのブログでテストがてら使いまわそうと思います。

ざっと調べた限りではエキサイトブログを使用しているユーザーは、主婦の方、写真家の方が特に多そうな印象。
特に主婦系ブロガーの方で収納やインテリアなんかの記事を書いている人が多い感じでした。
どちらかというとシンプルなものが好き、という人が多くいるような感じです。

主ないいところと悪いところ

※主観と軽く調べた結果
【はてな】技術系の人が多く使っている

良いところ
高機能
ユーザーがブログスキンを多く配信している
スマホスキンまでいじれる
GA連携ができる
悪いところ
機能がかなり多いので色々いじろうとすると結構大変
いじれるところがかなり制限されてるのでカラム数とか増やせない、フッターとかヘッダー必須

【忍者】オタクが多く使ってるイメージ

良いところ
広告がしんぷる
ブログスキンをユーザーが多く使ってる
解析ツールがすごいらしい(他のと比べて?
ドメインが個性的
htmlとcssが分かればかなり自由に使える
悪いところ
スマホスキンがいじれない
独自タグが複雑すぎて把握するのが大変
管理画面が雑多な感じ
有料でも3GB

【エキサイト】主婦系がおおい?写真ブロガー

良いところ
広告がしんぷる
写真容量が1GB
独自タグが少ない
GA連携ができる
htmlとcssが分かればかなり自由に使える
悪いところ
複数ブログが作れない
スマホがいじれない
ブログスキンがそんなにない
ドメインが選べない

なんとなくだけど、

  • はてな初心者向け
  • 忍者上級者向け
  • エキサイト中級者向け
って感じでしょうか。
どこもいいところと悪いところがありますね。
エキサイトで特筆すべきは画像容量が無料で1GBあるので、写真系ブロガーに好まれているというところでしょうか。
ちなみに二つのブログは無料枠が500MBと300MBでした。
でも使いながら改善してほしいところは多々あるので今後の運営に期待。

まとめ

個人的にはブログスキンのカスタマイズを使っていて割と使いやすいなぁと思いました。とりあえずhtmlとcssはあまりわからないけど、
今後ブログのデザインをオリジナルスキンで作りたいなぁという方には向いてるかもなので、
役立ちそうなtipsをここでまとめていければと思います。


[PR]
# by exblog-tips | 2015-12-22 17:13 | はじめに | Comments(0)

概要

香川県民の生活の中で、うどんは特別な位置を占めている。香川県におけるうどん生産量の推移(ゆで麺・生麺・乾麺の合計、香川県農業生産流通課調べ)は、1980年代は1万トン台中盤から2万トン台中盤、1990年代は3万トン強から4万トン台後半、2000年代前半は5万トン弱から6万トン台中盤であった[1]。2009年の生産量は59,643トン(小麦粉使用量)、全国1位であり、2位の埼玉県の2倍以上となっている。1980年にはわずか5%でしかなかった日本国内シェアは、以後四半世紀で四半分に迫るほどの伸びを見せた[2]。

うどんは観光客向けの名物というよりは、老若男女問わず県民の生活に密着した食物・食習慣となっている。うどん店は県全域に分布し、たとえば観光用に「讃岐うどん通り」といった店鋪の特定集中区域はない[3][4]。
ある統計では県民一人あたりの年間うどん消費量は230玉、週に何杯ものうどんを平らげていることになる[5]。彼らは県外に出てもうどんへのこだわりを隠さず、里帰りにうどんを食し帰郷を実感するほどである[6][注 1]。

うどんにまつわる地域行事も存在する。半夏生(7月2日頃)にうどんを食べるという慣わしがあり、この習慣に基づきさぬきうどん協同組合が毎年7月2日を「さぬきうどんの日」と制定しているほか[7]、大晦日には年越し蕎麦ではなくうどんを食べる県民が一定の割合で存在しており(ただし2010年の四国学院大学の学生による調査では「年越し蕎麦派」が「うどん派」を上回っている[8][9])、玉売のうどん店や製麺所は多忙を極める。また新たな行事やイベントのプロモーション活動にも余念なく、2009年からは「年明けうどん」をプロデュースするなどしている[10][11]。

名称

日本国内で「讃岐うどん」「さぬきうどん」の名称を使用する場合、現在のところ制限はない[13]。理由として、全国生麺類公正取引協議会と公正取引委員会は「どこで作っても物は同じ」との見解を示している[13]。この要因によって全国各地で「讃岐うどん」「さぬきうどん」を名乗るうどんが作られている[14]。2000年代初旬頃までうどん業界では「讃岐うどんは香川産」という常識が存在していたが、人気の全国的な拡大によってこの常識は崩れていった[13]。
ただし、生めん類[注 2]において「名物」「本場」「特産」などを表示する場合にのみ、公正競争の立場から次のような規制が適用される


[PR]
# by exblog-tips | 2015-12-15 12:52 | テスト | Comments(0)

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


by エキブ