はてなブログの便利過ぎる新テーマ「Spirea」を使ってどのようにブログをカスタマイズしたか公開!

f:id:uwasanoaitsu:20160407072524p:plain

スポンサーリンク

はてなブログ

ブログ記事のタイトルにやたらと「!」って使う人って頭悪そうに見えるよね。まぁ、私なんですけどね。

どうも、だいちゃん(∀)です。

今回、流星のごとく現れた、はてなブログの新テーマ「Spirea」。

www.ituore.com

これをを使って早速自分のブログをカスタマイズしました。

いやもう、お世辞抜きでこのテーマは今までの歴代のテーマの中で一番なんじゃないだろうか? というくらいカスタマイズ性に優れていて、しかもオシャレ!

このテーマはレスポンシブデザインのテーマ(PCとスマホの両方が同じデザインのテーマ)なのですが、私はあえてPCとスマホは分けてカスタマイズを行いました。

なので今回はPC版のデザインをどのようにカスタマイズしたかを書いていこうと思います。

(ちなみに、作ったデザインはこの記事のトップ画像に使っているやつです。)

カスタマイズ性が優れている分、どのようにカスタマイズをしていいのか迷う方がいると思います。そういった方々の為に、私はこのようにカスタマイズしました、ということを書こうと思ったのです。

参考になれば幸いです。

詳しいカスタマイズ方法は元サイト(上記リンク)に載っているのでそちらを参考にしてください。ここに書くまでもないくらい詳しくカスタマイズ方法が載っています。

ぶっちゃけ、ほとんどコピペのみでカスタマイズ出来ますw

スポンサーリンク


 全体のデザイン

まず、上記で紹介した「いつ俺」の記事を読みながら並行してこの記事を読むことを推奨します。

・記事を枠線で囲う

・ヘッダー領域の下に線を引く

ヘッダー周辺

・ブログタイトルの背景色の変更

・色は#16c172(緑系の色)を使用。文字色は#ffffff(白色)

・グローバルメニュー(タイプ1)を設置

・SNSフォローボタン付き検索ボックスの設置

・ブログの上下にボーダーを引く

#blog-title {
border-top:46px solid #1d3557; /* 上のボーダー */
border-bottom:1px solid #1d3557; /* 下のボーダー */

この赤文字の部分を「1px」にしています。

記事タイトル周辺

・タイトルの下に区切り線を付けた

・記事のタイトルの色変更(元記事に載っている色をそのまま使用)

・カテゴリーの色の変更(元記事に載っている色をそのまま使用)

記事中

・フォントの大きさの変更(元記事に載っている大きさをそのまま使用)

・大見出し(h2)には、見出し(左にボーダー+背景色)を設定

・中見出し(h3)には、見出し(左にボーダー)を設定

・小見出し(h4)には、見出し(チェックマーク)を設定

・SNSシェアボタンの設定

・SNSフォローボタンの設定

・続きを読むのデザインをカスタマイズ

サイドバー

・背景付きタイトルの設定。色は#16c172(緑系の色)

・SNSフォローボタンの設置

・SNSシェアボタンの設置

こんな感じにカスタマイズしました

これ、ほとんどコピペのみで完成させることが出来ています。

とりあえず、冒頭で紹介した元サイトを見ながらじゃないとここに書いてあることは分かりにくいと思いますが、是非、このテーマを使いたい! という方は見ながらカスタマイズしてみて下さい。

とりあえず、これだけやっておけばちゃんとしたブログになるので!

スマホからうちのブログを読んでいる方は変わったことが分からないと思いますが、機会があれば是非、PCでうちのブログを見て下さい。めっちゃオシャレになっていますので!

このテーマ、ツイキャスというラジオ配信サイトのようなWEBサイトでコラボ配信をしたりして絡んだことのある理系の大学院生の子が作ったんですよね。

あなたは神ですか!

使ってみた感想

使用感、カスタマイズ性は抜群ですね。

欠点としては、レスポンシブデザインにするとあまりデザインが綺麗じゃないかな、と個人的には思ったくらいですね。

なので、私はレスポンシブにせずにスマートフォン版のデザインは、デフォルトのものを、

【はてなブログ】それ、PVも広告収入も損してます!! カスタマイズして取り戻そう!

自分で書いたこの記事を元にカスタマイズして相変わらず使用しています。

でも、このテーマを作ったid:shun_prog0929君が詳しくカスタマイズの方法なども書いてくれていて、コピペのみでほとんどカスタマイズ出来るので、私の中では使い勝手は、はてなの無料テーマの中で歴代ナンバーワンです!

てか、これ本当に無料でいいの!? 使っちゃうよオジさんw

終わりに

「人は見た目が9割」

なんていう本が出てだいぶ経ちますが、実際WEBの世界でもデザインってとても重要なんですよね。

また金の話か! と言われそうですがw デザインを綺麗にするだけでブログの収益もアップします。確実に。

WEB界隈も見た目が9割といってもあながち間違いではないかもしれません。(あとは、ユーザーインターフェース。使い勝手とかですかね。)

なので、WEBサイト、WEBサービスを作るときなどはお金を払ってでも良いデザインにしたほうがいい。無理にオリジナルで作ろうとしてデザインの汚いものを使わないほうがいい。

WEBサイトのデザインが汚いだけで、企業の信用も落ちますからね。

そう考えると、無料でこれだけオシャレなブログのテーマを用意してくれたシュンくんにはとても感謝しなければなりませんね!

しかし、今の時代、無料で良いものがだいぶ作れるようになってきたな~!

え? まだブログ有料サロンで消耗してるの?

だいちゃん(∀)

The following two tabs change content below.

uwasanoaitsu

フリーライター・ハイパーメディアブロガー 1級身体障害者 年間500冊ほどの本を読む読書マニア。勉強好きの資格マニア。簿記や法律に強い。 暗い記事も書くけど、なんだかんだで自分の事をスーパー障害者だと思ってる変な人。お笑い好き。 炎上芸人。インターネット上の嫌われ者www

スポンサーリンク

このブログを気に入ったら「いいね!」をお願いします! 最新記事の情報をお届けします!


ブログ以外の落書き的な記事はこちらで書いています!
>>だいちゃんの落書き帳
>>だいちゃんのLINEブログ

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です