その、青い心たち

僕の話を聞いてくれ 笑い飛ばしてもいいから

はてブロの小技紹介!ランダム表示、リダイレクト、シンタックスハイライト

f:id:goodbye-1000days:20210715220747j:plain

最近ブログを見てくれている人が
増えてきました。

お蔭様で
日本ブログ村、ギター教室部門の
PVランキングで1位になっておりました。
本当にありがとうございます。

感謝の気持ちを込め、
はてなブログで使える
小技を紹介したいとおもいます。

興味ある小技がありましたら、
どうぞ試してみてくださいませ。

分からないところは、
質問して頂ければ
お答えします。

返信は多少遅いかも知れませんが
同じ事を100回聞いてもらっても平気です。

101回目はどうなるか知りませんが。

何でもランダム表示するjs

1つ目はテキストや画像や動画などを
ランダムで表示するためのjsです。

外部js不要なので気軽に使えると思います。

↓の「表示したい内容n」のところに
リンクならaタグ、画像ならimgタグ、
動画ならiframeタグなどを
タグごと張り付ければ、OKです。

<div id="hyoujishitaibasyonikaku"></div>
  
<script type="text/javascript">
var lists=[
'表示したい内容1',
'表示したい内容2',
'表示したい内容3'
];
  
var lNo = Math.floor(Math.random() * lists.length);
document.getElementById('hyoujishitaibasyonikaku').innerHTML = lists[lNo];
</script>

サンプル:
↓に「表示したい内容n」と太字で表示されていると思います。
ページを何度かリロードしてみて下さい。
ランダムで、nの数値が1から5まで、変わるのが確認できると思います。



リダイレクトさせるjs

次は、はてなブログ内で
引越した時に役立つjsです。

はてなブログは記事をエクスポートできるので、
旧ブログから記事をエクスポートして、
新ブログで記事をインポート。

そして、旧ブログの
ダッシュボード>デザイン設定>
カスタマイズ>ヘッダ>タイトル下
に以下を記述してみて下さい。

<script type="text/javascript"><!--
 var domain = "転送先のブログトップURL";
 var path = location.pathname;
 var url = domain + path;
 location.href=url;
// --></script>

旧ブログのURLにアクセスがあると、
自動で、新ブログの同じ記事にリダイレクトできます。

サンプル
以下のリンクは私の旧ブログ記事のURLです。
リンクを押下すると一旦旧ブログにアクセスしますが、
自動で新ブログの同記事へリダイレクトします。
https://the-blue-hearts.hatenablog.com/entry/2021/06/16/153632

シンタックスハイライト

最後にこの記事でコードを記載している箇所が、
ハイライトされていて見やすくなっていると思います。

シンタックスハイライトと言いますが、 これの書き方を記載します。

やり方は簡単で
まずは、ブログの設定メニューで
Markdown記法を選びます。

そして、バッククォートを3つ書いた後に
言語名を記載、
改行してコードを記載、
改行してバッククォートを3つ書くだけです。

イメージ:
```言語名
ソースコード
```

です。
(↑の例はバッククォートを全角にしていますが  実際は半角を使ってください。)

シンタックスハイライトの詳細は
以下ページを参考にして下さい。
英語ですが、分かりやすいと思います。

https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks