簡単3ステップセットアップでもっと美しく！ _html/css_WEB-ITnose

昨日、私が多大な時間と労力を費やして書いたブログ ガーデンの最初のブログ「モジュラー ツール: RequireJS の常識を 1 つの記事でマスターする」を公開した後、あるブロガーから私のブログをカスタマイズする方法を尋ねられました。スタイル。今日は、私が数か月前にブログを整理するために使用したいくつかの方法を以下にまとめます。自分のブログをデザインする際に役立つことを願っています:)

最初のステップは、カスタマイズしたものをアップロードすることです。 css

ブラウザで直接 http ://files.cnblogs.com/files/lyzg/cnblogs.css を開き、ctrl + s を押して、ブログで使用されているカスタム CSS をダウンロードします。次に、ブログ管理ページで [ファイル] タブを見つけ、ダウンロードしたファイルをアップロードします:

アップロード後、上の図の赤いボックスに示すように、ファイルの URL を書き留めます。注: 上の画像の URL は、私のブログのカスタム CSS ファイルのアドレスです。後で設定するときに使用できますが、将来このファイルを削除した場合に備えて、使用しないことをお勧めします。この CSS は利用できなくなりました。

2 番目のステップは、ページのカスタマイズされた CSS とヘッダー HTML を設定することです

ブログ管理ページで、設定タブを見つけます:

このタブで、まずタイトルを変更し、次の段落を前に追加します。タイトル テキスト HTML:

<span class="portrait"></span>

ページの効果は次のとおりです:

この HTML は、次の手順でアバターを設定するために使用されます。

次に、ブログのスキン設定で、以下のスキンを選択します。最初のステップでアップロードした CSS ファイルはこのスキンで変更されているため、一部の CSS は依然としてスキンの元の CSS ファイルに依存する必要がある場合があります:

次ページのカスタム CSS セクションに次のコードを貼り付けます:

div.post div.entry {    font-family: Georgia, "Times New Roman", Times, sans-serif}div.post div.entry h1, div.post div.entry h2, div.post div.entry h3 {    margin-top: 24px;    margin-bottom: 12px;}div.post div.entry h1 {    padding: 5px;    color: white;    background-color: gray;}div.post h2 {    font-size: 22px;    line-height: 100%;}div.post div.entry pre.code {    font-family: Consolas border-style : dashed;    border-left: solid 5px #6ce26c}div#information {    background-color: #f8f8ee;    border: solid 1px #e8e7d0;    padding: 5px 10px 0px 10px;    min-height: 10px;    margin-top: -15px;    margin-bottom: 30px;    color: #666666}.cnblogs_code {    border-left: #58CE60 5px solid !important;}#site_nav_under, .c_ad_block, #under_post_news, #under_post_kb {    display: none !important;}

ページ効果は次のとおりです:

次にヘッダー HTML 領域に次のコードを貼り付けます:

<link href="http://files.cnblogs.com/files/lyzg/cnblogs.css" rel="stylesheet" /><style type="text/css">body {    background: #98C17B url('http://images2015.cnblogs.com/blog/459873/201509/459873-20150919175458742-1697781612.jpg') no-repeat top center;    background-size: 100% 100%;    background-attachment: fixed;}input[type="button"].btn_my_zzk {  width: 60px;}#home {  border-top-right-radius: 0;}#blogTitle .title {    position: relative;    background: none;}.portrait {    display: block;    position: absolute;    left: 0;    top: 0;    width: 100px;    height: 100px;    border-radius: 50px;    overflow: hidden;    background: white url('http://pic.cnblogs.com/avatar/459873/20150917085709.png') no-repeat left center;    background-size: contain;   transition: all 0.8s;   -moz-transition: all 0.8s; /* Firefox 4 */   -webkit-transition: all 0.8s; /* Safari 和 Chrome */   -o-transition: all 0.8s;}.headermaintitle:hover .portrait {   -moz-transform:scale(1.2,1.2);   -webkit-transform:scale(1.2,1.2);   -o-transform:scale(1.2,1.2);   transform:scale(1.2,1.2);}::-webkit-scrollbar {    width: 6px;    height: 6px;}::-webkit-scrollbar-thumb {    background-color: #55895B;    border-radius: 5px;}::-webkit-scrollbar-thumb:hover {    background-color: #55895B;}::selection {    color: white;    background: #018ee8;}#topics a:hover {    padding: 1px 3px 1px 3px;;    text-decoration: none;    color: #018ee8;    border-radius: none;    background-color: transparent;}.postTitle {    padding-left: 0;    background: none;}.subtitle {    padding-left: 0;}#blogTitle {   padding-bottom: 0;}#nav_q,#nav_ing,#nav_newpost {   display:none !important;}#sideBar {    border-top-width: 1px !important;}#navigator {    margin-bottom: 0;}#sideBarMain {    margin: 0;    padding-right: 20px;    padding-left: 5px;}.catListTitle {    border-top-color: #CECECE;    border-right-color: #CECECE;    border-bottom-color: #CECECE;}#home {   margin: 150px auto 50px auto;   //width: 80%;}#green_channel {    width: auto;}#tbCommentBody {  width: 100%;  display: block;  box-sizing: border-box;}</style>

ページ効果

注意点は、このコードには、自分のブログに関連するファイルに変更する必要がある場所が 3 か所あるということです。最初のテキストは次のとおりです:

http://files.cnblogs.com/files/lyzg/cnblogs.css

コード内でこのテキストを検索し、最初のステップでブログにアップロードした CSS に置き換える必要があります。

2位は、

http://images2015.cnblogs.com/blog/459873/201509/459873-20150919175458742-1697781612.jpg

この画像は、ブログの背景画像です。ウェブページの背景に大きな画像を表示するために、Baidu からダウンロードした、比較的解像度の高い画像です。ブログ管理ページでアップロードできるファイルには画像ファイルが含まれていないため、この画像は下書きブログに挿入されます:

このブログは公開されないため、外部から見ることはできません 中に画像ファイルを挿入してください。 , 次に画像ファイルのアドレスをメモしておくと、cssで参照できるようになります。このような大きな Web ページの背景画像も必要な場合は、この方法で好きな画像をアップロードし、2 番目に表示されるテキストを置き換えることができます。

3 位は:

http://pic.cnblogs.com/avatar/459873/20150917085709.png

このファイルはアバターの URL です。独自の画像の URL に置き換える必要があります。

3 番目のステップは、フッター HTML を設定することです

フッター HTML 部分を見つけて、次のコードを貼り付けます:

<div class="scrollBtn" id="scrollBtn">  <ul class="clearfix"><li class="sB-goTop" id="goTop" style="display: list-item;">      <a href="#top" title="回顶部"></a>    </li>  </ul></div><script language="javascript" type="text/javascript">  //生成目录索引列表  function GenerateContentList() {    var jquery_h3_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h4,只需要将这里的h4换掉即可    if (jquery_h3_list.length > 0) {      var content = '';      content += '<div id="navCategory" style="background-color: #BDBDBD;padding:10px 5px;">';      content += '<p style="font-size:18px;margin:0;line-height:30px;"><b>阅读目录</b></p>';      content += '<ul>';      for (var i = 0; i < jquery_h3_list.length; i++) {        var go_to_top = '<div style="text-align: right;    text-align: right;height: 0;padding: 0;overflow: hidden;visibility: hidden;"><a name="_label' + i + '"></a></div>';        $(jquery_h3_list[i]).before(go_to_top);        var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';        content += li_content;      }      content += '</ul>';      content += '</div>';      if ($('#cnblogs_post_body').length != 0) {        $($('#cnblogs_post_body')[0]).prepend(content);      }    }  }  GenerateContentList();</script><!-- JiaThis Button BEGIN --><script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?move=0" charset="utf-8"></script><!-- JiaThis Button END -->

この JS には、先頭に戻る機能、コンポーネントを共有する機能、およびコンテンツの目次を生成する機能が含まれています。ブログ投稿ページ。注意する必要があるのは、目次を生成する機能です。その原理は、ブログ投稿内の h2 要素を検索し、それを各目次項目として使用することです。そのため、ブログを編集するときは、h2 を使用する必要があります。大きなタイトルの h2 と小さなタイトルの h3 を混合することはできません。ブログを編集するときは、タイトル 2 とタイトル 3 が h2 と h3 として表示されます。上記は私がブログをカスタマイズするときに使用したすべての方法です。詳細はあまり説明されていませんが、これらの方法を使用した後、ブログ ページのソース コードを見ると原理が理解できると思います。もちろん、ご質問がございましたら、コメント欄にてお問い合わせください。この記事が役に立ったと思われる場合は、「いいね！」を押してください。つまり、今朝早く起きて時間と労力を費やしたことに感謝します、ありがとう:)