まいど! めいたく(@floor0429)です。
ブログを始めて6ヶ月が過ぎました。6ヶ月間を毎日更新を実践出来ています。記事を量産するのが成長の早道とは分かってはいるのです。でも無理をすると続かないので無理をしないように、本業に影響が出ないようにしていました。
6ヶ月継続出来たところで、そろそろブログの見た目、デザインを少し考えてみてもいいのではと思い、プチ程度ですがリニューアルしてみました。
今までカスタマイズを放置してきた理由
ブログを始めたときに、カスタマイズはテーマを選んだだけでした。まずは記事を書かないことには始まらないなと、ただただ書き続けていました。そんなときにオンラインサロン「イケダハヤトのブログ塾」(2018年5月現在運営していません。)を見かけて参加してみました。現在は退会しています。
数を書かないと始まらないということで、100記事書き上げたところで、ぼくのブログをみてもらってアドバイスをもらったんです。
オンラインサロン「イケダハヤトのブログ塾(現イケハヤメディアラボ)」「ヨッセンスクール」に参加してみて、決めたこと感じたこと
アドバイスは多岐に渡っていた
ざっくりと言いつつも、事細かにアドバイスをもらいました。まとめると記事をたくさん書いてからの話ってことでした。話はそこからだ!と。なのでカスタマイズは後回し、PVも1週間に1度みるくらいでした(笑)
ぼくがカスタマイズの際に参考にさせてもらったサイトです。ゆきひーさんありがとうございます。
当ブログで行ってきたはてなブログデザインカスタマイズまとめ! – Yukihy Life
かなり時間がかかりました。一度失敗してハマったり・・・(泣)css等の知識がないから余計に時間がかかりますよね。センスがあるのかないのか分かりませんが、直感です!ほとんどこの「ゆきひー」さんのサイトの気になるものを上から順番に設定していった感じです。
見出しのデザイン
もともとのテーマに左に縦某が入って色がついているので、知識がないのでそれを利用したデザインにしました。基本は青系が好きなので、気にいった感じにデザインしてみました。コピペで出来るのがいいですね。
コピペ一発ではてなブログ見出しをカスタマイズ!ちょっとの工夫で印象が格段に変わる! – Yukihy Life
SNSでのシェアボタン
記事下のデザインってデフォルトだと、すっきりしない感じで視認性も悪かったんですよね。見た目が綺麗になると読んでいただいている方にも気分よくシェアしてもらえるかなって。「はてブ」や「Facebook」等のシェアボタンを変更しました。記事の上下に設置しました。せっかく熱意を持ってかいた記事は読んでもらいたいですもんね。
【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 – Yukihy Life
これ3Dボタンになってるんですよ!なんかかっこええ!
はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2) – Yukihy Life
こっちはフラットボタン。これもシンプルでいいです。でもぼくは3Dボタンを設定しました。
SNSでのフォローボタン
「はてな購読ボタン」、「Twitterのフォローボタン」「feedly登録ボタン」の3つを設置しました。デザインは丸いのにしました。丸いと目立つかなぁと思いまして(笑)これは記事下とサイドバーに設置。自分自身で出来た!って達成感がありましたコレ。
特にfeedlyって使ったことないんですよね。RSSリーダーの存在は知ってましたが、使ってみるとすごく便利。これ利用していないってアホだった・・・。首くくるレベルです。これも調べて今は、iphoneアプリの「Sylfeed」っていう有料アプリを使いだしました。やばすぎるこのアプリ。
コピペ+±ではてなブログにSNSフォローボタンを設置するカスタマイズ – Yukihy Life
Milliard関連ページのプラグインの設置
回遊率ってものが大事ってことで、これで写真とタイトルが簡単に見れて興味があるものへスグに飛べるので便利だなと設置しました。これはめちゃくちゃ難しいのかなって思ってましたが、「え?」っていうくらい簡単に設置できて表紙抜けしました。
各ブログへの設置方法が丁寧に書いてくれています。
Milliard関連ページプラグインについて | シスウ株式会社
この中の「はてなブログへの設置」では
Milliard関連ページをはてなブログで設定する方法 | シスウ株式会社
こんな感じで詳しく書かれていました。
スマホ画面でのはてな関係リンクの消去
スマホでみると「はてなブログ開発ブログ」とか「週間はてなブログ」等の不要なリンクがあるのでそれを消去しました。ここのプロフィールは表示したいので、コードは抜いて設定しました。
はてなブログ(PC版)の設定:ヘッダ・フッタ・IDの非表示 – ぴよ吉の忘備録(ブログサイト運営)
アフィリエイトの申請
「忍者AdMax」の設置と「Amazonアソシエイト」、「楽天アフィリエイト」、「iTunesアフィリエイト」の申し込みをして承認されました。ちょっと怖かったのが、iTunesアフィリエイトからの返信がフィッシングメール扱いで、迷惑メールフォルダに入っていてびびってました。調べてみたら問題なくて安心しましたんですけどね。
ブックマークレットの活用
これやばいです。てか最高です!カエレバ、ヨメレバ、ShareHtmlの設置はしたんですが、カエレバ、ヨメレバのボタン化で、どこを間違えたのか分からず、思うように設置出来ません。いまだに謎です。ここはまた改善の余地ありです。オンラインサロン「ヨッセンスクール ブログ科」で教えてもらってカエレバ、ヨメレバうまくボタン化できました!ヨスさんありがとうございます!
カエレバのAmazonや楽天へのリンクを一括で簡単に「ボタン化」する方法 | ヨッセンス
まとめ
終わってから考えてみると、かなり簡単に出来ました。やっているときは分からなくて必死こいてましたよ。次にやってみと言われたらめちゃくちゃ短時間で出来ます! 少しCSSの仕組みは分かるようになりました 。あくまで少しだけ!もちろんスマホにも同じように対応しました。
自分自身でいうのもなんですが、ちょっとカスタマイズすると格段に読みやすくなった気がします。気づいたところは、ちょっとづつ変更を加えていこうと思っています。たまにデザイン崩れているときがあると思いますが、色々と試しているところですので、大目に見てやってください。
まだカスタマイズしていないのなら、このくらいはした方が見やすくなりますよ!
ゆるくいこー。
最後まで読んでいただき、ありがとうございます。
お、いいじゃんと思ったらSNSで拡散、フォローしてください!