コミュニケーションBLOG

文字によるコミュニケーションには、ブログをはじめ作文や感想文など様々な場面で「書く」技術が必要になってきます。難しく考えずに気楽に書いてみませんか?

初心者もOK Brooklynのカスタマイズ:はてなブログ

PCと歯車のイラストに「ちょっぴり、カスタマイズ」と書いてある画像

ブログタイトルの色の変更など、小さなカスタマイズのやり方をご紹介します。

使用しているテーマは、Brooklynです。

 1.ブログタイトルの色を変更する

Brooklyn - テーマ ストア

このテーマで気になったのは、ブログタイトルが黒で大きく目立つため、記事タイトルが弱くなってしまう点でした。

「ブログ名」を強くアピールするにはいいのですが、私の場合はブログのテーマを絞り切れていないので、記事とブログ名がしっくりこないのです。

CSSを色々探していて、Minimal Greenさんの記事を見つけました。

ブログタイトルの色を変更して同時にセンタリング(中央配置)するCSSコードです。

センタリングはステキだったのですが、ブログ名の下の説明文が左寄せのままだったのでバランスが悪いため、諦めました(笑)

センタリングを外したCSSコードは、このようになります。設置したテーマに関係なく適用できました。

#title a {
color: #808080;/* タイトル文字の色 */
padding-top: 70px;/* タイトル位置・上からの高さ */
}
#title,
#blog-description {
color: #808080;/* タイトル文字の色 */
}

「#title a」と「#title,#blog-description」の両方で色を指定します。

design.syofuso.com

こちらのサイトには、ヘッダ画像のキレイな設置方法など役に立つ内容がいっぱいです。

2.色のコード

WEB色見本 原色大辞典 - HTMLカラーコード

和色やメトロカラー(地下鉄)、モノトーンなどユニークな色事典です。

  • このブログのタイトルの色:#808080
  •  サイドバーの枠線の色:#708090

3.サイドバーの見出し枠の色と太さを変更する

  •  枠線を細くする:フォントを2pxから1pxに変更
  • 黒をグレーに変える:#708090
  • 吹き出しが不要:CSSコードの変更『/* display: none;』→『display: none;』

 この3点を変更しました。

 参考サイトは、こちらです。

mmorley.hatenablog.com

/* サイドバーの見出し */
.hatena-module-title { /* 四角部分 */
color: #111111; /* ①文字色 */
font-size: 16px; /* ②文字サイズ */
background: #FFFFFF; /* ③背景色 */
border: 1px solid #708090; /* ④枠線:太さ 線種 色 */
}
.hatena-module-title a { /* (リンク有)の文字 */
color: #708090;  /* ⑤文字色 */
}
.hatena-module-title:before { /* 吹き出しの枠線 */
display: none; /* ⑥非表示にする */
border-top-color: #111111; /* ⑦枠線:色 */
}
.hatena-module-title:after { /* 吹き出しの背景 */
display: none; /* ⑧非表示にする */
border-color: transparent; /* 一度全体を透明にする */
border-top-color: #FFFFFF; /* ⑨背景色 */
}

 サイドバーの文字色は「黒」ですが、リンク文字は「グレー」で表示されています。

見出しの枠内の文字が、黒とグレーの2色あるのは、リンクの有無の違いです。

 

りょうこのつぶやきでした。

では、ごきげんよう。

アイキャッチ画像出典:設定項目一覧(外観カスタマイズ) | Luxeritas Theme