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

Yuta Watanabe's Blog

開発周りと、その他諸々

はてなブログに何時の間にか追加されていた新カスタマイズ機能を使う

こんにちは。

マイクロソフトの渡辺です。

このブログを開設してから、早1年半以上が経ちました。その間に、はてなブログにも随時新たな機能が追加されてきています。今日は、ここ数ヶ月で追加された新機能を使って、ブログをカスタマイズしてみます。

サイドバーのカテゴリの並び順をカスタマイズ


サイドバーの「カテゴリー」を好きな順番に並べ替えできるようにしました - はてなブログ開発ブログ

例えば、よく閲覧されているカテゴリを、上位に持ってくる等。Google Analytics を導入している場合は、行動 > サイト コンテンツ > すべてのページ にて、'archive' と検索してチェックしてみましょう。

f:id:yuwata:20140914110234p:plain

Xamarin カテゴリ、上に移動させてみました。

f:id:yuwata:20140914120324p:plain

Pocket ボタンの追加


デフォルトのソーシャルパーツで、Pocketボタンを設置できるようにしました - はてなブログ開発ブログ

Pocket ボタン、デフォルトでは ON になっていませんので、忘れずに追加しておきましょう。

f:id:yuwata:20140914120512p:plain

 

サムネイル追加等、最新記事モジュールのカスタマイズ


サイドバーの「最新記事」をカスタマイズできるようにしました - はてなブログ開発ブログ

サイドバーに置くことができる「最新記事モジュール」の設定項目がいくつか追加されています。

こんな表示だったものを、

f:id:yuwata:20140914121100p:plain

設定を変更して、

f:id:yuwata:20140914121129p:plain

こんな表示にできます!

f:id:yuwata:20140914121152p:plain

特定カテゴリの最新記事を表示


ブログのサイドバーで、カテゴリー別の最新記事一覧を表示できるようにしました - はてなブログ開発ブログ

特にあるカテゴリのみを対象とした最新記事を表示したい場合は、こちらの設定を利用しましょう。

Xamarin ブロググループの表示の下に、Xamarin カテゴリのみを対象とした最新記事を表示してみました。

f:id:yuwata:20140914121446p:plain

はてぶ数順に注目記事を表示


サイドバーの「注目記事」を、はてなブックマーク数をもとに表示できるようにしました - はてなブログ開発ブログ

ありそうでなかった、はてブの人気エントリー表示。注目記事のカスタマイズで可能になりました。最新記事と同様にサムネイル等も表示可能。

f:id:yuwata:20140914121841p:plain

以下のような表示ができます。

f:id:yuwata:20140914121905p:plain

ブログのデフォルト アイキャッチ画像を設定


シェアされたときにも自分のブログらしく! デフォルトのアイキャッチ画像をブログごとに設定できるようにしました - はてなブログ開発ブログ

個別の記事に対してだけでなく、ブログのデフォルト アイキャッチ画像が設定可能になっています。ブログのトップページや、記事内にアイキャッチが設定されていない場合に使われます。例えば、自分のブログの場合はこれまで、Facebook にシェアしようとすると、

f:id:yuwata:20140914122358p:plain

のように、はてなブログデフォルトのサムネイルが挿入されました。これがデフォルトのアイキャッチ 画像を設定すると、

f:id:yuwata:20140914122646p:plain

以下のように、先に設定したアイキャッチ画像が使われるようになります。

f:id:yuwata:20140914124333p:plain

*反映されるまで、少し時間がかかるようです

スマホ表示向けタイトル画像とアクセントカラーを追加


スマートフォン表示でも、タイトル画像を自由にカスタマイズできるようにしました - はてなブログ開発ブログ


スマートフォン用のデザイン設定に、ヘッダのロゴ色などを変更できる「アクセントカラー」を追加しました - はてなブログ開発ブログ

スマートフォン用のデザイン設定もカスタマイズの幅が広がっています。

まずはカスタマイズ前の状態をご覧いただくと、こんな感じです。

f:id:yuwata:20140914123220p:plain

アクセントカラーと、タイトル画像を設定すると、

f:id:yuwata:20140914123435p:plain

f:id:yuwata:20140914123813p:plain

だいぶ印象が変わりますね。

f:id:yuwata:20140914123911p:plain

ぜひ、お試しください。

このあとは

今回は、ブログのカスタマイズ、をテーマに最近新たなに追加された、はてなブログの機能をご紹介しました。この他にも、様々な機能が随時はてなブログには追加されています。詳しくは、はてなブログ開発ブログをご参照ください。