ブログ、デザイン一新しよう

夕方、少し時間があきました。何か大掛かりな何かをやってみたい。

そうだ、ブログのデザイン変えよう。

文系アナログな私には「HTML」だの「CSS」だの「jquery」だのは要するに魔法なんです。誰かにコピーさせてもらえれば使えるけど、自分で唱えることはできない。

去年の3月から1年2ヶ月ほどいろいろいじりまくった僕のブログの裏側には、何のために存在するのかわからないような「デザインＣＳＳ」の呪文や、設定→詳細設定のheadに追加というところにニョロニョロと並ぶ変な文字がある。

これは必要なのか不要なのか、そもそもこれはいったい何なのか。よし、今日はこれらをすべて完全に消してから、ピュアな気持ちでブログを作り変えよう。

それがこの数時間のブログ作り直しの激闘の始まりである（うそ、めっちゃ簡単）。自分で作ったものというのは一つもないので、誰かの何かを使わせて頂いている。沢山の時間と労力を使って作り上げたものをコピペでさも「俺のもの」風に使ってしまうことへのお詫びと感謝とともに言及、リンクを貼らせていただくのです。

みなさま、本当にありがとう。で、新しいのできたらまた使わせてね♡

ではデザインからスタートすることにします。

デザイン

www.nubatamanon.com

 

以前、書いた記事でおおっと思ったこれ。評価も高かったし、このデザインテーマを作った人、しってる。

こんな黒いのにシロマティ。でもうちの界隈では「タックミー」としか呼ばれていない。とってもお世話になりましたありがとうございます！

shiromatakumi.hatenablog.com

デザインでシロマティさんの作った「Brooklyn」をインストールしたあと、デザインCSS（インストール後に残ってるデザインCSSはBrooklynのだから消しちゃダメ）以外のものをすべて消す。

・ ヘッダー
・記事（上、下）
・サイドバー
・フッター

それと詳細設定にある「headに追加」されてるものまで。

小規模なマイナーチェンジをやるとつい消した時に不具合が出るのが怖くて置きっぱなしにしていたものがあるので、これを消したかったんですよね。シェアボタンやＳＮＳボタンっていろいろあるし、試しながら今のものに落ち着いているんだけど。

ついでに広告も何もかも全部消してみた。まるで素うどん。そこには・・・無駄に羅列された文字と不揃いのサイズの画像、そしてタイトルだけが浮かんでいる・・・

だめだ、これでは一円にもならない（そこじゃない）

グローバルナビボタンの設置

これ、やりたかったんですが設定が面倒くさそうだったのでやったことなかったんですよ。でもこのデザイン「Brooklyn」にはすでに用意されてるんです。

タックミー、すごいぞ。

さっきのページ

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました - NO TITLE

ここにやりかたが完全に書いてあります。タイトル下にコピペしてから、必要部分を書き換えるだけ。

ちなみに

• 雑感
• ブログ
• Favorite（ホントはお気に入り）
• ハンモック生活
• 管理人について

の5つを放り込みました。これで直帰率がだだ下がりだね！（希望）

シェアボタンの設置

また黒い人登場。本来ならここでゆきひーカスタムを行うところなんだが・・・このデザイン「Brooklyn」にはシェアボタンも付いてるんだ。

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました - NO TITLE

さっきのページにシェアボタンの付け方も載ってるのでぜひ。ちなみにカラーのものと黒いものもあるけどどっちもカッコいいぞ（褒めてる）

そして今日、こんな記事がアップされた。

shiromatakumi.hatenablog.com

どうやら高速化される魔法のようで、使った人からはさっそく早くなったとコメント入ってるもんね。タックミーすごいぞ。

さて、そろそろタックミー言及祭りはそろそろ終わり。つぎはあの人だぜ。

フォローボタンの設置

はてなブログのカスタマイズといえばかならず名前が出てくるゆきひー氏。シェアボタンはBrooklynのものをそのまま使ったんだけど、シェアボタンはオススメのがあるんだ。

上の文字は自分で変えてるんですけどね。これをサイドバーに入れておくとPCで見たときはサイドバーに、スマホで見るときは記事の下に並んで表示されるんだ。（レスポンシブデザインにチェックは入れないとダメですよ☑）

www.yukihy.com

この記事の下の方「サイドバーに入れる」を参照。もちろんブログのURLやはてなidなどはそれぞれのものに変える必要があるのでご注意。

ただ、これをそのまんま使うとスマホで見た時にはてな、Twitter、feedlyの各ボタンが外側にはみ出ちゃうのでデザインＣＳＳで1箇所99％にしました。

問い合わせフォームの設置

うちのはフォームズさんのメールフォームを使ってます。意外と問い合わせってありますからつけておいてもいいと思います。メールアドレス貼ると面倒くさいの来るから。

www.formzu.com

過去記事をタグメニュー化して省スペースで表示させる

ゆきひーさんが本当に魔法使いなんじゃないかと思ってしまうくらい感動したのがこれ。

本来ならサイドメニューや記事の下の方に延々と並ぶことになる新着記事や人気記事、月別やタグの表示を一箇所でできるもの。ただ上のボタンを押してやるだけで各記事やタグなどに切り替わってしまうんですよ。

もちろんですがスマホにも対応、指で押すだけですぐ切り替わる。これは本当にオススメ。ただ、やり方は少しややこしいのでゆっくり確かめながらやりましょう。でも僕にできたのできっとできます！（でも初めてやったとき、ゆきひーさんにできないって泣きついた記憶があるｗ）

www.yukihy.com

その他

• フェイスブックページ貼り付け
• Google AdSenseなど広告等貼り付け
• ほか特別に付けてるものを復旧

僕はこのくらいでした。いきなり全部消すと思い出せないこともあるかもしれないので、ブログのトップページのスクショをとっておいたり、ＣＳＳなどはコピーをとっておくなどが大事だと思います。

評価はどうなったか

これは以前の記事でスクショしておいた前ブログの評価。55点

そして今回の変更後に評価してみたもの

2点あがりました！（あんまりわからない）

ブログデザインを変更してみて

感想をまとめます。

• 所要時間　いろいろしながら合計1時間弱
• 沢山の無駄なもの？を捨てることができた
• スピードも上がったような気がする
• 見た目が(・∀・)ｲｲ!!！

使い始めてしばらくして大掃除をやってみたい方はぜひおすすめです！

 

勉強？ううん僕はいいや。