このブログは、サイト作成やブログ運営について、なにも知らない状態で書き始めました。
そのせいか、やり始めた本来の目的を見失い、気が向いたときに書くという中途半端なスタイルになってしまいました。
結果的に、読者さんからすればわかりづらく見づらいものとなり、ぼく自身にとってもなんのために存続させているのか、よくわからない状態となってしまい、かなり遠回りをしてしまったと感じています。いや、遠回りというよりも迷走しました。
ブログ運営のスタイルは、人それぞれですので、運営の目的や書く内容は自由なので迷走しても問題ありません。
しかし、どうせやるなら、自分にとっても読者にとってもこれからのインターネットの世界にとっても、有益な内容を提供しようという姿勢で取り組むことをおすすめします。
さて、そういうわけで、これからブログ運営やサイト作成をするつもりだという初心者の方。
中でも特に、
- ブログを含むサイトそのものを収益化して報酬を得たい
- サイト運営やブログをきっかけに仕事につなげ成果、報酬を得たい
という初心者の方におすすめしたい書籍を簡単に紹介したいと思います。
参考になればさいわいです。
世界一やさしいブログの教科書1年生┃染谷昌利
まず最初に手にしておきたい、そして、なんどでも読み直したい、まさにブログの教科書。
この書籍では、2019年の現在でもブログ運営をされている16人を例に、ブログの基本的なことから、
- なぜブログをやるのか?
- 先輩ブロガーたちはブログをきっかけにどんな変化があったのか?
- ブログの収益化
など、初心者があらかじめ知っておくべきことが丁寧に解説されています。
まさにブログをやり始めたばかりの初心者やこれからブログ運営を始めようしている人なら、ぜひ読んでおきたい一冊です。
著者の染谷さんは「ブログ飯」の人として有名でもあり、ブログやアフィリエイトをきっかけに人生を大きく好転させた方です。
現在もオンラインサロンや書籍出版、イベント登壇など、表舞台で情報発信を続けており、またブロガーやアフィリエイターのみならず、さまざまな業界の方々と交流されていらっしゃいます。
アフィリエイトのためのブログの書き方講座┃鈴木利典
この書籍では、初心者が無理なく誠実に、ブログメディアで収益をあげる方法が丁寧に解説されています。
自由に好きなことを好きな時に書くことができるブログにおいて、収益化はひとつのモチベーションになります。訪問者への価値を提供することができたという1つの指標でもあるからです。
著者の鈴木利典さんは、ウェブ上では鈴木こあらという名前で活動されており、現役バリバリのアフィリエイターでもあります。「鈴木です」というブログや「さぽかん」というサイトを運営されていることでも有名です。
書籍の中では、実際に運営されているサイト・ブログがあげられいるので、初心者にとっては具体的なサイト作成のイメージもわきやすい内容となっています。
うまく収益化できているアフィリエイターがどのようなことを意識してサイト作成にとりくんでいるのか?
基本的なことをしっかりと教えてくれる書籍ですので、なんども読み返しながらブログ運営をしていくと、新しい発見や見落としている箇所が見つかるはずです。
ミニサイトをつくって儲ける法┃和田亜希子
ブログに特化した内容ではありませんが、ブログで報酬を得たいという人なら読んでおくべきだと思います。
この書籍によって共通認識として「ミニサイト」という言葉が使われるようになりました。
著者の和田さんは「ミニサイト作り職人」として有名な方です。古くは2004年にアフィリエイトに関する書籍を出版されており、表舞台で情報発信をしつつも、変わらない姿勢でミニサイト作成やブログ運営、アフィリエイトに長く取り組んでいる方です。
この書籍では、
- どんなサイトを作成すれば良いか?
- どんな手順でサイトを作成するのか?
- 伝えたいことを伝えるためにはどれくらいの規模にすれば良いのか?
- どんな方法で伝えれば良いのか?
- 収益化をはかるにはどうすれば良いか?
と言ったことがサイトの具体例を合わせて、丁寧に解説されています。
個人がインターネット上に、情報を残すにあたり、意識しておきたいこと、知っておきたいことなど、あらためて気づくことが多かったです。
ブログ運営を楽しむ!ブログを収益化したい!という方におすすめしたい書籍紹介のまとめ
繰りかえしになりますが、ブログ運営の目的は人それぞれ、好きなように、自由にやるのがいちばんです。
また、ブログ・サイト作成、アフィリエイト収益によって生活できるレベルになるのは、簡単なことではありません。
大きな収益を生み出すことができるのであれば、それに越したことはないと思います。ただ、なにより大切にしたいことは、ブログ運営や記事の作成、報酬を得る...その一つ一つを心から楽しむということではないでしょうか?
どんなことが楽しむためのきっかけになるのかはわかりませんが、ここで紹介した書籍がそのきっかけになれば幸いです。
ではでは。
あ、どもども。Bloggerでブログ運営を学んだぼくです。
あいかわらずウェブやHTMLの知識についてはド素人ですが、そんなぼくだからこそ書けることがあるのでは?
というわけで、ド素人のぼくが実際に使ってみて、そこそこやりたいようにカスタマイズできた無料テンプレートをまとめて紹介したいと思います。
テンプレート選びのポイント
「Blogger テンプレート おすすめ」で検索。
そこで紹介されているテンプレート、実際に使ってみようと思ってもド素人のぼくではやりたいようにカスタマイズできないものが意外と多かったりします。
しかし、この記事で紹介するテンプレートは、ほんとにくっそド素人なぼくが、実際につかってみて、実際にカスタマイズしてみて、自信はないけれど、やろうと思ったことができたであろうテンプレートです。
しかし、この記事で紹介するテンプレートは、ほんとにくっそド素人なぼくが、実際につかってみて、実際にカスタマイズしてみて、自信はないけれど、やろうと思ったことができたであろうテンプレートです。
テンプレート選びのポイント
まず、ぼくがテンプレートを選ぶ時のポイントは以下の通りです。
- シンプル
- シンプルだけどオシャレ
- レスポンシブデザイン(パソコンとモバイル端末どちらにも対応)
- SEO対策済み
- ソーシャルボタンの設置
- 日本人のBloggerブロガーはあまり使っていない
- カスタマイズできそうか
シンプルなのにオシャレなのがよくて、ウェブ知識ド素人でも扱うことができて、他の人が使ってなさそうなデザイン。
そんなわがままなぼくが選んできたテンプレートですので、参考になることもあるのかなと思います。
Clean(Blogger Template 2018)
下にまとめておきますが、このテンプレートとデザインやカラーリングの似ているシリーズがいくつかあり、どのテンプレートもムダのないところが気に入っています。
シンプルなデザインながら記事トップの画像を印象的に表示してくます。また、外観だけではなく、管理画面での操作のしやすさがド素人にはうれしいところ。
ブログタイトルやメニューが入ったナビゲーションバーをクリックひとつで、スクロールしてもトップに固定することができます。また、デフォルトで表示することができる「人気記事」に表示する記事数も数字を変更するだけで簡単に変更することができます。
シンプルなデザインになっているので、Bloggerのテンプレートの中では表示速度もはやく、カスタマイズの楽しみも残されているテンプレートになっています。
CLEANシリーズテンプレート一覧
CLEANシリーズのテンプレートをまとめておきます。
Dribble Clean
Dribble Cleanは、このブログで2015年頃に使用していたテンプレートです。
主張しすぎないシンプルなデザインながら、画面スクロールに合わせて、画像は下から、ブログタイトルは横から「シュッ!」と飛んでくる、というちょっとした遊び心がすごく気に入って使っていました。
レイアウト設定にて「人気の投稿」ウィジェットをコンテンツのいちばん上に配置だけで、3つの記事がバツグンの存在感で表示される、というインパクトのあるトップページが簡単に作成できるところも特徴です。
ただ、注意が必要です。
当時のぼくは、ブログ記事を「Windows Live Writer(現在Open Live Writer)」と呼ばれるブログエディターでブログ記事を投稿していました。その際、記事の画像を加工して投稿していたために記事の表示が崩れてしまうという現象がおきてしまいました。
記事を再編集し、画像の加工を取りのぞけばいいのですが、大変な作業になってしまい、ブログ継続のモチベーションがさがってしまったことはいうまでもありません。
当時のぼくは、ブログ記事を「Windows Live Writer(現在Open Live Writer)」と呼ばれるブログエディターでブログ記事を投稿していました。その際、記事の画像を加工して投稿していたために記事の表示が崩れてしまうという現象がおきてしまいました。
記事を再編集し、画像の加工を取りのぞけばいいのですが、大変な作業になってしまい、ブログ継続のモチベーションがさがってしまったことはいうまでもありません。
またテンプレート標準のソーシャルボタンをカスタマイズしようとしたのですが、どうにも思ったようなならずあきらめてしまいました。カスタマイズしなくても問題はなかったのですが、いまとなっては良い思い出です。
Newspaper
※「Newspaper News」というテンプレートもありますが、こちらとは異なります。
Name : Weblogtemplates
Author : Weblogtemplates
Author URL : http://www.weblogtemplates.net/
Date : August, 2014
製作が2014年となっているので、ウェブデザイン業界では流行遅れの機能だったりデザインだったりするのかもしれませんが、シンプルなのにオシャレなところが気に入っています。
ただ、まだこのテンプレートをカスタマイズしている最中ということもあり、できないこともあるかもしれない、ということをご理解くださいませ。
Newspaperの特徴
Newspaperの特徴は以下のとおり。
- 選択したラベルの記事を魅力的に一覧表示できるコピペウィジェット(PC表示)
- デザインがシンプルでキレイ
- 初心者には嬉しいテンプレートデザイナーでのカスタマイズ変更可能!
- レスポンシブ(※やや難あり)
スマートフォン表示ではあまり特徴的ではありませんが、PC表示においてはインパクトのある「コピペで簡単にできる一覧表示ウィジェット」がすばらしいです。
Bloggerの特徴的な機能であるテンプレートデザイナーで「CSSの追加」しかできないテンプレートも多いのですが、このテンプレートはブログ全体の幅の調節ができるうえに、カラーリング(色の変更)も可能なのでめちゃくちゃすばらしい!
他のBloggerブログで、このテンプレートを使おうとしていて挫折している方の記事を見かけましたので、ぼくが実際につかってみてカスタマイズできるか試しています。
文字のサイズやフォント、見出しタグの装飾、画像の自動リサイズなどなど、カスタマイズしたい箇所がまだまだたくさんありますが、大枠は現段階でだいたい整ったのではないかと思います。
Newspaperのカスタマイズに挑戦中
Newspaperのテストブログを作成しましたので、そちらも合わせて参考にしてみてくださいませ。
Newspaperの問題点
- はみ出る画像(スマートフォン表示時)
- 一覧表示で画像が粗くなる(スマートフォン表示時)
- 横画面から縦画面にしても画面サイズに自動的に適応しない。(スマートフォン表示時※おそらく画像サイズが画面幅に合わせてリサイズされないのが原因)
- 日本語フォント表示によるデザインの崩れ
Newspaperは、記事一覧で表示される画像が荒くなる、画面サイズに合わせて記事内の画像が自動的にリサイズされないなど、画像表示関連で思ったようになっていないところがいくつかありました。
さらに、更新すれば表示されるのですが、横画面から縦画面にした際も画面幅に合わせブログ全体がリサイズされないこともわかりまして、本当にレスポンシブデザインと呼んでいいものか、疑問なところもあります。
文字表示に関しても、海外製のテンプレートということもあり、日本語フォントで表示したとき、表示する文字数が多くなりすぎてデザインが崩れてしまう点もありました。
このあたりのカスタマイズ記事はたくさんあるので、参考にしながらカスタマイズしていこうと思っています。
と書かれているようにPC表示、スマートフォンの縦表示、横表示でにおいても、すべての要素がキレイに配置されます。
画面幅に合わせて切り替えもニュル...っとしてくれますし、記事内の画像はもちろん、サムネイル画像もはみ出ることなく、画像が粗くなることもなく、本当にキレイに表示してくれます。
日本語フォントとの相性もよく、カスタマイズする必要はないといっても言い過ぎではありません。
とにかく、キッチリ、カッチリとした作りになっているツッコミどころのないテンプレート。
もし挙げるとすれば、Googleアドセンスで自動広告を設定すると「えっ!?そんなところに広告いれてくるの?」という場所に設置された点。
アドセンスの自動広告がどのようなルールによって、どの場所に設置されるのか、よくわからないため、テンプレート側の問題ではないのかもしれませんが、ユーザビリティやアドセンス規約を思うと、慎重に広告の設置場所を検討する必要があるのでご注意ください。
参考:Simplify 2 Blogger Template • Blogspot Templates 2018
以外なところに、変な言葉がでてくるので、トップページはもちろん、各記事も確認しながらカスタマイズしてみてください。
Simplify2
Simplify2 |
Simplify2は下記のブログで紹介されていたので他のブログで使用、カスタマイズしてみました。
この記事で、
このSimplify2は画像、動画、引用枠、ボタン群、テーブル等々、あらゆるコンテンツに「はみ出し」が認められません。
と書かれているようにPC表示、スマートフォンの縦表示、横表示でにおいても、すべての要素がキレイに配置されます。
画面幅に合わせて切り替えもニュル...っとしてくれますし、記事内の画像はもちろん、サムネイル画像もはみ出ることなく、画像が粗くなることもなく、本当にキレイに表示してくれます。
日本語フォントとの相性もよく、カスタマイズする必要はないといっても言い過ぎではありません。
とにかく、キッチリ、カッチリとした作りになっているツッコミどころのないテンプレート。
もし挙げるとすれば、Googleアドセンスで自動広告を設定すると「えっ!?そんなところに広告いれてくるの?」という場所に設置された点。
アドセンスの自動広告がどのようなルールによって、どの場所に設置されるのか、よくわからないため、テンプレート側の問題ではないのかもしれませんが、ユーザビリティやアドセンス規約を思うと、慎重に広告の設置場所を検討する必要があるのでご注意ください。
参考:Simplify 2 Blogger Template • Blogspot Templates 2018
Simplify2カスタマイズのポイント
Simplify2は海外製のテンプレートなので、デフォルトでは各項目に外国語が使われています。フィリピン?だったかな、たしか。英語ではないので、一瞬、怪しいサイトに見えます。
日本語に変更しようとしたとき、意味がわからない単語があり、調べながら書き換える必要があります。
以外なところに、変な言葉がでてくるので、トップページはもちろん、各記事も確認しながらカスタマイズしてみてください。
おすすめテンプレートまとめ
海外製テンプレートは日本語との相性が合わないものが多いですが、こんなぼくでも実際に使ってみて、ある程度はカスタマイズできたテンプレートになっています。
最近では、心ある日本人のBloggerブロガーの方たちが、無料テンプレートを配布してくれいます。日本のブログ界隈でなにかと話題になるWordPressのように、Blogger利用者が増えて、テンプレートも充実することを願っています。
最近では、心ある日本人のBloggerブロガーの方たちが、無料テンプレートを配布してくれいます。日本のブログ界隈でなにかと話題になるWordPressのように、Blogger利用者が増えて、テンプレートも充実することを願っています。
カスタマイズはブログ運営の楽しみでもあるので、ぜひぜひカスタマイズ楽しんでみてください。
ではでは。
なお、Bloggerテンプレートをカスタマイズするときはテンプレートのバックアップは必ずおこないましょう。
フォントを変更する
ブログの記事を読みやすくするために、あるいはブログの印象を左右するデザインのために、ブログ全体の書体を変えることができます。
ちなみに厳密に言うと「フォント」と「書体」は意味のちがう言葉なので注意。(参考サイト:“書体” と “フォント” の違い - フォント専門サイト fontnavi)
Bloggerフォントカスタマイズ参考サイト:
HTMLの編集
Bloggerのダッシュボード(管理画面)にて、「テンプレート」を選択すると「HTMLの編集」が表示されるので、これをクリックします。
HTML枠内の検索
HTML枠内で「 font-family 」検索します。
※注意!)カーソルがHTML枠内にない状態で「 Ctrl + F 」を押しても画面右上に検索ウィンドウ(緑色)がでますが、ここに文字を入力して検索しても「font-family」は見つかりません。
「 font-family 」以下を書き換える
「 font-family 」の次の「 : 」から「 } 」までの間に任意のフォントを記述して書き換えます。
このブログでは、上記の参考ブログにならい、
font-family:"Lucida Grande", "segoe UI", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",Meiryo, Verdana, Arial, sans-serif
という記述になっています。
なお、同じ文字列をなんども記述するときは、コピー・アンド・ペーストを使うと時間短縮になります。
- コピー:「 Ctrl + C 」
- ペースト:「 Ctrl + V 」
すべての「 font-family: 」の内容を書き換えれば、ブログ全体のフォントを変更することができます。
テンプレートの保存
HTMLの編集後は必ず「テンプレートを保存」をクリック、技術した内容をしっかりと保存しておきましょう。
カスタムCSSよりHTML編集がおすすめ
ちなみに参考ブログでは、Bloggerの独自機能である「テンプレートデザイナー」にある「カスタムCSS」のなかにフォントを変更するための文字列を記入しています。
しかし、ぼく個人としては、HTML編集の画面に直接コードを書き込んで編集することをおすすめしています。
理由は、カスタムCSS内に記述した内容が自動的にHTML編集の文字列のなかに組み込まれてしまい混乱するため。
また、カスタムCSSをいじっているときにHTML編集の画面を同時に開くと、カスタムCSS内に書き込んで保存したはずの記述内容が消える、という事象がなんどか発生したためです。
なのでぼくは基本的に、テンプレートデザイナーはつかわずにHTML編集画面で直接編集しています。
Bloggerフォントカスタマイズまとめ
フォントとは字体のこと。字体によって読みやすさが変わります。ブログのイメージも変わります。コピー・アンド・ペーストでできるカスタマイズですので、ぜひチャレンジしてみてください。
ではでは。
ではでは。
当ブログは、Blogger用無料テンプレート・Beat Itをもとにカスタマイズを施しています。
▼ダウンロードページ
Beat It - BTemplates
Beat Itをダウンロードする
「Download」をクリック。ファイルを任意のフォルダに保存し、圧縮ファイルのため解凍しておく。
Beat Itをブログに適用する
ブログ管理画面。
右上の「バックアップ/復元」ボタンをクリック。
「ファイルを選択」をクリックするとファイル選択画面になるので、解凍した「Beat It」というファイルのいちばん奥にある「Beat It.xml」を選択してアップロードする。
Blogger用無料テンプレート・Beat Itを選んだ理由
Beat Itを選んだ理由- デザインがシンプルで好き
- 画面下ページャーボタン、ラベルデザインなど、欲しかったもの・やりたかったことがそろっている
このテンプレートを基礎として、さまざまなカスタマイズを施していきます。
他のカスタマイズについてはまたの機会に。
それでは、また。
追記
現在は「Clean」というBlogger用テンプレートを使っています。