個人ブログスキンの共有 [モバイル対応]_html/css_WEB-ITnose

ブログを始めて1年が経ちましたが、ブログを始める前に最初にしたことは、この目的で「ブログパークページの設定」というブログ記事を書いたことを思い出します。もちろん、今の私を見てみると、当時の私はとても良い人間だったかもしれませんが、おそらく 1 年後の今でも同じように思うでしょう (実際、これは私が進歩したことを証明するものなので、かなり良いことです)。スキン スタイルをカスタマイズする理由もちろん、ブログ記事を書く目的は、人々に読んでもらいたいと思ってもらい、快適に読んでもらうことです。多くの場合、肌のスタイルが良くないことが、「なぜブログにこだわる必要があるのか​​」というブログ記事を書かない言い訳になります。

実際、私はほとんどの場合とても怠け者です。よほど我慢できなくなった場合を除き、元のスタイルを変えることはありません。このブログ記事を書きたいという気持ちはずっとあったのですが、怠惰のせいで今まで先延ばしにしていました。今は寒い週末で、布団の中で横になっていても本当に起きたくないので、携帯電話でブログパークを閲覧しています。残念ながら、読み取りエクスペリエンスは非常に貧弱で (クライアントをインストールしませんでした)、一部のものは読むことが不可能です。とても耐えられないので今日この記事を書くことにしました、時間があればブログをモバイル対応にしてください。実際、多くの庭師がその方法を知らないわけではなく、彼らが怠け者であるために互換性がないだけだと思います (読者にとっては数分の問題です)。この記事の主な目的は、モバイル デバイスと互換性のあるカスタム スタイルを使用することを皆さんに奨励することです。ちなみに、他のカスタマイズもいくつか紹介します。

1.モバイル端末対応(img自動スクロールバー)

モバイル端末対応、実はとてもシンプルでやることはそれほど多くありません。 「独自のブログを段階的に開発する .NET 版 最終章 (6. レスポンシブ レイアウトとカスタム スタイル)」の記事ですでに分析しましたが、今日はもう一度分析してみましょう。

• head にメタを追加します

ブートストラップを使用したことのある学生は、head タグ 1 に < meta name ="viewport" content ="width=device-width,Initial-scale= を追加する必要があることを知っています。 " > (パラメータ 1: 画面の幅をデバイスの幅に設定します。パラメータ 2: スケーリング値は 1 です。これは、ページが異なる画面のピクセル密度に応じて拡大縮小されないようにするためです)、ただし、当ブログ ガーデンでは、デフォルトで追加します このメタにアクセスします。したがって、JavaScript を介して動的に追加することしかできません。

$("head").prepend("<meta name='viewport' content='width=device-width, initial-scale=1'>");

• CSS でモバイル メディアを追加します

/*在屏幕宽度小于992px的时候（假设是移动端）*/@media (max-width: 992px) {     /*           这里定义的样式只有在屏幕下于992px的时候才会起作用           可以在这里定义，在移动端应该要设置的样式。     */}

• 左右にスクロールするスタイルで大きな画像または固定幅のコンテナを設定します

モバイル ディスプレイの最大の問題は、画面が小さすぎることです。一部のコンテンツが完全に表示されない場合はそれを表示します。左右にスクロールさせることができます。

* {    overflow: auto;/*溢出内容自动滚动*/    word-wrap: hyphenate;}

直接的な暴力的な決定。オーバーフローしている限り、どの要素も自動的にスクロールします。

モバイル互換性を実現するには、2 つの簡単なステップが必要です。簡単です。ですから、同志の皆さん、ぜひモバイルデバイスと互換性を持ってください。始めましょう:

1. まず、バックエンド ページ http://i.cnblogs.com/Configure.aspx

2.コードの javascript 部分

$("head").prepend(" < ;meta name='viewport' content='width=device-width,initial-scale=1'>");

3.css コードの一部

/*移动端*/@media (max-width: 992px) {    .footer {        margin-right: 5px;    }    .divyoulian, #footer {        margin-right: 5px;        padding-bottom: 5px;    }    #mymainContent {        margin: 8px;    }    #mainContent {        margin-right: 5px;        margin-left: 5px;    }    .forFlow {        margin: 0px;    }    /*#sideBar, #header {        display: none;    }*/    #sideBar, #div_digg {        position: initial;    }    * {        overflow: auto;        word-wrap: hyphenate;    }    #sideBar li {        text-indent: initial;    }    /*#cnblogs_post_body p, #cnblogs_post_body li {        font-size: 33px;    }*/    .myadd_left {        display: none;    }    .myadd_right {        float: none;        width: 100%;    }        .myadd_right div {            line-height: 50px;        }    .myadd {        margin: 0px;    }    /*.myadd_right div a {                font-size: 10px;            }*/}View Code

Rendering:

2. 歴史的なコメントレコード モバイル エフェクト

レンダリング:

1. http://i.cnblogs.com/Preferences.aspx

コメントの数を表示するには、できるだけ多くのポイントを選択してください。

2. 最新のコメントの領域サイズを修正し、そのオーバーフロー内容を非表示にします。

#RecentCommentsBlock {    max-height: 400px;    overflow: hidden;}

3. JavaScript を使用してスクロール バーの位置を動的に変更します。

//移动一个单位 评论function nextRecTop() {    var rec = $("#RecentCommentsBlock");    if (rec.length) {        var top = rec.scrollTop();        top++;        rec.scrollTop(top);        if (top != rec.scrollTop())            rec.scrollTop(0);    }}//移动评论function MobileComment() {    var RecCommentTime = 30;//间隔时间    var RecintervalId = setInterval(function () {        nextRecTop();    }, RecCommentTime);    //鼠标移动时    $("#RecentCommentsBlock").hover(function () {//移进        clearInterval(RecintervalId);    }, function () {//移出        RecintervalId = setInterval(function () {            nextRecTop();        }, RecCommentTime);    });}

3. コメントエリア

1. アバターの表示

実際、よく見るとデフォルトで画像が読み込まれていることがわかりますが、実際はそうではありません。表示されます。 dudu のブログ投稿のコメントを例に挙げます。

次に、JavaScript を使用して動的に組み立てることができます。

2. コメントエリアの「暖かいリマインダー」

実際には、これは単なる画像です。テキストエリアにフォーカスがあると、背景画像が非表示になります。

1. クラスのスタイル (背景画像) を設定する

.tbCommentBody_bg {    background: url('http://images2015.cnblogs.com/blog/208266/201510/208266-20151018182003319-279061587.png') no-repeat;}

2. JavaScript でクラスを追加する

function focusoutCommentBody_bg() {    $("#tbCommentBody").focusout(function () { addtbCommentBody_bg(); });}//添加评论区 背景function addtbCommentBody_bg() {    var tbcomment = $("#tbCommentBody");    if (!tbcomment.hasClass("tbCommentBody_bg")) {        tbcomment.addClass("tbCommentBody_bg");        tbcomment.focus(function () {            removetbCommentBody_bg();        });    }}//移除评论区 背景function removetbCommentBody_bg() {    !$(".tbCommentBody_bg").removeClass("tbCommentBody_bg");    $("#tbCommentBody").unbind("focus");}

4. タグ検索

時間が経つにつれて、ブログ記事を書きすぎて見つけにくくなった場合は、タグを検索します。

1. ページ http://www.cnblogs.com/zhaopei/tag のすべてのタグを読み取ると、隠しドメインがあります。

//读取 标签function gettag() {    $.ajax({        type: "get",        dataType: 'html',        url: "http://www.cnblogs.com/zhaopei/tag",        data: {},        beforeSend: function (XMLHttpRequest) {//当一个Ajax请求开始时触发。        },        complete: function (jqXHR, status, responseText) {//请求完成时触发这个事件        },        success: function (data) {            //设置宽度一致            $(".select_list_tag").css("width", $(".text_select_tag").css("width"));            $(".hidden_tag").val("");            var a = $(data).find("#MyTag1_dtTagList td a");            var span = $(data).find("#MyTag1_dtTagList td span.small");            for (var i = 0; i < a.length; i++) {                               $(".hidden_tag").append(a[i].innerHTML + "&");            }            //yuntagF();            get_list_tag();        },        error: function (msg) {        }    });}

2. Html5に自動補完送信制御を追加

使用方法(例):

<input list="pasta"><datalist id="pasta"><option>Bavette</option><option>Cannelloni</option>.......</datalist>

Bingサイト検索: http://cn.bing.com/search?q=js+site :cnblogsも利用できます。 com/zhaopei 最後の zhaopei を自分のブログ ID に変更するだけです。

ここでは一つ一つ分析しませんが、必要な効果を得るためにさらに試していけば、自然に徐々に得られるものもあります。例: ページ上部の 3 つの推奨記事、読み取りディレクトリの自動読み込み、ポップアップ ボックス、コード実行領域ボックス。

私のスタイルコードのダウンロードはここにあります。

注:

1. 以下のスキンに基づいて修正しました。私のスタイルを使用したい場合は、最初にこのデフォルトのスキンを選択してください。

2. 新しい jqeruy を参照しないでください。参照しないと、ブログに予期せぬ問題が発生します。 (ブログパークにJqueryベースのプラグインがあるため)。

(もちろん、コメント領域でカスタム スタイルを共有することもできます。)