【注意‼】WordPressに引っ越ししました、改正が間に合っていない記事があります。

「コピペで解決!」はてなブログでサイドバーのタイトル部分をカスタマイズする方法

今日はサイドバーのタイトル部分です。ブログのタイトルにはこだわる人が多いですが、サイドバーのタイトル部分は放置する人が多い印象ですね。

デザインに関しては完璧主義者(か、ただのカスタマイズ依存症)のワタクシは、サイドバーのタイトルまでいじりたがるはてなブログ界では少数派の人間であることは確かです。汗

でも細かいところにもこだわればこだわるほど自分のブログに愛着がわくワケであって、別の人のブログとは違う個性が生まれるのではないでしょうかねぇー。(ここで頷いておく)

 

あ、で話を戻すと、

サイドバーのタイトルもいじると面白い部分ではあるのですが、多くの人は残念ながら放置の人が多いので一発カスタマイズ記事書いてみようとなったわけです。

 

僕自身、皆さんがこのカスタマイズをあまりやらない気持ちはわかります。

そもそも「サイドバーのタイトル部分をカスタマイズしたい!!!」などと考えたことすらない99%の方々の意見を除外すると恐らく理由は、、、

 

めんどくさいからでしょう。

 

私の場合、はてなのテンプレートをいくつか作ってるので、この時のコードを参考にすれば簡単に変更できるのですが、初めてやった時は「ま――――めんどくさかった」です。

これを自分のためだけにストックしておくのも何なので、「サイドバーのタイトル部分を変更したい!!!」と思った変わり者(褒め言葉)の皆さんの参考になればと思います。

 

では、

 

デザインよりもまず記事のクオリティーにこだわれという多数派の正論はスルーしつつ、、、

 

ぼちぼち始めましょうか。

以下注意点です。

念のためバックアップはとっておいてください。

また、この記事では、当サイトが公開しているカスタマイズ用のカード型テーマ「PLAIN(プレーン)」を元にカスタマイズを行います。

みなさんが現時点で使用しているテーマやカスタマイズ環境によってはうまくいかない場合もありますのでご理解ください。

PLAIN – テーマ ストア

サイドバータイトルのカスタマイズ方法

サイドバーのタイトルのカスタマイズは、デザイン設定のタイトル下の部分で行うのが良いでしょう。

f:id:oyomiyo:20180909220240p:plain

赤枠の部分に以下のコードをコピペしてください。

CSS

<style type="text/css">
.hatena-module-title {
  padding-top: .4em; /*余白上*/
padding-bottom: .4em; /*余白下*/
border-radius: 0px; /*丸角*/
background-color: #000; /*背景色*/
font-size: 1rem; /*文字サイズ*/
font-weight: bold; /*文字太さ*/
color: #fff; /*文字色*/
text-align: center; /*中央寄せ*/
}
.hatena-module-title a {
color: #fff; /*文字色*/
}
</style>

愛をこめて詰め込みましたよ(笑)

、、、ってあれ????

 

 

コード簡単やん!!!!!!

 

、、、、あれれ?

 

いや確かにあの時はセレクタの部分で超手こずったのを覚えてるんですよ。レスポンシブ表示うんぬんも関係していたと思いますが、、、、もしかするとタイトルではなくてサイドバーのモジュール自体のカスタマイズだったか?

ワタクシは何かと勘違いしていたようです、、、泣

 

でも確実にサイドバーの設定した時に大変な思いしたんですよ!!!ほんとに!!!!(←必死)

 

頑張って序文を書いた努力をここで塗り消すわけにはいきませんから白状しておきますが、「まーーーーーめんどくさかった」って自信を持って言えるほど「まーーーーーめんどくさかった」んすよ、、、、

※今や全ての方々が、オマエの方がまーーーーーめんどくせーと感じておられることについては同意します。

 

改めてお騒がせしました。

、、、では気を取り直して説明に戻ります。汗

タイトル文字の上下の余白を設定する

さっきのコードのうち、

CSS

padding-top: .4em; /*余白上*/
padding-bottom: .4em; /*余白下*/

この部分です。この場合だと、上に0.4em下に0.4emの余白が入ります。

なぜ.4emと設定しているのか?

 

カッコつけです(笑)

 

またemでなくてもpxでも設定できますのでそこら辺はご自由に。

試しに0.7emに設定するとこうなります。

f:id:oyomiyo:20180914193008p:plain

右が変更後です。

まゆげで例えると(例える必要はないが)はだしのゲン→星飛雄馬くらいサイズアップしているのが分かると思います。

サイドバータイトルの角を丸くする

ポップな感じのデザインであれば、角を丸くして優しい雰囲気にしてあげると激しく落ち着きます。

角を丸くするのは以下の部分で設定できます。

CSS

border-radius: 0px; /*丸角*/

デフォルトでは0pxにしているのでかくかくしているはずです。このpxの値が大きくなれば大きくなるほど丸っこくなります。(やりすぎは禁物)

また50%pxではない)と設定すると円になったりします。まあこれもここでは使う機会ないでしょう。

試しに15pxで設定してみます。

先程のコードの中に入れ込むとこうなります。

CSS

border-radius: 15px; /*丸角*/

で見た目

f:id:oyomiyo:20180914204602p:plain

さすがに黒で丸角は抵抗ありますね。ポップな感じのカラーだったらいい感じなのでは、、、

ハイ次!

サイドバータイトルの背景色を変更する

冒頭で載せたコードのうち以下の部分を変更することで、サイドバータイトルの背景色を変更できます。

CSS

background-color: #000; /*背景色*/

#←このシャープみたいな記号から始まるコードをカラーコードと言います。

この場合背景色は黒なのでカラーコードは#000000ということになります。

なぜ#000と省略しているのか、、、

 

カッコつけです(笑)

 

例えば、#1f80c3←このカラーコードを使ったとします。

先程のコードに入れ込むとこんな感じですね。

CSS

background-color: #1f80c3; /*背景色*/

これでやってあげると、

f:id:oyomiyo:20180914202123p:plain

どや???

カラーコードに関しては検索するとたくさん出てきますので参考にしてみて下さいね。

次はサイドバータイトルの文字のカスタマイズに入ります。

タイトルの文字の大きさを変更する

はいココ。(飽きているワケではない)

CSS

font-size: 1rem; /*文字サイズ*/

で試しに5remでこれ、(何度も言うが飽きているワケではない)

f:id:oyomiyo:20180914210444p:plain

ズドーーーーん!!!!!(飽きた)

 

でで私はremで設定しているので、5remにした場合通常の大きさの5倍で表示されることになるのでこんな感じになってます。

※じゃあするなという意見への反論とremの詳しい説明は省きます。

 

恐らくほとんどの人がpxで設定していると思いますのでそれで問題ありません。

ではなぜデフォルトの状態でremなんてめったに使わない物を使ったのかといいますと。

 

カッコつけです(そろそろウザい)

 

ようはpxでもemでもremでもなんでもでもお好きなように設定してくださいということです。

タイトルの文字の太さを変更する

ほとんどの場合は気にする必要はないので恐らく需要無いと思いますが、「細かいところを気にするオマエが説明せんとだれがやるんねん」と言われそうなのでしぶしぶ解説します。

いじるのはここです。

CSS

font-weight: bold; /*文字太さ*/

ほとんどの場合100から900の間で設定し、数が増えるほど太くなります。いわゆる太字のbold700と同じ太さなので試しに900に設定してみます。

CSS

font-weight: 900; /*文字太さ*/

これを入れることになります。

f:id:oyomiyo:20180914214106p:plain

はい、マサイ族の間違い探し。

 

次!!!

タイトルの文字色を変更する

文字色に関しては二か所に記述する必要がありますので注意してください。

CSS

color: #fff; /*文字色*/

冒頭に乗せたコードの中に二か所このコードがあるのでどちらも書き換えてくださいね。

試しに#3df68aでやってみましょう。

こうなります。

CSS

color: #3df68a; /*文字色*/

でこうなります。

f:id:oyomiyo:20180914220432p:plain

はてなのサイドバーのモジュールにはタイトルにリンクがついているもの(クリックして別ページに飛べるもの)とそうでないものの二種類があるので、二か所に書き込むことになります。

ここだけ注意しておいて下さい。

タイトルの文字を左寄せする

恐らく冒頭のコードをそっくりそのままコピペした場合、サイドバーのタイトル文字は中央寄せで表示されるはずです。

※私のテーマ(PLAIN)も、サイドバータイトルの文字はデフォルトで中央寄せとなっています。

テーマによっては左寄せになっているものも多いので、あらかじめ左寄せだった場合は冒頭のコードのうち以下の部分を削除して下さい。元通り左寄せになるはずです。

CSS

text-align: center; /*中央寄せ*/

ココですね。

で、中央寄せだけど左寄せにしたいという人はこのように書き換えてください。

CSS

text-align: left; /*左寄せ*/
padding-left: 1em;

padding-left: 1em;に関しては冒頭のコードの中には含まれていませんが、タイトルの文字の左側に余白を作るために入れてます。これがないとかなりキモチワルイので。

でこんな感じ。

f:id:oyomiyo:20180915153015p:plain

まあどっちみちキモチワルイのだけれども(笑)

サイドバーのタイトルに背景色を入れていないデザインなどでは使えると思うので、覚えておいて損はないはず。

それ以外で使えるテクニック

ここからは番外編ということで、冒頭のコードには含めなかったものの使えるコードを紹介します。

下の赤表示の部分のように新たに追加してお使い下され。

CSS

<style type="text/css">
.hatena-module-title {
  padding-top: .4em; /*余白上*/
padding-bottom: .4em; /*余白下*/
border-radius: 0px; /*丸角*/
background-color: #000; /*背景色*/
font-size: 1rem; /*文字サイズ*/
font-weight: bold; /*文字太さ*/
color: #fff; /*文字色*/
text-align: center; /*中央寄せ*/
border: 3px solid #000; /*ここに追加します*/
}
.hatena-module-title a {
color: #fff; /*文字色*/
}
</style>

ではでは、

サイドバータイトルを枠で囲む

サクサク行くど。追加するのは以下。

CSS

border: 3px solid #000; /*枠で囲む*/

3pxが枠の太さ、solidが一本線の指定、#000が色ですね。

f:id:oyomiyo:20180916174221p:plain

※背景色を白、文字色を黒に変更しています。

どない?

良次!

タイトル下に線を引く

以下を追加。

CSS

border-bottom: 10px solid #949494; /*下線*/

10pxが線の太さ、solidが一本線の指定、#949494が色な。(後半になるほど馴れ馴れしくなる)

f:id:oyomiyo:20180916180016p:plain

※背景色を白、文字色を黒に変更しています。

オモロイやろ?、、なあ?

義次!

影を付ける

イカをつイカ。くコ:彡

CSS

box-shadow: 0 3px 3px rgba(0,0,0,0.5); /*影*/

全部秘密(ごめん、めんどくさい)

f:id:oyomiyo:20180916181035p:plain

※背景色をグレー、文字色を黒に変更しています。

やりすぎは錦糸卵。

最後に

以上のカスタマイズを抑えていれば、ある程度自由にカスタマイズ出来るでしょう。サイドバーのタイトルはトップページの中でも目立つ場所にあるのでおしゃれに見せたいものです。

必要があればどんどん追加していく予定です。

 

あとブクマしないのも錦糸…

ではまた。