[@wiki] 【デザイン】 デザイン総合 【CSS】 (87)
らんさん
2008/01/15 18:34
質問ごとにスレを立てるのめんどくさいよ。
ってことで作成しました。
ってことで作成しました。
スポンサード リンク
|
|
Abraham
さん 2008年03月26日(Wed) 05:58:48
以前【初心者】スレでリンクを貼られていたサイトは「金魚」でしたよね。
サイト名は #header h1 a の所を弄るといいです。 ページ名は #header p a です。 知っているかもしれませんが，書体の指定では "～" としておくと無難です。 |
|
|
|
|
|
4507*yahoo
さん 2008年06月04日(Wed) 01:31:01
はじめまして。
デザインで「ライス」を利用しているのですが、メニューがIEとFireFoxでは違う横幅で表示されてしまいます。 どうやら、CSSの#r_main{width なにか方法があれば教えてください。 ついでにもう１つ質問（＾＾；；； コメント表示で文章を自動的に折り返すことは可能でしょうか。 使い始めたばかりなので、幼稚な質問でしたらすいません・・・。 |
|
mojaco
さん 2008年07月16日(Wed) 00:47:07
初めまして。
引用文のプラグインを使用したいのですが、一つのデザインにつき複数の引用文プラグインを使用したいと思っています。 #blockquote() 引用文を表示します。 引用文を表示します。 } ↑このタグを使用しているのですが、これを二つ定義して使用することは出来るのでしょうか？ どなたかご助言いただけますと幸いです。 |
|
Shirase
さん 2008年07月23日(Wed) 09:31:02
＞mojacoさん
2つ定義っていうのはどういうことでしょうか？ #blockquote() それとも1ページ中に2つ以上#blockquote() |
|
ptx003
さん 2008年07月30日(Wed) 23:55:12
はじめまして。
デフォルト１ の設定を使用させていただいているものなのですが、ピンクベースからブルーベースに全体色を変更したいのです。 サイト名、ページ名はakememoさんの質問で何とかなりそうなんですが、メニューの後ろのピンクやタブといったところのピンクをどうすれば変更できるか、わかりかねています。 お手数をおかけしますが、ご教授いただけませんでしょうか？ |
|
space
さん 2008年08月02日(Sat) 03:20:02
はじめまして。
ノート（３段組）のデザインにしているのですが、「メニュー」と「右メニュー」の背景色を変えたいのですが、どうしても分りませんでした。 どなたかお教え頂けないでしょうか。 よろしくお願い致します。 |
|
|
Abraham
さん 2008年08月02日(Sat) 23:22:28
>ptx003さん
スミマセン，基本デザイン「デフォルト1」のCSSのひな形見ましたが，記述量が死ぬほど膨大で訳分かりませんでしたorz それでも，メモ帳の検索機能とか使って該当するらしい箇所はないかと少しは調べたんですが，やっぱりムリでした…。 お役に立てずスンマセンorz >spaceさん 「CSSカスタマイズ」のフォームに以下の記述をコピペして，色コードの部分をカスタマイズしてください。その後「変更する」ボタンを押して確定させます。 .outer { border-left:1 border-right: } |
|
|
Abraham
さん 2008年08月02日(Sat) 23:26:04
あ，上の記述の，
border-left の色コードのところ，デフォルトではrightと同様， #F5F5F5 です。間違ってテストしたときの記述がそのまま載っています。 このままだとメニュー欄が真っ赤になるので，ビックリしないでねｗ |
|
makuin-goo
さん 2008年11月18日(Tue) 03:57:51
はじめまして。
ノート（３段組）のデザインにしているのですが、「右メニュー」を撤去して2カラムにしたいのです。4時間ぐらい苦闘してもダメだったので相談させて下さい。 |
|
|
Abraham
さん 2008年11月18日(Tue) 06:56:36
>makuin-goo さん
「CSSカスタマイズ」で，以下の記述をコピペして「変更する」ボタンを押して確定させてください。「基本デザインのCSSを無効化する」チェックボックスはオフにしておいてください。 .inner { border-right: } .outer { border-right: } .rightcol { margin-right: width:0px; } なんか，ヤッツケでやってみたら予想Guyにウマくいったｗｗ。 でも，使用中にバグったら，その時はｺﾞﾒﾝ。 |
|
|
|
|
makuin-goo
さん 2008年11月18日(Tue) 20:28:19
お！こんな感じです！凄いです！文末に上の記述を加えたらいけました。
ずっと .rightcol { のパラメータ変える事しかしてなかったので助かりました。thxです！ |
|
|
kryptos
さん 2008年12月08日(Mon) 23:06:49
はじめまして。
3カラムデザインで「２つ目のメニューを表示しない(nomenu2)」プラグインを使用した時、右側の余白をなくしたいんですが、どこをどう設定したらいいんでしょうか？ |
|
|
|
|
kryptos
さん 2008年12月28日(Sun) 13:02:23
>>snakememoさん
書き込んだのをすっかり忘れていました。 デザインはオレンジロゴ（２カラム）です。 >>5656MHħさん タイトル左のロゴでしょうか？ オレンジロゴ（２カラム）だと、CSSの先頭にある #atwiki-jp-bg background:tr } で指定できます。 なお、デフォルトロゴのサイズは100x100です。 |
|
|
|
|
Shirase
さん 2009年01月04日(Sun) 05:47:47
＞☞{∫5656@۩⌒۞ħ} さん
質問する前にCSSとは何かをGoogle検索などで最低限調べてください。 CSSとはどういうものかを知っていることを前提に書きますが、基本的には前のWikipedia風＜base_029m.css オレンジロゴ（3カラム）＜base_032p2.cs 基本的には画像のURLを指定してやっているだけなので、「CSSカスタマイズ」の「ユーザー定義CSS」で #atwiki-jp-bg background:tr } を記述して適用してやるだけでロゴが変更できます。 なお、ロゴの大きさは100x100にしておくといいと思います。 |
|
nightgamer
さん 2009年01月25日(Sun) 00:35:08
お尋ねしたいのですが、@wikiで作られたページに
普通のHP用に配布されているテンプレートを適用することは出来るのでしょうか？ 出来るようでしたら、やり方の書いてあるページもお教え願えないでしょうか？ |
|
6850*yahoo
さん 2009年02月25日(Wed) 23:41:32
ヘッダの画像の設定についての質問です。
画像の中央寄せは以下を追加でできましたが 画像の上寄せはどのように書けばよいですか？ #header { text-align: center; } #header h2 { text-align: left; } オレンジロゴ(2カラム)使用です。 |
|
|
Shirase
さん 2009年02月26日(Thu) 00:07:50
＞6850*yahooさん
#header { vertical-alig } でいいのではないかと思います。 vertical-alig http://w3g.jp でご確認ください。 |
|
|
Abraham
さん 2009年02月26日(Thu) 01:14:49
>>6850*yahooさん
ヘッダー画像の上寄せは， デフォルトでそうなっているはずだと思いますので， それでもなお間隔が空くということは， きっと質問者さんは「タイトル・背景画像設定」を使用しているのではないでしょうか? (CSS記述からすると，もしかしたらオイラの「個人的まとめ」サイトを御覧になったのかもしれません) もしそうなら， 「タイトル～設定」を使用した状況で上を詰める方法をオイラは知らないので， それを使用しない前提で説明してみます。 (1)「タイトル・背景画像設定」>「トップタイトル表記の種類」で「テキスト」を選択し， (2)「CSSカスタマイズ」で以下のように記述し，「変更する」ボタンを押して確定させる。 #header { background: url(【画像URL】) no-repeat center top; margin: 5px 25px 25px 25px; height: 【画像の高さ+20】px; } ※この際，「margin:;」内の「5px」の箇所で， ヘッダーの上の間隔を指定しているので， 好みの数値を記入してください。 これで出来ませんでせうか?( ＾ω＾) |
|
|
Abraham
さん 2009年02月26日(Thu) 16:38:07
【追記】
上記の方法の場合，サイトタイトルがリンク表示されますが，それを消したい場合は，以下の記述を加えてください。 なお，その際， 【使用画像の高さ】px を下のh2の「padding-top: px;」に記入すること。 #header h1 { display: none; } #header h2 { padding-top: px; } まぁ，前回のレスを含め，全てまとめサイトに書いてある事の転記なんですがｗ |
|
|
6850*yahoo
さん 2009年02月26日(Thu) 20:18:40
Shirase さん
アドバイスありがとうございます。 #header { vertical-alig } 早速やってみましたが残念ながら変化はありませんでしたorz snakememo さん アドバイスありがとうございます。 ご指摘の通り「個人的まとめ」サイトさんをみてトライしましたｗ #header { background: url(【画像URL】) no-repeat center top; margin: 5px 25px 25px 25px; height: 【画像の高さ+20】px; } #header h1 { display: none; } #header h2 { padding-top: 【画像の高さ】px; } 早速試してみたところ画像がセンタートップ（中央上寄せ）になりました！ ありがとうございました！ ちなみに中央上寄せではなくただの上寄せ（基本から上寄せするだけ）はどうすれば良いですか？ background: url(【画像URL】) no-repeat center top; この行の center を削って background: url(【画像URL】) no-repeat top; とやってみましたがダメでした・・・ background: url(【画像URL】) no-repeat left top; とやってみると100ｘ100のロゴの横ではなくページの左端まで移動してしまいます・・・ 基本のロゴの横に画像を上寄せ表示させてみようと思うのですがうまくいきませんorz |
|
|
Abraham
さん 2009年02月26日(Thu) 22:42:36
>>6850*yahooさん
うまくいきましたか。ヨカタ。 @wikiロゴの横に表示するには， 以下のように記述を変えてください。 ロゴ横にずらす部分に加えて，他の箇所についても少しだけ数値を変えました(細かい修正ですがｗ)。 #header { background: url(【画像URL】) no-repeat 106px top; margin: 5px 25px 25px 25px; height: 【画像の高さ+22】px; } #header h1 { display: none; } #header h2 { padding-top: 【画像の高さ+2】px; } ※「#header」部分の以下の行， background: url(【画像URL】) no-repeat 106px top; の「106px」の箇所で，背景画像をどれだけ右にずらして表示させるかを指定することになります。なので，細かい位置の修正は御自由に。 |
|
|
Abraham
さん 2009年02月26日(Thu) 22:58:32
【追記】
アト，要らないかもしれませんがオマケ情報を…。 ページ名リンク表示を背景画像の範囲中にまで上げて表示させたい時は， (1)「#header」部において， height:【画像の高さ】px; (2)更に，「#header h2」部において， padding-top:【画像の高さ-20】px; と変えればオケーです。 ヘッダー下部のオレンジのボーダーの上下位置の変更は(1)の， ページ名リンク表示の上下位置の変更は(2)の，数値を変更して修正してください。 |
|
|
6850*yahoo
さん 2009年02月27日(Fri) 00:58:41
snakememo さん
さっそくのアドバイスありがとうございます！ #header { background: url(【画像URL】) no-repeat 106px top; margin: 5px 25px 25px 25px; height: 【画像の高さ+22】px; } #header h1 { display: none; } #header h2 { padding-top: 【画像の高さ+2】px; } こちらを試したところピタッとロゴの横にきれいに表示されました！！ ありがとうございました！ オマケ情報も試してみました。 こちらも見事にページ名リンク表示が画像の範囲中に表示されました！ ヘッダー下部のオレンジのボーダーの上下位置の変更とページ名リンク表示の上下位置の変更も簡単に調整が可能でした！ あとロゴの位置を上下左右に微調整できるとさらにレイアウトの自由度があがると思うのですがそんなこともCSSでできるのでしょうか？ とってもわかりやすい解説ありがとうございました！ |
|
|
Abraham
さん 2009年02月27日(Fri) 23:04:03
>>6850*yahooさん
以下にこれまでの回答をまとめました。 ロゴ･マークの指定は，一番下の部分です。 位置の変更は「margin:～;」の箇所で行ってください。 その場合，変更の具合によっては，他の部分(背景画像の右への移動の数値，等)も変更する必要が生じるかもしれませんが。 また，ロゴ･マークを右端に寄せたい場合は「float:right;」としてください。 #header { background:ur /*「106px」でヘッダー部の背景画像を右へ移動させる距離を指定*/ margin:5px 25px 25px 25px; /*ヘッダー部の周囲のマージンを指定: 上 右 下 左*/ height:【画像の高さ+22】px; /*ヘッダー部の高さを指定: 数値を変更するとオレンジのボーダーの上下位置も変わる*/ } #header h1 { display:none; /*サイト名の非表示(表示させたい場合は削除)*/ } #header h2 { padding-top:【画像の高さ+2】px; /*ページ名の上下位置*/ } #header a#atwiki-jp-b { float:left; /*ロゴ・マークのフロート*/ margin:20px 25px 20px 5px; /*ロゴ・マークの周囲のマージンを指定: 上 右 下 左*/ } |
|
|
6850*yahoo
さん 2009年02月27日(Fri) 23:50:56
snakememo さん
連日に及ぶアドバイスありがとうございます！ さっそく試してみたところロゴマークの表示位置を自由自在に調整することが出来ました！ このたびはとてもわかりやすく丁寧な解説、本当にありがとうございました。 この先も「個人的まとめ」サイトさんの更なる充実を期待しています！ |
|
|
|
ジュン
さん 2009年03月08日(Sun) 15:38:16
行書体はフォントで指定せなあかんでしょう。
でも、Officeの無いWindows等には行書体フォントが無いですから、 MSゴシック等で表示されてしまいます。 少量なら画像で用意しましょう。 |
|
oxygen
さん 2009年03月10日(Tue) 10:25:42
>はじめまして。
>デザインで「ライス」を利用しているのですが、メニューがIEとFireFoxでは >違う横幅で表示されてしまいます。 >どうやら、CSSの#r_main{width >サイズとなりIEでは外枠のサイズになってしまうようです。 >なにか方法があれば教えてください。 上のほうにあった質問で答えが出ていないようなので引用させていただきます。FireFoxで表示が崩れてしまう現象について解決策はあるのでしょうか～？？同じような現象が発生してしまいます。 文字化け後のソースコードを見てるだけではCSSのどこを変更すればいいかいまいち理解できません…というかCSSでは対応が不可能なのでしょうか？ また、別件になってしまいますがたとえばテンプレ自体のソースコードを閲覧することは可能なのでしょうか？？テンプレは[水族館（2段組)]を使用しています。 |
|
|
Shirase
さん 2009年03月10日(Tue) 12:48:45
＞oxigenさん
4507*yahoo さんのご質問がスルーされていたのは知りませんでした…orz 状態を再現し検証できるwikiを持っていませんので答えられないのが実情なのですが、とりあえず示された情報だけでは状態がわかりませんので、どういうところが崩れているとか、使っているブラウザのバージョンとか、可能であればご使用のwikiのURLなどを教えていたただければ、他の方も検証しやすいと思います。 解決にはなりませんが一応言わせていただきますと、ブラウザ間の表示の差異はCSSで解決可能です。 CSSの解釈はブラウザのエンジン（IE:Trident、Fi 実際のところIEよりもFirefoxのほうがCSSの解釈は「正しい」のですが、デファクトスタンダードなブラウザであるIEだけに合わせるということも、コーディング担当者の負担を減らすためによくあることです。 ブラウザ間の違いは容易にご想像つくと思いますが、同じIEシリーズでもバージョンごとによって仕様やバグも違うため、IE7やIE8で意図した通りに表示されていても、IE6では崩れているといった状態はよくあることです。 これを回避するためには正しいCSSを書いた後にそれぞれのブラウザに合わせたCSSを記述してやることが必要なわけですが、それにはと当然ながらCSSの知識と、ブラウザごとの挙動の違いを認識していることが必要不可欠になります。 なお別件のテンプレのCSSですが、「水族館（2段組）」のCSSは概ね次のURLで確認できます。 http://www1.a 上のURLはwww1サーバーの例ですが、例えばお使いのサーバーがwww5サーバーならば http://www5.a で確認できます。 URL直打ちじゃないほうがいいなら、今も「水族館（2段組）」をお使いであることを前提に、お使いのwiki右上の[設定] -> 「デザイン設定」の[CSSカスタマイズ]->[現在のデザインのCSS]で辿れるはずです。 長文失礼しました。 |
|
|
Abraham
さん 2009年03月10日(Tue) 13:03:02
>>oxygenさん
引用された質問については，ブラウザによって表示させるための解釈が異なるので，CSSで解決はできないと思われます(多分)。 2つ目の文字化けについてはオイラはよく分からないですが，1つ目の引用されている質問と文字化けとは，直接の関係はないと思います。引用の質問は，単にメニューの横幅がブラウザによって異なって表示される，ということですから…。 なお，3つ目のソースコードですが，コレも「ソースコード」というものをオイラはよく知らないのですが(^^;)，CSSのテンプレについてなら，「CSSカスタマイズ」ページの上部に，「現在のデザインのCSS」というリンクがあるので，それをクリックすれば表示されます。 HTMLについてなら，ウィキのページで右クリックして「ソースの表示」(Firefoxではどうか知りませんが)を選択すれば表示されると思います。多分合ってると思いますが，間違ってたらゴメンナサイ…。 まぁ，他の方のお答えを待ちませう…(なんだそりゃ)。 |
|
|
Abraham
さん 2009年03月10日(Tue) 13:12:02
あ，Shiraseさんと時間差でｗ…orz
引用の質問について，Shiraseさんは「解決できる」，オイラは「できない」とそれぞれ書いていますが，前者は，質問者がお使いのブラウザ(Firefox)に合わせた表示にさせるCSSを記述すればよい，という意味でおっしゃっているので，ブラウザ間による表示の差異はなくすことはできない，というのは，Shiraseさんの >CSSの解釈はブラウザのエンジン（IE:Trident、Fi という箇所からも判るとおりです。 |
|
|
oxygen
さん 2009年03月10日(Tue) 15:54:05
>>Shiraseさん
>実際のところIEよりもFirefoxのほうがCSSの解釈は「正しい」 >のですが、デファクトスタンダードなブラウザであるIEだけに >合わせるということも、コーディング担当者の負担を減らすため >によくあることです。 →こちらは初耳でした…ネスケ系統で対応していない部分があるのかと思ってましたがむしろIEが変なところで融通を利かせる性質があるんですねーこりゃ困ったｗ >これを回避するためには正しいCSSを書いた後にそれぞれの >ブラウザに合わせたCSSを記述してやることが必要 >なわけですが、それにはと当然ながらCSSの知識と、 >ブラウザごとの挙動の違いを認識していることが >必要不可欠になります。 →う～ん…なるほど～CSSもJavaScriptのように書き分けるべきなんですね～；共通のものかと思ってました… イメージとしてはHTML上(CSSと区別する意味で使ってます)でIF(IE){}else if(Ns){}なんかでスタイルシートのクラス自体を変更するのかと思ってました；；スタイルシートの記述でブラウザを認識できる書式の勉強もしてみます。 >>snakememoさん >2つ目の文字化けについてはオイラはよく分からないですが， >1つ目の引用されている質問と文字化けとは， >直接の関係はないと思います。 →すみませんｗ書き方が悪かったです。wiki上でHTMLのソースコードを表示させて実際にカラムごとのクラス指定・クラス構成などを覗こうとしたのですが暗号化のためかうまく表示してくれなかったもので…； 現在の事象としてはフロートにて位置を設定しているボックス(言い方が間違えていたらすみません；)がIEでは左右に並ぶのにFireFoxでは上下になってしまう点です。 ちなみに初期のCSSからはおおまかなレイアウトの変更は行っていません。 参考までに… http://www24. |
|
|
oxygen
さん 2009年03月10日(Tue) 15:54:59
↑
すみません…；返事をいただいたお礼を書く前に書き込み確認してしまいました； ありがとうございますm(_ _;m)三(m;_ _)m |
|
|
Shirase
さん 2009年03月10日(Tue) 17:20:12
>>oxygenさん
＞wiki上でHTMLのソースコードを表示させて実際にカラムごとの ＞クラス指定・クラス構成などを覗こうとしたのですが暗号化の ＞ためかうまく表示してくれなかったもので… お聴きしますが、それはIEの「ソースの表示」でソースを見たのでしょうか？ Firefoxでソースを見た場合でも文字化けしますか？ |
|
|
Abraham
さん 2009年03月11日(Wed) 00:52:31
>oxygenさん
>Shiraseさん >スタイルシートの記述でブラウザを認識できる書式の勉強もしてみます ありゃ! そんなワザがあったのですね。 (って，オイ! ) (ヽ´ω`) 「CSSで解決できない」なんていい加減なこと言って， コチラこそ，すんずれいしますた～ m(_ _)m 表示がいづれのブラウザでも望み通りに表示されればいいですね。頑張ってくださ～い。 |
|
|
oxygen
さん 2009年03月11日(Wed) 01:48:34
>Shiraseさん
IEで見てましたが… おやおや…；；エンコードが同じUTF-8でもFireFoxなら文字化けしないんですね…こりゃびっくりだ～ FireFoxは今回の件があって導入したばっかりなのでまだ使い込めてないんですよね。。。これから勉強しますm(_ _"m) >snakememoさん あ、いえいえ。誇大解釈かもしれませんｗ それぞれのブラウザに合わせたCSSを記述してやるという部分についてJSのような対応になると想像してみただけなので… CSSで解決できる方策が見えてきてる段階でも無い気がします…あったらいいな…的な…（ぁ @wikiやHTML自体をはじめてまだ日が浅いので方向性を示してくれるだけでありがたいです＾＾ |
|
|
Shirase
さん 2009年03月11日(Wed) 02:09:40
>oxygenさん
IEのバージョンにもよりますが、大抵メモ帳でソースを開いちゃいますが、XPのメモ帳にIEからUTF-8ソースを読ませると確か文字化けすると思います（＾＾； IEで開く場合はフリーのテキストエディタ（TeraPadとかK2Editorとか）でいいのでインストールしてIEのオプションでデフォルトエディタに設定しておくと、結構重宝するかもです。 |
|
|
oxygen
さん 2009年03月11日(Wed) 02:25:35
>Shiraseさん
なるほど～ TeraPadは愛用してますので今度調べて設定してみます♪ 同様の現象で悩まれている方も多いと思いますので ついでに現状報告です。 外部CSSファイルの変更のみでブラウザの認識を行うという方法はどうやら邪道(そもそも存在しない？)のようでブラウザごとに読み込むCSSファイルを変えるという手法が王道みたいです。つまりテンプレのHTMLソースを変更できない@wikiでは一般的な手法は通用しないということで…orz 強制的にBODY部分にHEAD領域をねじ込む位しか打開策が思いつきません。動作もどうなるか保障できませんしこれはありえん(笑) というわけで多分不可能かと思います…orz |
|
|
Shirase
さん 2009年03月11日(Wed) 02:44:24
>oxygenさん
一応CSSハック（参考：http://d-love というか@wikiでCSSをマトモに弄ったことがないのでなんとも…orz まぁ諦めるのも一つの手段かもしれませんし、XHTMLの構造がある程度わかっているなら自分で書き換えちゃうのもアリかもしれません。 ＞ブラウザごとに読み込むCSSファイルを変える ＞という手法が王道みたいです。 前からやろうと思っててずっと忘れていたのですが、例えば任意のCSSファイルを複数指定して読み込めるような仕様の変更依頼をサポートさんに出してみるのもアリかもです。 |
|
|
6850*yahoo
さん 2009年03月14日(Sat) 00:28:36
すみません。またみなさまのお力を頼りに来ました。
オレンジロゴ(2カラム)で上部のオレンジ色のボーダーとその下の点線ラインの間に画像を表示させようと思うのですがどのようにCSSを書けばよいでしょうか？ 画像：http://kissho |
|
|
Abraham
さん 2009年03月14日(Sat) 01:28:27
>6850*yahooさん
「CSSカスタマイズ」で， body { background:#F } /* 画像を横方向に繰り返しで表示させたい場合は「no-repeat」を「repeat-x」に変更する。 「center」で中央位置に表示させる。左寄せの場合は「left」に変更。 「170px」の箇所は好みで適宜調整。 */ #header { margin:0px 25px 【X】px 25px; } /* 【X】には「画像の高さ(+α)」を代入 */ とコピペして「変更する」ボタンを押下してください。 これでいけるでしょうか? |
|
|
Abraham
さん 2009年03月14日(Sat) 01:44:18
【追記】
もし，画像の表示位置をメニュー・コラムより右側にずらしたい時は， 「body」内の「center」の箇所を，「(205+α)px」としてください。 繰り返し表示をさせた場合は，この指示はきかないようですが。 |
|
|
6850*yahoo
さん 2009年03月15日(Sun) 01:59:48
Jacob さん
アドバイスありがとうございます！ さっそく試してみたところばっちりあの小さな隙間に表示させることが出来ました！！ 表示位置の調整も隙間の幅の調整も自由自在でした！ とってもわかりやすいご説明本当にありがとうございました。 |
|
|
6850*yahoo
さん 2009年03月15日(Sun) 02:28:59
すみません。応用として画像の代わりに.swf ファイルなども表示可能でしょうか？
.swf ファイルを指定してみましたが表示されませんでした・・・ orz |
|
|
Shirase
さん 2009年03月18日(Wed) 00:02:21
>6850*yahooさん
遅くなって申し訳ありません。 結論から言うと、CSSのbackgroundプロパティで扱えるのはイメージファイル(bmp、jpg、png、 もしCSSの次のバージョンのリリースでbackgroundプロパティが拡張されれば、swfを含めたマルチメディアソースが扱えるようになる可能性もあります。 でも残念ながら現在のCSSでは、イメージファイルのみのサポートだと思います。 |
|
|
|
|
Shirase
さん 2009年03月19日(Thu) 19:09:54
今更ながらふと思ったので一応書いておきます。
＠wikiでは原則としてCSSカスタマイズフォームにしかCSSの記述が出来ません。 通常はそれで事足りるのですが、カスタマイズしていく上でどうしても項目毎に複数のファイルに分けて使いたい場合が出てくると思います。 そこでテンプレートのXHTMLの構造を把握していることを前提になりますが、いくつかのCSSファイルを用意しておき、FTPクライアントかウィキのFTP経由でのファイルアップロード機能を使い、ご自分のウィキのFTPへ複数アップロードしておけば（この例では"http://www1. @import url( "http://www1. @import url( "http://www1. @import url( "http://www1. と記述することで、CSSの効果の重ね合わせができ、ある程度の自由度を上げれるのではないかと思います。 なお書いておいてアレですが、まだ試していませんので悪しからず。 |
|
|
Shirase
さん 2009年03月19日(Thu) 19:12:15
上の補足
例を示すために書いたので、URLは当然ながらデタラメに書いてあります。 押してもおそらく404エラーを吐かれるだけなので、なるべく押さないでください（＾＾； |
|
rasa
さん 2009年03月29日(Sun) 16:16:26
初めまして☆
素人質問で大変恐縮なのですが、 現在、デザインが「ｽｳｪｰﾃﾞﾝの花２段組」を使っているのですが、 上部に「@wikiメニュー編集表示ツールヘルプブックマーク登録RSS登録 ログイン」などが、表示されたツールボックスの ようなものが出ています。 あれを、 消したいのですが誰か教えていただけませんでしょうか？ よろしくお願いします。 私のwikiのﾍﾟｰｼﾞは↓↓↓ http://www36. |
|
|
Shirase
さん 2009年03月29日(Sun) 17:22:39
>rasaさん
消すには消せますけど、上部メニューを消した後のことをしっかり考えて対策してからじゃないと、ただ消すだけでは「設定」や「ログイン」、「新規ページの作成」など、上部メニューに統合されている管理機能を含めた全機能が使えなくなりますよ？ 特段消す必要が無いのであれば、消さないことをお勧めします。 |
|
|
rasa
さん 2009年03月29日(Sun) 18:36:24
>Shiraseさん
的確なアドバイスありがとうございました（＾＾） 正直、自分でも消した後、どうして編集したら いいのかな～～～なんて思っていました。笑 Shiraseさんのおっしゃる用に 消さないまま使用するようにします♪♪ ホント有難うございました☆m(_ _)m |
|
nekketsu_robolab@wiki29
さん 2009年04月21日(Tue) 21:55:52
はじめまして。熱血と申します。
この問題がＣＳＳで解決するのかどうかよくわからないのですが、解決できるならＣＳＳの問題かな、と思って投稿しました。 まず、この@wiki助け合い掲示板を見てください。 ttp://atbb.jp とりあえず、これが悩んでいることのすべてなのですが、 画像がないときにこの画像を表示！、というのはＣＳＳで管理できる範疇なのでしょうか？ またできるならその方法もよろしくお願いします。 自分で考える限りでは、aタグ編集とかでできるのかなぁ、とか考えてるのですが・・・。 ＣＳＳに限らずなにか解決法があるならお願いします。 |
|
|
Shirase
さん 2009年04月21日(Tue) 23:52:09
>熱血さん
私自身が完全に理解しているわけではないので的確なことは言えないのですが、仰るような仕掛けはCSSの範疇ではないと思います。 助け合い掲示板のほうで提示されているリンク先のものを見てもすでに他の方が指摘されている通り、管理されている人がご自分で画像を変更されているようなので、機能として実装されているわけではないと思います。 どうしても実現したいのであれば、JavaScriptなどを使ってご自分で画像変更スクリプトを書く方法もあるでしょうし、@wikiのサポートさんにプラグインの希望を伝えてみる方法もあると思います。 |
|
|
nekketsu_robolab@wiki29
さん 2009年04月22日(Wed) 22:02:31
>Shiraseさん
なるほど・・・。やはりＣＳＳでは無理ですか・・・・。 やっぱり自分でがんばるほかないですね。 ありがとうございました。 |
|
kmgr@wiki26
さん 2009年06月08日(Mon) 01:42:23
@wiki助け合い掲示板でも質問しましたが、こちらで質問した方がよいということで誘導されてきました。
助け合い掲示板での該当トピックは以下です。 http://atbb.j 質問内容ですが、先日デザインを「新シンプル白」に変更したところ、左メニューとメイン部分が右メニューの下にずれたように表示されるページが出てきました。 症状を確認したのはIE6.0で、他のブラウザ（IE7/8、Firefox 私自身は普段Firefoxを使っているのであまり関係ないのですが、今でもかなりのユーザーがいると思われるIE6.0でずれるというのは好ましくありません。 昔使っていたwikiにテストのため記述をコピーしたので、以下をIE6.0で見てもらうとどういうことかよくわかると思います。 http://www13. 更新履歴を表示させておくと、左メニューとメイン部分が丸々1スクロール分くらい下に追いやられてしまう感じになります。 原因らしきものはfootnoteの部分にあるようで、footenoteのあるページは軒並みずれてしまいます。 試しに.footnoteにclear:bothと入れてみたところ少なくともfootnote部分が変な風に表示されるということはなくなりました。 とはいえ右メニューがずれてしまう点は変化ありません。 以下は現在の私のwikiです。.footnoteにclear:both;を追記しています。（今一旦更新履歴の表示を消してるのでわかりにくいですが、1行分ずれてます） http://www26. footnote部分の上にあるボーダーが右メニューまで突き出てるので、それが問題か…？と思うのですが、 .footnoteにはボーダーが設定してありませんし、どこをどうすれば直るのかよくわかりません。 CSSに不慣れな私にはこれ以上なんともわからず、皆様の知恵を拝借したいと思った次第です。 よろしくお願いいたします。 |
|
|
Shirase
さん 2009年06月08日(Mon) 12:19:05
>kmgr@wiki26さん
私が面倒臭くてIE6を切り捨てた人のため、IE6で試せません（＾＾；A ですがIE6で再現するということなので、おそらく.footnoteではなくIE6のfloatのバグだと思います。 とりあえず問題に対応したCSSを書いてみましたので、[設定]→[デザイン設定]→[CSSカスタマイズ]→[ユーザー定義CSS]に次のCSSをそのまま追加してみてください。 /* ここから */ #left { margin-top: -13px; width: 188px; float: left; overflow: hidden; display: inline; } #right { width: 135px; float: right; display: inline; } .attach, div.footnote { width: 100%; float: left; display: inline; } p.footnote { text-align: left; font-size: 12px; } /* ここまで */ もしまた何かありましたら、ご遠慮なくご投稿ください。 |
|
|
kmgr@wiki26
さん 2009年06月08日(Mon) 21:57:04
その通りにCSSをコピペしましたところずれる症状がなくなりました。
検索していた時にもちらほら見かけたのですが、IE6.0のバグ由来の問題だったんですね。 今回はありがとうございました。 また何かありましたらよろしくお願いします。 |
|
Aya
さん 2009年06月30日(Tue) 16:31:01
はじめまして。
デザインは２ブロックブルーを使っているのですが、 メニュー部分にＷＥＢツールを貼り付けることは可能でしょうか？ 貼り付けたいタグは↓のものです。 <form> <input type="button" </form> |
|
|
Shirase
さん 2009年06月30日(Tue) 17:40:57
> Ayaさん
#html2()プラグインを使えば良いと思います。 使用例） #html2(){{ <form> <input type="button" </form> }} 詳しくは＠wikiご利用ガイドの http://www1.a をご参照ください。 |
|
|
|
|
6850*yahoo
さん 2009年07月09日(Thu) 16:44:45
Shirase さんへ
>私が面倒臭くてIE6を切り捨てた人のため、IE6で試せません IE5.5, IE6, IE7, IE8の確認が同時にできる 「IETester」というブラウザがあります。標準で日本語にも対応しているので試してみてはいかがですか？ 公式HP http://www.my IETesterダウンロード http://www.my |
|
|
|
kunsyuboueki@wiki23
さん 2009年07月24日(Fri) 15:51:21
初めましてこんにちは
デザインのダークレッドを使用しているのですが、 メニューを左に持っていきたいと思ってます。 どうしたらよろしいでしょうか？ 初心者なもので申し訳ありませんが、 教えていただきたいと思います。 よろしくお願いします。 |
|
|
Shirase
さん 2009年07月24日(Fri) 18:43:46
> kunsyuboueki@
先ほどザッと『ダークレッド』を見てきましたが、CSSで右側においているわけではなく、<table>タグで右側の領域として記述されているようです。 CSSならばカスタムCSSで変更可能ですが、ページのソースコードにテーブルとして埋め込まれているため、おそらく『ダークレッド』のデザインテンプレートではメニューを左に持っていくことは出来ないと思います。 |
|
|
kunsyuboueki@wiki23
さん 2009年07月25日(Sat) 01:41:04
>Shiraseさん
ありがとうござました。 左メニューがなれていたので、 そっちにしたかったのですが、我慢します＾＾ |
|
|
6850*yahoo
さん 2009年12月14日(Mon) 10:00:17
背景色を変更するのに伴いリンクが見難くなることを避けるためリンク色を変更したいのですがCSSでどのように指示すれば良いでしょうか？
（オレンジロゴ２カラム使用です。） |
|
kandoushita@wiki39
さん 2009年12月17日(Thu) 00:13:50
>6850*yahooさん
a:link,a:visi color:#480; } #480の部分を変更して色を設定することができるはずです これに関連した質問です リンクの色を個別に設定するにはhtmlプラグインを使う以外に方法はないんでしょうか？ |
|
|
6850*yahoo
さん 2009年12月17日(Thu) 01:51:09
>kandoushita@
ありがとうございました！ リンクの色を変更することが出来ました！ >リンクの色を個別に設定するにはhtmlプラグインを使う こちらも興味があります！もしよろしければhtmlプラグインでどのように書けば良いのかおしえてください。 #html2(){ } 私の場合リンクの色を個別に設定するときは以下のようにしています。 [[&color(red) |
|
|
kandoushita@wiki39
さん 2009年12月17日(Thu) 07:33:20
>6550*yahoo さん
おお～、そこに書けばよかったのか ありがとうございます html2プラグインですが、管理者権限でしか編集できなくなるので避けました 使い方はそのままタグを入力すればいいようです #html2(){ <a href="http:// } または #html2(){ <a href="http:// } 下は文字だけ、上は下線の色も変更になります 参考ページhttp://www.to |
|
|
|
toni3@wiki28
さん 2009年12月26日(Sat) 15:50:58
はじめまして。「toni3 @ ウィキ」の管理者「とに」と申します。教えてください。
ノート3段組を使っています。 右メニューの幅について四苦八苦しています。#javascriptで、ブログパーツやアフィリエイト広告などを、縦に並べてあります。基本的に160px幅に並べたのですが、10pxぐらい右側が画面からはみ出ます。これをはみ出ないようにしたいのですが、やり方がわかりません。検索して、それらしき物を参考にユーザ定義CSSをいじってみたのですが、中身は全部見えても右メニューと本文の境界線から左にはみ出たり、自分の手に負えません。 お力添えをお願いいたします。 http://www28. |
|
smilewatch@wiki31
さん 2010年01月23日(Sat) 19:43:25
はじめまして。
ノート３段組を使っています。 ページタイトル（ヘッダー）に画像を用いていますが、ページ毎にヘッダー画像を変えることはできるのでしょうか？自力で調べてみたところif文を使ってCSSを振り分けるということのようなのですが、 １＠wikiのcssカスタマイズで可能なのか？ 2可能ならばどのようにif文をかくのか？ どなたかご助言のほどよろしくお願いします。 |
|
customcss@wiki31
さん 2010年02月06日(Sat) 19:07:34
ページごとにヘッダ画像を変える方法は、すぐには分かりかねます。
おそらく、こうしたら良いんじゃないか？ っていうアイデアはあるんですが、まだやってませんね。 ちなみに、アイデアの参考になるかもしれないので、利用者ごとにページタイトルを切り替える方法は何とか実装しました。 後日詳しい解説を載せますが、実際の動作についてはこちらをご参照ください。 http://www31. これを作り変えると、ページごとにヘッダー画像を変える方法になると思っています。 |
|
|
toni3@wiki28
さん 2010年02月15日(Mon) 22:36:01
2009年12月26日(Sat) 15:50:58に質問を投稿した「toni3 @ ウィキ」の管理者「とに」です。
なんとか勉強して、自己解決しました。お騒がせしました。 http://www28. |
