ブログランキング参加中です！
＼あなたの応援が励みになります／
はてなブログのデザインが全くわからない私でしたが、このブログについては全部コピペで作っていますので、ブログ初心者でも絶対に失敗しないサイトばかりを集めました。
どうも、ブログデザイン超初心者のソラマメです。
ブログをはじめた方のすべてが思うことは、「自分のブログ、もっとデザインこうしたいな～」ではないでしょうか。
当ブログを運営している私もブログをはじめたときに見よう見まねでデザインcssをいじり、なんとなくデザインができているブログとして運営していました。
ただ…やっぱり違うんですよね(ToT)
いい記事にはいいデザインがあり、いいデザインはやっぱり記事も素晴らしいのですが、この両方を追う作業と言うのはブログをはじめた方には非常に辛いんですよね。
記事を更新しないとアクセスは増えないし、だけどデザインがグチャグチャだと離脱されるんんじゃないかと思うし…。
だから！
こんなブログ初心者の私でもここまでのデザインができましたので、この記事では、はてなブログのデザインを全部コピペできる初心者でも絶対に失敗しないサイトだけを集めました。
これだけのサイトをコピペだけすれば、最短で1時間ほどでブログデザインが完成するはずですので、まじでオススメです。
できれば私の数日間を返してほしいくらいですが、それくらいの良サイトを集めましたのでぜひご覧ください。
【はてなブログのテーマ】初心者にはコレ
今回私のブログテーマにつきましては、悩みに悩みましたが最終的にはZENO-TEALを使用しています。
今回私がはてなブログ初心者にオススメしたいブログテーマをZENO-TEALにしているのは、次の3つの理由からです。
- デザインがレスポンシブだから
- 記事が見やすいから
- トップがカード風で見やすいから
まずはてなブログ初心者にPCとスマホ、両方のデザインを作り込むことは不可能なのでZENO-TEALのようにレスポンシブ対応していることを最も重要視しました。
またZENO-TEALはワードプレスでいうと、ストークのようなテーマであり、固すぎず柔らかすぎず、どの年代にも読みやすく、かつ色などで変化をもたらすことができるようになっています。
またブログトップが個性的でカード風になっているので、画像でよさそうな記事をクリックしてもらいやすい感じがグッドでした。
この作業がこんなにも詰まるとは思っても見ませんでしたが、ブログ初心者であれば逆にZENO-TEALは最も取り入れやすいのではと私は判断しております。
というわけで早速ZENO-TEALをインストールしてもらいたいのですが、待ってください！絶対に待ってください！いいですか、フリじゃないですよ！
次に私が数日間苦しめられた失敗談も含めてテーマ変更前にやるべきことをお伝えしますので、テーマのインストールは下記を御覧いただいた後にお願いします。
はてなブログのデザイン変更前に失敗しない方法
①「全記事表示」
あ、このテーマいいなぁと思ってZENO-TEALをインストールした私は2つのことで数日間悩んでいました。
ブログカード風にならない…。
いや、ブログカード風があなたの持ち味なのに、なんで自分のブログに変更したのに変わらないの？なんで？もう…いや……。
そんな悩みを解決してくださったのは、ツイッターもフォローさせていただいておりますあいまいみーさんのこの返信でした。
「ZENO-TEAL」でカスタマイズされる方はご参考までにこちら見てみてくださいっ 🙌
グデザイン［ZENO-TEAL］カスタマイズまとめ（あいまいみーのきたろぐ版） https://t.co/hJCG1jIlmo @imyme_999
— あいまいみー (@imyme_999) 2018年2月15日
たしかに私が最初に設定したブログでは記事一覧にチェックを入れていましたので、どうやらそこが良くなかったみたいです。
指示を頂いた通り、設定→詳細設定→トップページの表示形式を全文形式へ変更することにより、ブログトップがカード風になりました。
まずZENO-TEALに変更してこの悩みに陥る方は結構いるようで、私のこの記事で少しでも悩めるZENO-TEAL希望者が救われることをねがっています。
まさかボタンひとつの作業で数日も悩まされるとは…なので、ZENO-TEALをインストールする前には必ず全文形式をしておきましょう。
これが絶対にZENO-TEALにおけるブログデザイン変更を失敗しない方法その1です。
②「続きを読む」
はてなブログのデザインテーマであるZENO-TEALに変更したらブログトップがカード風になりますが…クリックすると画像が出てしまったり、リンク貼ってあるAmazonに飛んでしまったり…。。。
こんな不具合が出てしまいましたのでこれまた悩みましたが、これもあいまいみーさんのブログを読み解決しました。
ZENO-TEALのテーマでは、「続きを読む」を記事の中に入れないとブログトップのカード風から記事に飛ばなくなっていますので、すべての記事にこの「続きを読む」を入れないといけません。
そこを見落としていた私は画像が出てしまったり、アマゾンに飛んでしまったりしていましたので、すべての記事に続きを見るを挿入したところトップから記事に飛ぶことができました。
だから。
ブログ初心者の方はまだ記事数が多くないはずですので続きを読むを挿入する作業が少なくてすむはずなので、ZENO-TEALに変更することをオススメしています。
私が今回取り組んだのが123記事だったのですが、無心で続きを読むを入れ続けたら1時間ほどで済みましたからきっと100記事くらいの方あればそこまで手間ではないはずです。
手間を惜しんでこれまでのブログテーマでいくか、新しいデザインにするか迷っていた私も決心して変えてこのデザインになったので満足しています。
これが絶対にZENO-TEALにおけるブログデザイン変更を失敗しない方法その2です。
③デザインを保存
ブログデザインを変えるときに私が何度も失敗したのは、以前のブログデザインを保存せずに更新してしまったため、もとに戻せなくなったことです。
なのでブログデザイン初心者の方であれば、かならずこまめにデザインを保存しておきましょう！
私も何度「えいやー」と変更後にコントロールzを押したことか…。
いくらコントロールzを押してもツイッターで嘆いてもお金を出してももとのデザインに戻すことはできませんので、メモでもワードでもなんでもいいのでこまめにとっておきましょう。
これが絶対にZENO-TEALにおけるブログデザイン変更を失敗しない方法その3です。
スポンサーリンク
html・cssコピペOKな変更
①ブログカラー
このサイトのデザインをコピペさせていただき、サイト全体のドット模様であった背景色を白くし全体的なカラー変更をしています。
元々ZENO-TEALで設定されていた色も捨てがたかったのですが、30代ということもあり落ちつた雰囲気ということで、全体のカラーコードについては「#286287」で設定させていただいております。
このコードを全体で使っているのでマイナーチェンジをしたいときには、すべてのこのコードを置換することでちょっとした模様替えくらいはできます。
②タイトル下グローバルナビゲーション
このサイトのデザインをコピペして以前
「【まとめ】ブログネタに困らない「カテゴリー」整理方法」でも紹介した方法で仕分けたカテゴリーをグローバルナビゲーションバーに入れました。
カテゴリーに悩んでいる方は先に決めておかないとまたカテゴリー名を変更しないといけませんし、ブログカテゴリーを決めると何について書いていいかもわかりネタがつきなくなるので早めに決めるべきです。
私の場合は、「仕事」「お金」「趣味」「生活(カテゴリーではライフスタイル)」地元ネタとして「東海三県」にしましたが、スマホの場合偶数の方がカッコ良いので「プロフィール」を追加しました。
フッターで問い合わせやプライバシーポリシーを出しているのですが、ここに掲出されている方もいるのでそこはお好みで変えても良いと思います。
③シェアボタン設置
記事を見てもらってシェアしてもらいたいのは誰しもが思うことですが、このデザインが私の中では一番良かったです。
以前はどれだけシェアされたかカウントが出るものを使用していたのですが動きが遅いため少しお休みしています。
透かしでロゴがはいっているのがオシャレで私的には気に入っていますが他にもいくつかデザインはあったのでお好みで選べるのもこのサイトの良いポイントです。
④フッターにコンテンツ表示
ブログデザインを参考にさせていただいているオークニさんの記事でも発しておりますが、はてなブログのフッターはあまりよくありません。
そこで上記のサイトのブログデザインをコピペしてフッターを作りました。
意識したのはあまり情報量を多くしてしまうとスマホだとたくさんスクロールしなくてはいけないので、必要な情報を入れるようにしました。
また以前はサイトバーで入れていたのですがこよデザインによりフッターでお問い合わせについてとプライバシーポリシーを入れることにしました。
スッキリまとまっているのでなかなか気に入っているデザインのひとつで、参考にしてよかったなと思いました。
⑤読者になるボタン・SNSフォローボタン
上記サイトのよいところは使っていないものは削ることができ、さらにレスポンシブに対応しているところです。
私ははてなブログ読者とツイッターしかいれていませんが他にも入れることができますので、自分が使っているSNSをいれてもリバランスして組み込んでくれるので優秀です。
⑥この記事が気に入ったらフォローを設置
ZENO-TEALを創っていらっしゃる方のサイトを参考にさせていただきました。元々フォローボタンを設置したいと考えていたところあいまいみーさんも使用していたので私も参考にさせていただきました。
はてなID/ブログドメインを自分のものに置き換える部分にてこずりましたが、はてなブログのダッシュボード→「設定」を選び、上のURLを見るとhttp://blog.hatena.ne.jp/はてなID/ブログドメイン/configになっており、ここからコピペすればOKなので、ぜひ参考にして自分のリンクを設定してみてください。
その他はてなブログのカスタマイズ
①太文字をマーカーにしない設定
元々ZENO-TEALでは、強調したときに勝手にマーカーがつくような設定がされていますが、これをはてなブログアプリでやるとクドい記事になってしまいます、
そのためこのブログでは強調を使ってもマーカーが付かないように、次のデザインCSSに入れています。
.entry-content strong{background:none;}
②アイキャッチ画像の大きさ
こちらも参考にさせていただいたのはあいまいみーさんです。
このツイートの通り、728×410にしてみました。
アイキャッチのサイズの質問がきたのでゆるっとお答えします ∠( ‘ω’)／
［Canvaでアイキャッチつくるときおすすめサイズ］
・Facebook（大）サイズ
・728×410でつくってます 🙌✨
JPEGで書き出して、圧縮は JPEGmini で大体やってます ( ˆoˆ )/
さらに詳しく→
— あいまいみー (@imyme_999) 2018年2月15日
③見出しのカスタマイズ
上記記事を参考にさせていただいたことで、ZENO-TEALの気になっていた見出しのパンチの薄さにメスを入れて形になりました。
上記記事を参考にして見出しのリセットをすることによって正確に見出しのカスタマイズにも成功しています。
特に色については全体的に同色で統一することでサイト自体もしっくりとなるような配色になっていますので落ち着いて長い間ブログをご覧いただくこともできます。
④表挿入でスマホでスクロール表示させる方法
表を挿入するとどうしても横にビヨーんと伸びてしまうので、上記サイトを参考にさせていただき、表が延びてしまったときは横にスクロールできるように変更いたしました。
はてなブログの基本として「はてなブログ Perfect GuideBook」はかかさずチェックしここまでデザインに取り組んできました。
これからはてなブログをはじめようと思っている方はこの本は必須です。
この通りに手続きをすれば、のちに「だからこれをやっておいたほうがいいのか！」「ちょっと時間かかったけど、やっておいてよかった～」と思えることしかありません。
この本ははてなブログで記事を書いている方にとってはバイブル的な本で、買わない手はない一冊です。
その理由は下記記事でも紹介しています。
Googleサーチコンソールとグーグルアナリティクスの登録方法が詳しく載っていて、初めに私は取り組んだのでブログの分析とリライトができて結果もついてきています。
もし、これからはじめる方、はじめて間もない方がいたらぜひ手にとってもらいたい本です。
ここまでのデザインが全部コピペできるのは本当にありがたいこと。
すべて有料級の情報だと思っておりますので、ぜひ気になる項目があれば上記優良サイトへ足をお運び下さい。
現在は、はてなブログからワードプレスに引越しました。
お引越しに伴っては外注でご協力をいただき無事にリスタートしております。
その件につきましては、別記事にて紹介しておりますのでこちらもぜひご参考ください。
＼ブログランキング10位を目指してます／
▼応援してくれる人はポチっとお願いします▼
～いまだけのお得案件③～
①大和コネクト証券
ポイントサイト経由の口座開設でMAX8,000円。紹介コード利用で相互ポイントもらえます▼
紹介コード：RTAFBUAZ
>>>大和コネクト証券
②みんなの銀行
口座開設で現金1,000円+デビットカード利用で20％還元（最大10,000円分）普段の買い物やAmazonで買い物予定のある人は口座作ってからがお得です！
紹介コード：zUeyGbCL ③UI銀行
口座開設で現金500円+預金の金利が1%になるキャンペーンを開催中です。
紹介コード：sora1981
