※お断り
 このページ「一般」では概ね,どの基本デザインを採用していても適用できる内容を取り扱っています。
 但し,一部の内容には,全ての基本デザインには当てはまらないものもあります(管理人が現時点で確認できたのは,基本デザイン「ウィキペディア風」採用時における「テーブルの文字色,背景色を行ごとに変更する」等)。
 その点,御了承の上,御利用下さい。


画像の横に文字を表示させる

for: kotoitc さん
time: 2009/02/14

方法-1 :誰でも可能だが,表示に制限アリ。

表示例

画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。


ページ編集

&ref(【画像URL】)【横に表示させたい文字】
ただ,この方法では,上の表示例のように,2行目からは画像の下に表示されるという制限があります。


方法-2 :ウィキ管理者による「CSSカスタマイズ」が事前に必要。

表示例


画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。




CSSカスタマイズ

ウィキの管理者が管理ページの「CSSカスタマイズ」に以下のように記述して「変更する」ボタンを押下。
div.hoge
{
float: left;
}
※hogeの箇所は任意の半角英数文字。

ページ編集

前項のように管理者がCSSカスタマイズしておけば,あとは誰でもページ編集で以下のように記述すればよい。
#divclass(hoge)
{{#image(【画像URL】)
}}
【画像の横に表示させたい文字】
※注意 更に,【画像の横に表示させたい文字】の前後を適宜(数行ほど)改行して文字の位置を調節します。


方法-3 :ウィキ管理者のみ可能。

表示例


画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。




ページ編集 :ウィキの管理者のみ可能。

#divstyle(float: left;)
{{#image(【画像URL】)
}}
【画像の横に表示させたい文字】
※注意 更に,【画像の横に表示させたい文字】の前後を適宜(数行ほど)改行して文字の位置を調節します。







テーブルの文字色,背景色を行ごとに変更する(奇数行,偶数行)

for:sei1975さん
time:2008/11/25

質問

http://www1.atwiki.jp/guide/pages/1588.html
にあるようなCSSを使いたいのですが、CSSカスタマイズに入れても利用できません。どうしてでしょうか?初心者ですいません。

ここでは奇数行,偶数行によって色を変更するパターンについて,順を追って説明したいと思います。このパターンができれば,あとは質問文中のリンク先の説明を見れば自ずと分かると思うので。
因みに,オイラもdivやらclassやら,詳しい事は分かっていませんw。それでもデキタッ!(´・ω・`)

【参照】上記リンク 「テーブルの背景色を行ごとに変更する(上級者向け)」 (@wikiご利用ガイド)


表示例

<tr> って ナニ?
分かり ませ ん。
div って ナニ?
分かり ませ ん。


CSSカスタマイズ

以下のように記述して確定させます。
なお,この時,「apple」(class)の箇所に好きな半角英数字を代入してください。

/*奇数行*/
div.apple tr.atwiki_tr_odd 
{
background: #DC143C; /*背景*/
color: #DCDCDC; /*文字の色*/
}

/*偶数行*/
div.apple tr.atwiki_tr_even
{
background: #DCDCDC; /*背景*/
color: #DC143C; /*文字の色*/
}


ページ編集

以下のように記述して確定させます。

#divclass(apple)
{{|表|表|表|
|表|表|表|
|表|表|表|
|表|表|表|
}}


付記

複数の表によってそれぞれ違う表示を設定したいのならば,その数だけdivのclassを設定し,各classごとにCSSカスタマイズ,ページ編集を行えばよい。

【class「apple」】 (※前述と同じ。)
表示例
CSS記述
/*奇数行*/
div.apple tr.atwiki_tr_odd 
{
background: #DC143C; /*背景*/
color: #DCDCDC; /*文字の色*/
}

/*偶数行*/
div.apple tr.atwiki_tr_even
{
background: #DCDCDC; /*背景*/
color: #DC143C; /*文字の色*/
}
ページ編集
#divclass(apple)
{{|表|表|表|
|表|表|表|
|表|表|表|
|表|表|表|
}}

















【class「orange」】
表示例
CSS記述
/*奇数行*/
div.orange tr.atwiki_tr_odd 
{
background: #FFA500; /*背景*/
color: #DCDCDC; /*文字の色*/
}

/*偶数行*/
div.orange tr.atwiki_tr_even
{
background: #DCDCDC; /*背景*/
color: #FFA500; /*文字の色*/
}
ページ編集
#divclass(orange)
{{|表|表|表|
|表|表|表|
|表|表|表|
|表|表|表|
}}


















簡便法 (※上記の方法を簡略化したもの。)

全ての表が同じ表示になってもよいのなら,こちらの方が編集が簡単かもしれません。

CSSカスタマイズ

.atwiki_tr_odd
{
background: #DC143C; /*背景*/
color: #DCDCDC; /*文字の色*/
}

.atwiki_tr_even
{
background: #DCDCDC; /*背景*/
color: #DC143C; /*文字の色*/
}

ページ編集

通常通り の記述でOKです。

|表|表|表|
|表|表|表|
|表|表|表|
|表|表|表|







【三訂】 「未作成ページ用class」の利用方法について

for:clearさん
time:2008/08/20

質問

設定ページに「未作成ページ用class」というのがありますが,
アレは具体的にどうやればwikiに反映されるのでしょう。
文字色が変更できるようになると嬉しいのですが…。



回答

先ず,「未作成ページ用class」に任意の半角英字(なぜか数字はダメみたい(?))の文字列を記入して「設定変更」ボタンを押す(ここでは例として「misakusei」とする)。
次に,「CSSカスタマイズ」フォームに以下の記述を記入後,「変更する」ボタンを押して確定。なお,ここでは文字色だけでなく,ついでに背景色等,諸設定についても記述しましたので,好きなのを選んで設定してください。

a.misakusei
{
background: #808000; /*背景色(Olive)*/
color: #FF0000; /*文字色(Red)*/
font-family: HG丸ゴシックM-PRO; /*フォントの種類(HG丸ゴシックM-PRO)*/
font-size: 16px; /*フォント・サイズ(18px)*/
font-style: italic; /*イタリック*/
font-weight: bold; /*太字*/
}

これで,未作成ページへのリンク表示が,
「背景色がOliveで文字色がRed,フォントが『HG丸ゴシックM-PRO』でサイズが18px,かつイタリックで太字」
になります(但し,フォント「メイリオ」等では日本語のイタリック表示はされないみたいです)。

【例】


※注意 もし上記の手続きをしても反映されない場合は,未作成ページのリンク表示があるページを1度編集してみてください。そうすると反映されると思います。







テーブル(表)内での改行

for:shimiさん
time:2008/08/06

質問

テーブル内での改行はできますか?



回答(by Shiraseさん)

テーブル内で改行プラグイン「&br()」を使うとよい。

|文章1&br()文章2|文章3|文章4|
|文章5|文章6|文章7|
と記述すると,
文章1
文章2
文章3 文章4
文章5 文章6 文章7

となる。







ボックスをフレーム表示させる方法

for:csc21 さん(の質問から改変して項目を立てました)
time:2008/04/06~

方法-1

【参考】 「スタイル指定div表示」 (@wikiご利用ガイド)
「CSSカスタマイズ」は使わず,ページを直接編集します。先ず,当該ページを管理者のみ編集可能なように設定し,その後以下の様に編集します。
#divstyle(overflow: scroll;width: 400px;height: 100px;margin: 10px;padding: 10px;background: #FFC0CB;color: #000000;)
{{フレーム表示させたいボックスの本文をここに記述シる
改行もできるゾ
改行もできるゾ
改行もできるゾ
改行もできるゾ
&font(b,16px,red){改行もできるゾ}
}}
これで,当該箇所にのみ特定のCSSが適用され,フレーム表示されます。
フレーム表示させたいボックスの本文をここに記述シる
改行もできるゾ
改行もできるゾ
改行もできるゾ
改行もできるゾ
改行もできるゾ


方法-2

【参考】下記 「ウィキペディアの様に本文の一部を右にフロートさせる方法」
もし,ページを「方法-1」の様には管理者のみ編集可能なようにしたくない場合は「CSSカスタマイズ」とページ編集の両方が必要です。

CSS

先ず,「CSSカスタマイズ」で以下の様に記述,確定させます(hogeの部分は半角英数字であれば何でも良い)。
div.hoge
{
overflow: scroll;
width: 400px;
height: 100px;
background: #FFC0CB;
color: #000000;
}

ページ編集

次に,ページを以下の様に編集します。
#divclass(hoge)
{{ここにページ本文
}}
これでスクロール表示されます。







ウィキペディアの様に本文の一部を右にフロートさせる方法

for:clear さん
time:2008/04/02~

表示例

あなたは「青い山脈」を知っているか?m9(`・ω・´)ビシッ

藤山一郎

藤山一郎
基本情報
出生名 増永丈夫
別名 ピンちゃん
出生日 1911年4月8日
学歴 東京音楽学校
出身地 東京府東京市日本橋区蛎殻町
死没日・地 1993年8月21日(82歳没)
職業 歌手・声楽家・作曲家・指揮者
活動期間 1930年~1993年
レーベル ビクター
テイチク
コロムビア
日本放送協会
出典:フリー百科事典『ウィキペディア(Wikipedia)』
藤山 一郎 (ふじやまいちろう、1911年(明治44年)4月8日 - 1993年(平成5年)8月21日)は、日本の国民的歌手・声楽家・作曲家・指揮者である。本名ではクラシック音楽の声楽家として活動。モスリン問屋「近江屋」の三男に生まれ、東京音楽学校(現東京芸術大学音楽学部)に学び、クラシック音楽の正統派歌唱から大衆的なポピュラー音楽まで幅広い分野で活躍した。『酒は涙か溜息か』『丘を越えて』『青い山脈』など多数のヒット作をもち、太平洋戦争戦前戦後を通じ、日本のポピュラー音楽を代表する歌手である。


1 人物歴
1.1 少年時代


人物歴

少年時代

藤山は日本橋区長谷川町(現在の中央区日本橋堀留町)に店を出していたモスリン問屋「近江屋」の5人兄弟の末っ子として生まれた。父は増永信三郎、母はゆう。一番上が長女の恒子、二番目が長男の正夫、つづいて次男の文夫、次女八千代、そして三男丈夫であった。父信三郎と姉八千代は丈夫を良く浅草に連れていった。この時、雑誌の物売りや粗悪品を売るテキ屋、アメ屋の売り子などの歯切れの良い口上や売り文句を聴いていたことが、後に歌手・藤山一郎の言葉は明瞭で歯切れが良いと言われる要因となった。

上記例において「基本情報」の表がフロートして右に寄っているのに対して,「目次」の表は通常通りテキストの下に表示されている。本項では「基本情報」の表のように,本文の一部をフロートして右に寄せる方法について述べる。


記述

CSS

「CSSカスタマイズ」に以下の記述をコピペして,「変更する」ボタンを押して確定。
div.hoge
{
float: right;
}

本文

本文のうち,右側にフロートさせたい箇所を下の「本文」部分に記述。
  (上記「表示例」では「基本情報」の表全体)
#divclass(hoge)
{{本文=文や図表
}}
なお,{{本文}}の中は改行も可なので,表の構文
||||
||||
も可能ですダ。


解説

  • 【参照】 「cssクラスをdivで指定」 (@wikiご利用ガイド)
  • 半角英数字で好きなclassを上記「hoge」の箇所に入れる。
  • 本文中でフロートさせたい箇所が複数ある場合も,同じclassで可。
  • 本項のように右ではなく,左に寄せたい場合はCSS記述を「float:left;」とすればよい。
  • 但し,筆者も初心者&生半可状態であるので,基本デザインによっては目的通りに表示されないかもしれまヘんが,その時はサヨナラ~w m(_ _)m