副業(ブログ)

はてなブログデザインを全部コピペ!初心者でも絶対に失敗しないサイト

はてなブログのデザインが全くわからない私でしたが、このブログについては全部コピペで作っていますので、ブログ初心者でも絶対に失敗しないサイトばかりを集めました。

どうも、ブログデザイン超初心者のソラマメです。

ブログをはじめた方のすべてが思うことは、「自分のブログ、もっとデザインこうしたいな~」ではないでしょうか。

当ブログを運営している私もブログをはじめたときに見よう見まねでデザインcssをいじり、なんとなくデザインができているブログとして運営していました。

ただ…やっぱり違うんですよね(ToT)

いい記事にはいいデザインがあり、いいデザインはやっぱり記事も素晴らしいのですが、この両方を追う作業と言うのはブログをはじめた方には非常に辛いんですよね。

記事を更新しないとアクセスは増えないし、だけどデザインがグチャグチャだと離脱されるんんじゃないかと思うし…。

だから!

こんなブログ初心者の私でもここまでのデザインができましたので、この記事では、はてなブログのデザインを全部コピペできる初心者でも絶対に失敗しないサイトだけを集めました。

これだけのサイトをコピペだけすれば、最短で1時間ほどでブログデザインが完成するはずですので、まじでオススメです。

できれば私の数日間を返してほしいくらいですが、それくらいの良サイトを集めましたのでぜひご覧ください。

1.はてなブログ初心者におすすめしたいブログテーマ

今回私のブログテーマにつきましては、悩みに悩みましたが最終的にはZENO-TEALを使用しています。

今回私がはてなブログ初心者にオススメしたいブログテーマをZENO-TEALにしているのは、次の3つの理由からです。

  1. デザインがレスポンシブだから
  2. 記事が見やすいから
  3. トップがカード風で見やすいから

 

まずはてなブログ初心者にPCとスマホ、両方のデザインを作り込むことは不可能なのでZENO-TEALのようにレスポンシブ対応していることを最も重要視しました。

またZENO-TEALはワードプレスでいうと、ストークのようなテーマであり、固すぎず柔らかすぎず、どの年代にも読みやすく、かつ色などで変化をもたらすことができるようになっています。

またブログトップが個性的でカード風になっているので、画像でよさそうな記事をクリックしてもらいやすい感じがグッドでした。

この作業がこんなにも詰まるとは思っても見ませんでしたが、ブログ初心者であれば逆にZENO-TEALは最も取り入れやすいのではと私は判断しております。

というわけで早速ZENO-TEALをインストールしてもらいたいのですが、待ってください!絶対に待ってください!いいですか、フリじゃないですよ!

次に私が数日間苦しめられた失敗談も含めてテーマ変更前にやるべきことをお伝えしますので、テーマのインストールは下記を御覧いただいた後にお願いします。

2.はてなブログのデザイン変更前に失敗しない方法①「全記事表示」

あ、このテーマいいなぁと思ってZENO-TEALをインストールした私は2つのことで数日間悩んでいました。

ブログカード風にならない…。

いや、ブログカード風があなたの持ち味なのに、なんで自分のブログに変更したのに変わらないの?なんで?もう…いや……。

そんな悩みを解決してくださったのは、ツイッターもフォローさせていただいておりますあいまいみーさんのこの返信でした。

たしかに私が最初に設定したブログでは記事一覧にチェックを入れていましたので、どうやらそこが良くなかったみたいです。

指示を頂いた通り、設定→詳細設定→トップページの表示形式を全文形式へ変更することにより、ブログトップがカード風になりました。

まずZENO-TEALに変更してこの悩みに陥る方は結構いるようで、私のこの記事で少しでも悩めるZENO-TEAL希望者が救われることをねがっています。

まさかボタンひとつの作業で数日も悩まされるとは…なので、ZENO-TEALをインストールする前には必ず全文形式をしておきましょう。

これが絶対にZENO-TEALにおけるブログデザイン変更を失敗しない方法その1です。

スポンサーリンク

3.はてなブログのデザイン変更前に失敗しない方法②「続きを読む」

はてなブログのデザインテーマであるZENO-TEALに変更したらブログトップがカード風になりますが…クリックすると画像が出てしまったり、リンク貼ってあるAmazonに飛んでしまったり…。。。

こんな不具合が出てしまいましたのでこれまた悩みましたが、これもあいまいみーさんのブログを読み解決しました。

ZENO-TEALのテーマでは、「続きを読む」を記事の中に入れないとブログトップのカード風から記事に飛ばなくなっていますので、すべての記事にこの「続きを読む」を入れないといけません。

そこを見落としていた私は画像が出てしまったり、アマゾンに飛んでしまったりしていましたので、すべての記事に続きを見るを挿入したところトップから記事に飛ぶことができました。

だから。

ブログ初心者の方はまだ記事数が多くないはずですので続きを読むを挿入する作業が少なくてすむはずなので、ZENO-TEALに変更することをオススメしています。

私が今回取り組んだのが123記事だったのですが、無心で続きを読むを入れ続けたら1時間ほどで済みましたからきっと100記事くらいの方あればそこまで手間ではないはずです。

手間を惜しんでこれまでのブログテーマでいくか、新しいデザインにするか迷っていた私も決心して変えてこのデザインになったので満足しています。

これが絶対にZENO-TEALにおけるブログデザイン変更を失敗しない方法その2です。

4.はてなブログのデザイン変更前に失敗しない方法③デザインを保存

ブログデザインを変えるときに私が何度も失敗したのは、以前のブログデザインを保存せずに更新してしまったため、もとに戻せなくなったことです。

なのでブログデザイン初心者の方であれば、かならずこまめにデザインを保存しておきましょう!

私も何度「えいやー」と変更後にコントロールzを押したことか…。

いくらコントロールzを押してもツイッターで嘆いてもお金を出してももとのデザインに戻すことはできませんので、メモでもワードでもなんでもいいのでこまめにとっておきましょう。

これが絶対にZENO-TEALにおけるブログデザイン変更を失敗しない方法その3です。

スポンサーリンク

5.コピペOKなデザイン変更「ブログカラー」

カスタマイズ5:全体のテーマカラーを変更する – ZENO-TEAL

このサイトのデザインをコピペさせていただき、サイト全体のドット模様であった背景色を白くし全体的なカラー変更をしています。

ブログの全体的な変更はオークニさんのこの記事を参考にしています。

【カスタマイズ】ZENO-TEALをシンプルにスッキリさせるCSSコピペ集 – オークニズム

オークニさんはツイッターでその存在を知りましたが、これがはてなブログ?と思えるようなワードプレスのSANGO風デザインをはてなブログで独自で作っていらっしゃる方で、めちゃくちゃ参考にさせていただいております。

そのオークニさんも基本的なテーマがZENO-TEALであることを知ったので私も変更に踏み切りました。

元々ZENO-TEALで設定されていた色も捨てがたかったのですが、30代ということもあり落ちつた雰囲気ということで、全体のカラーコードについては「#286287」で設定させていただいております。

このコードを全体で使っているのでマイナーチェンジをしたいときには、すべてのこのコードを置換することでちょっとした模様替えくらいはできます。

6.コピペOKなデザイン変更「合わせて読みたい」

おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ – NO TITLE

ブログ上で内部リンクの重要性を感じた私はおすすめ記事を作るようにしました。そこで参考にさせていただいた記事はこちらのサイトです。

デザインをコピペし、リンクを入れることで下記のように目立たせてくれるのでとても満足しています。

スポンサーリンク

7.ブログカラー参考

Color Hunt – Beautiful Color Palettes

ブログ運営で最も悩ましいのが色の選定ではないでしょうか。なぜなら、色でブログの印象は全く違うからです。

その悩みを上記サイトが解決してくれます。

たくさんの色見本があるのでこの中から好きなものを選ぶとWebで使える番号が出るのであとはそれをお好みの位置に入れればオッケー。

色の変更はすぐに右のデザインに反映されるので色々微調整をしながら自分のブログテーマにあった色に着地させることが可能です。

私の場合は「30代」がテーマになっているので比較的落ち着いたテーマカラーにしようと現在の色に落ち着いています。ぜひ参考にしてみてください。

8.コピペOKなデザイン変更「タイトル下グローバルナビゲーション」

カスタマイズ2:タイトル下にグローバルナビゲーションバーを表示 – ZENO-TEAL

このサイトのデザインをコピペして以前

「【まとめ】ブログネタに困らない「カテゴリー」整理方法」でも紹介した方法で仕分けたカテゴリーをグローバルナビゲーションバーに入れました。

カテゴリーに悩んでいる方は先に決めておかないとまたカテゴリー名を変更しないといけませんし、ブログカテゴリーを決めると何について書いていいかもわかりネタがつきなくなるので早めに決めるべきです。

私の場合は、「仕事」「お金」「趣味」「生活(カテゴリーではライフスタイル)」地元ネタとして「東海三県」にしましたが、スマホの場合偶数の方がカッコ良いので「プロフィール」を追加しました。

フッターで問い合わせやプライバシーポリシーを出しているのですが、ここに掲出されている方もいるのでそこはお好みで変えても良いと思います。

9.コピペOKなデザイン変更「シェアボタン設置」

カスタマイズ3:記事の上下にシェア用ソーシャルボタンを設置 – ZENO-TEAL

記事を見てもらってシェアしてもらいたいのは誰しもが思うことですが、このデザインが私の中では一番良かったです。

以前はどれだけシェアされたかカウントが出るものを使用していたのですが動きが遅いため少しお休みしています。

透かしでロゴがはいっているのがオシャレで私的には気に入っていますが他にもいくつかデザインはあったのでお好みで選べるのもこのサイトの良いポイントです。

10.コピペOKなデザイン変更「フッターにコンテンツ表示」

カスタマイズ4:フッターにコンテンツを表示 – ZENO-TEAL

ブログデザインを参考にさせていただいているオークニさんの記事でも発しておりますが、はてなブログのフッターはあまりよくありません。

そこで上記のサイトのブログデザインをコピペしてフッターを作りました。

意識したのはあまり情報量を多くしてしまうとスマホだとたくさんスクロールしなくてはいけないので、必要な情報を入れるようにしました。

また以前はサイトバーで入れていたのですがこよデザインによりフッターでお問い合わせについてとプライバシーポリシーを入れることにしました。

スッキリまとまっているのでなかなか気に入っているデザインのひとつで、参考にしてよかったなと思いました。

10.コピペOKなデザイン変更「読者になるボタン・SNSフォローボタン」

コピペOK!読者になるボタンやSNSフォローボタンのカスタムCSS | OHAMAstyle

上記サイトのよいところは使っていないものは削ることができ、さらにレスポンシブに対応しているところです。

私ははてなブログ読者とツイッターしかいれていませんが他にも入れることができますので、自分が使っているSNSをいれてもリバランスして組み込んでくれるので優秀です。

11.この記事が気に入ったらフォローを設置

はてなブログでアイキャッチ画像を使って「この記事が気に入ったらフォロー」を設置 – FOXISM

ZENO-TEALを創っていらっしゃる方のサイトを参考にさせていただきました。元々フォローボタンを設置したいと考えていたところあいまいみーさんも使用していたので私も参考にさせていただきました。

はてなID/ブログドメインを自分のものに置き換える部分にてこずりましたが、はてなブログのダッシュボード→「設定」を選び、上のURLを見るとhttp://blog.hatena.ne.jp/はてなID/ブログドメイン/configになっており、ここからコピペすればOKなので、ぜひ参考にして自分のリンクを設定してみてください。

12 .その他使っているコピペOKなデザイン

12-1.太文字をマーカーにしない設定

元々ZENO-TEALでは、強調したときに勝手にマーカーがつくような設定がされていますが、これをはてなブログアプリでやるとクドい記事になってしまいます、

そのためこのブログでは強調を使ってもマーカーが付かないように、次のデザインCSSに入れています。

.entry-content strong{background:none;}

12-2.アイキャッチ画像の大きさ

こちらも参考にさせていただいたのはあいまいみーさんです。

このツイートの通り、728×410にしてみました。

 12-3.見出しのカスタマイズ

コピペで簡単!CSSではてなブログの見出しをカスタマイズ! – NO TITLE

上記記事を参考にさせていただいたことで、ZENO-TEALの気になっていた見出しのパンチの薄さにメスを入れて形になりました。

上記記事を参考にして見出しのリセットをすることによって正確に見出しのカスタマイズにも成功しています。

特に色については全体的に同色で統一することでサイト自体もしっくりとなるような配色になっていますので落ち着いて長い間ブログをご覧いただくこともできます。

12-4.表挿入でスマホでスクロール表示させる方法

表(テーブル)をスマホサイト閲覧時に横スクロール表示する設定方法 – tamasaburo

表を挿入するとどうしても横にビヨーんと伸びてしまうので、上記サイトを参考にさせていただき、表が延びてしまったときは横にスクロールできるように変更いたしました。

13.はてなブログのデザイン変更でお世話になった方のご紹介

最後に今回はてなブログのデザイン変更についてご指導や情報提供をしてくださった方のご紹介をさせてください。

★あいまいみーさん

www.imyme9.com

★横浜メガネさん

www.megane18.com

★オークニさん

www.okuni.me

★さめはだ舞子さんさめって参る!

どなたも素晴らしいブロガーさんたちであり、私も皆様の助言とブログへの情熱を感じ刺激をもらえここまでたどり着くことができました。

改めてお礼申し上げます。

また、はてなブログの基本として「はてなブログ Perfect GuideBook」はかかさずチェックしここまでデザインに取り組んできました。

これからはてなブログをはじめようと思っている方はこの本は必須で、この通りに手続きをすれば、のちに「だからこれをやっておいたほうがいいのか!」「ちょっと時間かかったけど、やっておいてよかった~」と思えることしかありません。