はてなブログに移行したばかりでわからないことだらけなので、とりあえずカスタマイズとしてやりたいことや、やったことなどをメモ代わりにして書いていきたいと思いますφ(..)メモメモ
ブログを続けていくにつれ色々なところに手を加えてカスタマイズしていくわけですが、どうしても月日が過ぎるとその過程を忘れてしまい、「これって、どこで何をする為に入れた記述だっけか？」なんて事になったり、以前行ったカスタマイズと設定が衝突してしまいうまくいかないなんてことが多々ありますよね。
そんな時の為に、ここにメモすることで将来の自分の道標となりつつ、同じように悩む方へのちょっとしたアドバイスになればと思います。
- テーマで見た目を大きく変える(2016.10.26)
- 強調文字を蛍光ペン風に変更(2016.10.27)
- アマゾン商品の紹介をカエレバに
- アドセンス広告を記事中に自動的に入れるように
- パンくずリストの導入
- 記事が何分で読めるか？の自動表示
- ソーシャルボタンを記事の上下に表示
- 目次機能の追加と充実
- Webフォントの導入
- トップに戻るボタンを導入
- 記事の更新情報を載せたい
- 吹き出しを使った記事用のカスタマイズ
- 今後やりたいこと～Todoリスト～
テーマで見た目を大きく変える(2016.10.26)
テーマストアにて、テーマを適用することで、簡単に見た目を変更可能です。 ダッシュボードーデザイン を選んで一番下までスクロールすると、テーマストアへのリンクがあるので、そちらから好きなテーマを選んで適用するだけです。
現在こちらのブログでは
こちらを使用中。
強調文字を蛍光ペン風に変更(2016.10.27)
あちこちのブログを見ていてかわいいなぁというだけの好奇心で、こちらを導入。
ブログを閲覧していると、強調表示を太字ではなく蛍光ペン風にしているものをよく見かけます。早速、自分も！ということで、これまた諸先般を真似て蛍光ペン風にしてみました。※はてなブログPRO向けとなります。ご了承ください。以下は敬意を込めて、参照
www.kimanagu.com
色は好きな青にしておきました。
こんな風に表示されます。
アマゾン商品の紹介をカエレバに
アマゾン商品の紹介をカエレバに1本化し、見た目も整えました。
アドセンス広告を記事中に自動的に入れるように
こちらのサイトを参考にしました。
【はてなブログ】アドセンス広告を記事中に入れる方法 | ネットビジネスで起業して稼ぐ！30代妻子持ちが脱サラ田舎暮らし
netbiz-kigyo.com
パンくずリストの導入
こんな感じに表示されます。
こちらのサイトを参考に導入しました。
はてなブログにパンくずリストが導入されたのでこのブログにも導入してみた - 元アベンジャーのCOJ
パンくずリストの名前の由来は『ヘンゼルとグレーテル』から パンくずリストというものをご存知でしょうか。 簡単に説明すると、『ブログやサイトにおいて、今現在自分がどの階層にいるかを分かるようにする機能』……といったところでしょうか。これを設定しておくと、グーグルによる評価があがり、検索にもヒットされやすくなるという話もちらほら聞いたことがあります。 さて、このパンくずリストですが、今までこのはてなブログというサービスには存在しませんでした。そのため、これまではパンくずリストを自作したりする必要がありました。
motoavenger.hatenablog.com
解説
パンくずリストとはユーザーがサイト内のどの位置にいるかを視覚的に表示するためのものです。うちのようなブログは色々なカテゴリを扱っているので、サイトの構造が複雑になりがちなので、導入したいなぁと思っていました。
パンくずリストはSEOにも効果的だと言うことが挙げられます。
詳しい説明は割愛しますが、Googleのクローラーがサイトを評価する際に、パンくずリストがあるとページ内をスムーズに解析出来るためと言われています。
記事が何分で読めるか？の自動表示
記事内の文字数を数えて何分くらいで記事を読み終わるか？を自動的に表示します。
こちらのサイトを参考にしました。
滞在時間は本当に上がるの？読了までの所要時間を予測して表示するカスタマイズ - ばさのーと
こんにちは、つばさ（@tsubasa123）です。 www.ideaxidea.com ちょっと古いですがこちらの記事にインスパイアされたカスタマイズです。
basanote.hatenablog.com
解説
あちこちのサイトを見ていて、たまにこの所要時間◯分とか書いてあるのを見て、これはいいなぁと思っていました。
サイトの訪問者にとってその記事が長いかどうかってのは結構重要で、短ければその場で読むだろうし、長かったらブックマークなどして後で読むかも知れない。
その辺の事がサイトを読み進んでから分かるんじゃなくて、すぐに分かるってのはちょっとした親切で日本人らしいオ・モ・テ・ナ・シなのかぁと思ったりします。
ソーシャルボタンを記事の上下に表示
ソーシャルボタンの設置方法やデザインは色々あるんだけども、レスポンシブデザインに対応しているものの方が、スマホ表示に優しいと判断して、こちらをチョイス。
【FBシェア数非表示版】はてなブログにレスポンシブ対応のフラットなソーシャルボタンを設置する - よなかのはなし
先月Facebookの仕様が変わり、記事に設置していたボタンでシェアカウントを取得できなくなりました。
www.hiroseyonaka.com
解説
一応サイトの解説通りにやれば設置は可能だけども、Facebookのソーシャルボタンだけ表示されませんでした。
これは恐らくソーシャルボタン用のウェブフォントを使っていると判断して、Awesomeウェブフォントを読み込む設定を「設定→詳細設定→headに要素を追加」に下記のコードを追加しました。
<!-- webフォント(fontawesome)import --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
目次機能の追加と充実
こちらのサイトを参考に、はてな公式にある、[:contents]と書き込むと目次を表示してくれる機能に手を加えて、もっと使いやすくしました。
はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム - Yukihy Life
この間追加されたはてなブログの目次機能。どのモードでも、[:contents]と書き込むだけで目次がつくれるので、「凄い！」って思ったしとっても便利になりましたよね！ 今まで目次を自動生成するコードもあったのですが、特定の説明記事やリスト記事にだけ入れたいなと思っていたので、半ば諦めていました( ；´Д｀) それにちょっとコードを足すとグッと使いやすくなるので、いろいろとサンプルを紹介したいと思います。 はてなブログユーザー向けの記事になります。
www.yukihy.com
Webフォントの導入
どこだったか失念しましたが、どこかのブログを見ていて、ちょっとかわいらしいフォントを使用していたので、Webフォントを導入しました。
詳細は後日記入予定。
その後、読者の方から可愛いフォントを使っていると、エッチサイトっぽいと指摘を受け、Google+で採用しているNotoSansJapaneseに変更しました。
個人的には可愛いヤツのが好きなんだけどなぁ……。 ま、、、いいか。
トップに戻るボタンを導入
確かこのページを参考に導入したと思います。
コピペでどうぞ。はてなブログで「ページのトップへ戻る」ボタンをつけるカスタマイズ - ばさのーと
こんにちは、つばさ（@tsubasa123）です。 すべてのカスタマイズをオリジナルにするという目標に向けて一歩ずつ頑張っております。今日は簡単な奴、ページのトップへ戻るボタンを自作しました。 とりあえず全部コピペでいけるようにしております。まだ導入していない方、よろしければお試しください。
basanote.hatenablog.com
『ばさのーと』さんにはいつもお世話になってます。
たぶんこれからもお世話になりっぱなしだと思います(^_^;)
記事の更新情報を載せたい
あ、、、これは「はてなブログPro」を契約しないとダメなんですね。 まだまだプロなんかにはなれないので、アマチュアで頑張りたいと思います。
吹き出しを使った記事用のカスタマイズ
こちらの記事を参考にしてみました。
フキダシで会話形式のブログが書ける簡単CSS - 急がば 急いでまわれ！
こんにちは！いつの間にか14回目のカスタム記事！今回はブログでよく見かける『会話形式』の記事を簡単に実現させるCSSを作りました！ぜひご覧あれ！
georges.hatenablog.jp
吹き出しで使う顔はこちらから拝借しました。
今後やりたいこと～Todoリスト～
必ず読んでおきたい！はてなブログをカスタマイズする際に超参考になる記事まとめ - hacogaki
この記事は随時更新しております サイドバーの固定方法を追加（2016/10/12） このはてなブログもそれなりにカスタマイズしてきましたが、カスタマイズする際に多くの先人はてなブロガー様の知恵をお借りしています。 今回はそんな先人様に感謝の意も込めつつ、はてなブログカスタマイズの超参考になる記事をまとめました。 部分別でまとめているので、自分がカスタムしたい箇所から記事を探してみてください。
hacogaki.hatenablog.com
