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

スポンサードリンク

はてなブログ

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

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

今回、流星のごとく現れた、はてなブログの新テーマ「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.
だいちゃん(∀)

だいちゃん(∀)

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

ブログ運営についてや、私の恋愛に関すること、障害者の生き方など何か質問があれば、LINE@でお答えします!
LINE@登録者限定のブログを読むことも出来ます!
友達追加

YouTubeチャンネルの方も宜しくお願いします!

 

スポンサードリンク

スポンサードリンク

だいちゃん(∀)の新しいYouTube動画です!








10万文字越えの超大作電子書籍!
1級身体障害者が「自殺」をする為に全国を旅した話

フリーアナウンサー「長谷川豊」氏の炎上騒動に巻き込まれた、ブログ「だいちゃん.com」を運営する1級身体障害者(人工透析患者)でフリーライターのだいちゃん(∀)の生い立ちや生きてきた人生、自殺をする為に全国を車で旅したほぼノンフィクションストーリー。

慢性腎臓病を抱えながらの入院生活や、マラソン大会、受験勉強、イジメ、自殺未遂、精神疾患などを乗り越えて生きる様を描いた壮大な物語。

文字数10万字超えの超大作!

これ一冊に著者だいちゃん(∀)の人生が全て詰まっているといっても過言ではない一冊。

生まれから現在までの、障害者としての人生、人工透析患者としての苦労などを描いた作品。

この作品を泣かずに読むことなど出来ない。そんな作品になっています!

購入前にはこちらの注意点をまずご覧下さい。
『1級身体障害者が「自殺」をする為に全国を旅した話』 出版しました!





おすすめ記事セレクション

『1級身体障害者が「自殺」をする為に全国を旅した話』 出版しました!
SNSで大人気の現役障害者モデル「あかね」ちゃんに突撃インタビュー!
女子高生「りんな」ネタ
【期間限定、特典付き!】だいちゃん(∀)LINE@始めました!
『日商簿記2級』 独学でド素人が3ヶ月で3級を受けずに2級に合格する方法
元家庭教師が「英文法」を中学〜高校レベルまで完璧に出来る参考書・問題集を教える!
【無料体験あり!】WEBプログラミングまだ独学なの!? WEB上で学べるのに……。
Information

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


スポンサードリンク