<   2015年 12月 ( 8 )   > この月の画像一覧

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 | フッター

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 | お役立ち

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


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 | ヘッダー周り

エキサイトブログでもブログを書くときに、通常編集と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 | 本文周り

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

さて、マイスキンの下準備ができたら早速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 | マイスキン

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

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 | マイスキン

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

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

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

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

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

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

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

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

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

なんとなくだけど、

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

まとめ

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


[PR]
by exblog-tips | 2015-12-22 17:13 | はじめに

概要

香川県民の生活の中で、うどんは特別な位置を占めている。香川県におけるうどん生産量の推移(ゆで麺・生麺・乾麺の合計、香川県農業生産流通課調べ)は、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 | テスト

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


by エキブ