2014年12月11日木曜日

9.ページ内ジャンプ

記事が長くなったりすると、目次があってびょーんととべた方が便利かも。

違うページにリンク貼るのは”簡単貼り付け機能”がツールバーにあるのですが、
同じページ内でのジャンプはないみたい。
参考:> 5. リンクを張る

なので、調べてみました。

1. とぶ先に名前付ける
2. とぶ先指定して、とばす

これだけでいいらしい。
結構簡単っぽいので、試してみました。

//--------------------------------------//
概要:

1. とぶ先に名前付ける

<div>Aだよー</div>

で、”Aだよー”が表示されます。
これにid=で名前を付けます。

<div id="Jump_A">Aだよー</div>

Jump_Aのところは好きな名前でいいよー。


2. とぶ先指定して、とばす

<a>Aにとぶよー</a>

で、”Aにとぶよー”が表示されて、これをクリックするとどっかにとびます。
で、href=でとぶ先を指定してあげます。
(ここでは1.でつけた名前のとこ)

<a href="#Jump_A">Aにとぶよー</a>

なんかしんないけど、#がいります。


ここから実装
//-----------//
○記事を用意します。


ツールバーの「HTML」をクリックしましょう。


Aにとぶよー<br />
を先ほどの
<a href="#Jump_A">Aにとぶよー</a>
に変更しましょう。

で、
Aだよー<br />

<div id="Jump_A">Aだよー</div>
に変更しましょう。


で、完成!

…なのですが、このまま「公開」にして今後HTMLでのみ編集するのであれば、問題ないみたいです。
んが、やっぱり編集は「作成」モードの方がやりやすい。
ってことで「作成」モードにしてしまうとジャンプしてくれなくなります。
(´・_・`)
*ちなみに、他のページリンクの時もだけど「プレビュー」ではジャンプテストできないみたい。

一度「作成」モードにして「HTML」モードに戻ってみましょう。


「Aにとぶよー」のところで、とぶ先指定のhrefに余計なものがたされています。
こんなの
href="https://www.blogger.com/blogger.g?blogID=3630748397573596991#Jump_A"

おそらく、今、編集してる画面のURLです。
公開されたときのページは違う場所だから、うまくとんでくれないみたい。
消しても、消しても、「作成」モードにする度付け足してくれちゃいます。

なので、自ら公開されたときのページを無理やり入れてやりましょう。

と、いうわけで公開されたときの場所を調べるため、とりあえず公開しましょう。
公開したら、ブログ開きましょう。



開いてすぐはブログ自体のURLだから、Archiveなんかで目的の記事開いた方がいいかも。
で、その時のURLをコピーしときましょう。
今回の例:http://border008.blogspot.jp/2014/12/jump.html

で、すぐさまブログを閉じて、さっきの記事編集画面にもどり、とりあえず何食わぬ顔で「下書き」に戻しときましょう。

さっきの要領でHTML編集画面に戻り、コピっておいたURLに変更しましょう。

<a href="http://border008.blogspot.jp/2014/12/jump.html#Jump_A">Aにとぶよー</a>



で、完成!
「作成」モードになっても大丈夫。
\( 〇 ⌒ ▽ ⌒ 〇 )/

Category: Blogger Tips もくじ >
< 8. 表作成

2014年12月4日木曜日

Blogger Tips もくじ

Blogger使用時に疑問に思ったこと、調べたことなどをまとめてみました。

”初心者向け”というか、自分が初心者です。
さらに、むつかしいことはよくわからないので、
「できればいい」を基本に構成されております。

目次
//-------------------------//

1. 画像をはりつけてみる

2. 投稿タイトルのフォントを変える

3. 投稿記事の整理-ラベル-

4. ラベルをブログに表示させる

5. リンクを貼る

6. ラベルの階層化

7. プロフィールのなまえ変更

8. 表作成

9.ページ内ジャンプ

(・ ω ・)ノ

2014年12月3日水曜日

8. 表作成

Bloggerで表を作成してみる。

Wordみたいな便利機能あるかと思ったけどないみたい。
とりあえず単純にExcelからコピー&ペーストやってみました。


全然期待してなかったけど、なんとなく変換してくれてるっぽい…。


セルの色、文字の色などいろいろ省略されてしまっていますが、せめて罫線は欲しい…。
と、いうわけでツールバーの「HTML」をクリックしてみましょう。


この記事のHTMLが表示されます。
<table border=”0” …. > から、</table>までが表です。
いろいろ(余計なもの?まで)変換してくれてますが、全部無視してはじめの
<table border=”0” を、 <table border=”1” にしましょう。
(変えるのは0→1だけね)
で、ツールバーの「作成」をクリックしましょう。


後は普通の文章と同じ要領でツールバー使って編集できるみたいです。
項目の“名前”“種類”を中央揃えにして、セルに収まりきれてないから文字小さくして、
“熊さん”を赤色にしてみました。


手っ取り早くはこれで十分かも。

でも、セルの幅と色は変更したいかも。
さっきみたく変換してくれたテーブルいじってもいいけど、
いろいろ変換してくれてるから、煩雑…。
だったら、はじめから自分で追加した方がよいかも…。


と、いうことで以下は普通にHTMLのテーブル作成方法です。
//-----------------------------------------------//

○テーブル作るよー。
<table>
</table>

このままだとさっきみたいに罫線引いてくれないので、border足しときましょう。
<table border=”1”>
</table>

一行作ります。
<table border=”1”>
<tr></tr>
</table>

ようやく項目入力
<table border=”1”>
<tr><td>名前</td></tr>
</table>

もう一個項目入力
<table border=”1”>
<tr><td>名前</td><td>種類</td></tr>
</table>

後は繰り返し。
行足したいときは、<tr></tr>
項目足したいときは、<td></td>
ですねー。

<table border=”1”>
<tr><td>名前</td><td>種類</td></tr>
<tr><td>たろきち</td><td>パンダ</td></tr>
<tr><td>お千さん</td><td>たぬき</td></tr>
<tr><td>熊さん</td><td>イリオモテヤマネコ</td></tr>
</table>

後はこれを記事のHTMLに埋め込むだけです。
(直接書いてもいいよー)


記事を用意する。
長い文章の場合、なんか目印になるテキスト入れとくと後で挿入場所探しやすいです。
(↓例:”ここに表入れるよー”みたいな。…普通に図1.xxxでいいんですけど…)
*「ctrl」+「F」で文字列検索できるよー。


ツールバーの“HTML”をクリックします。


表を挿入したいところに先ほどの文字列を挿入。
<br/>ってのが改行なので、適当にその辺に挿入しましょう。


ツールバーの“作成”を押して確認してみましょう。



ここから、ちょこっとアレンジ特集。
//-------------------//

○余白いれる / cellpadding
文字がセルいっぱいで窮屈なので、ちょっと隙間作ります。
cellpadding=”5”ってのを、<table>の中に入れましょう。

<table border="1" cellpadding="5">
<tbody>
<tr><td>名前</td><td>種類</td></tr>
<tr><td>たろきち</td><td>ぱんだ</td></tr>
<tr><td>お千さん</td><td>たぬき</td></tr>
<tr><td>熊さん</td><td>イリオモテヤマネコ</td></tr>
</tbody></table>

*一度保存するとbloggerが<tbody></tbody>ってのを付け足しますが、ほっときましょう。


ちょっとゆったりしました。


○セル背景 / bgcolor
項目の行を区別するため、セルの背景を変えましょう。
bgcolor=”#C0C0C0”を<tr>の中に入れましょう。
*アルファベットのシー、数字のゼロね

<table border="1" cellpadding="5">
<tbody>
<tr bgcolor="#C0C0C0"><td>名前</td><td>種類</td></tr>
<tr><td>たろきち</td><td>ぱんだ</td></tr>
<tr><td>お千さん</td><td>たぬき</td></tr>
<tr><td>熊さん</td><td>イリオモテヤマネコ</td></tr>
</tbody></table>


#C0C0C0は色を示します。
他の色は「RGB, 16進数」で検索すればすぐでるお。
<tr>の中に入れると行全体、<td>の中にいれると各セルの色が変わります。


○セルの幅を変える / width
ここまでくれば、bloggerでは普通に文字編集できるみたい。
で、セルの幅も適当に調整してくれるみたいです。
*冒頭のコピペしたときには自動でセル幅調整してくれないのですが、
コピペした際にセルの幅が指定されてしまってるからです。

自動調整された幅が気にいらない場合は、自分で指定しましょう。

“種類”の列の幅を広くします。
“種類”の<td>にwidth=”250”をいれましょう。

<table border="1" cellpadding="5">
<tbody>
<tr bgcolor="#C0C0C0"><td>名前</td><td width=”250”>種類</td></tr>
<tr><td>たろきち</td><td>ぱんだ</td></tr>
<tr><td>お千さん</td><td>たぬき</td></tr>
<tr><td>熊さん</td><td>イリオモテヤマネコ</td></tr>
</tbody></table>


広くなりました。
高さ変えたいときはheightで設定できます。

後は太文字にしたり、中央揃えはツールバーを使って普通の文章と同じように編集できます。


だいたい、これくらいあればそこそこ使えるかな?


Category: Blogger Tips もくじ >
< 7. プロフィールのなまえ変更