サンプルコード

jQueryの読み込み

jquery-3.2.1.min.jsを/に配置し、ホームページに以下を追加。

<script type="text/javascript" src="/jquery-3.2.1.min.js"></script>

/の意味

注意：/とはシステムのルートディレクトリではありません。

ホームページアドレスの最上部という意味で、多くの場合作業ディレクトリの一番上です。

index.htmlと一緒にjquery-x.x.x.min.jsを配置して、サーバーの/にFTPでアップロードしてください。

分からない方は、相対アドレスと絶対アドレスについて調べていただければ幸いです。

むしろ、/に配置しなくても、相対アドレスで参照することもできます。その場合/jquery-3.2.1.min.jsの左端の/は要りません。

jQueryサンプル

僕のホームページより、jQueryのサンプル。

$(document).ready(function(){
    $(".sidebar").before('<div class="navi"><button class="sidebar_button">サイドバーを開閉</button></div>');
    $(".sidebar_profile").before('<div class="navi"><button class="sidebar_profile_button">プロフィールを開閉</button></div>');
    $("button.sidebar_button").click(function () {
        $(".sidebar").slideToggle('fast');
    });
    $("button.sidebar_profile_button").click(function () {
        $(".sidebar_profile").slideToggle('fast');
    });

    var sizevar = Cookies.get('cookieFontSize');
    if (sizevar== 'xbig') {
        $("body").css("fontSize","200%"); 
    }
    else if (sizevar== 'big') {
        $("body").css("fontSize","150%"); 
    }
    else if (sizevar== 'normal') {
        $("body").css("fontSize","100%"); 
    }
    else if (sizevar== 'small') {
        $("body").css("fontSize","14px"); 
    }
    else if (sizevar== 'xsmall') {
        $("body").css("fontSize","13px"); 
    }

    $("button.xbig").click(function(){
        $("body").css("fontSize","200%"); 
        Cookies.set('cookieFontSize', 'xbig', { expires: 7 });
    });
    $("button.big").click(function(){
        $("body").css("fontSize","150%"); 
        Cookies.set('cookieFontSize', 'big', { expires: 7 });
    });
    $("button.normal").click(function(){
        $("body").css("fontSize","100%"); 
        Cookies.set('cookieFontSize', 'normal', { expires: 7 });
    });
    $("button.small").click(function(){
        $("body").css("fontSize","14px"); 
        Cookies.set('cookieFontSize', 'small', { expires: 7 });
    });
    $("button.xsmall").click(function(){
        $("body").css("fontSize","13px"); 
        Cookies.set('cookieFontSize', 'xsmall', { expires: 7 });
    });

    var familyvar = Cookies.get('cookieFontFamily');
    if (familyvar == 'mincho') {
        $("body").addClass('font_mincho');
        $("body").removeClass('font_gothic');
    }
    else if (familyvar== 'gothic') {
        $("body").addClass('font_gothic');
        $("body").removeClass('font_mincho');
    }

    $("button.bt_mincho").click(function(){
        $("body").addClass('font_mincho');
        $("body").removeClass('font_gothic');
        Cookies.set('cookieFontFamily', 'mincho', { expires: 7 });
    });
    $("button.bt_gothic").click(function(){
        $("body").addClass('font_gothic');
        $("body").removeClass('font_mincho');
        Cookies.set('cookieFontFamily', 'gothic', { expires: 7 });
    });
    $("button.bt_clean").click(function(){
        $("body").css("fontSize","14px"); 
        $("body").removeClass('font_mincho');
        $("body").removeClass('font_gothic');
        Cookies.remove('cookieFontSize');
        Cookies.remove('cookieFontFamily');
    });

});

HTML

上のコードをjsファイルにして読み込んだ上で、HTMLに以下のように記述する。（これもdocument.writeなどを使ってやると良い。）

<div class="sidebar">
<iframe src="../../menu/new_diary2_2017.06.html" class="sideiframe"></iframe>
</div>

<div class="page_after_profile">
<p>文字サイズ: 
<button class="xbig"">極大</button> - 
<button class="big">大</button> - 
<button class="normal">中</button> - 
<button class="small">小(標準)</button> - 
<button class="xsmall">極小</button></p>
<p>字体: 
<button class="bt_mincho">明朝体</button> - 
<button class="bt_gothic">ゴシック</button> - 
<button class="bt_clean">Cookieを削除</button></p>
</div>

CSS

また、CSSに以下のように記述する。（Mac向けも指定する時はヒラギノを追加してください。）

.font_mincho{
    font-family: "MS P明朝", "MS P Mincho", serif;
}
.font_gothic{
    font-family: "Lucida Grande", "Lucida Sans Unicode", "メイリオ", Meiryo, "MS Pゴシック", "MS P Gothic", Helvetica, Verdana, sans-serif;
}

.sidebar,.sidebar_profile,.image {
    float: right;
    background-color: rgba(221,255,221,0.6);
    border: solid 2px #8cc;
    margin: 0px 0px 30px 30px;
    padding: 6px 3px 3px 3px;
    clear: right;
}

その他、divなどで指定したもろもろのクラスのCSSを自由に記述してください。

注意点

注意点：jQueryなので、動かす前にjqueryを読み込む必要がある。

また、Cookieを操作するためにはjs-cookieを読み込む必要がある。

配置して実行されるように記述するだけで簡単に読み込めるので、試してみても良いだろう。

<script src="/js.cookie.js"></script>