当ブログのBloggerカスタム備忘録

今回は私の備忘録として書き残します。

当サイトはGOOGLEが提供するBLOGGERというブログサービスを利用して運営しています。

このBLOGGERがとても気に入っておりいろいろとカスタムして利用しています。

いつか、このサイト意外にもBLOGGERで新たなサイトを始めたいと思った時のために、当サイトに施した、カスタムを思い出せるように、ここに書き残します。

あまり参考にはならないと思うけどせっかくなので公開してみる。

カスタムする目的は、

ブログは記事数が増えていくに連れて、過去記事がどんどん奥に追いやられてしまい人目につかなくなってしまう。

せっかく自信をもって公開しても人の目につかなければただの自己満足に終わってしまいます。

公開するからには読んでもらいたいんです。

そこでいくつか工夫しました。

・全記事一覧の追加
・関連記事の追加
・最新の投稿の追加
・目次の追加

カスタム方法は検索すれば解説してくれるサイトが見つかるはずだ。

WEBのプロの方々が独自模索してカスタム方法を公開してくれています。

その苦労して発見した成果を当サイトで勝手に公開するわけには行かないので、カスタム方法は載せていませんのでご了承下さい。

カスタム

①全記事一覧の追加
bloggerには全記事一覧機能ないからJavaScriptなるものでこれを実行している。
独立したページとして全記事一覧ページを作ることができる。
とあるサイトにJavaScriptの記事一覧作成プログラムが公開されていたのでコピーしてページのHTMLに貼り付けるだけでできるはず。
自分でプログラムすることはできないけど世界は広く誰かが作ってくれているのです。

②目次の追加
当サイトではラベルをクリックするとそのラベルの記事が上部に目次となって一覧できるようになっている。ラベルで記事を分類しても数が多くなってしまうと、やはりラベルの中でも過去記事は埋もれてしまう。そこで上部に目次をもってくることで過去記事を一覧できるようにした。
これは全記事一覧のスクリプトのおまけ機能で実現できた。とりあえずタダのラッキーだ。

③最新の投稿の追加
サイドバーに最新の投稿がある。これはリピータへの更新情報をアピールする大切な項目なんだけど、実はブロガーには最新投稿一覧のガジェットがないのだ。でもこれはフィードガジェットを応用すると作成することができるので、ブログのフェードを最新投稿というタイトルでサイドバーに設置。

④関連記事の設置
ブログを開設したら絶対に設置したいガジェットです。これもブロガーの既存ガジェットにはないので、外からプログラムを拾ってくるほかありません。ってことで、外から拾って来た関連記事のガジェットをHTML設置ガジェットに追加して表示させます。関連記事のガジェットは初期のものだとデザインがしっくりこないのでCSSでキレイにととのえてあげます。これも「blogger 関連記事 デザイン」とかで検索すると紹介されています。関連記事は記事ごとに手書きで入力することもできるのですが、時間がかかってしょうがない。そんな時間があれば新たな記事作成に時間をまわしたいので自動で関連記事を表示するガジェットは必須です。

⑤ソーシャルボタンの追加
記事の上部にソーシャルボタンが設置されているとおもう。フェイスブックとかツイッターの各サイトで設置ボタンを作成することができるんだけど、これらを一括で作成してくれるツールがある。当サイトではそのツールでソーシャルボタンを一括作成して設置している。
ただ、一括作成にはFEEDLYの登録ボタンがないのでこれだけは別個でつくって一緒になれべて表示している。

⑥トップページの10記事は頭書きだけ表示
ブロガーのトップページって最新記事の列挙なんだけど、初期のままだと記事全文が載ってしまうから、最初に目に入るのは1個目の記事だけなんです。だから、記事に「続きを読む」ボタンをセットして見出しだけが並ぶようにすると一度にいくつもの記事が目に入りクリック率が上がるわけだ。
続きを読むは記事を書くときに区切りマークを挿入して設置するんだけど、各記事に毎回設置するのはことのほか手間です。ということで、これはHTMLのテンプレを書き換えることで、自動で行えるようになります。当サイトトップページは100文字程度の見出し文と続きを読むが羅列されるようになっています。

⑦CSSのカスタマイズ
「ラベル」や「もっと読む」が初期設定では文字だけなので、これをボタンっぽく変更しています。
これはCSSを書き換えるだけですね。

⑧記事のタイトルの順番
記事のタイトルなんだけど、初期設定だと勝手に記事タイトル+ブログのタイトルとセットになる。
それは構わないのだが、順番がよくない。
初期設定：調剤薬局事務の仕事│このブログの仕様について
変更後：このブログの仕様について│調剤薬局事務の仕事
検索で表示されたときに、読んでもらいたいがためにつけている記事タイトルが後ろにきていては何の記事だかわからなくなり、クリックされなくなる。ということで、逆にした。
これはHTMLのテンプレ書き換えが必要だ。

⑨文字装飾のCSSを追加
既存の機能ではあまり文字を装飾することができない。
そこでCSSを追加してレパートリーを増やすのだ。
増やしたのはこれ

あとテーブルも増やしましたし、引用符（Blockquote）も増やした。
引用符は、インデックスするだけだったので最低でも枠で囲うくらいにはしておきたい。
段落(H3、H4)の装飾も、初期のままだと文字が大きくなったり、太くなったりする程度の変化なのでせめて罫線ぐらいは入るようにしとくといいと思う。
フォント変更。記事に使用している文字をメイリオに変更。最初は何かわからないけど、ブログで一番多いのはメイリオだときいて変更した。また初期値は全体的に文字が小さいので全ての文字が大きくなるようにCSSを変更。

⑩H２タグの最適化
なぜか日付に＜H２＞が割り振られているので、ここは＜P＞タグになるように変更。最初は変更していたのだが、いまは日付が表示されなくなってしまった。いじっているうちにHTMLの大事な箇所を消してしまったようで、これが当ブログで日付を表示していない理由である。

⑪最新記事の投稿の追加
最近記事が、フィード機能を利用して作成すると、最新記事５個までしか載せることができません。最新記事の投稿ってPV数を増やすのにものすごく重要な役割を果たしているので増やすことにしました。④の関連記事の設置で利用したプログラムと同じもので設定変更すると最新投稿にも使用できるものがあるのでこれを設置した。

⑫スマホ対応
自分がスマホ用の画面が嫌いだから、スマホにもPC用の表示をしていたんだけど、GOOGLEさんからモバイルユーザビリティを向上させるようにとの通告を受けたので、急遽スマホ対応を実行しました。これからホームページを作成するにあたってはスマホ対応しているかどうかで検索順位に差がでるらしいので、否が応でもやらざるおえませんね。

⑬スマホでフリック操作によりページが切り替わる挙動を無効
モバイルテンプレートに初期搭載されている機能として左右にスワイプするとページが次のページもしくは前のページに移動するとい機能がある。親切につけてくれた機能なのだが、あまり評判が良くない。とくに、うちの記事は長文が多いので途中で操作を誤ってページが切り替わるとまた読み返すのが大変なのだ。ということで、コピペしたjavascriptで無効にしました。

⑭行間をあける
Googleが提供しているといことでたぶんデザインの根本が英語ベースなんだと思う。全体的に文字が小さく行間が狭い。そこで文字は16pxにしてlineheightを1.6emにしてみた。

⑮モバイルトップページの記事タイトルの幅を修正
タイトルだけやたらすぐに改行されてたから。これはwidth70％で改行されてたので95％に書き換えで画面幅ギリギリまで改行されないように訂正。

なぜ数あるブログサービスの中でBloggerを選んだか

・無料だから
・広告がないから
・GOOGLEだから
・独自ドメインが使えるから

こんな理由で選びました。

独自ドメイン使えるけどなんだかんだ面倒でそのままのドメイン使っている。

なんといっても広告がないのが一番。アメブロとかシーサーとかは広告がグチャグチャして記事が見づらくなってしまう印象があるからパスした。

最近「はてブ」使っている人増えたなぁと思う。私も実はちょっとはてブにあこがれていて、いつかは使ってみたい。

ただ、「はてブ」使うなら無料じゃなくて有料のやつね。最近の「はてブ」はスゴくスッキリして見やすい。WordPressで作ったレイアウトにそっくりで、テンプレートによってはWPと勘違いしてしまうこともある。最近「はてブ」のテンプレ増えたのかな？

無料ブログってブログの提供元が提供を中止してしまったらいままで積み上げてきた記事がすべて台無しになってしまいます。だから、信用度の低いところは避けたいんです。その点ではbloggerはGoogleさんが提供しているから安心ですよね。

使ってみての感想
使いやすいけど、文書の装飾がめんどくさい。
装飾がいまいちしっくり来るのがなくて、いつもタグを手で記述して枠でくくったり、テーブルデザインしている。やろうと思えば凝ったデザインもできるけどめんどくさい。
スマホからの更新は文書がうまく書けないから無理。主にパソコン向けのサービスだと思う。

WordPressでもブログを開設

サブブログとしてWordPressでもブログを書いています。これはbloggerで書いていたものをWordPressへと引っ越しました。
bloggerの独自ドメインでやってたのをWordPressに引き継げばアドレスが変わらないでそのまま使えるはずだったのですが、なぜかパーマリンクが全部変わってしまい、リダイレクトもうまくいかなかったので、bloggerの記事を全部ノーインデックスにして、新しいブログに引っ越しました。つまり、ほぼまっさらな状態で一からスタートです。
この引っ越しにより１日１５００PVあったブログが、１日５０PVまで落ちてしまいました（引越１０日後現在）。たぶん時間がたてばもう少し上がると思うんだけど、とてもがっかり。

WordPressの使い勝手

いまでは、BloggerとWordPressで両方で記事を書いているんだけど、使い勝手がいいのはやっぱりWordPressです。記事が速く掛けます。

とりあえず、装飾とかテーブルとかがすごい楽です。文字装飾は自分で登録したタグがつかえるようになるので、手打ちする頻度が低くなります。
Bloggerだと、いつ枠で囲うときは<DIV class="waku">コンテンツ</DIV>記述してたんだけど、これがワンタッチてのがとにかく嬉しい。

きれいに文字装飾して文書書いている人にはWordPressオススメです。

あと、

このブログで一生懸命カスタムした、関連記事や広告位置や最適化やソーシャルボタン追加とか、テンプレート適応したら全部まるっとはいってるんですよ。

さらに、段落の見出もきれいになってるし、引用符もカッコイイし、CSSのデザインなんか初期テンプレで完璧。bloggerだとデザインいっぱいいじらないと満足のいくものにならなかったけど、これはいじるとこ一切無いです。

あっというまに、きれいで見やすいブログが完成です。

SEO観点

とりあえず引っ越してアクセス下がった。WordPressはSEOに強いって書いてあったからこのまま様子をみます。

あがれー！！雲蒸竜変！！

最後に

Bloggerが好きな人なら、きっとWordPressも好きになります！！