nil-blog 楽しく暮らしましょう...

Blog超初心者が今からやれることをお届けします。

「はてなブログPro」デザインのカスタマイズ、プライバシーポリシー掲載

ブログ運営

これから「はてなブログPro」を始めようと考えている人、既に始められている人にも、よろしかったらご参考にしてみてください。

 

デザインの変更！

以前デザインを、「テーマストアー」から「stripe」（無料）をインストールしてカスタマイズしましたが、本日「公式テーマ」の「cocoa」に変更しました。
特別な変更理由はないのですが、CSSを使ったカスタマイズをやりたくて、何となく公式テーマを利用することにしました。

こちらもstripと同様にとてもシンプルで、見た目も落ち着いた雰囲気なので満足しています。

  

「カテゴリー紹介」表示のカスタマイズ！

変更前のカテゴリー紹介は以下の内容でした。 

f:id:nil-blog:20190708181014j:plain

今回は、サイドバーにあるカテゴリーを横並びのボタンに変更しました。
デザインCSSは、はてなブログ Perfect GuideBook を参考に作成しました。
以下をご参照ください。

.hatena-module-category ul li{
display: inline-block; /* インラインブロック表示にする */
margin-top: 5px; /* ブロックの上部の余白を指定 */
}
.hatena-module-category ul li a{
padding: 5px; /* アンカーテキストの周囲の余白を指定 */
border: 1px #8ab292 dashed ; /* ボーダーを指定 */
text-decoration: none; /* アンダーラインを消す */
color:#000; /* フォントの色を指定 */
transtion: ls ease; /* アニメーション指定 */
}
.hatena-module-category ul li a:haver{
backgroud: #8ab292; /* マウスオーバー時の背景を指定 */
} 

 

グローバルナビゲーションのカスタマイズ！

はてなブログ Perfect GuideBook を参考に、グローバルナビゲーションのHTMLとCSSを作成しました。
以下をご参照ください。

【HTML】

<div class="nav">
<ul>
<li>
<a href="https://www.nil-blog.com/archive/category/暮らし">暮らし</a>
</li>
<li>
<a href="https://www.nil-blog.com/archive/category/観光・旅行">観光・旅行</a>
</li>
<li>
<a href="https://www.nil-blog.com/archive/category/書籍・ビジネス">書籍・ビジネス</a>
</li>
<li>
<a href="https://www.nil-blog.com/archive/category/ブログ運営">ブログ運営</a>
</li>
<li>
<a href="https://www.nil-blog.com/archive/category/運営者情報">運営者情報</a>
</li>
</ul>
</div>

 

【CSS】

 /* ブローバルナビゲーション */
.nav{
width: 800px;　/*幅を指定*/
padding: 0 0; /*余白を指定*/
margin: 0 auto 20px; /*周囲の余白を指定*/
}
.nav ul{
padding: 0;
overflow:hidden; /*高さを出すための指定*/
list-style-type: none; /*リストスタイルを指定*/
background:#fff; /*背景色を指定*/
margin-bottom:16px; /*枠の下周囲の余白を指定*/
text-align: center; /*文字の真ん中を指定*/
border-top: 2px solid #000; /*ボーダー上を指定*/
border-bottom: 2px solid #000; /*ボーダー下の指定*/
height: 30px; /*高さを指定*/
}
.nav li{
float: left; /*左に詰めて表示をする*/
text-align: center;
width:20%; /*幅を指定*/
margin: 0;
}
.nav li a{
display: block; /*ブロック表示にする*/
margin: 0;
line-height:30px; /*高さを指定*/
color: #000; /*文字色の指定*/
font-size: 12px; /*マウスオーバー時の文字色を指定*/
text-decoration: none; /*アンダーラインを消す*/
}
.nav a:hover{
color: #fff; /*マウスオーバー時の文字色を指定*/
background:#f7546d; /*マウスオーバー時の背景色を指定*/
}

 

プライバシーポリシーを掲載！

プライバシーポリシーの掲載では、「ジムプロ」ブログを引用し作成しました。

 プライバシーポリシー
広告の配信について
当サイトは第三者配信の広告サービス「Googleアドセンス」を利用しています。広告配信事業者は、ユーザーの興味に応じた広告を表示するために「Cookie（クッキー）」を使用することがあります。
Cookieを無効にする設定およびGoogleアドセンスに関して、詳しくは①こちらをクリックしてください。
また、『 ブログ名 』は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。
第三者がコンテンツおよび宣伝を提供し、訪問者から直接情報を収集し、訪問者のブラウザにCookie（クッキー）を設定したりこれを認識したりする場合があります。
アクセス解析ツールについて
当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。この規約に関して、詳しくは②こちらをクリックしてください。
当サイトへのコメントについて
当サイトでは、スパム・荒らしへの対応として、コメントの際に使用されたIPアドレスを記録しています。これはブログの標準機能としてサポートされている機能で、スパム・荒らしへの対応以外にこのIPアドレスを使用することはありません。当サイトでは、次の各号に掲げる内容を含むコメントは管理人の裁量によって承認せず、削除する事があります。
・特定の自然人または法人を誹謗し、中傷するもの。
・極度にわいせつな内容を含むもの。
・禁制品の取引に関するものや、他者を害する行為の依頼など、法律によって禁止されている物品、行為の依頼や斡旋などに関するもの。
・その他、公序良俗に反し、または管理人によって承認すべきでないと認められるもの。
免責事項
当サイトで掲載している画像の著作権・肖像権等は各権利所有者に帰属致します。権利を侵害する目的ではございません。
記事の内容や掲載画像等に問題がございましたら、各権利所有者様本人が直接メールでご連絡下さい。確認後、対応させて頂きます。
当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。
当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、誤情報が入り込んだり、情報が古くなっていることもございます。
当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。
運営者：nil（←ハンドルネール または 実名）
掲載日：2019年7月8日（←20XX年XX月XX日）

 

最後までご覧くださいましてありがとうございました。

次回もよろしくです。