FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

プラグインカテゴリ3のデザインを変える【lightframe】

lightframeシリーズのプラグインカテゴリ3のデザインを変えるカスタマイズを紹介します。

standardシリーズをお使いの方は別記事のこちらを参考にしてください。

スタイルシートを編集します。

/*************************** ▼ 上部メニュー(プラグイン3) ▼ */
.plugin3_outline {
border-top: #e0e0e0 2px solid; /* 個別枠(上) */
border-right: #e0e0e0 2px solid; /* 個別枠(右) */
border-bottom:#e0e0e0 2px solid; /* 個別枠(下) */
border-left: #e0e0e0 2px solid; /* 個別枠(左) */
margin-bottom:20px;
}
.plugin3_title {
font-size:10pt; /* 文字サイズ(タイトル) */
font-weight:bold; /* 太字 (タイトル) */
color:#555555; /* 文字色 (タイトル) */
background-color:#f0f0f0; /* 背景色 (タイトル) */
border: #666666 1px solid; /* 枠 (タイトル) */
padding:5px 20px;
}
.plugin3_body {
font-size:10pt; /* 文字サイズ(本体) */
color:#000000; /* 文字色 (本体) */
background-color:#ffffff; /* 背景色 (本体) */
border-top: #e0e0e0 1px solid; /* 枠(上) (本体) */
border-left: #666666 1px solid; /* 枠(左) (本体) */
border-right: #666666 1px solid; /* 枠(右) (本体) */
border-bottom:#666666 1px solid; /* 枠(下) (本体) */
padding:5px 20px;
line-height: 1.3; /* 行間 (本体) */
}
/*************************** ▲ 上部メニュー(プラグイン3) ▲ */

上記各項目の値を変えるとプラグイン3のみデザインを変えることが出来ます。line-heightは行間を変えたいときに加えてください。

関連記事
[ 7400 ] 宜しくお願いします
テンプレートをカスタマイズするのは
初めてです。
いたおさんの説明は、とてもわかり易く
一つづつステップを踏んできましたが
プラグイン3で戸惑ってしまいました(~_~;)

TOPページだけじゃなく
常時、表示されるようにしたいのですが
教えて頂けませんか?m(_ _)m
[ 2009/12/13 16:00 ] [ 編集 ]
[ 7401 ]
>nyannko12000 さん
http://10plate.blog44.fc2.com/blog-entry-67.html
にその方法が載っています。
[ 2009/12/13 19:21 ] [ 編集 ]
[ 7410 ] > nyannko12000さん、tipslabさん
> nyannko12000さん
tipslabさんが教えてくれた記事を参考にしてください。

> tipslabさん
助けてくれてありがとうございました^^
[ 2009/12/13 22:20 ] [ 編集 ]
[ 7414 ] ありがとうございました
tipslabさん
いたおさん
優しく教えて頂きありがとう^^
早速やってみました。OKです♪


またまた???
http://nyannko12000.blog120.fc2.com/
http://neko4826.blog37.fc2.com/

同じくカスタマイズしたのに
http://nyannko12000.blog120.fc2.com/の方が
Firefoxで見ると字が大きいんです。
これは、FC2のサーバーの違いでしょうか???

なん度もスイマセン
なんて検索していいか分からなくて・・・(ToT)/~~~
暇~な時で良いのでよろしくお願いします
[ 2009/12/14 00:50 ] [ 編集 ]
[ 7419 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2009/12/14 21:02 ] [ 編集 ]
[ 7423 ] > nyannko12000さん
ブラウザには文字の大きさを変えて表示することができます。
[表示]→[文字のサイズ]
この設定を確認してみてください。
[ 2009/12/14 22:23 ] [ 編集 ]
[ 7442 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2009/12/16 21:33 ] [ 編集 ]
[ 7548 ] ありがとうございます^^
いたおさん
こんばんは^^
お返事のお礼に参りました。
遅くなってスイマセン(~_~;)

狐さんの[表示]→[文字のサイズ] がわからないので
Ctrl+Fで小さくしてみました。

また、質問するかも知れませんが
その際は、なにとぞよろしくお願い致します

PC早く良くなると良いですねぇ(;_;)

寒くなってきました
お体大切になさって下さいませ
[ 2009/12/28 01:03 ] [ 編集 ]
[ 7561 ] > nyannkoさん
私が答えられる範囲であればどうぞいつでも聞いてください。

シングルクォーテーションが含まれるサイト名はコメントリンクが表示されませんね・・・^^;
[ 2009/12/29 00:10 ] [ 編集 ]
[ 7769 ]
質問させてください。

http://dentalman.jp/
このサイトの真ん中部分に「デンタルマン・ユナイテッドとは?」や「歯並びチェック」や「よくある質問」や「治療の流れを教えて!」などの個所があります。

FC2ブログでもこのような部分を作成したいのですが、
どのようにすれば作成出来るのでしょうか?

このサイトのようにマウスを上に乗せると、違う画像が出てくるというようにしたいので教えてください。

よろしくお願いいたします。
[ 2010/01/08 15:06 ] [ 編集 ]
[ 7781 ] > めぞんさん
これはFLASHを使っています。これを作るには専用のツールと高度な知識が必要です。詳しくはGoogleで「FLASH 作り方」等で調べてください。
[ 2010/01/08 23:04 ] [ 編集 ]
[ 7879 ] 上段スペースのデザインについて質問があります。
お聞きしたいことがあります。

http://www.yahoo.co.jp/
ヤフーのトップページの検索ボックスの下で、
右サイドバーと左サイドバーの真ん中に、
「トピックス」「経済」「エンタメ」「スポーツ」「その他」という部分があります。

あのように、タブをクリックしたら、その中に表示されている中身が変わるというような枠を、ブログで作るにはどのようにすればいいのでしょうか?

ヤフーのようなタブ付きの枠の作り方と、そのそれぞれの枠内に各項目を記述する方法を知りたいです。

作るためのHTMLとスタイルシートの記述方法を教えていただけませんか?

よろしくお願いします。

[ 2010/01/14 17:01 ] [ 編集 ]
[ 7882 ] > 一歩さん
CSSかJavascriptで実装する方法があります。既に実装方法を紹介しているページが沢山あるのでこちらを参考にしてください。

Google検索「タブ html css」
http://www.google.co.jp/search?hl=ja&q=%E3%82%BF%E3%83%96+html+css&btnG=%E6%A4%9C%E7%B4%A2&lr=&aq=f&oq=

Google検索「タブ html javascript」
http://www.google.co.jp/search?hl=ja&q=%E3%82%BF%E3%83%96+html+javascript&lr=&aq=1&oq=%E3%82%BF%E3%83%96+html+
[ 2010/01/14 23:20 ] [ 編集 ]
[ 7892 ] ありがとうございました。
無事解決しました。

ありがとうございました!
[ 2010/01/16 09:17 ] [ 編集 ]
[ 7899 ] > 一歩さん
解決して良かったです^^
[ 2010/01/17 00:03 ] [ 編集 ]
[ 7905 ]
プラグイン3を、2つ並べたいのですが。
半分ずつに。

参考サイト
http://perfectnds.blog42.fc2.com/

ようするに、プラグイン3の幅を半分にして、2つ表示するということです。
▽画像説明▽
http://blog-imgs-34.fc2.com/l/o/v/lovecon845/20100117051246c31.png
[ 2010/01/17 00:59 ] [ 編集 ]
[ 7906 ]
[ 2010/01/17 11:12 ] [ 編集 ]
[ 7911 ]
プラグイン3の位置を↓のように変えたいのですがどうしたらいいですか?

-----------------
 TOP画像    
 ----------------
ココに移動  
         
 ---     ----
      
      
      
 ---     ----
[ 2010/01/17 20:42 ] [ 編集 ]
[ 7912 ]
[ 2010/01/17 21:35 ] [ 編集 ]
[ 7916 ] > ROXASさん、tskillさん、ZEROさん
> ROXASさん
プラグイン3を横に並べるのは難しいですが、テンプレートのHTMLに直接設置するフリーエリアを横に並べるなら可能です。記事を掲載したのでこちらを参考にしてください。

独立したフリーエリアを横に並べる
http://10plate.blog44.fc2.com/blog-entry-349.html

> tskillさん
いつもありがとうございます^^

> ZEROさん
それはテンプレートにより異なるので制作者様に聞いてみてください。
[ 2010/01/18 01:39 ] [ 編集 ]
[ 7918 ]
>いたお様

実は、それをやりたかったんですができなくて、プラグイン3でやろうとしてたんですよ。
わざわざ記事まで、書かせてしまいすみませんでした。
この記事を参考にカスタマイズしてみます。
ありがとうございました!
[ 2010/01/18 02:08 ] [ 編集 ]
[ 7931 ] > ROXASさん
フリーエリアが設置できたようですね。良かったです^^
[ 2010/01/18 23:15 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
ユーザータグ


△ ページトップへ戻る