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

あれこれやそれこれ

雑記系ブログのさらなる高みを目指すブログ

ブログデザイン変更+大掃除。使わせていただいたもの紹介

☆ブログ☆ ☆ブログ☆-初心者さん向け
このブログについて・管理人サキの自己紹介
・プライバシーポリシー、免責事項、著作権について
・問い合わせフォーム
・カテゴリ別の一覧はここから

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

f:id:masaki709:20160515212314j:plain

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

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

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

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

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

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

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

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

デザイン

www.nubatamanon.com

 

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

f:id:masaki709:20160515195556p:plain

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

shiromatakumi.hatenablog.com

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

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

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

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

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

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

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

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

f:id:masaki709:20160515195556p:plain

タックミー、すごいぞ。

さっきのページ

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

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

ちなみに

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

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

シェアボタンの設置

f:id:masaki709:20160515195556p:plain

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

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

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

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

shiromatakumi.hatenablog.com

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

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

フォローボタンの設置

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

f:id:masaki709:20160515202421p:plain

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

www.yukihy.com

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

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

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

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

www.formzu.com

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

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

f:id:masaki709:20160515203754p:plain

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

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

www.yukihy.com

パンくずリストの復旧

bulldra.hatenablog.com

Googleにこのブログが階層をもっていて、どこに記事が存在しているかを示すためにパンくずリストをつけていました。それを復旧させます。

すでに階層づけは各記事でおこなってあるので、このプラグインを導入することだけでOKです。いつもながら池田仮名さんありがとうございます。

その他

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

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

評価はどうなったか

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

f:id:masaki709:20160504152228p:plain

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

f:id:masaki709:20160515213135p:plain

2点あがりました!(あんまりわからない)

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

感想をまとめます。

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

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

 

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

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

  • 作者: 赤間公太郎,大屋慶太,服部雄樹
  • 出版社/メーカー: インプレス
  • 発売日: 2016/03/18
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る