ヒトリジョーシス 原宿ベース

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

ヒトリジョーシス 原宿ベース

美容系の会社でヒトリジョーシスをしている SE のブログ

【はてなブログ】グローバルヘッダーの色を変えてアイキャッチを少し角丸にしてみた (PC ビュー)

Web はてなブログ

おはようございます!自分のはてなブログをガシガシ弄りたいけど、どちらかといえば会社ブログの WordPress をガシガシ弄っている @sys_nakamura です。ようやく少しはてなブログの見た目カスタマイズに着手することができました。

f:id:sys_nakamura:20160410105339p:plain

 

なので今回の記事はカスタマイズしたことについて書きたいと思います。

 

今回紹介したいのは「グローバルヘッダーの色を変える」手順とアイキャッチ画像を角丸にする」手順です。夜中にけっこういろいろな部分に手を加えたのですが、一気にやったので情報がまとまっていません。少し整理しながら小出しにカスタマイズ記事書いていきたいと思います。

 

 

グローバルヘッダーの色を変える

私が現在使っているテーマは Brooklyn というテーマです。白と黒が基調になっていてシンプルイズベストなテーマになっています。

それに合わせるようにはてなブログを表示した際に一番上に表示されるグローバルヘッダー (バー) の色も変更しました。表示自体を消すことも考えましたが、グローバルヘッダー自体は個人的に動線として役立っているので残しておくことにしました。

f:id:sys_nakamura:20160410102227p:plain

 

 

グローバルヘッダーの色変更手順

以下のコードを CSS に記述するだけで色変更することができます。

上記のコードをはてなブログ「ダッシュボード」→「デザイン設定」→「カスタマイズ」→「デザインCSSに貼り付けます。

f:id:sys_nakamura:20160410102422p:plain

 

以上でグローバルヘッダーの色変更作業は完了です。

 

 

アイキャッチ画像を角丸にする

私は PC ビューでもスマホビューのように記事一覧とアイキャッチ画像がリストで表示されるようにトップページを開くと archive へリダイレクトするように設定しています。 (SEO 的にはよろしくないかもですがそうしています)

 

PC から見てもトップページはこのようにアイキャッチ画像 + 記事タイトル + 抜粋文だけが表示されるようにしています

f:id:sys_nakamura:20160410103218p:plain

 

トップページを記事一覧 (archive) 表示にする方法はこちらのブログ記事が参考になります。

上記のように PC ビューでもアイキャッチ画像をリストで表示していると感じるのですが、デフォルトではスマホビューと違ってアイキャッチ画像に丸みがないので少しゴツゴツした雰囲気になってしまいます。

f:id:sys_nakamura:20160410104043p:plain

なので CSS を少し弄って PC ビューでもアイキャッチ画像は角丸で表示されるようにしてみました。

 

アイキャッチ画像を角丸で表示するための手順

こちらの手順も以下のコードを CSS に記述するだけで変更することができます。

上記のコードをグローバルヘッダーの色変更と同じように、はてなブログ「ダッシュボード」→「デザイン設定」→「カスタマイズ」→「デザインCSSに貼り付けます。

 

以上でアイキャッチ画像を角丸にする手順は完了です。少し丸みがでました。

f:id:sys_nakamura:20160410104736p:plain

 

 

まとめ

ようやく少しはてなブログのカスタマイズに着手することができました。まだまだ手付かずのところが多いですが、引き続きやれるときにカスタマイズして情報をじっくりまとめてカスタマイズ記事もしたためていきたいと思います。今回変更した箇所は細かい部分にはなりますが、そういった箇所を少し弄るだけでもサイト全体の印象はなんとなく変わるものですね。

 

 

こんな記事も書いています