当ブログで導入した、「サブタイトル欄の文章を、アクセス(リロード)毎にランダムに表示」のスクリプトを公開。
なお、このカスタマイズは、ブログ人「はじめの一歩コース」にて開設している当ブログで動作確認を行っています。
誠に勝手ながら、この方法を使用した事による不都合及び、この方法を使用できなかった事による不都合について、当方はその一切の責を負いません。
ご自身の判断と責任においてお試しください。
では、方法。
まず、JavaScriptの実行部分と、表示させたい文章データを記述したファイル(以下「実行ファイル」という)をエディタ等で作成し、文字コードはUTF-8、改行コードはLF、のプレーンテキストで保存する(下記例 rnd_mes.js)。
このrnd_mes.jsを、自分のブログから参照できるファイルスペースにアップロードする。ブログ人のファイル領域であれば、自分のブログ直下等(当ブログ例 Home/necopunch/)、又は、容量節約のために画像等を外部のサーバにアップロードしている箇所等、適時にどうぞ。
//UTF-8
//rnd_mes.js
//サブタイトルのランダム表示 ブログ人
myLine = 3; //データ数
myMes = new Array( //以下にデータ
“坊やだからさ…”,
“見せてもらおうか！！”,
“私は運がいい”
);
myRnd = Math.floor(Math.random()*myLine); // 0〜(myLine-1)の乱数を求める
document.write(myMes[myRnd]); //文章表示
データ部分の最後(例では”私は運がいい”)の行末には ,(カンマ)を入れないこと。
また、データは、全角文字で記述した方が安全。
行数(データ数)を変えたら、「myLine = 3;」の数字を、その行数に合わせて変更する。
各データ全角で100文字以内に納める。何件まで大丈夫だか試していないが、無茶しないように(笑)。
次に、実行ファイルを呼び出すタグを、プログのサブタイトル欄に記述する。
管理画面の「ブログ＞設定＞ブログの基本情報」画面の「ブログのサブタイトル（キャッチフレーズ）」欄に、下記のタグを記述する。
下記をコピー&ペーストされる場合は、各行頭の＜、行末の＞を半角にすること。
また、別途、CSSカスタマイズ等をしている場合は、それより後に記述すること。
＜script type=”text/javascript” src=”http://between.blog.ocn.ne.jp/necopunch/rnd_mes.js”＞
＜/script＞
”http://between.blog.ocn.ne.jp/necopunch/rnd_mes.js” の部分は、当然、当ブログの場合なので、ここは自分のアップロードした実行ファイル名に差し替える。また”http:”からの「フルパス」で記述すること。
この技、サイドバーの「私リスト」に簡易占い(おみくじ程度)として置いたり、ちょっとした応用が効くと思う。
追記。
jsファイルの文字コードは使用しているブログに合わせる。
改行コードは、基本的にはLF。それでうまく表示されなければ、CR+LFで。
コメント
丁寧な解説ありがたい！
あとは「何を」並べるかですね。
近日中にやってみますので！！
リクエストに答えてくれてありがとう！海斗兄さん！
マンガーZさん江
つたない解説で申し訳ありません。
これでなんとかやってみてください。
▼が表示されなくなると思います。今日は 7/14 なので
iTunes アフィリエイトリンクをサイドバーに表示されないよね
酢鶏へ
不具合報告ありがとう。当面は▼は使わないでください。
もしかして、右上のにゃあ殿の画像もランダム？
僕の記憶ではたしかにゃあ殿が手をくわえてる写真だったと記憶しておりますが今見たらびといん氏のサイン入りの絵に変わっておりました。
そっかぁ… 画像も使えるのなら… 考えてみようかな？
問題はファイルサイズの増加量ですね。
ろぷさん江
タイトル画像もランダム表示です。確率4分の1で、手をくわえている写真も出現しますよ。
でも、サブタイトルのランダム表示とは方法が違い、配列コンテナを使ってます。
近日中に、タイトル画像のランダム表示スクリプトも記事にしますね。
ファイルサイズの増加量って、画像ファイルですか？
俺は、infoseekの無料アカウントについてくるWebスペース(50MB)が放置したままなんで、ここに、ねこぱんち日記用の画像関係は置いてあります。
ブログ人サーバにあるのは、時々モブログした時の写メールだけです。それも帰宅したらなるべくinfoseekに移動してます。
あぁ、ちょっと言葉足らずでしたね。
ごめんなさい。
ファイルサイズってのは「1ページ表示あたりのファイルサイズ」って事を言いたかったんです。
もしも四枚の画像が一度読み込まれて、それから選ばれてるんだったら、他の三枚は読まれただけでムダでしょ？
それって回線の遅い人にはツライんじゃないかな？ とフと思ったもんで。
あ、今気付いたけど、もしもそうだとしても、びといんさんみたく、白黒画像を使えばサイズは抑えられますね♪
どちらにしろ続報に期待いたします。大佐。
(￣^￣)ゞ 敬礼
変化するサブタイトル導入！
びといんさんのねこぱんち日記内の「サブタイトルのランダム表示」に感謝してTB！
ウチのblogにも装備させて貰いました。
実際、面白いです。自分で何度かリロードしてしまうほどに。
ちなみにリストに入れた文字は全てVガンダムの劇中台詞をチョイスしてます。
台詞の殆どが狂った言い回しなのがVガンならでわ。
NIBROUさん江
ご利用ありがとうございます。
Vガンセリフですか！NIBROUさんらしいっす。
うちも、もっとセリフ増やさないと。
サブタイに[シャア・アズナブル] がはいりましたね。あと新作も。
何度かリロードしたのですが、[シャア・アズナブル]はロック状態ですか？(笑)
マンガーZさん江
昨日は最初 、名セリフ部分をランダムにして、その後に[シャア・アズナブル]は、ロック状態というか、従来どおりの方法で固定表示にしたんです。
今は全データ行に”＜br＞[シャア・アズナブル]”を入れてます。今後ギレン総帥のセリフも追加したいので。改行させる実験を兼ねて。
で、実験の結果、ご覧のように、データ内のbrタグ、正しく認識されてますね。
やったことをそのまま書くのでどこがいけないか教えてもらってもよいですか？
・上っかわのをそのままメモ帳にコピペ
・よくわからんかったのでタイトルを「rnd_mes.js」にして保存したらアイコンが変化
・ファイル保存から参照にてアップロード
・下側のを自分のアドレスに変更して、サブタイトルの忍者ツールのスクリプトのしたに貼り付け
ダメでした・・・
あるてぃさん江
上のスクリプト本体は、文字コードをUTF-8(またはEUC-JP)、改行コードをCRのみにしてますか？
これってつまりUNIXでは標準的な形式なんです。同じテキストファイルではあるんですけど、Windowsのメモ帳だと、それができないと思います。
フリーソフトの簡単なのでもいいので、文字コードと改行コードが設定できるエディタを用いてください。
うわ！
ようやく成功しました！
テキストエディタをDLしたのもよかったんですが、どうも私の場合、下側の管理ページに入力するタグ？が間違ってたようですわ。
難しいですわやっぱこういうことは。
あるてぃさん江
成功しましたか。
確かに簡単ではないですけども、基本的には真似して張りつければいいだけですし、興味を持っていくつかパクってみるのが覚える近道ですよ。
なんだか皆さんの見てると面白そうだったので自分も導入させてもらいました。
内容はどうしようか試行錯誤中ですが。。
秘書さん江
ご利用ありがとうございます。
でも、このJavaScript、掲載当時のままで全然メンテしてないのですが、本当に大丈夫なのかな(笑)。
まぁ、うちでもそのままずっと使い続けているから、多分大丈夫なんでしょうね(笑)。