カテゴリ:本文周り( 8 )

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

他のブログを読んだりすると、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)

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

スクリーンショットだとだいぶ味気ないですが、いい感じの写真だとよりよく見えるような気がしますね。
エキサイトブログでは、画像を貼り付けた時(中央配置の場合)に「.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)

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

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


by エキブ