タグ:テンプレート ( 1 ) タグの人気記事

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

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


by エキブ