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

スポンサーリンク

2015−11−12−2

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

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

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

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

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

オンラインサロン「イケダハヤトのブログ塾(現イケハヤメディアラボ)」「ヨッセンスクール」に参加してみて、決めたこと感じたこと
オンラインサロンには2つ参加してます。ひとつは『イケダハヤトのブログ塾(現イケハヤメディアラボ』で、もうひとつは『ヨッセンスクール ブログ科』です。今まで必要ないと頑なに避けてきたFacebookのアカウントもとって、色々と学んでいこうと。ふたつのオンラインサロンに参加している、そんな僕が思うことを書いていきます。現在、イケダハヤトのブログ塾(現イケハヤメディアラボ)はこの記事を書いた後に退会しています。 ブログで収入を得れる可能性 ブログは10年位前に2年半ほど、オンラインゲームであった出来事を書いていた時期がありました。普通に日記として書いてました。そしてまた、ブログを初めて副収入を得れたらと軽い気持ちで始めてみるかなーって。色々と調べていくうちにブログで生活している『プロブロガー』なる人がいると。結構有名ってことでしたが僕は知りませんでした。その人とは『イケダハヤト』氏です。 オンラインサロンは『堀江貴文』氏が始めたときにどんなのかって知っていたので、楽しそうだなと。そこでオンラインサロンをしているとのことで、4次募集くらいでしょうか、空きがあったので参加しました。少しでもブログについて色々と知れたらいいなと。 オンラインサロンには合う合わないがある そして初めて参加した、『イケダハヤトのブログ塾(現イケハヤメディアラボ)』ですが、今は退会しようとしています。ブログ初心者の僕にとっては、すべてが新鮮で得ることがいっぱいあります。ですが、ここで学んだことは『大量に記事を書かないとお話しになんない』ってのが参加して学んだ一番大きいこと。すごく分かります。記事をたくさん投稿することでわかってくることがある。徐々に言っている意味はわかってきました。(まだまだですが)そこでいろんな体験をさせてもらった。

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

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

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

当ブログで行ってきたはてなブログデザインカスタマイズまとめ! – Yukihy Life
PR:現在、月5件限定でブログデザインサービスを行っています。詳しくはお問い合わせからお願いいたします。 今までいろいろとはてなブログをカスタマイズしてきて、特にシェアボタンなどはいろんなところで使われているようでありがたいです! 数も多くごちゃごちゃになってきたので、一旦まとめたいと思います。 新しいカスタマイズを行い次第、この記事にどんどん付け加えていこうと思っています。

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

見出しのデザイン

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

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

SNSでのシェアボタン

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

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

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

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

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

2015−11−12−1

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

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

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

アフィリエイトの申請

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

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

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

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

まとめ

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

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

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

ゆるくいこー。

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

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

スポンサーリンク