2012年12月12日

サイドバーカスタマイズのプロフィール部を微調整

サイドバーカスタマイズで、プロフィール部分だけマウスカーソルが乗ったときの
挙動が違っていて、なんとかしたいと悩んでいました。

サイドバー比較

プロフィールのところだけ、マウスカーソルが乗った時に帯が中央寄せになっています。
これを何とか左寄せにしたいと思って、いろいろやってみたんですが、どうしても
左寄せにならない(^_^;

・・・で、ちょっと発想を変えて、プロフィールのところだけ帯の長さを変えないように
すればいいやということに・・・(^^ゞ

−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
  (〜 省略 〜)

div.side_text{
  width:200px;
  margin:0 0 2px;
}

  (〜 省略 〜)

#profile_body div.side_text{
  background-color:#EEDC60;
}
#profile_body div.side_text:hover{
  width:190px;
  background-color:#FCEBB1;
}

  (〜 省略 〜)
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

↑ サイドバーカスタマイズのスタイルシートです。
上から2行目の青字「width:200px;」で、帯の長さをサイドバーの幅と同じにして
います。
赤字の「width:190px;」が、プロフィールのところにマウスカーソルが乗った
ときの帯の長さを設定している部分なので、これを削除すれば、
マウスカーソルが乗っても帯の長さが変わらなくなります。

サイドバー比較

「#profile_body div.side_text」がマウスカーソルが乗っていないとき、
「#profile_body div.side_text:hover」がマウスカーソルが乗ったときの設定です。

もし、左右にサイドバーがある3カラムタイプのスキンで、左右のサイドバーの幅が
違う場合は、スタイルシートの青字「width:200px;」の所を、このカスタマイズで
設定する数が多い方の幅にしておいて、変えたいところだけ「width:230px;」とかを
入れてやれば、バッチリそろいますね。

−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
#profile_body div.side_text{
  width:230px;
  background-color:#EEDC60;
}
#profile_body div.side_text:hover{
  width:230px;
  background-color:#FCEBB1;
}
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−


にほんブログ村 IT技術ブログ フリーソフトへ

2012年12月07日

関連記事とつぶやきを設置してみました

 1記事表示のときに、記事下に「関連記事」を表示するようにしました。

みかんさんに教えてもらって、おーとえすさんのところで設置方法を勉強して、
やってみました。

   ↓ こちらで、詳しく説明されています。

  ファンブログで関連記事を表示させるスクリプト2

  関連記事の飾り付け

やっと設置ができたところなので、もう少し見栄えを整えていこうと思っています。


 右サイドバーに「つぶやき」というコーナーを設置しました。

スクロールバーが付いたものを見つけたので、使ってみたくて試しに置いています。
つぶやきといえば Twitter(ツイッター)ですが、何の関係もありません(^^ゞ


にほんブログ村 IT技術ブログ フリーソフトへ

2012年11月27日

トップナビゲーションのCSSコード(後半)の説明

2012.11.21の記事 「トップナビゲーションの設置方法のまとめ」 の中で書いたCSS(スタイルシート)コードの説明(後半)です。

 ↓ これが、説明するスタイルシート・コード(後半)です。
----------------------------------------------------------------------
a.toppage{
  background-image:url(http://fanblogs.jp/pontaoyaji/file/135/g2eDYoN2g3mBW4NXf3g.png);
}
a:hover.toppage{
  background-position:0px -25px;
}
a.customizelink{
  background-image:url(http://fanblogs.jp/pontaoyaji/file/135/g4qDk4NOj1fdTA.png);
}
a:hover.customizelink{
  background-position:0px -25px;
}

  〜 途中、省略 〜

a.reserve{
  background-image:url(http://fanblogs.jp/pontaoyaji/file/137/g3yDQ4OTg2eDVINDg2dS1Q.png);
}
a:hover.reserve{
  background-position:0px -25px;
}
----------------------------------------------------------------------


◆ 概要

上に書いたコードは、6行で一つのナビゲーションボタンの設定になっています。
このブログでは12個のナビゲーションボタンを並べていますので、6行のコードを12個分繰り返して書いています。

全部書くと長いので、ここの説明では、途中を省略しています。
実際にブログに設置する場合は、省略しないで全部書かないといけません。


◆ 各部分の説明

1行目の a.toppage{ と 3行目の } との間に、1つ目のボタン(トップページ)の画像を表示させるコードを書いています。
background-image:url(画像のURL); は、ブログにアップロードした画像のURLを( )内に入れて、背景画像として表示しています。

4行目の a:hover.toppage{} との間に、マウスカーソルがボタンの上に乗ったときにどう表示するかを書いています。
background-position:0px -25px; で、背景の位置を変えています。
最初の 0px が左右の移動、次の -25px が上下の移動をしています。
左右には動かさないで、上に25移動させていることになります。

下の画像が、ブログにアップロードしたトップページボタンの画像ですが、高さが25px+25pxになっていて、通常は上半分が表示されます。
マウスカーソルが乗ったときに、上に25pxずらして下半分が表示されるようにしているわけです。
トップページボタン


◆ 参考サイトと設置の経緯など

このトップナビゲーションを設置するにあたり、参考にさせていただいたサイトのリンクです。

・ 「WEB工房きくちゃん」さんの ロールオーバーリンク6〜画像編3〜
・ 「みかんの部屋」さんの トップナビゲーションのメニューを画像でロールオーバー出来ました(^^♪

このトップナビゲーションは、みかんさん が マスクドライダー17号さんのブログで設置しているのを見て、一緒にやってみようということになって、作り始めました。
そして、マスクドライダー17号さんにやり方を聞いて、おーとえすさんTomさん にコメントで助けていただきながら、ここまで完成することができました。

みなさん、大変ありがとうございましたm(__)m


◆ 次の予告

次は、今のトップナビゲーションにドロップダウンを追加したいと思っています。
カテゴリというボタンを作って、各カテゴリはそのボタンからドロップダウンさせます。

といっても、できるかどうか分からないし、いつになるか分かりませんが・・・(^_^;



にほんブログ村 IT技術ブログ フリーソフトへ

2012年11月26日

トップナビゲーションのCSSコード(前半)の説明

2012.11.21の記事 「トップナビゲーションの設置方法のまとめ」 の中で書いた
CSS(スタイルシート)コードの説明(前半)です。

CSS は Cascading Style Sheets の略で、色・大きさ・配置などの見栄えを設定するための
コードです。


 ↓ これが、説明するスタイルシート・コード(前半)です。
----------------------------------------------------------------------
/* ▼ トップナビ ▼ */
#menu{
  list-style:none;  リストの各項目の左に付く「・」を表示させない設定です。
  width:100%;  ブログの幅全体をメニューの幅として使う設定です。
  margin:11px;  メニュー全体を右に11px寄せて、中央付近に表示しています。
  padding:0;  上のmarginが領域間の隙間、paddingは領域内の隙間。(-_-)zzz
}
#menu li{
  list-style:none;  上と同じ。(なぜ、ここにも書くのか不明?)
  float:left;  メニュー内の各ボタンを、横に並べる設定です。
  width:130px;  各ボタンの設置スペースの幅を130pxにする設定です。
}
#menu a{
  display:block;  ボタンを表示するための範囲を確保する設定です。
             次の2行でその範囲の大きさを指定しています。
  width:130px;  ボタン1つの幅を130pxで表示する設定です。
  height:25px;  ボタン1つの高さを25pxで表示する設定です。
  text-indent:-100px;  文字を100px左に移動させて、設定した範囲からはみ出すように
                しています。
  overflow:hidden;  範囲からはみ出した文字を、表示させない設定です。
}


  〜 後半、省略 〜


/* ▲ トップナビ ▲ */
----------------------------------------------------------------------


◆ 概要

#menu の名前は、HTMLコードの最初の <ul id="menu"> と同じ名前です。
HTMLの"menu"は、#menu のスタイルシートに従って表示されるという仕組みです。

このスタイルシート・コード(前半)は、大きく3つのブロックに分かれています。
 #menu{ 〜 } : メニュー全体の設定
 #menu li{ 〜 } : リストの設定
 #menu a{ 〜 } : 各項目の設定

最初の /* ▼ トップナビ ▼ */ と最後の /* ▲ トップナビ ▲ */ は、コメントです。
/* と */ とで、はさんだ部分はコードとして処理されません。
HTMLのコメントは <!-- と --> とで、はさみました。
HTMLとCSSとでは、コメントの書き方が違うのです。


◆ 各行の補足説明

marginpadding ですが、要は位置調整に使う設定ですが、なんだか分かりにくいです。
どちらも値を大きくすると、メニューは右に寄っていきます。
色々数値を入れてみて、調節するのがよさそうです。

list-style:none; ですが、今回のように画像のボタンを使った場合は、#menu#menu li
両方が要らないかもしれないです。
試しに、両方外してみたら、変化なしでした。
(でも、残しておこう・・・(^^ゞ)

display:block; は、指定しないと inline(インライン)という設定になって、そこの文字部分
だけを表示する設定ですが、block(ブロック)にすることで、ボタン1個分の範囲(ブロック)を
表示させる領域を確保しています。
(↑ ??ですね(^_^; 「CSS display」とかで検索すると、いい説明が見つかります)

HTMLコードのリストの各項目に、その項目を表す文字を設定している(Toppageなど)
のですが、text-indent:-100px;overflow:hidden; で、その文字を表示範囲から
はみ出させて、隠しています。


◆ 以上です ◆

いろいろ調べながら説明を書いてみましたが、難しくてよく分からないところもあります。
そういうところは、ボンヤリとした説明になってしまっています(^^ゞ

各行の詳しい意味などは、「CSS ○○○」などでウェブ検索してみたり、
実際にブログに配置したあとで、数値を変えたり、行を削除したりしてみると、
分かりやすいかもしれません。

次は、スタイルシート・コード(後半)を説明します。


にほんブログ村 IT技術ブログ フリーソフトへ

2012年11月22日

トップナビゲーションのHTMLコードの説明

前回の記事 「トップナビゲーションの設置方法のまとめ」 の中で書いたHTMLコードの説明です。
スタイルシートのコードは、次の記事で書くことにします。


 ↓ これが、説明するHTMLコードです。
----------------------------------------------------------------------
<!--▼ トップナビ ▼-->
<ul id="menu">
<li><a href="http://fanblogs.jp/pontaoyaji/" class="toppage">Toppage</a></li>
<li><a href="http://fanblogs.jp/pontaoyaji/archive/104/0" class="customizelink">CustomizeLink</a></li>

  〜 途中、省略 〜

<li><a href="http://fanblogs.jp/pontaoyaji/category_14/" class="reserve">Reserve</a></li>
</ul>
<!--▲ トップナビ ▲-->
----------------------------------------------------------------------

◆ コメント行

最初と最後の <!--▼ トップナビ ▼--> と <!--▲ トップナビ ▲--> は、コメントです。
<!-- と --> とで、はさんだ部分はコードとして処理されません。

あとで分かりやすいように、ここから、ここまでがトップナビゲーションのコードと分かるように
メモを書いているわけです。


◆ リストの名前

<ul id="menu"> は、このコードのタイトルのようなものです。
ul は、いくつかの項目をまとめて、リスト形式にするときに使います。

今回は menu という名前のリストを作っているわけです。

最後の </ul> がリストの終わりですので、その間にリストを入れることになります。


◆ リストの各項目

<li> で始まる行が、リストの各項目になります。
1つの項目は <li> で始まって、</li> で終わります。
トップナビゲーションに設置するボタンの数だけ、項目を作ることになります。

a href="http://fanblogs.jp/pontaoyaji/" の " と " との間に、そのボタンを押したときに
開くページのURLを入れます。

class="toppage" は、このボタンの見栄えなどを設定するための名前を付けています。
ここでは、ブログのトップページを開くボタンなので、"toppage" という名前にしました。

</a> の前の Toppage は、なにかの原因で画像が表示されないときに表示する文字です。
(たぶん(^_^;)


◆ 以上です ◆

次の記事で、スタイルシートのコードの説明を書きます。


にほんブログ村 IT技術ブログ フリーソフトへ

2012年11月21日

トップナビゲーションの設置方法のまとめ

このブログに設置しているトップナビゲーションの設置方法のまとめです。

以前、「トップナビゲーションのボタンを画像に変更してみました」という記事で、だいたいの
設置方法を書いているのですが、ゴチャゴチャして解りにくいので、書き直しておくことに
しました。
実は、今のトップナビゲーションの改造を計画中で、そのための復習用の記事でもあります(^^ゞ

画像のタイトル
   ↑ これが完成したものです。


◆ 準備 

他のカスタマイズでも同じですが、スタイルシートとHTMLのバックアップを取っておきましょう。
ファンブログの場合は、スタイルシート、メイン、ポータル、アーカイブ、1記事、プロフィールの
6つのコードを、それぞれコピーして、メモ帳やテキストエディタに貼り付けて、分かりやすい
フォルダに保存しておいてください。

カスタマイズに失敗したときに、元に戻せるので安心です。


◆ ボタン画像を作る

設置するブログの幅、ボタンの数から計算して、1つのボタンの大きさを決めます。
ボタンを作るソフトは何でもかまいません。
ExcelやWordでオートシェイプなどを使って作って、画像をキャプチャーしてもいいと思います。
彩彩畑AquaMaker2 などのフリーソフトでボタンを作ることもできます。

今回は、ボタンの上にマウスが乗ったときに、ボタンの色が変わるようにしています。
そのために、色違いの2つのボタンを1つの画像に合体させています。

AquaMaker2 を使ってボタンを作る方法を別の記事で書いているので、参考にしてください。

  トップナビゲーションのボタンの作り方(その1)

  トップナビゲーションのボタンの作り方(その2)

  トップナビゲーションのボタンの作り方(その3)


◆ ボタン画像をアップロードする

出来上がったボタン画像をブログにアップロードします。
記事に画像を挿入するときと同じ方法で、アップロードできます。

「トップナビゲーション用ボタン」など適当なタイトルで記事を作って、そこに画像を挿入します。
ファンブログの場合、1記事に5つの画像しか挿入できないので、6つ以上ボタンがある場合は、
必要な分だけ記事を分けます。

ボタン画像をアップロードしたら、その記事は「公開」ではなく「下書き」にして保存します。


◆ HTMLにトップナビゲーション用のコードを加える

下のコードは、このブログに設置しているものです。
これを参考にして、自分のブログ用のコードを作ってください。
ファンブログの場合は、メイン・アーカイブ・1記事などのHTMLコードに加えます。
「<!-- /header -->」の次に入れるといいと思います。


<!--▼ トップナビ ▼-->
<ul id="menu">
<li><a href="http://fanblogs.jp/pontaoyaji/" class="toppage">Toppage</a></li>
<li><a href="http://fanblogs.jp/pontaoyaji/archive/104/0" class="customizelink">CustomizeLink</a></li>

  〜 途中、省略 〜

<li><a href="http://fanblogs.jp/pontaoyaji/category_14/" class="reserve">Reserve</a></li>
</ul>
<!--▲ トップナビ ▲-->


◆ スタイルシートにトップナビゲーション用のコードを加える

下のコードは、このブログに設置しているものです。
すごく長いコードですが、ほとんどボタンの数だけの繰り返しです。
これを参考にして、自分のブログ用のコードを作ってください。
ファンブログの場合、スタイルシートの最後に貼り付ければOKです。


/* ▼ トップナビ ▼ */
#menu{
list-style:none;
width:100%;
margin:11px;
padding:0;
}
#menu li{
list-style:none;
float:left;
width:130px;
}
#menu a{
display:block;
width:130px;
height:25px;
text-indent:-100px;
overflow:hidden;
}

a.toppage{
background-image:url(http://fanblogs.jp/pontaoyaji/file/135/g2eDYoN2g3mBW4NXf3g.png);
}
a:hover.toppage{
background-position:0px -25px;
}
a.customizelink{
background-image:url(http://fanblogs.jp/pontaoyaji/file/135/g4qDk4NOj1fdTA.png);
}
a:hover.customizelink{
background-position:0px -25px;
}

  〜 途中、省略 〜

a.reserve{
background-image:url(http://fanblogs.jp/pontaoyaji/file/137/g3yDQ4OTg2eDVINDg2dS1Q.png);
}
a:hover.reserve{
background-position:0px -25px;
}
/* ▲ トップナビ ▲ */


◆ 以上です ◆

次の記事で、コードの内容を説明します。
(分かる範囲で(^^ゞ)

にほんブログ村 IT技術ブログ フリーソフトへ

2012年11月05日

トップナビゲーション関連の記事のまとめ

このブログには、トップナビゲーション(↓ これ)を設置しています。
ボケてタイトル

このトップナビゲーションは、いろいろ形を変えながら、今のものに落ち着いていて、
その間に関連記事もいくつか書いているのですが、訂正や書き直しが多くて、
どーも分かりにくくなってしまっています(^_^;

そのうちに、ちゃんと分かりやすく、まとめて書いておこうと思っていたのですが、
すっかり忘れていて、今になって書こうと思ったら、整理がつかない・・・(^_^;

・・・というわけで、これまでのトップナビゲーション関連の記事のまとめです。

 2012.06.12 トップナビゲーションを設置しました

 2012.06.09 トップナビゲーションのフォントを変更する(正式版(^^ゞ)

 2012.06.15 トップナビゲーションのボタンを画像に変更してみました

 2012.06.21 トップナビゲーションボタンをホバー時に透明度を上げるようにしました

 2012.08.02 トップナビゲーション復活!(^_^)v

 2012.08.08 トップナビゲーションのボタンの作り方(その1)

 2012.08.09 トップナビゲーションのボタンの作り方(その2)

 2012.08.13 トップナビゲーションのボタンの作り方(その3)


今回は、単にトップナビゲーション関連の記事を、並べただけです(^^ゞ
これを見ながら思い出して、分かりやすくまとめたいと考えています。



にほんブログ村 IT技術ブログ フリーソフトへ

2012年05月29日

ファンブログのフリーエリアにタイトルバーを付けました

フリーエリアというのは、サイドバーに広告などを貼るためのスペースで、
ファンブログの場合は、「スタイルの編集」の「項目の追加/編集」で追加
できます。
追加した項目に、広告などのコードを貼り付けて、「機能選択/並び替え」
で配置できます。

このフリーエリアに、ブログランキングのバナーのコードを貼って設置した
のがこれです。

もともとスキンにあったプロフィールの下に設置したのですが、タイトルが
無いバナーだけの状態です。

今日は、このフリーエリアにタイトルバーを付ける方法を見つけたので、
さっそくやってみることに・・・。

その方法は、wikoさんのブログにありました。
「全スキン共通で使える!スキンと同じデザインになるサイドバーの項目作成タグ」
のところをクリックするとそのコードがあります。
そのコードの「<!--入力初め-->」と「<!--入力終わり-->」の間に、そこに設置
する広告などのコードを入れて、「★ここにタイトル★」のところを適当な名前に
変えて、フリーエリアに貼ればOKです。

こんな感じになります。


wikoさんのブログには、このようなカスタマイズ情報がたくさんあります。
カスタマイズに興味のある人に、オススメです!!


にほんブログ村 IT技術ブログ フリーソフトへ
ブログ内を検索

ファン
最新記事
カテゴリー
最新コメント
ツイッター

広告設置のお知らせ

当ブログは、Amazonアソシエイト・プログラムの参加者です。
(Amazonアソシエイト・プログラムは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムです)
記事内で使用している画像の一部は、Amazonの商品画像を使用しており、その商品へのリンクになっています。

また、その他のアフィリエイト・サービス・プロバイダなどの広告も表示しています。
当ブログをご覧の際は、cookie を有効にし、Webブラウザの広告ブロック機能を使用しないで、ご覧いただきますようにお願いいたします。

プロフィール
ぽん太親父さんの画像
ぽん太親父
建築関係の小さな事務所で、他に適当な人間がいないことから、コンピューター関連の担当をさせられています。 趣味でけっこう長い間パソコンを使っていますが、ちゃんと勉強していないので、うまくいかなくて冷や汗をかくこともしばしば。
プロフィール