CnBlogs カスタムブログスタイルの共有

CnBlogs カスタムブログスタイルの共有

半夜かけてようやくブログのスタイルを大体完成させることができました。

ブログ全体が青を基調としていて、とても情熱的で気に入っています。

さらにイライラするのは、rightmenu と main の両方が position:absolute レイアウトになっていることです。フッターを追加するのは本当に嫌です。今はposition:fixedですが、タグやエッセイの数が増えると、必ず一部のコンテンツが隠れてしまいます。 js 権限がないので、今のところはそのままにしておきます。

1. フッターコード: MyFooter 部分はインライン CSS スタイルを直接挿入します。変更するのは面倒なので、しばらくしたらフッターは必ず削除します。


コードをコピー
コードは次のとおりです。

<div id="myFooter" style="position: fixed; bottom: 0px; width: 100%; height: 85px; background: none repeat scroll 0px 0px rgb(0, 120, 216);">
<p id="myFootText">知識は運命を変え、プログラマーは命を救う</p>
<p id="myFootCopy">オーマイガール@2014</p>
</div>

2. 同時に、記事の下部にある迷惑なプロモーションリンクや広告バナーが削除されます。見た目がずっときれいになりました。CSS コードは次のとおりです。


コードをコピー
コードは次のとおりです。

/* 宣伝する */
#site_nav_under、#ad_under_post_holder、#under_post_news、#google_ad_c2、#under_post_kb{
幅:0;
高さ:0;
表示:なし;
オーバーフロー:非表示;
}

3. 記事の下部にあるコメント ボタンの位置とサイズがかなり不自然です。左寄りすぎていて、クリック可能な領域が小さすぎます。以下は一緒に投稿されています:


コードをコピー
コードは次のとおりです。

#最近のコメントブロック li {
マージン: 0;
幅: 275px;
}
#最近のコメントブロック li.recent_comment_body {
境界線の半径: 0;
マージン: 0;
}
#最近のコメントブロック li.recent_comment_title {
境界線の半径: 5px 5px 0 0;
マージン: 3px 0 0;
}
#最近のコメントブロック li.recent_comment_author {
境界線の半径: 0 0 5px 5px;
マージン: 0;
}
.desc_img{
幅:75px;
最大幅:75px;
}

#ブログカレンダー{
背景:白;
}

/* コメント */
div.コメントフォーム{
下マージン:100px;
}
#コメントフォームタイトル{
背景: url("<a href="http://static.cnblogs.com/images/icon_addcomment.gif">http://static.cnblogs.com/images/icon_addcomment.gif</a>") 繰り返しなし スクロール 0 2px;
色: #0078d8;
フォントサイズ:14px;
}
div.commentform p{
下マージン:10px;
}
.comment_btn {
高さ: 35px;
幅: 90ピクセル;
背景: なし 繰り返しスクロール 0 0 #0078d8;
境界: 0 なし;
境界線の半径: 5px;
色: 白;
カーソル:ポインタ;
}
.comment_btn:hover{
背景:#317ef3;
}
#コメントボックスオプション、#コメントボックスオプション + p {
テキスト配置:中央;
}
#tbコメント本文{
幅:100%;
サイズ変更:なし;
}
#tbコメント作成者、#tbコメント本文{
境界線:1px実線 #0078d8;
}
#tbコメント本文:hover{
境界線:1px 実線 #fca021;
}
#コメント > h3 {
背景: なし 繰り返しスクロール 0 0 #0078d8;
境界線の半径: 3px;
色: 白;
パディング: 8px;
境界線:0 なし;
フォントサイズ:14px;
}
#コメント{
フォントサイズ: 13px;
}
#コメント h4{
上マージン:10px;
}
#コメント h4 span {
色: #6c6351;
フォントサイズ: 12px;
}
.コメントアクション{
下境界線: 1px 破線 #0078d8;
表示: ブロック;
パディング下部: 10px;
}
.blog_comment_body {
色: #111;
フォントサイズ: 13px;
下マージン: 10px;
上マージン: 10px;
}
#コメント_nav {
フォントサイズ: 14px;
上マージン: 10px;
テキスト配置: 右;
}

最後に、ブログテーマの CSS コードは次のとおりです。


コードをコピー
コードは次のとおりです。

/* ヘッダー */
#ヘッダ{
境界線:1px 実線 #044e97;
背景:#0078d8 繰り返し;
ボックスシャドウ:0 0 5px;
}
h1{
背景: なし;
border-bottom:0 なし;
}
#主要{
上マージン:5px;
右境界線:0 なし;
最小高さ:1040px;
}
#ヘッダー1_ヘッダータイトル{
色:白;
フォントの太さ:太字;
フォントサイズ:24px;
テキストシャドウ:1px 5px 1px #000;
}
#Header1_HeaderTitle:hover{
カラー:#fca021;
}
#タグライン{
色:白;
}
p.日付{
背景: なし 繰り返しスクロール 0 0 #0078d8;
下境界線: 1px 実線 #aaa;
境界線の半径: 5px;
色: 白;
フォントサイズ: 14px;
フォントの太さ: 太字;
マージン: 10px 10px 0 50px;
パディング: 10px;
}
.postFoot、p.postFoot{
パディング下部:2px;
ボーダー下部:1px 実線 #0078d8;
}
.postTitle{
パディング:5px 0;
}
.postTitle a{
フォントサイズ:15px;
パディング:2px 0;
}
.post h2{
下境界線: 1px 破線 #0078d8;
フォントサイズ: 1em;
上マージン: 10px;
パディング: 0 0 10px;
}
.c_b_p_desc_readmore:hover{
カラー:#faa123;
}
#cb_post_title_url{
フォントサイズ:18px;
}
#私の署名{
境界線: 1px 破線 #0078d8;
表示: ブロック;
パディング: 5px;
}
#グリーンチャンネル{
境界線: 1px 破線 #0078d8;
}

/* 右メニュー */
#右メニュー{
境界線:1px実線 #0078d8;
背景:#0078d8;
境界線の半径:10px;
}
#右メニュー ul{
背景:白;
}
#右メニュー li{
背景: なし 繰り返しスクロール 0 0 #3385ff;
境界線: 1px 実線 #3385ff;
境界線の半径: 5px;
色: 白;
マージン: 10px;
パディング: 5px;
幅: 150ピクセル;
}
#右メニュー li a{
色:白;
パディング左:10px;
}
#右メニュー li:hover{
背景:#317ef3;
}
#右メニュー h3{
色:白;
パディング:2px 0 5px 10px;
フォントサイズ:18px;
境界線:0 なし;
}

#ブログカレンダー{
背景:白;
}
div.コメントフォーム{
下マージン:100px;
}
/* 宣伝する */
#site_nav_under、#ad_under_post_holder、#under_post_news、#google_ad_c2、#under_post_kb{
幅:0;
高さ:0;
表示:なし;
オーバーフロー:非表示;
}

/* カレンダー */
.カル{
境界線:0 なし;
幅:100%;
高さ:200px;
フォントサイズ:14px;
}
.CalTitle{
フォントサイズ:15px;
}
.CalTodayDay{
背景:#0078d8;
}
.CalTodayDay au{
カラー:#fc6700;
テキスト装飾:なし;
}

<<:  Vueコンポーネントの7つの通信方法についての深い理解

>>:  HTML テーブル マウス ドラッグ ソート機能

推薦する

Kylin V10 サーバーで Storm をコンパイルしてインストールする詳細なプロセス

1 はじめにApache Storm は、Hadoop と同様に、大量のデータを処理するために使用で...

Vue での親子コンポーネント通信と、sync を使用して親子コンポーネント データを同期する

目次序文子コンポーネントは親コンポーネントにデータを渡す1. 親コンポーネントから子コンポーネントに...

CentOS での MySQL ワークベンチのインストールと設定のチュートリアル

この記事では、MySQL Workbenchのインストールと設定のチュートリアルを参考までに紹介しま...

Ansibleを使用してTomcatをバッチでデプロイする方法

1.1 ディレクトリ構造の構築この操作は、nginx+mysql+tomcat+dbのディレクトリ構...

Vueはユーザーログインとトークン検証を実装します

フロントエンドとバックエンドを完全に分離する場合、Vue プロジェクトでトークン検証を実装する一般的...

JavaScript のクロージャの問題の詳細な説明

クロージャは、純粋関数型プログラミング言語の伝統的な機能の 1 つです。クロージャをコア言語構造の不...

Vueは買い物数量を変更できるショッピングカートを実装します

この記事では、Vueを使用してショッピングカートの数量を変更する方法を紹介します。具体的な内容は次の...

JavaScriptのvar let constの違いは何ですか?

目次1. 繰り返し宣言1.1 変数1.2 しましょう1.3 定数2. 可変プロモーション2.1 変数...

HTML 選択オプションの基本的な理解と使用

JavaScript での HTML (選択オプション) の詳細な説明1. 基本的な理解:コードをコ...

Dockerコンテナシェルスクリプトの実行ステータスを監視する方法

シナリオ会社のプロジェクトはDockerでデプロイされています。原因不明ですが、コンテナが時々停止し...

MySQL FAQ シリーズ: ibdata1 ファイルのサイズが突然増加しないようにする方法

0. はじめにibdata1 ファイルとは何ですか? ibdata1 は、innodb システム テ...

Win10 64 ビットで圧縮パッケージを使用して最新の MySQL 8.0.18 をインストールするチュートリアル (画像とテキスト付き)

WIN10 64ビットに最新のMySQL8.0.18をインストールダウンロード公式サイトから最新バ...

Vueウォッチの監視方法の概要

目次1. Vueにおけるwatchの役割はその名の通り、監視の役割です。 2. このオブジェクトのプ...

HTML テーブル マークアップ チュートリアル (39): ヘッダーの明るい境界線の色属性 BORDERCOLORLIGHT

テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...

Vue のスロットの使用法と適用シナリオの詳細な分析

スロットとは何ですか? Vue では、子コンポーネント タグの中央に何もラップできないことはわかって...