※お断り
このページ「一般」では概ね、どの基本デザインを採用していても適用できる内容を取り扱っています。
但し、一部の内容には、全ての基本デザインには当てはまらないものもあります。
画像の横に文字を表示させる
方法-1…ウィキ管理者による「CSSカスタマイズ」が事前に必要。
表示例
画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。
CSSカスタマイズ
ウィキの管理者が管理画面>CSSカスタマイズに以下のように記述して「設定を保存」ボタンを押下。
div.hoge{
float: left;
}
※hogeの箇所は任意の半角英数文字。
ページ編集
前項のように管理者がCSSカスタマイズしておけば、あとは誰でもページ編集で以下のように記述すればよい。
#divclass(hoge){{#image(【画像URL】)
}}
【画像の横に表示させたい文字】
※注意…更に、【画像の横に表示させたい文字】の前後を適宜(数行ほど)改行して文字の位置を調節します。
方法-2…ウィキ管理者のみ可能。
表示例
画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。
ページ編集…ウィキの管理者のみ可能。
#divstyle(float: left;){{#image(【画像URL】)
}}
【画像の横に表示させたい文字】
※注意…更に、【画像の横に表示させたい文字】の前後を適宜(数行ほど)改行して文字の位置を調節します。
テーブルの文字色、背景色を行ごとに変更する(奇数行、偶数行)
ここでは奇数行、偶数行によって色を変更するパターンについて、順を追って説明したいと思います。因みに、オイラはdivやらclassやら、詳しい事は分かっていませんｗ。それでもデキタッ!(´･ω･｀)
表示例
| <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カスタマイズ、ページ編集を行えばよい。
例) 仮に2種類の表示パターンを設定し、それぞれのclass名をappleとorangeとでも名付けるとする。
【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の利用方法について
先ず、管理画面>編集設定>編集オプションの「未作成ページへのリンクをカスタマイズ」の「リンクに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、かつイタリックで太字」になります(但し、フォント「メイリオ」等では日本語のイタリック表示はされないみたいです)。
※注意…もし上記の手続きをしても反映されない場合は、未作成ページのリンク表示があるページを一度編集してみてください。そうすると反映されると思います。
テーブル(表)内での改行
テーブル内で改行プラグイン「&br()」を使うとよい。
例
|文章1&br()文章2|文章3|文章4|
|文章5|文章6|文章7|
と記述すると、
文章1
文章2 |
文章3 |
文章4 |
| 文章5 |
文章6 |
文章7 |
となる。
ボックスをフレーム表示させる方法
方法-1
方法-1は管理者のみが可能な方法です。「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){{ここにページ本文
}}
これでスクロール表示されます。
ウィキペディアの様に本文の一部を右にフロートさせる方法
表示例
あなたは「青い山脈」を知っているか?m9(｀･ω･´)ﾋﾞｼｯ
藤山一郎
| 基本情報 |
| 出生名 |
増永丈夫 |
| 別名 |
ピンちゃん |
| 出生日 |
1911年4月8日 |
| 学歴 |
東京音楽学校 |
| 出身地 |
東京府東京市日本橋区蛎殻町 |
| 死没日・地 |
1993年8月21日(82歳没) |
| 職業 |
歌手・声楽家・作曲家・指揮者 |
| 活動期間 |
1930年～1993年 |
| レーベル |
ビクター |
| テイチク |
| コロムビア |
| 日本放送協会 |
出典：フリー百科事典『ウィキペディア(Wikipedia)』
藤山 一郎(ふじやまいちろう、1911年(明治44年)4月8日 - 1993年(平成5年)8月21日)は、日本の国民的歌手・声楽家・作曲家・指揮者である。本名ではクラシック音楽の声楽家として活動。モスリン問屋「近江屋」の三男に生まれ、東京音楽学校(現東京芸術大学音楽学部)に学び、クラシック音楽の正統派歌唱から大衆的なポピュラー音楽まで幅広い分野で活躍した。『酒は涙か溜息か』『丘を越えて』『青い山脈』など多数のヒット作をもち、太平洋戦争戦前戦後を通じ、日本のポピュラー音楽を代表する歌手である。
人物・来歴
幼少期・少年時代
藤山は日本橋区長谷川町(現在の中央区日本橋堀留町)に店を出していたモスリン問屋「近江屋」の5人兄弟の末っ子として生まれた。父は増永信三郎、母はゆう。一番上が長女の恒子、二番目が長男の正夫、つづいて次男の文夫、次女八千代、そして三男丈夫であった。父信三郎と姉八千代は丈夫を良く浅草に連れていった。この時、雑誌の物売りや粗悪品を売るテキ屋、アメ屋の売り子などの歯切れの良い口上や売り文句を聴いていたことが、後に歌手・藤山一郎の言葉は明瞭で歯切れが良いと言われる要因となった。
上記例において「基本情報」の表がフロートして右に寄っているのに対して、「目次」の表は通常通りテキストの下に表示されている。本項では「基本情報」の表のように、本文の一部をフロートして右に寄せる方法について述べる。
記述
CSS
「CSSカスタマイズ」に以下の記述をコピペして、「設定を保存」ボタンを押して確定。
div.hoge{
float: right;
}
本文
本文のうち、右側にフロートさせたい箇所を下の「本文」部分に記述(上記「表示例」では「基本情報」の表全体)。
#divclass(hoge){{本文=文や図表
}}
なお、{{本文}}の中は改行も可なので、表の構文
||||
||||
も可能ですダ。
解説
- 【参照】
「cssクラスをdivで指定」
(@wikiご利用ガイド)
- 半角英数字で好きなclass名を上記「hoge」の箇所に入れる。
- 本文中でフロートさせたい箇所が複数ある場合も、同じclassで可。
- 本項のように右ではなく、左に寄せたい場合はCSS記述を「float:left;」とすればよい。
最終更新：2022年01月01日 05:20
