mediawikiで自前のWEBフォントの利用方法

このQ&Aのポイント
  • mediawikiで自前のWEBフォントを利用する方法について解説します。
  • mediawikiの編集ページで指定した文字を特殊なフォントで表示する方法について詳しく説明します。
  • また、検索時や検索結果の文字にも自前のフォントを使うことができる方法についても解説します。
回答を見る
  • ベストアンサー

mediawikiで自前のWEBフォントの利用

お世話になります。 現在mediawikiでwikiページを作成していますが、自前のフォントをサーバーにアップしておいて、そのフォントを使用するということは可能でしょうか? 例えば下記のように編集ページで指定した文字をclass指定したhtmlタグで囲んだらその文字を特殊なフォントで表示するような形です。 <span class="hoge">アイウエオ</span> (class"hoge"で囲った文字を特殊文字で表示) また、検索時にもその文字が使え、検索結果の文字にも使えると尚よいです。 最低でも指定した文字に使用する様な形は実現したいと思います。 ご存知の方、よろしくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
  • memphis
  • ベストアンサー率40% (975/2395)
回答No.1

CSS3のWebフォント機能を使って下さい。

gellgugu
質問者

お礼

ご返信ありがとうございます。 common.cssへのcss3 追記でやりたい事が出来ました! ありがとうございます!

関連するQ&A

  • インラインで設定したフォントサイズを相対的に

    今既にあるPCサイトのスマホ用テンプレートを作っています。 例えば <span class="hage" style="font-size:20px">hoge</span><br /> <span class="hage" style="font-size:18px">hogege</span> こういうHTMLが既にあったとして スマホで見ると20pxや18pxがでかい!と思ったときに 相対的に全体のサイズを下げることは不可能でしょうか? hogeはhogegeより大きくしたいのですが CSSで.hage{font-size:14px;}などとしてしまうと 当たり前ですが全部14pxになってしまいます。 PCで見たときは上記の通りで スマホで見たら <span class="hage" style="font-size:14px">hoge</span><br /> <span class="hage" style="font-size:12px">hogege</span> こう表示される、なんてことは出来るんでしょうか? JSなどによる動的な操作は重くなりそうなのでそれ以外にありましたら お知恵をお貸し下さい。

    • ベストアンサー
    • CSS
  • Javascriptでページ内の任意クラスを非表示

    Javascriptで、ページ内に点在する任意のクラスを非表示にしたいと思います。 こんなことが可能でしょうか? 条件: 1.class="text"というspanなりdivなりがページ内に複数存在します。指定しているスタイルはフォントサイズやフォントカラーです。 2.そのクラスが指定された要素の中で、テキストで「非表示」となっている要素のみ非表示にしたいと思います。  例:<span class="text">非表示にしたい</span>、<div class="text">これは非表示です</div>  このように「非表示」という文字が含まれています。 3.「非表示」というテキストが含まれている要素にはclass="text"以外にclassもidもふられていないです。 4.jQueryやJavascriptは使えますが、あらかじめ指定要素にidやclassを付加しておくということができません。何らかの方法でページ読み込み後に検索し、探し出さないといけないのです。 案: 素人の私が考えた方法では、「非表示」という文字がマッチする「class="text"」要素を何らかの方法で検索し、その要素に対して「id="hide"」などを追加して、そのidを非表示処理するという方法です。 上記案をコード化できますか? また、ほかにもっと簡潔にできるよという方法はありますか? かなりの無理難題のような気がしますが、もしできるようであればよろしくお願いします。

  • HTMLファイルのフォント指定

    こんにちは。HTMLファイルの編集についてです。 スタイルシートによるフォントの指定について、 お尋ねします。 ヘッダ部分に、 h1{color:blue;font-size:18pt} とか、 .type { font-family:"MS 明朝"; font-size:20px; color:blue; } と書きますと、 <h1> </h1>、<SPAN CLASS="type"> </SPAN> で、文字を挟んで、フォントの指定が可能ですが、 HTMLファイルすべてのフォントについて、フォントサイズを13pxにしたい場合は、 どうしたらいいのでしょう。 ヘッダに書き込むことで、どうにか出来ないでしょうか? それで、なおかつ、部分的に<SPAN CLASS="type"> </SPAN>を 使いたいというような場合は、どうしたらいいのでしょう。

  • スタイルシートで基本フォントサイズを指定したい

    スタイルシートで基本のフォントサイズを指定出来ませんか? 今、指定していない為か馬鹿デカイ文字になっています。 (IE文字サイズ中ですが……) なので今回避方法として<span class="xxx">で、 文字をこまめに設定しています。。。 どたなかスタイルシートで基本サイズを指定出来ませんか? <body font-size: 12px;>と指定しても出来ませんでした。。。

    • ベストアンサー
    • HTML
  • 携帯でスタイルシートが利用できますか?

    携帯電話で見れるホームページで文字サイズの指定をしたいと思っております html言語で<font size="7">フォントサイズを指定したい</font>とすれば文字サイズが変更できるのですが スタイルシートを利用して下記のように記述すると フォントサイズが変更されません。携帯ではスタイルシート利用できないのでしょうか?詳しい方お教えください。 <style type="text/css"> .large {font-size:large} .small {font-size:small} </style> <body> スタイルシートで<span class="large">フォントサイズを指定したい</span> </body>

    • ベストアンサー
    • HTML
  • CSSでのフォントサイズ指定におけるジレンマ

    以下の例文では、   * {font-size: 10pt;} があるゆえに、赤太字で示された   .ddd {color: #ff0000;font-weight: bold;} のフォントサイズがばらばらになってしまいます。 各所の指定フォントサイズを遵守させ、かつ赤太字を有効化するにはどのようにればよいでしょうか。   * {font-size: 10pt;}は事情あってやめられません。 「.ddd」に、font-size: middleを入れたりしてもだめでした。 !importantとか、何か簡単な「おまじない」の追記で解決できるといいのですが。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- * { font-size: 10pt; } dd { font-size: x-small; } dt { margin-left: 30px; } .eee { border: 1px solid #000; font-size: small; } .ccc { font-size: xx-large; } .aaa { font-size: medium; } .bbb { font-size: small; } .ddd { color: #ff0000; font-weight: bold; } --> </style> </head> <body> <h2>&nbsp;&nbsp;<a href="./a.htm" style="font-size: large;">2014年の<span class="ddd">雪</span>景色</a></h2> <a href="./index.php" class="eee"><span class="ddd">雪</span>下くんの感想</a> &nbsp;&nbsp;1月には何度も降雪、周りは<span class="ddd">雪</span>、<span class="ddd">雪</span>、<span class="ddd">雪</span>… <dl> <dt class="Tab"><span class="ccc">首都圏では不慣れな<span class="ddd">雪</span>かきなどに追われた</span></dt> <dt><span class="aaa"><span class="ddd">雪</span>下大介</span>&nbsp;&nbsp;<span class="bbb">大阪府立降<span class="ddd">雪</span>下小学校3年</span></dt> <dd>大阪ではひさしぶりに<span class="ddd">雪</span>が降りました。この時期での降<span class="ddd">雪</span>は珍しい。</dd> </dl> </body> </html>

    • ベストアンサー
    • CSS
  • JavaScriptで連続する空白を、htmlタグ付きで別の文字の連続

    JavaScriptで連続する空白を、htmlタグ付きで別の文字の連続に置換する方法 ※可視化のため下記のサンプルでは、空白を「_」で表現しています 「_」の連続を、「#」の連続とそれをタグで囲んだ状態にしたいと思っています。 やりたいことはこんな感じです。 (0):置換前:hoge_hogehove___asd#bn__ (1):置換後:hoge<span class="…">#</span>hogehove<span class="…">###</span>asd#bn<span class="…">##</span> しかし正規表現の書き方が分からなかった為、現状のコードはこんな感じにしています。 str.replace(/_/g, "<span class='…'>#</span>"); 実行結果はこうなります。 (2):現状:hoge<span class="…">#</span>hogehove<span class="…">#</span><span class="…">#</span><span class="…">#</span>asd#bn<span class="…">#</span><span class="…">#</span> 無駄に長いのですがとりあえず現状でも、htmlとして表示したときの結果は間違っていません。 しかし ・正規表現を十分に理解できていないレベルの低いコードっぽい ・最終的には比較的多くの文字列を処理をする ・保持しておいて繰り返し表示するので置換後の文字列を小さくしておきたい と思っています。 (0)を(1)の状態に変換する方法を教えてください。 出来れば正規表現でシンプルにパシッと決める方法を希望しています。 よろしくお願いします。

  • MediaWikiの設置ディレクトリと、ドキュメントルートの設定

    MediaWikiの設置ディレクトリと、ドキュメントルートの設定について教えてください。 ■現状 ・MediaWikiを「/var/www/html/wiki」配下に設置。 ・「http://ホスト名/wiki/」で使用中。 ・ドキュメントルートは「「/var/www/html/」 ■やりたい事 ・MediaWikiは現状のまま「/var/www/html/wiki」配下に設置。 ・「http://ホスト名/」でMediaWikiを利用したい。 ■試した事 ・ドキュメントルートを「/var/www/html/wiki」に変更。 ・ドキュメントルート配下に確認用のindex.htmlを設置。 ・「http://ホスト名/」で確認用のindex.htmlが参照可能。 ・index.htmlを削除。 ・「http://ホスト名/」でアクセスすると、Not foundで404エラーになります。 この時、ブラウザのアドレス内容が「http://ホスト名/wiki/index.php/<省略>」となっています。 ・LocalSettings.phpの$wgScriptPath が "/wiki"となっているため、"/" にしましたがスタイルシートの反映されない画面が表示され、正常に動作しません。 ■主な環境 Ubuntu Apache2 初歩的な設定だと思いますが、ご教示願います。

  • Webフォントが表示されない

    Firefox(Ver24.0)のMac版で、Webページが指定したフォントを優先するのチェックを外すとWebフォントが表示されません。チェックを外し状態でWebフォントを表示する方法はありますか?

  • フラッシュのフォントについて

    あるサイトでフラッシュを使用して文字を表示するページにアクセス すると、必ず文字化けして読み取ることが出来ない為、管理者の方に メールを送ったところ、「フラッシュが使用するフォントが壊れてい ると思われます」との返事が来ました。 フラッシュが使用するフォントが壊れているかどうか確かめるには、 どうすればいいのでしょうか。壊れている場合、どのようにすれば 復旧させることが出来るのでしょうか。 ぜひ教えて下さい。お願い致します。 OS:Win ME、IE:6.0です。フラッシュを使用して表示させるページは エンコードがUnicode(UTF-8)となっています。日本語や自動選択を 指定しても文字化けしたままです。

専門家に質問してみよう