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

プロフィールの名前を変更する。

とりあえず、Google+のプロフィール画面を開く。
以下はBlogger管理画面からの開き方。

右上のプロフィール画像をクリック。
”プロフィールを表示”をクリック。
Google+のプロフィール画面が開く。

名前のところをクリック。

編集する画面が開くので、変更して、”保存”をクリック。

Category: Blogger Tips もくじ >
< 6. ラベルの階層化      8. 表作成 >

6.ラベルの階層化

ラベルである程度分類できるけど、さらに分類しやすいように階層的に扱えるようにします。
（まだ、管理するほど投稿してないけど（￣▽￣；）

こんな感じ。

いろいろ調べて、HTMLを変更しないといけないみたい。
でも、基本2箇所替えるだけでいいみたいなので、試してみる。
*今回使用したソースはVery Pinchさんが作成したものを使用させていただいてます。
Bloggerのラベルをカテゴリ別に整理する(ラベルの階層化)


とりあえず試してみたのですが、いまいちうまくいきませんでした。
機能的にはうまく動いているみたいなのですが、見た目が階層っぽくない。
参考にした人のブログでは、ちゃんと階層っぽく表示されてるのにぃ。
こんな感じになってしまう。

いろいろやってみて、どうやらテンプレートがまずいらしい。
”ウォーターマーク”というテンプレートを選択していたのですが、これだと、上記のような表示になってしまいます。
”エスィリアル”ってのも、だめでした。
とりあえず”シンプル”選ぶと、ちゃんと表示されました。

//----準備
テンプレートを変更すると、変更したHTMLもなくなってしまいますので、上記のことを考慮しつつ、適当なテンプレートを設定します。
その後、あらかじめ既定のラベルガジェットを追加しときます。
4.ラベルをブログに表示させる

//----設定

Bloggerの管理画面で”テンプレート”を選択し、”HTMLの編集”をクリックします。

HTMLの編集画面に移ります。

*HTML編集する前には、必ずバックアップを取りましょう。

操作は２点
1. jQUERYを呼び出すためのscript差し込み
2.ラベルウィジェット（ガジェット）の総とっかえ

1. jQUERYを呼び出すためのscript差し込み
</header>の直前に以下の記述を挿入します。
*編集画面にカーソル移して、Ctrl+f で文字検索できます。


<script language='javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>
</script>

2.ラベルウィジェットの総とっかえ

既定のラベルウィジェットの箇所を探します。

　*Label1で検索すると見つけやすいです。
　widgetはたくさんあるので、念のためtitleの設定が自分がタイトルに設定した文字列と同じか、確認しましょう。ターミナルの位置も同じようなのたくさんあるので気を付けてください。

<b:widget id='Label1' locked='false' title='Category' type='Label'>
...
</b:widget ....>

上記の箇所を削除し、以下のコードを挿入します。

<b:widget id='Label1' locked='false' title='カテゴリ' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div id='Label1Cover' style='display:none;z-order:-1;'>
  <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
    <b:if cond='data:display == "list"'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='"label-size label-size-" + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
  </div>
<script type='text/javascript'>
//ラベル階層化
$(function(){
    var list = $('div#Label1 div ul > li');
    var dest = $("<ul style='display: none;'/>");
    var nodes = new Array();
    $(list).each(function(){
        var work;
        if($(this).children('a').length>0){
            work = $(this).children('a').text().split("/");
            $(this).children('a').text(work[work.length-1]);
        }else{
            work = $(this).children('span:first').text().split("/");
            $(this).children('span:first').text(work[work.length-1]);
        }
        var key="";
        $(this).addClass("categoryLabel");
        var target=$(this);
        $(work).each(function(i){
            if (i == work.length-1){
                 if (key == ""){
                      dest.append($(target).clone(true));
                 }else{
                      nodes[key].append($(target).clone(true));
                 }
                 $(target).remove();
            }else{
                 var parent = null;
                 if (i>0){
                     parent = nodes[key];
                     key = key + "/";
                 }
                 key = key + work[i];
                 if (nodes[key] == null){
                      var item = $("<li class='categoryLabel'>" + work[i] + "</li>");
                      var temp = $("<ul style='display: none;'/>");
                      item.append(temp);
                      nodes[key] = temp;
                      if (parent == null){
                          dest.append(item);
                      }else{
                          parent.append(item);
                      }
                 }
            }
        });
    });
    $('div#Label1 div ul').html($(dest).html());
});
//トグル処理
$(function(){
    var open = 'data:image/gif;base64,'+
        'R0lGODlhCQAJAJEAAP7+/oKCggICAgAAACwAAAAACQAJAAACEYyPoAvG614LQFg7ZZbxoR8UADs=';
    var close = 'data:image/gif;base64,'+
        'R0lGODlhCQAJAJEAAP7+/oKCggICAgAAACwAAAAACQAJAAACFIyPoAu2spyCyol7W3hxz850CFIA'+
        'ADs=';
    $('.categoryLabel:has(ul)')
      .click(function(event){
        if (this == event.target) {
          $(this).children().toggle();
          $(this).css('list-style-image',
            ($(this).children().is(':hidden')) ?
              'url(' + close + ')' : 'url(' + open + ')');
        }
      })
      .css('cursor','pointer');
    $('.categoryLabel:has(ul)').css({
      cursor: 'pointer',
      'list-style-image':'url(' + close + ')'
    });
    $('.categoryLabel:not(:has(ul))').css({
      cursor: 'pointer',
      'list-style-image':'url(' + open + ')'
    });
    $('#Label1Cover').show();
  });
</script>
</b:includable>
</b:widget>

以上。
ラベルの設定を、”/”で区切り、親タイトル/子タイトルで設定すると、階層的に表示されます。


//--参考
Bloggerのラベルをカテゴリ別に整理する(ラベルの階層化)


Category: Blogger Tips もくじ >
< 5.リンクを貼る     7. プロフィールのなまえ変更 >

5.リンクを貼る

投稿記事にリンクを張る。
ぽちっと押すと、びょーんと飛んでくやつですね。

投稿編集画面のtool barの”リンク”をクリック。

『リンクを編集』窓が開くので、”表示するテキスト”（ブログ上で表示される文字列）
”リンク先のURL”を入力。
好みによりますが、”このリンクを新しいウィンドウで開く”をチェックすると、別ウィンドウでリンク先を開いてくれます。

設定終了したら、”OK”ボタン。


Category: Blogger Tips もくじ >
< 4. ラベルをブログに表示させる      6. ラベルの階層化 > 

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

前回設定したラベル「投稿記事の整理　- ラベル - 」をブログに表示させる。

こんな感じ。

ブログの管理画面で、”レイアウト”を選択。
適当なところの”ガジェットを追加”をクリック。

（ガジェットの追加って、数限られてんの？
と思ったけど、追加した後は新しいエリアが新規に作成された。）

”ガジェットを追加”をクリックすると、『ガジェットを追加』画面が表示される。

スクロールして”ラベル”を探し、クリック。

『ラベルの設定』画面が表示される。
適当にパラメータ設定した後、”保存”をクリック。

終了。

今回、p--qさんの『dishes dishes』　ラベル設定(1)ラベルのリスト表示
を参考にさせていただきました。

Category: Blogger Tips もくじ >
< 3. 投稿記事の整理-ラベル-    5.リンクを貼る >

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

投稿記事管理のために、ラベルを設定してみる。
（管理するほどまだ投稿してないけど…（￣▽￣；）

ラベルを設定すると…
ブログのメイン画面？で、”投稿”を選択すると、投稿記事一覧が表示される。
検索テキストボックスの横”すべてのラベル”をプルダウン。
フィルターかけたいラベルを選択すると、そのラベルの記事だけが表示される。

設定：
投稿記事を編集する画面で、”ラベル”クリック。

ラベルを入力するテキストボックスが現れるので、設定。
”完了”をクリック。

終了。

//-----------//
ブログ本体の方にも、カテゴリー別で表示できるみたいだから、後で調べてみよう。

何重もの階層構造的な管理はできないのかな？
bloggerは新規ブログ作るの簡単だから、テーマごとにブログ作っちゃって、統合するのが一般的？

Category: Blogger Tips もくじ >
< 2. 投稿タイトルのフォントを変える  　　　4. ラベルをブログに表示させる >

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

投稿のタイトルの文字が大きすぎるので、変えてみる。

Blogger main ページから、”テンプレート”をクリック
『テンプレートデザイナー』画面が現れる

”上級者向け”をクリック

”投稿”をクリック
［タイトルフォント］ってところで、フォント変更できるみたい。

Category: Blogger Tips もくじ >
< 1.画像を貼り付けてみる　　　　　3. 投稿記事の整理-ラベル- >

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

画像を張り付けてみる。

投稿画面を開く

①Tool bar? の”画像を挿入”アイコンクリック
『ファイルを選択』画面が表示される

②”ファイルを選択”アイコンクリック
挿入したい画像ファイルを選択し、開く
アップロードされたら、
③”選択した画像を追加”アイコンクリック


配置：
　自由に配置は決められないみたい。
　画像をクリックすると、メニューが現れ、左/中央/右揃えから選択。


Category: Blogger Tips もくじ >
2. 投稿タイトルのフォントを変える >

はじめてのプロフィール画像

プロフィール画像を設定してみる。

はじめての投稿

ぶろぐを始めてみました。