プログラム最終更新日:2019/04/04ラムネグから一言:寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.bloggerのシンプルテンプレートグーグルが提供しているブログサービス「blogger」の無料テンプレート「Tokyo」を作成しました!!「Tokyo」は、シンプルでキレイなデザインと、設定不要で機能の一通り揃ったブログを持てるコトの二つをコンセプトにしています。シンプルなテンプレートを探している方はぜひ一度使ってみてくださいね。手前味噌ですが今回はこのTokyoテンプレートのおすすめポイントなどを紹介をしていきます。2019/3/16追記:何年ぶりかですが、新しいbloggerテンプレート「QooQ」を作りました。軽快で洗練されたデザインになっています。関連記事をデフォルト表示テンプレートデザイナーで配色をカンタン設定bloggerシンプルテンプレートTokyoの初期設定モバイル設定をOFFにレイアウトからNavbarをOFFにレイアウトが崩れたら...シンプルな無料テンプレートTokyo無料テンプレート「Tokyo」のダウンロードはコチラ!!bloggerテンプレートTokyoってこんなのTokyoの見た目はこんな感じです。bloggerでtokyoテンプレートを有効にしたサンプルブログを作りましたので参考にしてみてください。サンプルページシンプルなテンプレートTokyoのおすすめポイントTokyoテンプレートはシンプルで、かつ、ブログ初心者の方でもすぐ始められる機能もちゃんと持たせるコトの二つを意識して作りました。おすすめしたい具体的な機能についてまず紹介していきますね。テンプレートデザイナーシンプルで見やすい2カラムデザインTokyoテンプレートはシンプルなブログになるよう、アメブロやはてなブログでもよく見られる左側にメインの記事、右側にサイドバーという一番オーソドックスなブログデザインにしています。見慣れているデザインなのでブログ初心者の方も違和感無く使っていただけると思います。グーグルのサービスであるbloggerを使うのでアドセンス広告を張りたい方も多いはず。いうコトでサイドバーを少し太めにして、幅300ピクセルのラージスカイスクレイパーやレクタングルを配置できるようにしてあります。bloggerでされていないSEOの最適化bloggerのデフォルト設定だとブログ自体のタイトルがh1タグになっています。ホントなら記事ごとのタイトルをh1タグにするべきですよね。bloggerデフォルトの設定だとツイッターやフェイスブックでシェアした時、ブログ記事がどのようにツイッターやフェイスブック上で表示されるか設定できていません。(OGP設定といいます。)あとパンくずリストというものがbloggerにはついていません。パンくずリストっていうのは「TOP>カテゴリ名>記事タイトル」みたいにそこまでのリンク構造を書いてあるやつです。このブログにもありますし、大体のブログで表示されているものです。Tokyoテンプレートではブログの記事タイトルをh1タグにする、ツイッターやフェイスブック上での記事の見え方を設定する、そしてパンくずリストを表示するなど、bloggerのデフォルト設定では最適化されていないSEO対策を行っていますので、少しだけ検索順位の上昇が期待できます。スマホ対応のレスポンシブデザインTokyoテンプレートはパソコンやスマホ、タブレット端末などウィンドウのサイズに合わせてブログの見え方をキレイに整えるレスポンシブデザインに完全対応しています。スマホで見ても、パソコンで見ても、またipadで見てもシンプルでキレイにブログが表示されるようにデザインされています。分かりづらいですがスマホで見たときのデザイン。サイドバーが下に回りこみます。ついてくるサイドバーも標準装備ブログの中には記事本文をスクロールして読み進めているとサイドバーがずっとついてくるタイプのものがあります。googleアドセンスの広告をずっとサイドバーに表示したり、見て欲しい記事をずっと表示させることが出来るので、この「ついてくるサイドバー」はブログにぜひ欲しい機能ですよね。Tokyoテンプレートでは「ついてくるサイドバー」を標準で搭載していますので、自分の好きなコンテンツを配置するだけでスグに「ついてくるサイドバー」機能を使うことが出来ます。読者の方がその記事に興味を持った場合、次に読む記事を探せるよう関連記事機能はブログに必須なものだと思います。bloggerには関連記事を表示する機能が標準ではついていません。Tokyoテンプレートでは各記事下部に関連記事を表示する機能を標準で搭載しています。特別な設定ナシにただ記事にラベル(bloggerではカテゴリのコトをラベルと言います。)をつけて書いていれば自動的に関連記事が表示されるようになります。テンプレートデザイナーで配色をカンタン設定bloggerにはテンプレートデザイナーというブログの配色を自分で設定できる機能があります。Tokyoテンプレートでもテンプレートデザイナー機能を有効にしてありますのでタイトル文字色や背景、リンク色まで細かく設定することができます。「シンプルだけどちょっと色合いが好きじゃないな」という場合はお好みのブログデザインに調整することが出来ます。テンプレートデザイナーの見た目。好きな色を選んでいきます。テンプレートデザイナーを使った後。好きな配色にできます。bloggerシンプルテンプレートTokyoの初期設定Tokyoテンプレートの初期設定について紹介しますね。いうよりもblogger自体の初期設定ですので、どのテンプレートを使う場合でもこの設定をしておくと、よりシンプルな見た目になるのでオススメです。(モバイル設定OFFについてはレスポンシブ対応のテンプレートのみ)モバイル設定をOFFにTokyoテンプレート自体がレスポンシブデザインに対応しているので、bloggerが勝手にスマホ用にデザインを変更してしまう「モバイル設定」は無効にしておきましょう。レイアウトからNavbarをOFFにTokyoテンプレートを導入した後、ナビゲーションバーが表示されていると思います。野暮ったくなっちゃうので「レイアウト」→「Navbar」より「OFF」を選んでナビゲーションバーを消しちゃうのがおすすめです。ちなみにNavbarのOFF設定は、「Tokyo」テンプレートに関わらずbloggerの全テンプレートで行うことが出来ますよ。レイアウトが崩れたら...bloggerのテンプレートは前に使っていたテンプレートのウィジェットが残る仕組みになっています。古いテンプレートのウィジェットが表示されてしまってレイアウトが崩れてしまうコトがよくあります。こんなときは消すことの出来るウィジェット(レイアウト画面で左に灰色のつまみがあるやつ)を一度全て消してみるのがおすすめです。シンプルな状態に戻せますのでそこから新たにウィジェットを配置していきましょう。ちなみにTokyoテンプレートでは「ついてくるサイドバー」というエリアに入れたウィジェットがついてくるサイドバーとして表示されるようにしていますので、もしウィジェットを全て消してしまったとしてもいつでもついてくるサイドバー機能を使用するコトができます。シンプルな無料テンプレートTokyo今回はシンプルでブログに必要な機能を詰め込んだbloggerテンプレート「Tokyo」を紹介しました。bloggerの設定ってけっこう独特で最初は迷いがちです。「特別な設定をしなくても最初から必要な機能を持っているテンプレートがあればな」と前々から思っていたので今回力を入れて作りました。初心者の方に特におすすめしたいテンプレートですのでぜひ一度使ってみてくださいね。無料テンプレート「Tokyo」のダウンロードはコチラ!!Tokyoダウンロードページへバグ等ありましたら下記「Message」よりお知らせください。bloggerをこれから始めようかなという方のためにblogger初心者講座の記事を書きましたのであわせて参考にしてくださいね。書き込むコメントをキャンセルメッセージは承認後に反映されます。承認には数日かかる場合があります。コメント名前>初心者さんへ話を聞く限りbloggerのバグではないでしょうか。moreをつけることで回避できたはずです。ramuneg>初心者さんへTokyoに限らずbloggerの設定で一覧に表示する記事の数を設定できるので、それで設定してみてください。設定しても反映されないのです。次へをすると4個または1個のページもあります。初心者>初心者さんへTokyoに限らずbloggerの設定で一覧に表示する記事の数を設定できるので、それで設定してみてください。ramunegTOKYOのトップページに表示する記事一覧の数はどのような仕様できまうのでしょうか?2つだったり、4つだったりできるだけ多く表示したいです。初心者>masaさんたぶんパンくずリストもちょっと古めの、今は非推奨な実装になってたはずです。パンくずリストとして機能しないというわけではない...はずですが、そのようにschema.orgの方に修正いただくのがベストだと思います。ramunegご返事いただきありがとうございました。貴殿の公式サイトのほうで、クレジットを消す場合の料金、手続きなどをご案内いただければ、お手続きしたいと思いますので、ご一考いただければと思います(もっとも、価格にもよるかと思いますが)。既出かもしれませんが、Tokyoに仮にテーマを変更したところ、サーチコンソールからぱんくずリストの問題の修正の案内がきてしまいました。htmlを下記のように修正してみましたが、これでサーチコンソールも解決済みにしてくれるといいのですが。masa>masaさん作った手前、いざダイレクトに聞かれるとそれは、残して、としか言えません。すごくまじめな方だとお見受けしましたので、アドバイスとしては、消したところでそれを私が知るすべはない、といことです。ramunegはじめまして。改変自由という説明を読んだのですが、クレジットのことは記載ありませんでしたのでお尋ねしました。masa>rossoさんけっこう前のなのに、こうして使ってくださってとても嬉しいです。ramunegお忙しい中、ご対応いただきありがとうございます。申し訳ありませんでした。rosso>rossoさんへお使いいただきありがとうございます。<data:post.snippet/>で検索してすべて消せばいけるはず。今回いただいた分を最後にカスタマイズについての質問への回答を控えさせていただこうと思います。いうより質問いただいてももうきれいさっぱり忘れててわからない...。ramunegはじめましてbloggerでブログを書きたいと思いシンプルなテンプレートをさがしていました。rossoこちらこそ、お忙しい中お返事いただいてありがとうございます。ありがとうございました。匿名>うみさんへ使っていただきありがとうございます。返信できてなくて申し訳ありません。見てみましたがここらへんのjavascriptを使う方法はあまりくわしくないのです。ramunegすばらしいテンプレートをつくってくださりありがとうございます。一年近く愛用させていただいております。恐縮ながらご質問させていただきたくメッセージさせていただきます。ラベルの階層化をしたいのですが、どのようなコードを入れればよいのでしょうか。web検索した結果のコードのコピペをいくつか試してみたのですがどの方法もうまくいきません。お手すきの際に一考いただけるとうれしいです。うみ>うみさんそうですか(^^)無事解決されたようで何よりです。ramunegありがとうございました!わかりました。ブログタイトルの入力方法が間違っておりました。記事の一行目を「見出し」にすることでタイトルになるのだと思っていました。「投稿」の横に入力セルがあるのですね。無事、サンプル画面と同じようになりました。お手間を取らせてしまい本当に申し訳ございませんでした。うみお忙しい中お返事いただきましてありがとうございます。試しに公式テンプレート(デフォルト)に戻してみたところ、タイトルと内容は問題なく表示されました。いうことは記事の書き方は問題ないですね。(すみません、基本的な確認方法まで教えていただいて..)同じような問い合わせがないので、何か私のPCの問題なのでしょうか。こちらを利用させていただきたいのに。うみ>うみさんお使いいただきありがとうございます。その症状は...謎、ですね。他のテンプレート(公式テンプレート等)ではブログタイトルの位置にブログタイトルが表示されるのでしょうか。ramuneg無料テンプレートを提供いただき誠にありがとうございます。ブログ初心者なのでこのようなテンプレートとても助かります。macで利用させていただいているのですが、なぜかサンプルブログのようにトップーページの記事欄でタイトルが本文と別々に表示されません。/ブログタイトル/ブログ内容です。HTMLは何もいじっていないので記事の書き方に問題があるのでしょうか。ムジカ>ムジカさんこんにちは、ムジカさん。Mac環境での動作報告いただきありがとうございます。Tokyoで対応しているテーマデザイナー機能は色設定のみとなっています。背景画像、幅は未対応です。ムジカ>ぱぱいやさんテンプレートのHTML部分からsub-contentに囲まれている数十行をぜんぶ消して、今度はcssのmain-contentのwidthを100%、marginを0にすれば1カラムになると思います。ramunegこんにちは。こちらのテンプレートを1カラムのデザインに変更することは出来ますでしょうか?サイドバーに入れたい項目がほとんどなくて、どうせなら本体部分を広くしたいなぁと思ってます。ぱぱいや>まあぼうさんへ確かにMacはセキュリティが厳しかったりするのでxmlファイルがダウンロードできないのかもしれません。(bloggerのテンプレートはxmlというファイルで出来てます。ramunegこんにちは、はじめまして。Blogger初心者です。探しているなかで「Tokyo」を知りました。利用したいと考え、ダウンロードするのですが、うまくダウンロードが出来ません。わたしの環境は、MacOS10.9なのですが、Macと互換性がないのでしょうか。それとも、わたしのダウンロードのやり方が、違うのか・・・・よろしくお願い致します。回答していただきありがとうございます。凄くわかりやすいです。サイバイマン>サイバイマンさん一般的な対処法になっちゃいますが、position:fixedしたものにz-indexのものすごく大きい値を設定すると解決することが多いです。わたしはz-indexに1,000番台までを使う事が多いので、それ以上(3,000とか)にしてみてください。ramunegラムネグ様お世話になっております。お手数なのですが、2度目の質問をさせて下さい。スティッキーヘッダー(position:fixed;)をすると、本来固定したい部分の上にコンテンツが被さってしまうのですが、これはどのように解決すれば良いのでしょうか?お手隙の際にお答え頂ければと思います。サイバイマン>サイバイマンさんへおっしゃるように記事タイトル部分は大きすぎてスマホで見づらいですよね。あとはline-heightというので行間を変えるのもよりサイバイマンさんのイメージによりしっくり合うかもしれません。ふじみきさんへ返信が遅れすみません。紹介いただいた記事、読まさせていただきました。ていねいに紹介くださりありがとうございます。ramunegラムネグ様お世話になっております。回答していただきありがとうございます。助かりました!今度ともTokyoを愛用します。サイバイマン早々にご回答いただきありがとうございました!早速適用し思い通りの表示になりました。今回のテーマ変更の自分の備忘録含めて記事にしました。https://www.ciao-smile.com/2019/03/bloggervaster2tokyo.htmlもし内容に問題がありましたら、ご連絡下さい。今後ともよろしくお願いいたします。ふじみき>ふじみきさんへTokyoを気にってくださりありがとうございます。記事内のトップ写真がアフィリエイト画像のため起こっているようですね。img{max-width:72px}」をcss内に記述すると収まると思います。ramuneg>サイバイマンさんへTokyoを利用いただきありがとうございます。資料読まさせていただきました。【質問1について】これは難しいです。位置の変更はテンプレートのかなり深い部分までさわらないとできません。.mytitle」を「display:inline-block」)すればなんとなくはイメージに近づくかもしれません。試してみてくださいね。「single-header」で検索、「mytitle」部分でフォントサイズの指定が可能です。ramuneg今回よりシンプルなテーマを求めて「Tokyo」を使わせていただきました。配色を好みに合わせるだけで、大がかりなカスタマイズすることなく理想的なブログデザインができたと気に入ってます。何より高速に動作しますし。個人的にはパソコン上だけでなく、スマホからのデザインが大好きです(^^)。テーマの問題でないかもしれないんですが、「関連記事」のサムネイル画像の大きさが統一されていない時があります。何か改善策などございますでしょうか?例えば下記のページ表示のような感じです。ふじみき初めましてTokyoがとても素晴らしいと思ったので、先日から愛用させて頂いております。2つ質問があるので、お手隙の際にお答え頂ければ幸いです。ようなサイズ調整は試しました。文章だけではわかりにくいかもしれないので、お手数ですがこちらのURLにアクセスしていただければ幸いです。サイバイマン>YUUさんへ記事読まさせていただきました。貴重な意見ありがとうございます(^^)次回作を作る事があったらぜひ参考にさせていただきたいと思います。bloggerはかなり玄人向けのブログサービスだと思うので、なにかと苦労も多いかと思いますがこれからもブログを楽しみながら頑張ってくださいね。明らかに私がどこか間違えていたのだろうとは思いますが、色々と試行錯誤をしていたのは楽しく感じました。アドバイスまでいただけたのに、このような形になって申し訳なさを感じている次第です......。ところで、『Tokyo』の記事の件、書かせていただきました!使っていて感じたこと等を素直に書かせていただいております。YUU>YUUさんへ返信ありがとうございます。moreタグ置換の方法が一番いいと思います。Tokyoにはmoreタグの置換機能はついていないので、すでにYUUさんが見られている解説サイトのやり方をそのまま入れこんでもらえれば機能するはずです。がんばってみてくださいね。ramuneg>SEONEさんへご報告いただきありがとうございます。確かにSEONEさんのおっしゃるようにSEO的には「記事タイトル-ブログ名」の方がいいとされていますよね。'><title><data:blog.pageTitle/></title><b:else/><title><data:blog.pageName/>-<data:blog.title/></title></b:if>——————-に変えてみてくださいね。遅くなりましたが、お返事ありがとうございます!今の所は使いづらいという点も特に見当たりませんが、私なりの視点で書かせていただきたいと思います!ところで質問なのですが、テーマのカスタマイズで記事内(記事中辺りと記事下)に広告を表示させることは可能でしょうか?一つ一つの記事でhtml編集する以外方法が無いようでしたら頑張るしかないのですが......。知識のないド素人なりに調べてみたのですが、どうやら記事内moreタグの下に表示させれることは可能なようです。良い方法などがありましたら、ご教授下さると幸いです。お忙しいと思いますが、どうぞよろしくお願いします。自分の記事を検索インデックスで見てみると個別記事タイトルの前に自分のブログネームが先に表示されています。【ブログネーム-記事タイトル】この先頭のブログネームを表示させずに、もしくは記事タイトルの後ろにもっていくことはできないのでしょうか?検束インデックスでは記事タイトルが重要で、ブログネーム表示などは大抵タイトル末尾に表示されていますが。SEONE>YUUさんへ使っていただきありがとうございます。はい、記事にしていただくのはもちろんOKですし、使いづらい所なんかも正直に書いてもらって大丈夫です。YUUさんの書きやすいように書いていただければと思います。ブログ運営がんばってくださいね。ramuneg>とくこさんへ遅くなりました。class=”mylist”」で検索。その下の方にあるrow20、とrow80を足して100になるように(10きざみのみ対応)変えてもらうとサムネイルのサイズが変わります。ramuneg>たまさんへ遅くなりました。main-contentで検索。直下を—————-float:leftをrightにmargin-rightをmargin-leftに—————-と変更するとサイドバーを左にできます。ramunegはじめまして!『コンビニ店員のボヤ記』というブログを運営しているYUUと申します。Bloggerのテンプレートを探していて、こちらのシンプルで多機能なTokyoに惚れこんでしまいました!早速使わせて頂いております。よろしければなんですが、こちらのテンプレートを記事にしてもよろしいですか?当方ほぼ雑記の弱小ブログですが、このTokyoをもっと他のBloggerユーザー様にも知ってもらいたいと思いまして......。