ヤマレコの山行記録ページの中の文字で色を使ったり、太字にしたりすることができる。
今までもコメント欄ではイラストを挿入したり、文字色を変えたりすることができたのだが、それはどういう仕組みで可能なのか、あまり追求はしなかった。
だが、そういう装飾を施した時のコメント欄の入力フォームを見直してみたら「［○○］・・・［/○○］」というような文字列が挿入されているのだった。これ、見るとサイトページを書く時のHTMLにかなり似ていて、HTMLを使った経験がある人ならすぐに分かる。
そこでレコ本文の方で試しにやってみたら、簡単に文字の装飾ができたのだった。
使用例）[url=http://www.yamareco.com/modules/yamareco/detail-297970.html] 真教寺尾根で赤岳/稜線手前で時間切れ(5/14)[/url]
そこで、ここで同じように自分のレコ文字に装飾したい人のために簡単にその「裏技」を紹介しておこうと思う。
**********************************************************
文字の装飾はすべて「タグ」という記号で行う。文字修飾に使う主なタグは二つだけだ。
[b][b]・・・・これは文字を太字にするタグ。（boldの略だね）
[color=○○○○○○]・・・・これは文字色を指定するタグ。[/b]
で、ここでタグの基本規則について・・・。
[b]1)タグは「開始タグ」と「終了タグ（スラッシュを使う）」で一セットとして働く。
例えば［b］タグは［/b］で終了する。
2)タグは二つ同時に働かせることができる。
3)二つのタグを同時に書いた時は、終了タグは開始タグと逆の順序で書く。
[/b]
ここである文字を太字にしたいとすると、
［b］この間の文字が太字になる。［/b］
という風に書く。
また同じように、ある文字列の色を変えたい時は、
[color=○○○○○○]この間の文字が指定した色になる。[/color]
となる。ここで終了タグは[/color]だけでOK。
すると、文字色を変えて太字にしたい時は、
[color=○○○○○○]［b］この間の文字が指定した色の太字になる。［/b］[/color]
とする。
ここでは開始タグが[color]［b］という順序なので（逆でもOKだ）終了タグは[/b][/color]という逆順序になる。
（下の注）はこの方法で赤太字で書いています。）
最後に[color]タグでの色指定だが、これは6桁の文字で表すことになる。
これについて詳しく説明すると長くなるので省くが、下記のページを参考に色を指定すればいいだろう。
（指定の時、このページの色記号の頭に付いている「#」は不要）
[url=http://www.asahi-net.or.jp/~hi5k-stu/compt/color.htm]HTMLの色指定について[/url]
たとえば文字色を赤にしたい場合は［color=FF0000］ でよい。
[color=FF0000]そうするとこんな風に赤い文字になります。[/color]
ヤマレコの記録入力時にフォーム欄にこのようなタグを書き込むことによって、黒一色ではない見やすい記録ページを作ることができる。
興味ある方はお試しを。
[b][color=FF0000]注）この日記ページで書いているタグのカッコは表示のために全角で書いています。実際に書く時は半角でないと機能しませんのでご注意下さい。[/b][/color]
おはようございます、pasocomさん
早速試してみました。
感動しました
早速のコメントありがとうございました。
ご自身の過去のレコを「編集」してみられたのでしょうか？
いままで黒一色で読みにくい場合もあったのですが、そういう場合には特に有効ですね。
ただ、あまり多用すると却って見にくくなる恐れがあるように思います。
自己満足ではなく、「読者」が読みやすいページを作れるといいですね。
pasocomさん
おはようございます。
大変参考になりました
お初にお目にかかります、ですね。
こんな日記がお役に立つようでしたら幸いです。
この欄のようなレコや日記に対するコメント欄ですといままでも、「
ただ、私自身もあまり「デコメール」みたいな絵文字ばっか、みたいなのは好きでなく、やはり控えめに使う方がいいんだろうなとは思いますが・・・。
これをきっかけに皆さんのレコが「デコレコ」になっちゃたらどうしよう・・・・
pasocomさん、おはようございます。
さすがにpasocomさんの説明は分かりやすいですね。
最初は、あれ？どうしてタグが機能しないのかな？と思ったら全角で書かれていたのですね。
ＨＴＭＬだと＜＞でくくりますが、その違いはどうしてなんでしょうね？
私も過剰装飾になることを恐れましたが、その心配はなさそうな感じですね、きっと。
コメントを編集する画面の下、オプションに「XOOPSコードを有効にする」というチェックボックスがありますね。
これ今朝になって気になったので調べてみたら、この［ ］で囲うタグのことのようでした。（BBコードとも言うらしい）。
これは、「HTML記法の代わりとなる簡易的なコード」と説明されており、どうも入力フォーム内で使うことが多い書式のようです。
考えてみれば、最近のHPというのは自分でHTML書いているなどというのはごく少なくなってしまい、このヤマレコもそうですが、文章内容だけをフォーム入力することで、あとは決められたスタイルに表示するというサイトが増えましたね。ブログなどもそう。
そういう場合、従来のプレーンテキストしか受け付けないのでは芸がない(^^)
で、こういうコードを使って少しでもリッチテキスト形式で入力できるようになってきた、というところじゃないでしょうか。
ちょっと心配しているのはサーバーに負担ないのか、ということですが、これしきで影響あるとも考えにくく、いまのところ管理人のmatoyan様からクレームないので大丈夫か、と思っているところです。
それにあまり過剰な装飾は読む方も引きますしね。
なるほど、XOOPS（ズープス）って言うんですね。
私はＨＴＭＬならまぁＯＫなんですが、XOOPS（ズープス)はチンプンカンプンです。
顔アイコンはタイトルにだけ有効なんですかね？
それと、ＨＴＭＬではリンクのターゲットを指定して新しい画面で開くとかできますが、それはXOOPS（ズープス）にはあるんでしょうか？
私の日記でも書かせていただきましたがヤマレコは機能的に奥が深いのでどっかにイースターエッグが隠されていそうな感じですね。例えば１００名山を達成すると何か変化があるとか？考え過ぎでしょうか？
再々のコメントありがとうございます。
先のコメレスに書いたように私自身、この書式が「xoops」というものであること、今朝知ったばかりです。
これを「ズープス」と読むこともmurren様のコメントで知ったという・・・。
ですから「XOOPS（ズープス)はチンプンカンプン」なのは私も同じです。
ただ「ＨＴＭＬではリンクのターゲットを指定して新しい画面で開くとかできますが、それはXOOPS（ズープス）にはあるんでしょうか？」
これについては、昨日のmurren様のレコのコメントに書いたとおりで、［url=］というリンクタグが用意されています。
書式は
［url=linkpage adress］text［/url］
でOK。HTMLのAタグと同じに使えます。お試し下さい。
ただし、このタグでは「新しいウインドウ」ではなく、開いているウインドウが変わってしまいますね。「新しいウインドウで開く」には、なにやらjavascriptを書く必要があるかも知れません。
たびたびすみません。
Ａタグだとtarget="_blank"でやれますが、なんとなく別の書き方でやれる感じもありますね。時間がないので調べきれませんがヒマなときに調べてみます。
リファレンスではありませんが、投稿フォームの使い方の説明のページを見つけました。
http://www.suchara.com/xoops/02/03_basic.html
本日は、pasocomさんのおかげで勉強ができました。
尚、前のコメントは少し下品だったので一部削除させていただきました。悪しからずよろしくお願いいたします
コメントありがとうございます。
おかげさまで私も今日はずいぶん勉強することができました。
自分一人では疑問にも思わぬこと。他の方に指摘されると「ええ？」と調べたくなる。本来自分自身で疑問に思うべき所なのですが。
[url=]のタグで同じウインドウでページが変わってしまう件ですが、調べたところ、xoopsの元々の設定では違うウインドウが開く方がデフォルトらしく、これを同じウインドウで開くにはどうしたらいいか？というようなQ&Aが多く見つかりました。
してみると、ヤマレコの管理人様の方でのxoopsの設定で同じウインドウで書き替えられるように変えておられるようです。
いずれにしても、これはユーザー側が直すことができるものではなく、ザーバー管理者側の設定いかんのようですね。
もちろん「target="_blank"」も入れてみましたが、効果なしでした。
ご提示あった「すちゃらかサイト」の説明も、これはこのサイトのみで通用する設定。ヤマレコの中とはちょっと違うようです。
【追記】
ふと思いついたのですが、今時のブラウザだとリンクを右クリックすると「新しいタブで開く」というようなメニューが出る事が多いです。
してみるとザーバー側でいかように設定しようとも、ユーザーのクリック一つでどうとでも開ける環境の方が多い。
そうなると開き方などどうでも良くなったのかも知れません。
pasocomさん、本日はたびたびとお手数をお掛けしてすみません。
私も少し調べてみたら、pasocomさんが言われるように新画面になるのがデフォルトのようですね。
私もＨＴＭＬと少しばかりのperlでＨＰを作っていたこともありますが、自己サイトは全画面(_top)でリンクを開き、外部サイトへは新画面(_blank)になるようなターゲット設定でリンクを貼っていました。その癖があって、ヤマレコの日記に外部サイトのリンクを貼る場合には、新画面にならないので気になっておりました。ということで良い機会だと思ってpasocomさんに質問までしてしまった訳です。お手数をとらせました。
pasocomさんが言われるように、ヤマレコの中の外部リンクは基本的に右クリックして「新しいウィンドウで開く」という方法で私も開いています。
私なんぞが偉そうに言うと語弊がありますが、ヤマレコはXOOPS（ズープス）で作られたサイトっていう感じが見えた気もします。「どうやって作っているんだろう」と感心ばかりしていましたが樹林帯の中から少し山腹が見えたようでちょっとだけ安心しました。
追記：記録本文にも絵文字が使えることが分かりました。
再々のコメントありがとうございました。
昔はブラウザと言えば「ネットスケープ」だけ。やがてIEが普及してきて二大ブラウザに対応させるためにサイト構築の手間が増えてしまいました。
いまではFirefoxとかGoogleChromeとかついでにスマホとか実に様々なブラウザが乱立状態(^^)。
こういうサイトを構築している管理者様は、多くのブラウザでの動作確認をせねばならず、まったくご苦労なことです。
xoopsはじめ、もはや私などには理解もできない難しい世界になってしまったような気がします。
それでも、こうやってネットの仕組みがちょっとでも理解できると、なんだか嬉しいですね。
コメントを編集
いいねした人
コメントを書く
ヤマレコにユーザー登録いただき、ログインしていただくことによって、コメントが書けるようになります。ヤマレコにユーザ登録する