そのブログデザイン・・・気に入らねーナ?

f:id:mihao1853:20170410230742j:plain

こんばんは!宗次郎です。

今日は久しぶりにブログデザインをいじってみました。

おや?ブログタイトルもかわっていますね~!

 

 

はじめに

以前のブログデザインですが、デザインどころかブログタイトルも含めていまいち”ビッ”と来ていなかったので、今回思い切ってすべてを一新しちゃいました。

 

初心者の方など、誰かの参考になればな、ということで、手順書がてら記事に起こしてみます。

おすすめツールの紹介や、恥ずかしい没案などのネタも盛り込んでありますので、お暇なら是非ご一読下さい。

 

意味不明なサイトタイトルを変更

まずはここからメスを入れていきます。

旧・サイト名「甘味野郎」

 

食べ物レビューをやっていない、する気が無いので変更です。

本当は食べ物レビュー、したかったんですよねぇ。

でも、僕がレビューすると、

 

「うっま・・・」

 

△相変わらず「うまそう」な顔に見えませんね。「まっず・・・」というコラ画像が作られるのもうなずけますが、僕は結構好きで全話読んでます!

 

そう。漫画「めしぬま」みたいなコメントしかできないと悟ったので却下です。

 

そんなわけで、思い切ってはてなブログでは初のサイトタイトル変更です。

まずは没案から

・没案1

f:id:mihao1853:20170410230742j:plain

「ば く ま つ か ら !」

うーむ、ダサすぎる。ダサすぎますよ!

後ろの侍も含め、いい感じにダセェー!

ただ、写真自体はすごくかっこいいので、これは間違いなく僕が戦犯なのです。

 

・画像を拝借したサイト

www.photo-ac.com

「写真AC」様より。良質な写真が無料で使えちゃう宗次郎お勧めサイト。

 

・没案2

f:id:mihao1853:20170410231910p:plain

「ば く ま つ か ら 。」

 

・・・”。”になっただけじゃないですかー!

 

ちなみにこのタイトルは、宗次郎が俗にいう「マイルドヤンキー」気質なところからインスピを受け、採用してみました(没になりましたが)。

マイルドヤンキーというか、ただの「世間知らず」なんですけどね。マイルドヤンキーっていう響きが好きなんですw

 

分かりやすく言えば、「名前の通り、まるで幕末から来たのではないか?というくらいに現代社会の知識にうとい」という意味で、考えたサイトタイトルですw

 

・採用(ロゴ画像はスマホ用)

f:id:mihao1853:20170410232940p:plain

 

うむ。やはりブログタイトルはローマ字でかつシンプルなものに限る。

注目していただきたいのが、映画「SAW」みたいな文字外の「枠」部分。

 

「僕が頑張って書きましたー!」

 

・・・ハイ。スンマセン。実はコレ、簡単に作れるのですよ。

 

Phote Scapeをインストールしよう

簡単に解説をします。

PhotoScape : Free Photo Editing Software (Photo Editor) Download

上記URLから「Photo Scape」をダウンロード。

無料の画像編集ソフトです。

今回のロゴは、全てこのソフトだけで作っております。

 

f:id:mihao1853:20170411001818p:plain

使い方は簡単です。

インストール後、白紙画像に文字を打ち、切り抜き加工をします。

前者は画面左下「オブジェクトタブ」内のTを押すだけ、後者も付近の「トリミング」タブにて行えます。

 

あとは赤丸の部分をスクロールするだけで、好きな「枠」を使用することができます。これだけ。

 

なお、フォントに関してですが、

gigazine.net

こちらの、キルミーベイベー」風フォントを使用しております。

キルミーベイベーが何なのかは存じませんが、とりあえずセンスフルだったので採用です。めっちゃオシャレ。

 

ちなみにこのツールとロゴは、とあるはてなブロガーさんのブログを参考にさせていただいたのですが、一度ブラウザを閉じてしまったため、URLが不明です;

履歴を漁って、後日ここに参考として掲載できればなと思います。ごめんなさい!

 

パソコン用デザインの変更

f:id:mihao1853:20170411014949p:plain

じゃーん。なかなかシンプルにまとまりました!シンプルイズベスト。

 

しかし、ここで最大の不覚を取ってしまったことに気づきます。

 

「変更前の画像」を撮り忘れちゃいましたー!うわーん。

 

これは猛省ですねぇ・・・

 

さて、変更点ですが、前述したサイトタイトル絡みを除けば、

・全体カラーを、オレンジから黒に変更

・合わせてフォントカラーも変更

・メニューバーの追加

 

・・・ありゃ、案外弄ってないや。

メニューバーに関しては、

 

www.yukihy.com

僕が使用しているデザインテーマ、「Naked」の管理者・ゆきひー様のサイトを参考にさせていただきました。ありがとうございます。素敵です。

 

パソコン用のデザイン変更は以上ですね。

次はスマホ

 

スマホデザインの変更

僕は「レスポンシブデザイン」を採用していないので、こちらも、ちまちまといじりました。

レスポンシブデザインにしてしまいますと、ナビゲーションメニューバーが僕好みでは無い仕様になってしまうので、仕方がないのです。

 

そんな僕の努力の結晶がこちらになりまーす。

 

・変更前

f:id:mihao1853:20170411003841p:plain

青を基調としたデザイン。悪くはないんですけどねぇ。

(画面の幽霊記事は、現在未掲載です。幽霊だけにー!)

 

・変更後

f:id:mihao1853:20170411003950p:plain

オラ―!これが今の僕の全力や!

 

なんかこのトップ画像だけを見ると、凄く「デキる奴」のブログって感じですね!

うむ、悪く無いぞ。

 

黒と白のノワールカラーは、カラーセンスのない僕みたいな人にはオススメ!

困ったらノワール!覚えておきましょう!

 

おまけのタッチカラーである黄色がいい味出してくれてますし、なかなかいいんじゃないでしょうか!結構お気に入りです( *´艸`)

 

 

f:id:mihao1853:20170411003828p:plain

メニューバーをにゅっと出した状態。

以前までは「甘味」カテゴリーがあったんですけど、僕にはもう不要ですw

 

おわりに

以上で、第一次デザイン変更は終了です。

HTMLとCSSをいじるのは、ある程度新設仕様な「はてな」でさえなかなか大変ですね。今回、改めて痛感しました。ただ、ちゃんとデキるとすっごく達成感ありますね!!

 

今回のデザインは、個人的にはなかなか「ビシキマ」かな?って思うので、しばらくはこれで行こうと思っています。

 

カスタマイズの参考にさせていただいたサイト運営者様方、助かりました!ありがとうございました!

スポンサーリンク