初心者がチャレンジ!簡単に出来るところだけブログカスタマイズ

まいど! めいたく(@floor0429)です。

ブログを始めて6ヶ月が過ぎました。6ヶ月間を毎日更新を実践出来ています。記事を量産するのが成長の早道とは分かってはいるのです。でも無理をすると続かないので無理をしないように、本業に影響が出ないようにしていました。

6ヶ月継続出来たところで、そろそろブログの見た目、デザインを少し考えてみてもいいのではと思い、プチ程度ですがリニューアルしてみました。

今までカスタマイズを放置してきた理由

ブログを始めたときに、カスタマイズはテーマを選んだだけでした。まずは記事を書かないことには始まらないなと、ただただ書き続けていました。そんなときにオンラインサロン「イケダハヤトのブログ塾」(2018年5月現在運営していません。)を見かけて参加してみました。現在は退会しています。

数を書かないと始まらないということで、100記事書き上げたところで、ぼくのブログをみてもらってアドバイスをもらったんです。

オンラインサロン「イケダハヤトのブログ塾(現イケハヤメディアラボ)」「ヨッセンスクール」に参加してみて、決めたこと感じたこと

アドバイスは多岐に渡っていた

ざっくりと言いつつも、事細かにアドバイスをもらいました。まとめると記事をたくさん書いてからの話ってことでした。話はそこからだ!と。なのでカスタマイズは後回し、PVも1週間に1度みるくらいでした(笑)

ぼくがカスタマイズの際に参考にさせてもらったサイトです。ゆきひーさんありがとうございます。

当ブログで行ってきたはてなブログデザインカスタマイズまとめ! – Yukihy Life
PR:はてなブログのテーマ「Naked」を作成しました!デフォルトでもカスタマイズもしやすいテーマです。よろしければご利用ください!“ www.yukihy.com 今までいろいろとはてなブログをカスタマイズしてきて、特にシェアボタンなどはいろんなところで使われているようでありがたいです! 数も多くごちゃごちゃになってきたので、一旦まとめたいと思います。 新しいカスタマイズを行い次第、この記事にどんどん付け加えていこうと思っています。

かなり時間がかかりました。一度失敗してハマったり・・・(泣)css等の知識がないから余計に時間がかかりますよね。センスがあるのかないのか分かりませんが、直感です!ほとんどこの「ゆきひー」さんのサイトの気になるものを上から順番に設定していった感じです。

見出しのデザイン

もともとのテーマに左に縦某が入って色がついているので、知識がないのでそれを利用したデザインにしました。基本は青系が好きなので、気にいった感じにデザインしてみました。コピペで出来るのがいいですね。

コピペ一発ではてなブログ見出しをカスタマイズ!ちょっとの工夫で印象が格段に変わる! – Yukihy Life
最近、カスタマイズばかりしているゆきひーです。見よう見まねで一通りやっています。デザインとかかなり難しそうだなと思っていたのですが、最初の数個を理解すると意外と応用範囲が広いことに驚いています。 僕がブログを始めたときに困ったのが、見出しをカスタマイズしたいのに全くできないというものでした。「見出し おしゃれ」とかって検索すると本当に豪華なオシャレなのが出てくるんですよね&。ちょっと線入れたいだけなのに!みたいな。 なので、非常に簡単なものばかりですが、ある意味無機質な見出しコードを10個下に書いていきます。無機質なのでかぶってもOKっす。 基本的にコピペでOKなので活用してみてください!

SNSでのシェアボタン

記事下のデザインってデフォルトだと、すっきりしない感じで視認性も悪かったんですよね。見た目が綺麗になると読んでいただいている方にも気分よくシェアしてもらえるかなって。「はてブ」や「Facebook」等のシェアボタンを変更しました。記事の上下に設置しました。せっかく熱意を持ってかいた記事は読んでもらいたいですもんね。

【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 – Yukihy Life
コピペコードをうつす前に、必ず以前のコードをメモ帳にバックアップしておくなどの対策をしておくようにしてください。 シェアボタンを設置する上で、何らかのトラブルや損失・損害等につきましては一切責任を問わないものとします(一応)。 2015/11/21追記:11/20より、ツイッターのシェア数の取得ができなくなりました。(参考:持続的なプラットフォームのための難しい決断 | Twitter Blogs)これにより、ツイッターのシェア数の部分を「Twitter」と表示するように変更しました。 2016/1/11追記2:当ブログのシェアボタンを使っているかたのみ、Twitterのシェア数を表示させるよ&

これ3Dボタンになってるんですよ!なんかかっこええ!

はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2) – Yukihy Life
コピペコードをうつす前に、必ず以前のコードをメモ帳にバックアップしておくなどの対策をしておくようにしてください。 シェアボタンを設置する上で、何らかのトラブルや損失・損害等につきましては一切責任を問わないものとします(一応)。 2015/11/21追記:11/20より、ツイッターのシェア数の取得ができなくなりました。(参考:持続的なプラットフォームのための難しい決断 | Twitter Blogs)これにより、ツイッターのシェア数の部分を「Twitter」と表示するように変更しました。 2016/1/11追記2:当ブログのシェアボタンを使っているかたのみ、Twitterのシェア数を表示させるよ&

こっちはフラットボタン。これもシンプルでいいです。でもぼくは3Dボタンを設定しました。

SNSでのフォローボタン

はてな購読ボタン」、「Twitterのフォローボタン」「feedly登録ボタン」の3つを設置しました。デザインは丸いのにしました。丸いと目立つかなぁと思いまして(笑)これは記事下とサイドバーに設置。自分自身で出来た!って達成感がありましたコレ。

特にfeedlyって使ったことないんですよね。RSSリーダーの存在は知ってましたが、使ってみるとすごく便利。これ利用していないってアホだった・・・。首くくるレベルです。これも調べて今は、iphoneアプリの「Sylfeed」っていう有料アプリを使いだしました。やばすぎるこのアプリ。

Sylfeed

240円
(2016.01.06時点)
posted with ポチレバ
コピペ+±ではてなブログにSNSフォローボタンを設置するカスタマイズ – Yukihy Life
9/7追記:全体的にボタンのサイズが大きかったり、他のテーマでやると、円形のフォローボタンのデザインが悪かったりしたので、調整をしました。 また、サイドバーにも馴染むようなフォローボタンサンプルも追加しました。 9/9追記:feedlyのURLが間違っていました!「http://www.yukihy.com/feed」を「自分のブログのURL」に変更ではなく、「http://www.yukihy.com」を「自分のURL」に変更でした。大変失礼いたしましたm(_ _)m 10/2追記:独自ドメインを取得している方は、はてなブログでのドメインを入れないとFeedlyのフォロワー数が違くなるようで&

Milliard関連ページのプラグインの設置

回遊率ってものが大事ってことで、これで写真とタイトルが簡単に見れて興味があるものへスグに飛べるので便利だなと設置しました。これはめちゃくちゃ難しいのかなって思ってましたが、「え?」っていうくらい簡単に設置できて表紙抜けしました。

各ブログへの設置方法が丁寧に書いてくれています。

Milliard関連ページプラグインについて | シスウ株式会社

この中の「はてなブログへの設置」では

Milliard関連ページをはてなブログで設定する方法 | シスウ株式会社
Javascriptのコードを生成 下記のページにて、お持ちのURL等を入力してscriptコードを作成します。 はてなブログにログインし、「デザイン」へ 左上をクリックした後出現するメニューの中の、「デザイン」をクリックします。 補足ですが、デザインのアイコンは下記のような画像です。 遷移後は、下記のような画面が表示されます。 デザインのカスタマイズ画面へ デザイン画面の左ペインのスパナのようなマークをクリックする。 すると、下記の様にカスタマイズメニューが出現します。 記事下のカスタマイズをする 「記事」をクリックすると、ソーシャルパーツのカスタマイズが見えます。 この左ペインを「記事下」が現れるまでスクロールします。(下画像参照) この画面の「記事下」に一番最初に生成したscriptコードを貼付けます。 下記のコードは、hoshi0406.hatenablog.comの例です。 張りつけ後、「変更を保存する」をクリックします。 変更の保存ボタンは左ペインの最上部にあります。 スマートフォンの設定をする(無料ユーザ) 左ペインのスマホマークをクリックします。 上記の画像のページの中央部、「PCと同じHTMLを設定する」をチェックします。 記事上・記事下にMilliard関連ページ以外で設定されているコードが、PC専用だった場合、表示が崩れる可能性があります。(例:width:1000pxなどを指定しているCSS) ですので、上記の設定をした場合には、スマートフォンで表示がおかしくならないかどうかご確認下さい。 スマートフォンの設定をする(Pro) Proの場合には、記事下のカスタマイズを利用すれば問題なく設定出来ます。 表示されるまで 上記の手順でブログ側での設定は完了ですが、すぐには表示されません。 お手数ですが、サーバ側で記事の関連付けを行うまでお待ち頂きます。 通常、この処理は10分から20分ほどかかりますが、記事数が多い場合には多くの時間がかかることもあります。 すると、サムネイルが表示されていない関連ページが出現するようになります。 サムネイルが表示されるまでには、さらに3時間-4時間ほどお待ち頂きます。

こんな感じで詳しく書かれていました。

2015−11−12−1

スマホ画面でのはてな関係リンクの消去

スマホでみると「はてなブログ開発ブログ」とか「週間はてなブログ」等の不要なリンクがあるのでそれを消去しました。ここのプロフィールは表示したいので、コードは抜いて設定しました。

はてなブログ(PC版)の設定:ヘッダ・フッタ・IDの非表示 – ぴよ吉の忘備録(ブログサイト運営)
ブログのヘッダとフッタを非表示にする 下記を参考に設定した。 有料版「はてなブログPro」前提の設定。 ブログのヘッダとフッタを非表示にできるようにしました(有料プラン) – はてなブログ開発ブログ 「管理画面>設定>詳細設定」で下記をチェック。 キーワードリンク 記事にキーワードリンクを付与しない Google AdSense 広告 記事にGoogle AdSense 広告を表示しない ヘッダとフッタ ブログにヘッダとフッタを表示しない(PC版のみ) 記事下のはてなIDを非表示にする 下記を参考に設定した。 はてなブログの記事下にある「はてなID」(アカウント名、ニックネーム)を非表示にする&

アフィリエイトの申請

忍者AdMax」の設置と「Amazonアソシエイト」、「楽天アフィリエイト」、「iTunesアフィリエイト」の申し込みをして承認されました。ちょっと怖かったのが、iTunesアフィリエイトからの返信がフィッシングメール扱いで、迷惑メールフォルダに入っていてびびってました。調べてみたら問題なくて安心しましたんですけどね。

ブックマークレットの活用

これやばいです。てか最高です!カエレバ、ヨメレバ、ShareHtmlの設置はしたんですが、カエレバ、ヨメレバのボタン化で、どこを間違えたのか分からず、思うように設置出来ません。いまだに謎です。ここはまた改善の余地ありです。オンラインサロン「ヨッセンスクール ブログ科」で教えてもらってカエレバ、ヨメレバうまくボタン化できました!ヨスさんありがとうございます!

カエレバのAmazonや楽天へのリンクを一括で簡単に「ボタン化」する方法 | ヨッセンス
ブログの記事の中で商品なんかを紹介することがあります。そのときに必須のブックマークレットが「カエレバ」です。この「Amazon」や「楽天市場」へのリンクテキストを一括でボタンにするCSSを紹介します!

まとめ

終わってから考えてみると、かなり簡単に出来ました。やっているときは分からなくて必死こいてましたよ。次にやってみと言われたらめちゃくちゃ短時間で出来ます! 少しCSSの仕組みは分かるようになりました 。あくまで少しだけ!もちろんスマホにも同じように対応しました。

自分自身でいうのもなんですが、ちょっとカスタマイズすると格段に読みやすくなった気がします。気づいたところは、ちょっとづつ変更を加えていこうと思っています。たまにデザイン崩れているときがあると思いますが、色々と試しているところですので、大目に見てやってください。

まだカスタマイズしていないのなら、このくらいはした方が見やすくなりますよ!

ゆるくいこー。

最後まで読んでいただき、ありがとうございます。

お、いいじゃんと思ったらSNSで拡散、フォローしてください!