@wikiについての個人的ヘルプ

オマケ/PukiWiki モドキ

2009-06-19T22:12:36+09:00

*About かつて基本デザインにラインナップされていた「PukiWiki ライクデザイン」が好きで，自分のウィキにも使用していたのですが，@wikiの運営者さんによってかな～り前に削除されてしまい(大人の事情?)，凹んだことがありました。で，今回，フト思い立って「オレンジロゴ」をベースにして自分で再現することにしてみました。勿論，その結果は残念な出来になってしまいましたが(悪かったな!)，もしよかったらドーゾｗ。 *使い方先ず「基本デザイン選択」で「オレンジロゴ(3カラム)」を選択して「変更する」ボタンを押して確定。次に「CSSカスタマイズ」で下の記述をコピペして，「基本デザインのCSSを無効化する」チェック・ボックスを&font(red){オン}にし「変更する」ボタンを押して確定させればオケー。 #pre() {{/*-------------------- ロゴ画像を変更したい場合は、以下のURLをロゴのURLに書き換えてください。 --------------------*/ #header a#atwiki-jp-bg1 { background: transparent url(http://img.atwiki.com/image/035col3/logo_atwiki.gif) no-repeat scroll 0%; } #header a#atwiki-jp-bg1 { height: 100px; width: 100px; } /*-------------------- ページ下部の編集メニューを表示したい場合はユーザCSSに以下の記述を追加してください。 #toolbar { display: block; } --------------------*/ /* ************************************************* ************************************************* */ #container { padding: 10px; text-align: left; } #contents { float: right; margin-left: -200px; width: 100%; } #contents_inner { margin-right: 200px; margin-left: 200px; overflow: ; padding: 10px; } #footer { clear: left; width: 100%; } #footer_inner { margin: 0px; padding: 10px; } #header { border-bottom: 2px solid #000000; margin: 0px; padding: 10px; } #header a#atwiki-jp-bg1 { display: block; float: left; margin: 5px 20px 0px 5px; } #header h1 { border: none; font-size: 32px; margin: 0px; padding: 0px; padding-top: 20px; padding-bottom: 5px; } #header h1 a { } #header h2 { background: none; border: none; font-size: 16px; margin: 0px; padding: 10px; } #header h2 a { } #menubar { width: 200px; float: left; overflow: ; /*-------------------- border: 2px dotted #FFA500; --------------------*/ } #menubar2 { width: 200px; float: left; overflow: ; /*-------------------- border: 2px dotted #FFA500; --------------------*/ } #menubar_inner { padding: 10px; } #menubar_inner2 { padding: 10px; } #menubar_wrapper { padding-left: 0px; } #toolbar { clear: left; display: none; width: 100%; } #toolbar_inner { padding: 10px 25px 0px 25px; } #wrapper { float: left; margin-right: -200px; width: 100%; } .box { zoom: 100%; } .box:after { clear: both; content: "."; display: block; height: 0pt; visibility: hidden; } .menu fieldset { width: 180px; overflow: ; } .menu input { max-width: 180px; } .menu select { max-width: 180px; } .menu textarea { max-width: 180px; background: #FFFFFF; } /*-------------------- General Rules --------------------*/ a:link { color: #215DC6; text-decoration: none; } a:visited { color: #A63D21; text-decoration: none; } a:hover, a:active { background: #CCDDEE; text-decoration: none; } address { display: block; font-style: italic; } b { font-weight: bolder; } blockquote { background: #F5DEB3;/*Wheat*/ border: 2px solid #777777; display: block; margin: 10px; padding: 10px; } body { background: #FFFFFF; color: #000000; font-family: Tahoma; font-size: 12px; font-size-adjust: none; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1.5; } body * { } caption { display: table-caption; text-align: center; } center { display: block; text-align: center; } cite { font-style: italic; } col { display: table-column; } colgroup { display: table-column-group; } dd { display: block; margin-left: 20px; } del { text-decoration: line-through; } dfn { font-style: italic; } dl { display: block; margin: 1em 0; } dt { font-weight: bold; } em { font-style: italic; } h1 { border: none; border-left: 4px solid #9400D3/*Darkviolet*/; font-size: 32px; font-weight: bold; margin: 5px 0px; padding: 4px; } h2 { background: #DDEEFF; border: 1px solid #000000; font-size: 28px; font-weight: bold; margin: 5px 0px; padding: 4px; } h3 { background: #DDEEFF; border: none; font-size: 24px; font-weight: bold; margin: 5px 0px; padding: 4px; } h4 { border-top: 1px solid #DDEEFF; border-right: 3px solid #DDEEFF; border-bottom: 3px solid #DDEEFF; border-left: 10px solid #DDEEFF; font-size: 20px; font-weight: bold; margin: 5px 0px; padding: 4px; } h5 { border: none; border-bottom: 2px solid #DDEEFF; border-left: 7px solid #DDEEFF; font-size: 16px; font-weight: bold; margin: 5px 0px; padding: 4px; } h6 { border: none; border-left: 7px solid #DDEEFF; font-size: 12px; font-weight: bold; margin: 5px 0px; padding: 4px; } hr { display: block; height: 1px; border: 1px 0px; margin: 5px auto 5px auto; } i { font-style: italic; } ins { text-decoration: underline; } multicol { display: block; margin: 1em 0; } nobr { white-space: nowrap; } p { display: block; margin: 1em 0; } plaintext { display: block; font-family: ; white-space: pre; margin: 1em 0; } pre { background: #F0F8FF; border-top: 1px solid #DDDDEE; border-left: 1px solid #DDDDEE; border-right: 1px solid #888899; border-bottom: 1px solid #888899; color: #000000; display: block; font-family: ; margin: 10px; padding: 10px; white-space: pre; white-space: pre-wrap;/*CSS3*/ word-wrap: break-word;/*IE 5.5+*/ } q:after { content: close-quote; } q:before { content: open-quote; } s { text-decoration: line-through; } strike { text-decoration: line-through; } strong { font-weight: bolder; } sub { vertical-align: sub; font-size: smaller; line-height: normal; } sup { vertical-align: super; font-size: smaller; line-height: normal; } table { display: table; border-spacing: 2px; border-collapse: collapse; margin-top: 1em; margin-bottom: 1em; -moz-box-sizing: border-box; text-indent: 0; border: 1px solid #000000; } table > tr { vertical-align: middle; } tbody { display: table-row-group; vertical-align: middle; } td { display: table-cell; vertical-align: inherit; text-align: inherit; padding: 3px; border: 1px solid #000000; } tfoot { display: table-footer-group; vertical-align: middle; } th { display: table-cell; vertical-align: inherit; font-weight: bold; padding: 3px; border: 1px solid #000000; } thead { display: table-header-group; vertical-align: middle; } tr { display: table-row; vertical-align: inherit; } u { text-decoration: underline; } var { font-style: italic; } li { display: list-item; margin: 0px; margin-left: 15px; padding: 0px; } ol { display: block; list-style-type: decimal; margin: 0px; padding: 0px; padding-left: 10px; } ul { display: block; list-style-image: ; list-style-type: disc; margin: 0px; padding: 0px; padding-left: 10px; } dl ul, dl ol, dl dl, ol ul, ol ol, ol dl, ul ul, ul ol, ul dl { margin-top: 0; margin-bottom: 0; } ul ul, ol ul { list-style-type: circle; } ul ol ul, ul ul ul, ol ol ul, ol ul ul { list-style-type: square; } xmp { display: block; font-family: ; white-space: pre; margin: 1em 0; } }}

メニュー/1

2009-04-05T06:57:58+09:00

#divstyle(border: 3px double #000000;margin: 0px;padding: 10px;) {{#center() {{&font(20px,b){目次} }} ***[[一般]] #ls3(一般) ***基本デザイン別 #ls3(基本デザイン) ***オマケ #ls3(オマケ) }} #search3(title=サイト内検索,submit=検索) ***更新履歴(10件) #recent(10) ---- メニュー #ls3(メニュー) アップロード #ls3(アップロード) [[トップ]] CSS #ls3(CSS) 空白 #ls3(空白)

トップ

2009-03-04T01:25:09+09:00

&font(24px,u){About} @wikiの使用方法について，個人的に述べたサイトです。主に，SNS[[@flabo>>http://sns.atfb.jp/]]内の[[「@wiki 助け合いコミュニティ」>>http://sns.atfb.jp/view_community/112.html]]のスレッドをまとめた内容になっています。 &font(b,16px,#FF0000){※注意書き} -このサイトは，@wikiを&font(u){IE(系ブラウザ)で閲覧することを前提に}説明しています(管理人がIE系ブラウザでしか確認していませんので。ｺﾞﾐﾝ)。 -管理人はCSS初心者ですので(おまけにhtmlについては全くの無知)，もし説明に間違いがあったらｺﾞﾒﾝﾅｻｲです。

基本デザイン/オレンジロゴ(2カラム)

2009-02-26T06:44:52+09:00

*メニューの幅の変更方法 for：sanfrecce39 さん time：2008/11/17 **質問 #blockquote() {{オレンジロゴ(2カラム)を利用しているんですが，左のメニュー部分を拡大することって出来ないでしょうか? 横幅を広げたいんですが }} #divid(postit) {{　 }} **CSS 「管理ページ」＞「CSSカスタマイズ」において，下のような記述を入力して，「変更する」ボタンを押して確定させてください。そしてこの時，3ヶ所ある「○px」の数値を変更してメニューの幅を変更させます。変更する時は，3ヶ所とも同じだけ加減するとよいでしょう。 #divstyle(border: 1px dashed;margin: 5px;padding: 10px;) {【例】デフォルトより40px広くする場合：各数値に40px加算する。 #menubar ＝165→205 &nowiki(){#contents} ＝-194→-234&font(#FF0000){※但し，負の値であることに注意。} #contents_inner ＝204→244 } #pre() {{#menubar { width: 165px; } #contents { margin-left: -194px; /****マイナス「-」であることに注意****/ } #contents_inner { margin-left: 204px; } }} ---- *@wikiのロゴマークの消去画像左の@wikiのロゴマークを消したい場合は，「管理ページ」＞「CSSカスタマイズ」ページの「ユーザ定義CSS」フォームに以下の記述をコピペして，「変更する」ボタンを押して確定させてください。 #pre() {{#header a#atwiki-jp-bg1 { display: none; } }} ---- *ヘッダの画像の設定について **「タイトル・背景画像設定」を使用している場合 for：[[toriana>>http://www41.atwiki.jp/toriana/]] さん time：2008/02/19～ ***質問 #blockquote() {{タイトルロゴの表示が以前はきっちりとタイトル部分に表示されていたのに、いつの間にかワクを超えて表示されるようになってしまい、タイトルロゴが文字と被ってしまい見た目がカッコ悪くなってしまいました。アドレスは以下の通りなので、どなたかご指導よろしくお願いします^^; http://www41.atwiki.jp/toriana/ }} #divid(postit) {{　 }} ***前説質問者のかたは「管理ページ」＞「タイトル・背景画像設定」を使用してタイトルに画像を表示させていました。ただ，この機能を使用することによって，使用した画像がヘッダー部をはみださせて本文部分を押し下げてしまっていたので，ズレが生じていました。そこで，ヘッダー部の高さを画像に合わせて大きくすることでズレを解消させることにしました。 ***CSS 「管理ページ」＞「CSSカスタマイズ」のページを開いて，以下の記述をコピペしてください。その際， #blockquote() {{(タイトル画像の高さ)px＋65px }} #divid(postit) {{　 }} の数値を，下の「height: px;」に記入してください。そして「変更する」ボタンを押して確定させてください。なお，「タイトル・背景画像設定」で使用した画像の幅が大きい場合等には，@wikiのロゴマークが邪魔してヘッダー画像が綺麗に表示されないことがあります。なので，ここでは当該ロゴマークを消す設定にしてあります。消したくない時は，「display: none;」の箇所を削除してください。 #pre() {{#header { height: px; } #header a#atwiki-jp-bg1 { display: none; } }} ***オプション：画像の中央寄せ上記CSSに，以下の記述を追加。 #pre() {{#header { text-align: center; } #header h2 { text-align: left; } }} **「タイトル・背景画像設定」を使用しない場合 ***前説本項での方法は，ヘッダー部のbackgroundに，用意した画像を指定するというものです。 ***手順1 先ず，「管理ページ」＞「タイトル・背景画像設定」ページの「トップタイトル表記の種類」チェック・ボックスで「テキスト」が選択されていることを確認。 ***手順2 次に「CSSカスタマイズ」で，以下の記述をコピペして確定してください。なお，その際， #blockquote() {{+backgroundの「url()」に使用画像のURLを記入 +「(使用画像の高さ)px＋20px」の数値を「height: px;」に記入 }} #divid(postit) {{　 }} することを忘れずに。 #pre() {{#header { background: url() no-repeat center top; margin: 5px 25px 25px 25px; height: px; } }} ***オプション：サイト・タイトルの消去サイト・タイトルが既に画像に入っている等により，表示させたくない場合は，以下の記述を追加。なお，その際， #blockquote() {{(使用画像の高さ)px }} #divid(postit) {{　 }} を下のh2の「padding-top: px;」に記入すること。 #pre() {{#header h1 { display: none; } #header h2 { padding-top: px; } }}

一般

2009-02-16T07:10:24+09:00

#divstyle(border: 2px solid #555555;color: #555555;margin: 5px;padding: 10px;) {{&font(b,16px,#FF0000){※お断り} 　このページ「一般」では，どの基本デザインを採用しているかに係わらずに適用できる内容を取り扱っているつもりでした。　しかし，不確かですが，基本デザインによっては当てはまらない内容もあるようです。オイラが現時点で確認しているのは，基本デザイン「ウィキペディア風」採用時における「テーブルの文字色，背景色を行ごとに変更する」ですが，他にもこのようなケースがあるかもしれません。　その点，御了承のうえ御利用下さいマシ。(´･ω･｀) ｽﾏｿ ※モチロン，(トップ・ページで触れているように)IE系エンジン以外のブラウザ使用による相違は当然の前提として。 }} *画像の横に文字を表示させる for: kotoitc さん time: 2009/02/14 **方法-1&font(14px){:誰でも可能だが，表示に制限アリ。} ***表示例 #divstyle(width: 400px;) {{#blockquote() {{&ref(http://www1.atwiki.jp/ballade?cmd=upload&act=open&pageid=3&file=Wikipedia-logo.png)画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。 }} #divid(postit) {{　 }} }} ***ページ編集 #pre() {{&ref(【画像URL】)【横に表示させたい文字】 }} ただ，この方法では，上の表示例のように，2行目からは画像の下に表示されるという制限があります。 **方法-2&font(14px){:ウィキ管理者による「CSSカスタマイズ」が事前に必要。} ****表示例 #divstyle(width: 400px;) {{#blockquote() {{#divid(mustard) {{#image(http://www1.atwiki.jp/ballade?cmd=upload&act=open&pageid=3&file=Wikipedia-logo.png) }} 画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。 }} #divid(postit) {{　 }} }} ***CSSカスタマイズウィキの管理者が管理ページの「CSSカスタマイズ」に以下のように記述して「変更する」ボタンを押下。 #pre() {{div#hoge { float: left; } }} ※hogeの箇所は任意の半角英数文字。 ***ページ編集前項のように管理者がCSSカスタマイズしておけば，あとは誰でもページ編集で以下のように記述すればよい。 #pre() {{#divid(hoge) {{#image(【画像URL】) }} 【画像の横に表示させたい文字】 }} &font(red,b){※注意}更に，【画像の横に表示させたい文字】の前後を適宜(数行ほど)改行して文字の位置を調節します。 **方法-3&font(14px){:ウィキ管理者のみ可能。} ****表示例 #divstyle(width: 400px;) {{#blockquote() {{#divstyle(float: left;) {{#image(http://www1.atwiki.jp/ballade?cmd=upload&act=open&pageid=3&file=Wikipedia-logo.png) }} 画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。画像の横に文字を表示。 }} #divid(postit) {{　 }} }} ***ページ編集&font(14px){:ウィキの管理者のみ可能。} #pre() {{#divstyle(float: left;) {{#image(【画像URL】) }} 【画像の横に表示させたい文字】 }} &font(red,b){※注意}更に，【画像の横に表示させたい文字】の前後を適宜(数行ほど)改行して文字の位置を調節します。 ---- *テーブルの文字色，背景色を行ごとに変更する(奇数行，偶数行) for:sei1975さん time:2008/11/25 **質問 #blockquote() {{http://www1.atwiki.jp/guide/pages/1588.html にあるようなCSSを使いたいのですが、CSSカスタマイズに入れても利用できません。どうしてでしょうか?初心者ですいません。 }} #divid(postit) {{　 }} ここでは奇数行，偶数行によって色を変更するパターンについて，順を追って説明したいと思います。このパターンができれば，あとは質問文中のリンク先の説明を見れば自ずと分かると思うので。因みに，オイラもdivやらidやらclassやら，詳しい事は分かっていませんｗ。それでもデキタッ!(´･ω･｀) 【参照】上記リンク[[「テーブルの背景色を行ごとに変更する(上級者向け)」>>http://www1.atwiki.jp/guide/pages/1588.html]](@wikiご利用ガイド) **表示例 #divid(apple) {{||って|ナニ?| |分かり|ませ|ん。| |div|って|ナニ?| |分かり|ませ|ん。| }} **CSSカスタマイズ以下のように記述して確定させます。なお，この時，「apple」(id)の箇所に好きな半角英数字を代入してください。構造としては， #blockquote() {{「div」＋「#【id】」＋「」(半角スペース)＋「tr」＋「.【class名】」 }} #divid(postit) {{　 }} となります。 #pre() {{/*奇数行*/ div#apple tr.atwiki_tr_odd { background: #DC143C; /*背景*/ color: #DCDCDC; /*文字の色*/ } /*偶数行*/ div#apple tr.atwiki_tr_even { background: #DCDCDC; /*背景*/ color: #DC143C; /*文字の色*/ } }} **ページ編集以下のように記述して確定させます。 #pre() {{#divid(apple) {{|表|表|表| |表|表|表| |表|表|表| |表|表|表| }} }} **付記複数の表によってそれぞれ違う表示を設定したいのならば，その数だけdivのidを設定し，各idごとにCSSカスタマイズ，ページ編集を行えばよい。 &font(b,14px){【id「apple」】}(※前述と同じ。) #divid(mustard) {{&font(b){表示例} #divid(apple) {{|表|表|表| |表|表|表| |表|表|表| |表|表|表| }} }} #divid(mustard) {{&font(b){CSS記述} #pre() {{/*奇数行*/ div#apple tr.atwiki_tr_odd { background: #DC143C; /*背景*/ color: #DCDCDC; /*文字の色*/ } /*偶数行*/ div#apple tr.atwiki_tr_even { background: #DCDCDC; /*背景*/ color: #DC143C; /*文字の色*/ } }} }} #divid(mustard) {{&font(b){ページ編集} #pre() {{#divid(apple) {{|表|表|表| |表|表|表| |表|表|表| |表|表|表| }} }} }} &font(b,14px){【id「orange」】} #divid(mustard) {{&font(b){表示例} #divid(orange) {{|表|表|表| |表|表|表| |表|表|表| |表|表|表| }} }} #divid(mustard) {{&font(b){CSS記述} #pre() {{/*奇数行*/ div#orange tr.atwiki_tr_odd { background: #FFA500; /*背景*/ color: #DCDCDC; /*文字の色*/ } /*偶数行*/ div#orange tr.atwiki_tr_even { background: #DCDCDC; /*背景*/ color: #FFA500; /*文字の色*/ } }} }} #divid(mustard) {{&font(b){ページ編集} #pre() {{#divid(orange) {{|表|表|表| |表|表|表| |表|表|表| |表|表|表| }} }} }} **簡便法&font(14px){&nobold(){(※上記の方法を簡略化したもの。)}} 全ての表が同じ表示になってもよいのなら，こちらの方が編集が簡単かもしれません。 ***CSSカスタマイズ .atwiki_tr_odd { background: #DC143C; /*背景*/ color: #DCDCDC; /*文字の色*/ } .atwiki_tr_even { background: #DCDCDC; /*背景*/ color: #DC143C; /*文字の色*/ } ***ページ編集 &font(red){通常通り}の記述でOKです。 |表|表|表| |表|表|表| |表|表|表| |表|表|表| ---- *&font(red){【三訂】}「未作成ページ用class」の利用方法について for:clearさん time:2008/08/20 **質問 #blockquote() {{設定ページに「未作成ページ用class」というのがありますが，アレは具体的にどうやればwikiに反映されるのでしょう。文字色が変更できるようになると嬉しいのですが…。 }} #divid(postit) {{　 }} **回答先ず，「未作成ページ用class」に任意の半角英字(なぜか数字はダメみたい(?))の文字列を記入して「設定変更」ボタンを押す(ここでは例として「misakusei」とする)。次に，「CSSカスタマイズ」フォームに以下の記述を記入後，「変更する」ボタンを押して確定。なお，ここでは文字色だけでなく，ついでに背景色等，諸設定についても記述しましたので，好きなのを選んで設定してください。 #pre() {{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，かつイタリックで太字」になります(但し，フォント「メイリオ」等では日本語のイタリック表示はされないみたいです)。【例】 #blockquote() {{[[未作成なんだぜ。]] }} #divid(postit) {{　 }} &font(b,red){※注意} もし上記の手続きをしても反映されない場合は，未作成ページのリンク表示があるページを1度編集してみてください。そうすると反映されると思います。 ---- *テーブル(表)内での改行 for:shimiさん time:2008/08/06 **質問 #blockquote() {{テーブル内での改行はできますか? }} #divid(postit) {{　 }} **回答(by Shiraseさん) テーブル内で改行プラグイン「&nowiki(){&br()}」を使うとよい。 ***例 #pre() {{|文章1&br()文章2|文章3|文章4| |文章5|文章6|文章7| }} と記述すると， #blockquote() {{|文章1&br()文章2|文章3|文章4| |文章5|文章6|文章7| }} #divid(postit) {{　 }} となる。 ---- *ボックスをフレーム表示させる方法 for:csc21 さん(の質問から改変して項目を立てました) time:2008/04/06～ **方法-1 【参考】[[「スタイル指定div表示」>>http://www1.atwiki.jp/guide/pages/265.html#id_f75d1887]](@wikiご利用ガイド) 「CSSカスタマイズ」は使わず，ページを直接編集します。先ず，当該ページを管理者のみ編集可能なように設定し，その後以下の様に編集します。 #pre() {{#divstyle(overflow: scroll;width: 400px;height: 100px;margin: 10px;padding: 10px;background: #FFC0CB;color: #000000;) {{フレーム表示させたいボックスの本文をここに記述シる改行もできるゾ改行もできるゾ改行もできるゾ改行もできるゾ &font(b,16px,red){改行もできるゾ} }} }} これで，当該箇所にのみ特定のCSSが適用され，フレーム表示されます。 #divstyle(overflow: scroll;width: 400px;height: 100px;margin: 10px;padding: 10px;background: #FFC0CB;color: #000000;) {{フレーム表示させたいボックスの本文をここに記述シる改行もできるゾ改行もできるゾ改行もできるゾ改行もできるゾ &font(b,16px,red){改行もできるゾ} }} **方法-2 【参考】下記&font(b){「ウィキペディアの様に本文の一部を右にフロートさせる方法」} もし，ページを「方法-1」の様には管理者のみ編集可能なようにしたくない場合は「CSSカスタマイズ」とページ編集の両方が必要です。 ***CSS 先ず，「CSSカスタマイズ」で以下の様に記述，確定させます(hogeの部分は半角英数字であれば何でも良い)。 #pre() {{div#hoge { overflow: scroll; width: 400px; height: 100px; background: #FFC0CB; color: #000000; } }} ***ページ編集次に，ページを以下の様に編集します。 #pre() {{#divid(hoge) {{ここにページ本文 }} }} これでスクロール表示されます。 ---- *ウィキペディアの様に本文の一部を右にフロートさせる方法 for:clear さん time:2008/04/02～ **表示例あなたは「青い山脈」を知っているか?m9(｀･ω･´)ﾋﾞｼｯ #blockquote() {{**藤山一郎 #divid(tabasco) {{#center() {{&font(b){藤山一郎} }} |>|~基本情報| |出生名|増永丈夫| |別名|ピンちゃん| |出生日|1911年4月8日| |学歴|東京音楽学校| |出身地|東京府東京市日本橋区蛎殻町| |死没日・地|1993年8月21日(82歳没)| |職業|歌手・声楽家・作曲家・指揮者| |活動期間|1930年～1993年| |レーベル|ビクター| |~|テイチク| |~|コロムビア| |~|日本放送協会| }} 出典：フリー百科事典『ウィキペディア(Wikipedia)』 &font(b){藤山一郎}(ふじやまいちろう、1911年(明治44年)4月8日 - 1993年(平成5年)8月21日)は、日本の国民的歌手・声楽家・作曲家・指揮者である。本名ではクラシック音楽の声楽家として活動。モスリン問屋「近江屋」の三男に生まれ、東京音楽学校(現東京芸術大学音楽学部)に学び、クラシック音楽の正統派歌唱から大衆的なポピュラー音楽まで幅広い分野で活躍した。『酒は涙か溜息か』『丘を越えて』『青い山脈』など多数のヒット作をもち、太平洋戦争戦前戦後を通じ、日本のポピュラー音楽を代表する歌手である。 #openclose(block,show=目次,border: 0;,margin: 0;,padding: 0;) {{|1 人物歴| |1.1 少年時代| |…| }} **人物歴 ***少年時代藤山は日本橋区長谷川町(現在の中央区日本橋堀留町)に店を出していたモスリン問屋「近江屋」の5人兄弟の末っ子として生まれた。父は増永信三郎、母はゆう。一番上が長女の恒子、二番目が長男の正夫、つづいて次男の文夫、次女八千代、そして三男丈夫であった。父信三郎と姉八千代は丈夫を良く浅草に連れていった。この時、雑誌の物売りや粗悪品を売るテキ屋、アメ屋の売り子などの歯切れの良い口上や売り文句を聴いていたことが、後に歌手・藤山一郎の言葉は明瞭で歯切れが良いと言われる要因となった。 }} #divid(postit) {{　 }} 上記例において「基本情報」の表がフロートして右に寄っているのに対して，「目次」の表は通常通りテキストの下に表示されている。本項では「基本情報」の表のように，本文の一部をフロートして右に寄せる方法について述べる。 **記述 ***CSS 「CSSカスタマイズ」に以下の記述をコピペして，「変更する」ボタンを押して確定。 #pre() {{div#hoge { float: right; } }} ***本文本文のうち，右側にフロートさせたい箇所を下の「本文」部分に記述。　　(上記「表示例」では「基本情報」の表全体) #pre() {{#divid(hoge) {{本文＝文や図表 }} }} なお，{{本文}}の中は改行も可なので，表の構文 #pre() {{|||| |||| }} も可能ですダ。 **解説 -【参照】[[「id付きdiv表示」>>http://www1.atwiki.jp/guide/pages/265.html#id_fe3cdaa3]](@wikiご利用ガイド) -半角英数字で好きなidを上記「hoge」の箇所に入れる。 -本文中でフロートさせたい箇所が複数ある場合も，同じidで可。 -本項のように右ではなく，左に寄せたい場合はCSS記述を「float:left;」とすればよい。 -但し，筆者も初心者＆生半可状態であるので，基本デザインによっては目的通りに表示されないかもしれまヘんが，その時はサヨナラ～ｗ m(_ _)m

一般/音楽

2009-02-16T06:53:31+09:00

*ページでmp3ファイルを再生させる方法 -【参照】プラグイン[[「mp3blestarプレイヤー表示」>>http://www1.atwiki.jp/guide/pages/936.html#id_e90ee8eb]](@wikiご利用ガイド) **設置例 #html2() {{ }} #html2() {{ }} **方法 ***1. FTPでウィキにmp3ファイルをアップロードする方法については[[「FTPに関して」>>http://www1.atwiki.jp/guide/pages/28.html]](@wikiご利用ガイド)を参照。 #divstyle(border: 1px dashed #000000;margin: 5px;padding: 10px;) {{【コメント】正直，ココがワレラ初心者には面倒ですｗ。「FFFTP」というソフトをインストールし，それを使用してアップするのが一般的らしいですが，[[ブラウザからでもできます>>http://www1.atwiki.jp/guide/pages/28.html#id_109348f9]]ので，気軽にやってみては。 }} ***2. [[mp3blestar>>http://www.blestar.com/playerset/]]からHTMLを取得する前項1. でアップしたmp3ファイルのURLを，上記サイトの入力フォームに記入してHTMLを取得する。 #divstyle(border: 1px dashed #000000;margin: 5px;padding: 10px;) {{【コメント】FTPでウィキにアップしたファイルのURLは，「ご利用ガイド」にある通り， http://www●.atwiki.jp/アカウント/pub/ファイル名.mp3 となります。 }} ***3. プレイヤーを埋め込みたいウィキのページを編集下記のプラグインの{{}}内に，前項2. で取得したHTMLを代入して，ページに記述すれば，プレイヤーが埋め込まれます。 #pre() {{#mp3blestar() {{取得したHTML }} }}

基本デザイン/ノート

2009-01-31T06:43:50+09:00

*&font(red){【改訂】}右メニューを非表示にする for：makuin-goo さん time：2008/11/18 **質問 #blockquote() {{はじめまして。ノート(3段組)のデザインにしているのですが，「右メニュー」を撤去して2カラムにしたいのです。4時間ぐらい苦闘してもダメだったので相談させて下さい。 }} #divid(postit) {{　 }} **CSS 「CSSカスタマイズ」で，以下の記述をコピペして「変更する」ボタンを押して確定させてください。 #pre() {{.inner { border-right: 0px dashed #C0C0C0; } .outer { border-right: 0px solid #F5F5F5; } .rightcol { height: 0px; margin-right: 0px; width: 0px; } }} ---- *メニュー欄の背景の色を変更する方法 for:spaceさん time:2008/08/02 **CSS 「CSSカスタマイズ」のフォームに以下の記述をコピペして，色コードの部分をカスタマイズしてください。そして，「変更する」ボタンを押して確定させます。 #pre() {{.outer { border-left: 180px solid #F5F5F5; border-right: 170px solid #F5F5F5; } }} ---- *ページ下部の横スクロール・バーを消す方法(IEエンジン使用時?) IE(やSleipnir,Lunascape等)使用時になぜか表示される，意味の無いバー表示が目障りに感じるかたはドウゾ…。 **CSS #pre() {{.inner { width: auto; } }}

基本デザイン/ダークレッド

2009-01-07T00:12:03+09:00

*背景画像の設定 for:malishさん time:2008/09/05 **質問 #blockquote() {{テンプレダークレッドを使用しているのですが、背景画像を差し替えると表示されません。 CSSを全コピーして、画像urlのみを変更しています。直接画像アドレス打つと表示されるので、画像の問題ではないと思うんですが>< 最初はFirefoxのみで画像確認出来、他ブラウザでは反映されていないので、色々弄っていたんですが、最終的にFirefoxでも表示されなくなってしまいました。ですので、テンプレ自体を選択しなおして再度挑戦してみたのですが全く反映しませんでした>< }} #divid(postit) {{　 }} **前説「背景画像」というのが，ヘッダの背景なのか，或いはページ全体の背景なのか，よく分かりませんが，こちらで試したところ，ヘッダの場合はURLを変更するだけで画像が表示されるようなので，ここではページ全体の背景を指すものとして説明します。このデザインでは，背景(background, background-color)がそれぞれの場所(例：header, mainpage, 等)ごとに設定されているため，それらの内のどこか1ヶ所だけ変更してもダメなようで，全ての箇所を設定変更する必要があるようです(メンドくせー)。 **手順1 先ず，CSSのテンプレを「メモ帳」にコピペします。そして「メモ帳」のメニュー・バー「編集」＞「検索」を利用して「background」で検索し，何箇所かあるその値を空欄にしていってください。その場合，「backgroud-color」もそれに該当します。【例】〈テンプレ〉 #pre() {{background: #000; background-color: #000; }} 〈変更後〉 #pre() {{background: ; background-color: ; }} #divstyle(border: 1px dashed #000000;margin: 5px;padding: 10px;) {{&font(b,red){※注意1} CSSテンプレの下の方にある「/*差分表示*/」「/*検索結果*/」のbackgroundの値は変更する必要はありません。 }} #divstyle(border: 1px dashed #000000;margin: 5px;padding: 10px;) {{&font(b,red){※注意2} CSSテンプレの中の， #pre() {{ul li{ background:～～; … } }} の箇所は，変更すると箇条書きの表示に影響しますので，画面全体の背景をデフォルトの黒色のままにする場合は弄らず，そのままにしておいた方が楽です。しかし，背景を黒色&font(red){以外}に指定する場合は，逆に箇条書きのリスト・アイコンだけが浮いてしまい変なので， #blockquote {{(例)「背景＝ピンク」の場合 &image(http://www1.atwiki.jp/ballade?cmd=upload&act=open&pageid=3&file=darkred-trimming.bmp) }} #divid(postit) {{　 }} テンプレの「ul」「ul li」「ol li」の部分をごっそり下のように書き換えてください。 #pre() {{ul, ol { margin: 0px; padding: 0px 0px 0px 20px; } ul li { background: ; margin: 0px; padding: 0px; line-height: 200%; } ol li { margin: 0px; padding: 0px; line-height: 1.5; } }} }} **手順2 次に，上で編集したテンプレの&font(red){後に}，以下の記述を追加します。ここで，「url()」に画像の場所を記入し，かつ上の「※注意2」でも少し触れた，画面の背景を記入します。ここではデフォルトの黒色のままにしてあります。 #pre() {{body { background: url() no-repeat #000000; } #header h2 { color: #FFFFFF; } #header a, #header a:link, #header a:visited, #header a:hover, #header a:active { color: #FFFFFF; } }} **手順3 最後に，「CSSカスタマイズ」の「ユーザ定義CSS」に，上のメモ帳の記述を全てコピペして「変更する」ボタンを押して確定させればオケーです。

基本デザイン/オレンジロゴ(3カラム)

2009-01-07T00:10:16+09:00

*メニューの幅の変更方法 **CSS 「管理ページ」＞「CSSカスタマイズ」において，下のような記述を入力して，「変更する」ボタンを押して確定させてください。そしてこの時，3ヶ所ある「○px」の数値を変更してメニューの幅を変更させます。変更する時は，3ヶ所とも同じだけ加減するとよいでしょう。 &font(b,14px){左メニュー} #divstyle(border: 1px dashed;margin: 5px;padding: 10px;) {{【例】デフォルトより40px広くする場合：各数値に40px加算する。 #menubar ＝165→205 &nowiki(){#contents} ＝-194→-234&font(#FF0000){※但し，負の値であることに注意。} #contents_inner ＝204→244 }} #pre() {{#menubar { width: 165px; } #contents { margin-left: -194px; /****マイナス「-」であることに注意!****/ } #contents_inner { margin-left: 204px; } }} &font(b,14px){右メニュー} #divstyle(border: 1px dashed;margin: 5px;padding: 10px;) {{【例】デフォルトより40px広くする場合：各数値に40px加算する。 #menubar2 ＝165→205 #wrapper ＝-190→-230&font(#FF0000){※但し，負の値であることに注意。} #contents_inner ＝200→240 }} #pre() {{#menubar2 { width: 165px; } #wrapper { margin-right: -190px; /*----マイナス「-」であることに注意!----*/ } #contents_inner { margin-right: 200px; } }}

メニュー/2

2009-01-06T23:39:11+09:00

#divstyle(font-family:HG丸ｺﾞｼｯｸM-PRO;) {{#blockquote() {{#center() {{只今の基本デザインは「新シンプル白」でやんす。 }} }} }} #divid(postit) {{　 }} *[[@wiki>>http://atwiki.jp/]] -[[@wikiご利用ガイド>>http://www1.atwiki.jp/guide/]] --[[更新情報>>http://www1.atwiki.jp/guide/pages/143.html]] *[[@flabo>>http://sns.atfb.jp/]] **[[「@wiki 助け合いコミュニティ」>>http://sns.atfb.jp/view_community/112.html]] ***「@wiki 助け合いコミュニティ」掲示板スレッド一覧(10件) #atfb_bbs_list(112) **管理人(へ)のヒトコト #atfb_hitokoto(150)