こんにちは、つばさ（@tsubasa123）です。
最近、はてなブログのカスタマイズにどっぷりつかっております。楽しすぎです。正直、記事書くより楽しいです。
この10日間、いろんなブログを参考にさせていただき、できることや今後やりたいこと、やりたいけどはてなブログの特性上、実現が難しそうなことをコツコツと学習していましたが、そこそこなボリュームになっていました。
ということで、記録の整理と今後の当ブログのカスタマイズ計画をたてるために、ここでカスタマイズを紹介してくださっている記事をまとめて置くことにしました。
タイトルにもありますように、ブログ初心者から中級者の方がターゲットとなる内容なのかな、と思います。CSSやJavaScriptの知識が多少必要になるカスタマイズも含まれています。
ただ記事を貼っつけるだけだとなんか寂しいので、一言だけでも私の感想を添えておきます。
有名っぽいテーマ
まずはテーマの紹介から。最初はどれにしたらいいかわからないと思います。私もわかっていません。
とりあえず私が試してみたものの中から、割と有名そうなものを3つほどご紹介です。
最終的に当ブログで利用させていただいたテーマ。詳しいことはわかりませんが、フッターを管理できるところがすごいようです。私もそのうちいじってみようと思っています。
よく見かけるデザインですね。Twitterのボタンがふわふわしているのが気になります。デザインはかなり完成されているので、カスタマイズに興味がない方や記事の内容だけで勝負したい人に向いているかな、と思います。
俗に言うブロガーさんが使っているイメージのテーマ。他の2つに比べてコンテンツエリアの幅が広めにとられています。アドセンスのバナーに合わせてあるのかな？
長文を書く人にも向いているかもです。コンテンツが広い分、スクロール量を減らすことができます。スクロールが多いと心理的に負担が増えると聞いた覚えがあります。ソースがなくて申し訳ないですが、私もその通りだと思います。
ヘッダー
ブログの顔、一番最初に目につく場所はやはり作り込みたいところですよね、といいつつも当ブログは色を変えた程度で放置気味。絶賛画像を募集中ですので、どなたかご協力をお願いします。
メイン画像の設定
標準機能でシンプルに画像を登録する王道な手順とJavaScriptを利用していい感じに画像を配置する方法の2パターンが紹介されています。
はてなブログのヘッダーの画像の高さは200px固定らしいので合わせて作るかCSSをカスタマイズして調整する必要がありそうです。
グローバルナビゲーションを配置
この説明が一番わかりやすかったです。ちゃんとハンバーガーメニューも対応されています。ドロップダウンメニューにしなくても利用できそうです。
Googleアドセンスの上にドロップダウンメニューがかぶさってしまうと、規約違反になってしまい、広告を止められる可能性があります。特にサイドバーの上に広告を貼っている方は、被りやすいので気をつけて下さい。
これは知らなかったです。勉強になりました。ご利用になる皆さまもお気をつけください。
HTMLとかCSSとか苦手、って人はこちらのやり方がよさそうです。テンプレを使ったコピペ作戦です。
サイドバー
標準のモジュールを利用するだけでも十分ブログの運営は可能ですがやはりここにもオリジナリティは出したいですよね。
ヘッダーは第一印象を左右しますが、サイドバーはサイト内の情報を掲載したりSNSへの導線になったりとサイトの人気にも影響を与える重要な部分です。
フォローボタン
記事の上下用とサイドバー用、そしてスマホ用と合計11種類のコードが用意されています。アニメーションがいろいろあってみるだけでも結構楽しかったです。
このボタンもよく見かけます。白抜きなので軽やかなデザインがすきならこっちを選ぶといいと思います。
アニメーション好きならこちら。マウスオーバーすると、ぬるっっと動きます。気持ちいい動きなので一度ご覧ください。
シェアボタン
当ブログではこちらのデザインを使わせていただきました。シェア数を取得するためにJavaScriptを利用していますが、コピペで済むように配慮されています。助かります。
こちらのデザインもよく見かけます。こちらも同様にシェア数も表示されるようになっています。お好みでどうぞ。
コンテンツ追随
今一番やりたいやつです。Qiitaというサービスのように、ここに記事のメニューを入れるカスタマイズに奮闘中です。
こっちのほうがコード量が少ないので分析は簡単かもしれません。どちらも当ブログに導入時にしっかり分析する予定です。
記事一覧のタブ化
二番目にやりたいやつです。とはいえ、当ブログにはまだそんなに記事がないので後回しになりそうです。
「記事一覧の」と書きましたが、プロフィールやその他のコンテンツでも同様の手順でタブ化できますので、応用次第ではおもしろいこともできそうです。当ブログに実装する際に検証してみようと思います。
Twitterタイムライン表示
やるか迷っているやつです。入れたいんですけど、正直Twitterの使い方がわからないので保留としました。
FacebookのLikeBox設置
happylife-tsubuyaki.hatenablog.com
今のところ当ブログに設置する予定はありませんが、需要は多いと思いますのでご紹介だけ。Facebookページの作り方から丁寧に紹介されていますので新しく始めたい人にも参考になると思います。
ブログカード設置
これは簡単にできる割りに目立つからカスタマイズが苦手な人におすすめな方法だと思います。私も一押しの記事が書けたら導入予定です。
Amazonへのリンク設置
自作画像を利用してリンクを設定できるらしいです。知らなかった。ブログのデザインを損ねずにリンクが張れるのはうれしいですね。
メインコンテンツ
記事の部分です。機能的なものとデザイン的なものが混在してしまっていますがご愛敬ということで。
見出しデザイン
私をカスタマイズ地獄へ導いてくれた記念すべき記事がこちらだったような。割とシンプルというかポピュラーな見出しが紹介されています。
先ほどのより少し凝ったデザインが多めです。紹介されている「見出しタイプ4」が個人的には好きでした。
見出しにアイコンをつけるという手もありますね。
はてなブログ向けの記事ではないですが、見出し50選。かなり高度なテクニックが使われています。はてなブログでもHTMLは編集できますので、導入することも可能です。このレベルでCSSデザインができるってうらやましいです。
見出しまとめのまとめ。見出しジャンキーの方は幸せになれる記事だと思います。。
目次
公式目次機能のリストを数字に変更するカスタマイズです。結構導入されている方が多いようなので私も導入しましたが、現在独自で新しい機能を作成中です。
続きを読む
クリッカブルなことを伝えるために色や動きを加えます。色が変わるはよく見かけますね。「枠線が重なる」が好きです。
こちらは積極的に動かしていく感じの装飾です。個人的には「丸が回転」が好き。この系統の装飾は好き嫌いが結構はっきりわかれるケースが多いので導入する時は注意が必要です。
ページの先頭に戻る
当ブログはこちらをもとに少しカスタマイズしたコードを利用しています。CSSは使わせてもらっています。ありがとうございました。
こっちのデザインも見かけます。アイコンにWEBフォントを使っていない分高速かもしれません。
関連記事の表示
JavaScriptコードを読み込むだけでOKです。絞り込み等できて高機能なやつです。
こちらも試したんですが、設定が上手くいかず返り討ちにあいました。
表示をタブで切り替えることができるようになっています。色々出したい人向けかな。
関連記事とは直接関係ないですが、Dropboxを利用してソースコードを公開できるということが勉強になりました。いつか私も何かを公開したい。
こちらは自動でやるんじゃなくて、記事毎に手動で細かく設定しようね。ってお話です。手間はかかりますが、他の方法とちがって確実におススメしたいものだけを表示できるメリットがあります。
どうしても読んでもらいたい自信作があるならこちらの方法がよさそうです。手間のかかる子ほどかわいいというやつです。
吹き出し＋アイコン
ここ最近よく見かけるようになった気がします。何かを対話形式で説明する時には便利に使えます。元々はWordPressのプラグインなのかな。あっちは昔からあったと思いますので。
クリックされるまで隠す
今すぐには使い道が思い浮かばないですが、コンテンツ中にもJavaScriptを書けるんだぞ、という今後のカスタマイズのアイデアとして。
パンくずリストの表示
内容がいまいち把握できていないのですが、やったほうがいいと皆さんがおっしゃっているのでリスト入りしておきました。
パンくずリストってなんだ？って方はこちらも合わせご覧ください。とてもわかりやすく説明されています。
リスト表示
CSSの調整でリスト表示もカスタマイズ可能です。チェックマークにしているデザインは割と目にすることがあるんじゃないでしょうか。クラスごとに適応するスタイルを変更していくつかパターンを用意しておくと便利に使えると思います。
当ブログでは利用していませんが、擬似要素使えばいいのかーって勉強になったので紹介してみました。
その他
どこにカテゴライズしたらいいかわからなかったものはこちらにまとめておきます。ちょっとカスタマイズからそれた記事もあります。
jQueryの読み込み高速化
ブラウザのバージョンによって利用するjQueryのバージョンを変えることでスクリプト側の高速化を行うだけでなく、CDNも高速なものを使うことで通信も高速化しています。
CDNにもこだわるって発想がなかったので勉強になりました。
コンテンツ管理
二度目の登場。ブログのカスタマイズというよりはスプレッドシートのカスタマイズと記事の管理方法の紹介になりますね。
スプレッドシートを公開してくださっていますのでやる気さえあればすぐに導入可能です。エクセル苦手な私にとっては大助かり。天使かな？ありがとうございました。
ブログ運営の先に何か目的や目標がある人はこの記事を参考にコンテンツ管理を行うべきだと思います。記事でも言われている通り、大変かもしれませんが恩恵は大きいと思います。私も昨日から始めました。
Adsense広告の設置
最近ポジ熊さんがフォロワーさんの要望を受けて公開された記事。私も導入時には参考にさせていただく予定です。
アナリティクスとサーチコンソールの導入
二連続。こちらもアナリティクスとサーチコンソールを導入するときに参考にさせていただく予定です。サーチコンソールのこと、「さちこ」って呼びますよね？
はてなブログProへの変更と独自ドメイン
一連の手順はこちらの2記事を参考にすればいけそうです。通算PVが1万を超えたらプロにしよっかな、と考えていましたがスマホカスタマイズがやりたいために目標を1000に下方修正しました。
変更後にやるべき色々な設定をまとめてくれています。ソーシャルへのリンク変更とかって確認を忘れがちなので要注意です。
人気ブログへの道のり
やるべきことが全部書かれています。この通りにやれば人気ブログになってお金持ちになれそうって錯覚させられます。ヘッダー部分、素敵です。
16000文字。すごい情報量です、卒論かな。なんか落ち込んだ時にこの記事をみるとやる気が復活しそうな気がします。軽快な口調で書かれていますが、内容はものすごくしっかりしていてギャップ萌えします。
ブログをタイプ別に分けて分析。目指せ情報提供型ブログ。SEOブログもかっこいいな。
さいごに
ちょっと欲張りすぎた気もしますが、おおむねやりたいことはまとめられました。最後の方はカスタマイズ関係なくなっちゃいましたが、最近超勉強させてもらった記事ということでセーフ。
本当はご紹介したい記事がもう少しあったのですが、まとめてるうちにロストしてしまいました。また見つけ次第、随時追記していきたいと思います。
当ブログもこれらの記事を参考にこれからガンガンカスタマイズを導入していく予定です。楽しみだな。どれからやろうかな。本当に記事を書く時間がなくなっていくな。
ただ、調べれば調べるほど、ベテランブロガーさんとのレベルの差に打ちひしがれますね。知らないことだらけです。もっともっとブログレベルを上げて、私も専門的なお話ができるようになりたいなと切に感じました。
ではでは、最後までお付き合いいただきありがとうございました。