≪ 2017 10   - - - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 - -  2017 12 ≫
*admin*entry*file*plugin

スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


リプレイブログで使えそうなもの 

どうもこんばんは、周摩です。
最近夜勤明けだと十二時間くらい余裕で眠るクセがついてしまいました……
それはさておき本題。

当ブログのメインコンテンツであるCardWirthリプレイ。
こちらで使っているHTMLのテクを紹介していきたいと思います。
とある御仁より要望がありましたので、早速一時間半くらいで作りましたよ。

「専門的な知識はいらないから、手っ取り早くやり方だけ教えてくれ」って方向けです。
また、重要な事ですが、あくまでFC2ブログのみで動作確認した技術です。
他のレンタルブログだったり、ホームページに流用しようとして上手くいかなくても、その辺はご了承ください。
それではどうぞ。


●文字の格納/展開
 リプレイの目次で使っている、↓こんな奴です。

何がしかの文章

 これって下準備さえしていれば、割と簡単に出来ます。 

①下準備
 ブログの『管理画面』に入り、『環境設定』にある『テンプレートの設定』を選択します。
 『テンプレートの設定』のページの下の方に、『○○(テンプレート名)のHTML編集』という項目があり、その中にごちゃごちゃとコードが書かれたテキストボックスがあります。
 一つ一つのコードは無視して、<body>というタグを探します。
 その直下に、以下のコードをコピーして貼り付けてください。

<script type="text/javascript" language="JavaScript">
function showHide(targetID) { //functionの宣言。受けとったIDは変数targetIDに格納。
if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する
//指定されたIDのstyle.displayがnoneなら
if( document.getElementById(targetID).style.display == "none") {
//blockに変更する
document.getElementById(targetID).style.display = "block";
} else { //noneでなければ、つまりblockなら
//noneにする
document.getElementById(targetID).style.display = "none";
}
}
}
</script>

 これはJavaScriptを使って文字の表示/非表示を切り替える為のコードです。
 //以降の文章はコメントアウトされますので、消しても消さなくてもOKです。
 参照に、以下に画像を置いておきます。
 赤い枠線の中が記述した場所です。



②記事に使用する
 下準備が終われば、即使用できます。
 まずは格納/展開の為のスイッチから解説していきます。

<a href="#" onClick="showHide('ここは識別用のIDを記述する');return false;">ここに文字を記述する</a>

 記事に使用する際は、コードの赤文字以外の部分をコピーしてください。
 『識別用のID』とは、文字の格納/展開を行うコードをそれぞれ識別する為に必要なものです。
 この識別を行わなければ、正常に動作しませんので注意してください。

 これは記事上には表示されないので、記述される際に見分けがつくように名前を振ると良いでしょう。
 ちなみに、周摩の場合『Lv1~』のIDは『lv1-』、『Lv1~3』のIDは『lv1-3』にしています。

 次に、格納される文章についての解説です。


<div id="ここに↑で割り当てた識別用IDを記述する" style="display: ※ここには『block』か『none』を記述する">ここに文字を記述する</div>

 記事に使用する際は、赤文字以外の部分をスイッチの真下にコピーしてください。
 識別用IDはスイッチで記述したものと同じものを記述してください。

 ※がついたところは結構重要です。
 『block』は、最初から展開するための値です。
 『none』は、最初は格納しておくための値です。
 使いどころとしては、古い記事の集まりは『none』で最初は格納しておき、新しい記事の集まりは『block』で最初から展開しておけば、コンパクトに収まります。

③完成!
 これで完成です。
 例として、二つほどコードも含めて記述します。

 例1:識別用IDは『sample01』、値は『block(最初から展開)』
 コード:
<a href="#" onClick="showHide('sample01');return false;">例1でござるよ</a>
<div id="sample01" style="display: block">最初から展開されています。</div>
 使用例:
例1でござるよ
最初から展開されています。


 例2:識別用IDは『sample02』、値は『none(最初は格納)』
 コード:
<a href="#" onClick="showHide('sample02');return false;">例2でありんす</a>
<div id="sample02" style="display: none">最初は格納されています。</div>
 使用例:
例2でありんす




●文字にルビ(読み仮名)をつける
 リプレイ本編でよく使っている↓こんな奴です。

 周摩しゅうま

 これは下準備も何もいりません。
 記事を作成する際に、ちょっとした手間があればできます。
 コードは以下のようになっています。

<ruby>ここに元の文字を記述<rt style='font-size:ここに文字のサイズを記述pt'>ここに読み仮名を記述</rub>

 記事に使用する際は以下略。
 元の文字とは、↑の例でいう『周摩』、読み仮名は『しゅうま』です。
 文字のサイズは『○.○』と記述します。例:7.0
 ※私がいくつかテストしたところ、7.0が一番見やすくて本文の邪魔にならない大きさでした。
 使いどころは……特にないです。
 難解な漢字を使いたい場合とか、二人称を分かりやすく記述する際に使ってください。

 例1
 コード:
<ruby>不死の王<rt style='7.0pt'>ノーライフキング</ruby>
 使用例:
不死の王ノーライフキング

 例2(応用)
 コード:
<ruby>宿<rt style='7.0pt'>やど</ruby>の<ruby>親父<rt style='7.0pt'>おやじ</ruby>
 使用例:
宿やど親父おやじ




……と、今回はこの辺にしておきます。
「説明が雑すぎて分からない」「ここ間違ってるんだけど」という意見はこの記事のコメント欄をお使いください。
また、他にも「これのやり方を知りたい」というのがあれば、気軽にコメントをどうぞ。
なるべく早く解説記事を作りますので。

ではでは、この辺で。

○以下、拍手レスです。


▼続きを読む▼

この記事へのコメント

初コメント失礼します。
いつも楽しくリプレイ読ませていただいております。
どの話も面白いし凄いです!
更新ペースも速くてとても羨ましく思います。

あと、ブログによくコメントを頂きありがとうございます。
先ほどのメッセージ、拝見してから
思わずどきどきしながら待っていました。
凄く分かりやすい解説、助かります。
これならこういうの苦手な私でもどうにかなるかも?
特に最近目次が長くなったの気になってて…(汗。
そのうちこっそり私の方でもやってみたいと思います。
本当にありがとうございました!
環菜さんいらっしゃいませェ!
元々、こちらで使っている目次自体が環菜さんの目次を参考にして作ったものなので、情報の共有はむしろ必然っ!
色々とお世話になっております……!

格納/展開のコードはテンプレートにも手を出す必要があるので、下手するとテンプレートがガタガタになる危険がありますが、失敗しても元のテンプレートを選択し直せば大丈夫なので、気楽に行きましょう!
存外、テンプレートやCSSをいじるのも楽しいものです。

環菜さんのリプレイは私も大いに楽しみにしていますので、お互い頑張っていきましょう!!
この記事へコメントする














(△お好みの文字サイズになるまでクリックしてください)

周摩

Author:周摩
しがないリプレイ書きのブログです。

Info.
当ブログはリンクフリーです。報告は不要ですが、あれば相互リンクさせていただきたいと思います。

周摩のシナリオはこちらへどうぞ。

QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。