Website編集小技の覚書き　その2【No.6~No.10】

ﾈｯﾄ上の真似事ですが

【まとめ目次　その2】

【No. 6】ﾌﾞﾗｳｻﾞの翻訳ﾎﾞﾀﾝ
【No. 7】ﾃｷｽﾄｴﾘｱ表示
【No. 8】背景画像をﾌﾞﾗｳｻﾞいっぱいに表示
【No. 9】投稿記事に新着ﾏｰｸ"NEW!"を表示
【No.10】画像を別窓で大きく表示－FANCY BOX使用

【No.6】ﾌﾞﾗｳｻﾞの翻訳ﾎﾞﾀﾝ　

　Windows10にｱｯﾌﾟｸﾞﾚｰﾄﾞしたときに標準ﾌﾞﾗｳｻﾞを使い慣れた「Internet Explorer」から「Microsoft Edge」に変えましたが、海外ｻｲﾄを翻訳するときは、翻訳ｻｲﾄに文面をいちいちｺﾋﾟｰしなければならず面倒でした。

　さらにWebsiteの編集にも使いづらかったので、全く違う「Google Chrome」に替えました。

　「Google Chrome」では、QRZ.comなどの海外ﾍﾟｰｼﾞを表示すると、URL入力欄の右端に現れる「翻訳ｱｲｺﾝ」でﾍﾟｰｼﾞ全体が翻訳されます。
　とっても便利です。

＜＜ﾍﾟｰｼﾞ上へ戻る＞＞

【No.7】ﾃｷｽﾄｴﾘｱ表示　

【記事にhtml追加】

<textarea wrap="off" cols="70" rows="5" style="border:solid 1px #000000; color:#000000; background-color:#f0f8ff; font-size: 10pt;" readonly>
テキスト記述
</textarea>

　これまでｿｰｽｺｰﾄﾞの紹介は画像を貼り付けていただけなので、文字としてのｺﾋﾟｰはできませんでした。
　見よう見まねで"textarea"を使ってみると意外と便利です。

　基本的な設定内容は次のとおりです。
　<textarea wrap="off" cols="横幅" rows="縦幅" style="border:枠の種類 1px 枠の色; color:文字色; background-color:背景色; font-size: 文字の大きさ;" readonly>
　　　readonlyで、読み取り専用
　　　wrap="off"で、テキストの折り返し部分を改行にしない

＜＜ﾍﾟｰｼﾞ上へ戻る＞＞

【No.8】背景画像をﾌﾞﾗｳｻﾞいっぱいに表示　

【CSSに追加記述】

/* ﾌﾞﾗｳｻﾞ背景画像 */
body {
    background: url(bgimg1.gif) center / cover fixed;
}

/* 記事内背景画像 */
#content-inner {
    background: url(bgimg2.gif) center fixed;
}

　背景画像をﾌﾞﾗｳｻﾞいっぱいに表示するｼﾝﾌﾟﾙな記述が分かったので追記しておきます。

　記事内の画像は「自称TX-80S」のｼｬｰｼｰ裏配線。
　実物はありませんが写真が残っていました。
　よくもまあこんないい加減な自作機で3.5MHzに出ていたものだと、今思えば恐ろしくなります。HiHi
　
【QRZ.com CSSに追加記述】

#t_bio.biodiv {
    background: url(/hampages/ja2ptq/bgimg.gif) center / cover fixed;
}

　ついでにQRZ.com　JA2PTQpageにも背景を付けてみました。

　本ﾍﾟｰｼﾞは、まとめ記事のため縦長ﾚｲｱｳﾄになってしまったので、ついでに＜＜ﾍﾟｰｼﾞ上へ戻る＞＞も付けました。

＜＜ﾍﾟｰｼﾞ上へ戻る＞＞

【No.9】投稿記事に新着ﾏｰｸ"NEW!"を表示　

【ﾃﾝﾌﾟﾚｰﾄ「ﾌﾞﾛｸﾞ記事の概要」に追加記述】

 <span class="new"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></span>

　ﾌﾞﾛｸﾞ記事ﾘｽﾄの"年月日"表示行に<span>行を追加記述します。
　
【CSSに追加記述】

span.new {
    display: none;
    color: red;
}

　CSS内に<span>行の非表示と、"NEW!"表示の色を指定します。

【body内にscriptを追加記述】

<script>
// 経過時間(何時間以内の記事に付与するか)
var pass = 744;

// 付与する文字
var content = "NEW!";

var currentDate = new Date(); 
var spans = document.getElementsByTagName("span");
for (i = 0; i <spans.length; i++) {
    if (spans[i].getAttribute("class") == "new" ||
        spans[i].getAttribute("className") == "new") {
        if (spans[i].childNodes[0]) {
            time = spans[i].childNodes[0].nodeValue.split(":");
            var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
            var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
            now = Math.ceil(now);
            if(-now <= pass){
                spans[i].innerHTML = content;
                spans[i].style.display = "inline";
            }
        }
    }
}
</script>

　2行目と5行目で何時間以内の投稿に何を付与するかを設定しています。
　本ﾌﾞﾛｸﾞの投稿はめったにないので、かなり長めの新着としています。Hi

＜＜ﾍﾟｰｼﾞ上へ戻る＞＞

【No.10】画像を別窓で大きく表示－FANCY BOX使用　

【jQueryﾌﾟﾗｸﾞｲﾝ fancyBoxをﾀﾞｳﾝﾛｰﾄﾞ】

　fancyBoxのﾍﾟｰｼﾞ「http://fancyapps.com/fancybox/」の「license & download」をｸﾘｯｸ。

「Download v2.1.x」をｸﾘｯｸしてﾀﾞｳﾝﾛｰﾄﾞ。

【ﾌｧｲﾙ群の配置とﾍｯﾀﾞｰへの記述】

<!-- ｻｰﾊﾞｰにｱｯﾌﾟﾛｰﾄﾞ -->
fancybox.zipを解凍して「fancybox」ﾌｫﾙﾀﾞをｻｰﾊﾞｰにｱｯﾌﾟﾛｰﾄﾞ
<!-- ﾍｯﾀﾞｰに記述 -->
<head>
<title>ウィンドウサイズに合わせたサイズで表示　－　⑥FANCY BOX（プラグインツール）使用</title> 
<!-- jQuery -->
<script type="text/javascript" src="/fancybox/jquery-1.9.0.min.js"></script>
<!-- fancyBox メインとCSSファイル群 -->
<script type="text/javascript" src="/fancybox/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox.css" media="screen" />
<script type="text/javascript">
  $(document).ready(function() {
      // 基本構成
      $('.fancybox').fancybox();
  });
</script>
</head>

【記事内htmlの記述例】

<body>
<h1>FANCY BOX（ﾌﾟﾗｸﾞｲﾝﾂｰﾙ）使用</h1>
<div class="gallery"><a class="fancybox" href="/img/large-1.jpg"><img src="/img/small-1.jpg"></a></div>
<div class="gallery"><a class="fancybox" href="/img/large-2.jpg"><img src="/img/small-2.jpg"></a></div>
</body>

Website編集小技の覚書き　その2【No.6~No.10】

FancyBox使用例

カテゴリ:

コメント(2)

コメントする

カテゴリ

最近のコメント

Website編集小技の覚書き その2【No.6~No.10】

FancyBox使用例

カテゴリ:

コメント(2)

コメントする

カテゴリ

最近のコメント

Website編集小技の覚書き　その2【No.6~No.10】