読者です 読者をやめる 読者になる 読者になる

プロジェクトは破綻する。

仕事のこととか、salesforceのこととか、書評とか書いてます

【39日目】はてなブログにスタイルをあててみた






 f:id:momokuri777:20170213180730j:plain

他のはてなブログを見ていると、いろんなカスタマイズをしている人がいる。

あっしもやりたかったが、やり方がわからなかったので「はてなブログPerfect Guidebook」という本を購入し、やってみた。

 

購入したのはkindle版。

本から手を離して何かをやるというときに、紙の本だとどうにかして開きっぱなしにしておかないといけないけど、電子書籍ならその必要がない。

これがあっしにとって結構大きなメリット。

技術書も同じようにできるし。

 

さっそく本を参考にしながらcssでカスタマイズしてみた。

>はてなブログPerfect Guidebook [ JOE AOTO ]

ちなみに本はこのような構成になっている。

PART1 はてなブログをはじめよう
PART2 記事を投稿する
PART3 ダッシュボードでの設定
PART4 基本機能を使ったデザイン変更&カスタマイズ
PART5 CSSを使ったブログカスタマイズ
PART6 はてなブログProと独自ドメイン
PART7 アクセスアップ&コミュニケーション
PART8 SNSとの連携
PART9 広告やアフィリエイトで報酬を得る

 

今回あっしが参考にしたのはPART5になる。

今日は3つだけ紹介。

 

はてなブログ管理メニューを以下のように辿ると、cssを設定するところがある。

サイドメニュー「デザイン」 > カスタマイズタブ > デザインcss

 

まず、カテゴリの見た目を変えてみた。

本のサンプルコードを参考に、cssを記述してみる。

以下にブログのbefore、afterのキャプチャを貼ってみたが、わかるだろうか。

■■■■■■■■■ before ■■■■■■■■■

f:id:momokuri777:20170213182527j:plain

 ■■■■■■■■■ after ■■■■■■■■■

 f:id:momokuri777:20170213182547j:plain

■■■■■■■■ ここまで ■■■■■■■■

 

ただのリンクっぽく見えたのが、カテゴリっぽくなった。

 

次に見出し。

記事とサイドバーの見出しに装飾してみた。

■■■■■■■■■ before ■■■■■■■■■

f:id:momokuri777:20170213183400j:plain

 ■■■■■■■■■ after ■■■■■■■■■

f:id:momokuri777:20170213183314j:plain

■■■■■■■■ ここまで ■■■■■■■■

 

やっぱり色を使うとだいぶ印象が違う。

 

最後に、引用文をダブルクォーテーションで囲んだようにしてみた。

■■■■■■■■■ before ■■■■■■■■■

f:id:momokuri777:20170213183304j:plain

 ■■■■■■■■■ after ■■■■■■■■■

f:id:momokuri777:20170213184118j:plain

■■■■■■■■ ここまで ■■■■■■■■

 

これ、他のブログで一度見てしまって、絶対やりたいと思っていた。

そしたら、この本に載っていたサンプルだったという。

このデザインはかなりお気に入り。

 

他にも、独自のSNS共有ボタンを配置する方法などが紹介されている。

ちなみに今回カスタマイズしたのはpc用のcssで、スマホ用の設定は別になる。

スマホもそのうちやってみる予定。