テンプレートから、タブのテキストと背景について考えてみる！

　〔タブのテキスト〕と〔タブの背景〕について検証していきたいと思います。〔タブ〕とは、いったいなんでしょうか？　パソコン用語としてはよく聞く言葉ですが、いざそれについて問いかけられているようで戸惑いました。自分自身のための復習も込めて、少し考えてみたいと思います。

　ここで解説しようと思って、上図で示すように〔タブのテキスト〕をクリックして、右側の「指定エリア」を開いてみました。先日に解説した〔ブログのタイトル〕や〔ブログの説明〕の時と違って、どこにも赤い点線が現れていませんでした。

　あれ！　と思い、何処が操作の対象になるのか確認する必要がありますので、右側の「指定エリア」の指定を変えて、その影響を確認しようと思ったのですが、下のプレビュー領域からブログ内を調べてみても、どこも変化していませんでした。そこで、ふと我に返るように思い始めたのです。

　〔タブ〕ってなんだっけ？　自分が普通に認識している〔タブ〕というのは、このブログでも当然表示されているように、サイトやブログを開いた時に示すこのインデックス部分のことです。

※Googleを示すタブ(選択画面)とBlogger、Wikipediaのタブ

　見ての通り、普段パソコンでネットを閲覧しているのならば当たり前のように目にするブラウザの一部ですが、自分として最初に考えていたのが、この〔タブ〕についての色指定などができるのだろうかと思っていたのです。しかし、いくら指定を変えたりして試してみても、何も変化しなかったのです。

　少し調べて見る必要に迫られ、あらためて〔タブ〕について考えました、そして、いろいろと調べるうちにわかってきたことがありました。

　そのヒントは、以前、「ガジェットの追加」に関して何度か解説した中にありました。以下に示すページが参考になります。

　＞　ガジェットで「ページ」追加が可能に！


　つまり、その中で管理メニューからレイアウトを開き、「ガジェットを追加」をクリックして開いた、「ページ」ガジェットについて解説する中にヒントを見つけたのでした。同じ図を下記に示しますので見てください。画面の下の方に「ヒント」とありますが、そこを抜き出して図の下に示します。

　見てのとおり、そのヒントには、こう書かれています。

ヒント ： 〔デザイン〕でガジェットを移動するとデザインが変わります。 

タブ ― ガジェットを見出しの下に移動します

リンク集 ― ガジェットを横の列に移動します

　なるほどと思いました、前にも一度ガジェットをヘッダーやフッターに移動したりして、その表示の具合をテストした時のことを思い出しました、つまり、今まで右のサイドバーに配置していた「ページリンク」の「ホーム」「Bloggerガイド」などは、この「ページ」ガジェットで指定して配置していたのですが、それが上に示すヒントの「リンク集」の内容でした、ということは、つまり……

　その配置先をヘッダーの所に移動させたものが「タブ」だと気づいたのでした。


　さっそく移動しプレビューで確認してみたら、ちゃんと〔タブ〕として「ホーム」「Bloggerガイド」などが表示されて、あらためて納得した次第でした。

　現在このブログを見ている人にとって、既にレイアウト上は、タイトルとリードの下に、「ホーム」「Bloggerガイド」などが〔タブ〕として表示されていますので、いったい何の説明をしているのかと分かりにくい内容になってしまい申し訳なく思います、ご容赦ください。

　少々言い訳がましいのですが、今までのレイアウトと現在のレイアウトを下の方に並べておきますので、何の説明をしていたのか、その違いがよく分かると思います。

※「ページ」ガジェットを右サイドバーにレイアウト

※「ページ」ガジェットを「タブ」としてヘッダー下にレイアウト

　やっと本題に入れます！　それでは、新しく「タブ」が配置された「テンプレート デザイナー」を下にレイアウトしていますので、これから本題の解説を始めたいと思います。

 タブのテキスト　　　　

　見てのとおり、「ホーム」、「Bloggerガイド」、そして新しく追加した「ブログテストページ」のタブが赤い点線で囲まれています。やっと選択項目の〔タブのテキスト〕をクリックして表示された右側の指定エリアが、下のプレビュー領域のどの部分と連動しているのかが確認できました。

　今のところ、このブログはまだ構築の途中であるためタブの項目が少ないですが、今後追加していけばもっと充実していくことでしょう。

　さっそく見ていきたいと思いますが、〔タブのテキスト〕をクリックして開いた右側に表示される「指定エリア」の内容は、基本的今までと同じです。

　指定するには、今までと同様にフォントの種類を変えてみるとすぐに変更できるのが分かります。元に戻すのも今までと同様に、「フォント」指定エリアの下の方にある「タブのテキストの詳細な変更をクリア」という青い文字をクリックすると、すべて元に戻せます。

　テキストの色 も、カラーチャートから指定する方法に加え、数字やアルファベット入力で指定する１６進数に対応した入力方法も、今までと同様です。

　デフォルトでは「選択済みの色」、「テキストの色」共に「＃６２７３４９」というグレー系の同じ配色になっています。ここは、クリックする前とクリック後に、テキストの色が変化するようにするか、しないかを指定する項目ですが、もちろん自由に変更可能です。

　その他、「このテンプレートの色」というタイトルの１２色からクリックして選択する方法、「おすすめの色」として用意されている１６色から選択する方法についても、今までの解説と同様の使い方で指定ができます。

 タブの背景　　　　

　選択項目から次の〔タブの背景〕をクリックしたのが下に示す図です。

　右側の指定エリアが〔タブの背景〕用に変化しています。同様に下のプレビュー領域の「ホーム」、「Bloggerガイド」、「ブログテストページ」を含むタブに関する部分が赤い点線で囲まれていて、その範囲が容易に確認できます。

　指定エリア内で指定できる内容は、左から「選択済みの色」、「背景色」、「べベル（面取り）の色」となっています。それぞれの意味は次のとおりです。

• 「選択済みの色」　―　現在選択されているタブの背景色。
• 「背景色」　―　タブの基本的な背景色。
• 「べベル（面取り）の色」　―　タブ全体の範囲を示す下線。

　指定方法は今までと同様に指定可能ですので、参考にしていただいて指定してください。

　　いろいろ試した後に、変更をブログに適用させる方法も今までと同様に、指定エリアの右端上部にあるオレンジ色のブログに適用ボタンをクリックしておこないます。

　いかがでしょうか？

　ほとんどの指定が、今まで何度も繰り返してきた同じ指定方法で操作できるため、複雑なことが簡単に行えるようでもあり、慣れればとても使いやすくなりそうです。

　今後とも使い方を極めるため頑張りたいと思います。

　次回は〔投稿タイトル〕以下について、内容を吟味しながら解説したいと思います。


注意 ： 上記解説で使用している画像は、以前使用していたテンプレート画像ですので現状と違う場合があります。基本的な内容に変化はありませんが、実際にご覧頂いている時のブログの状態とは違う場合があることをご了承ください。