ラムネグから一言:寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.
bloggerのシンプルテンプレート
グーグルが提供しているブログサービス「blogger」の無料テンプレート「Tokyo」を作成しました!!
「Tokyo」は、シンプルでキレイなデザインと、設定不要で機能の一通り揃ったブログを持てるコトの二つをコンセプトにしています。シンプルなテンプレートを探している方はぜひ一度使ってみてくださいね。
手前味噌ですが今回はこのTokyoテンプレートのおすすめポイントなどを紹介をしていきます。
2019/3/16追記:
何年ぶりかですが、新しいbloggerテンプレート「QooQ」を作りました。より軽快で洗練されたデザインになっています。
- bloggerのシンプルテンプレート
- bloggerテンプレートTokyoってこんなの
- シンプルなテンプレートTokyoのおすすめポイント
- シンプルで見やすい2カラムデザイン
- bloggerでされていないSEOの最適化
- スマホ対応のレスポンシブデザイン
- ついてくるサイドバーも標準装備
- 関連記事をデフォルト表示
- テンプレートデザイナーで配色をカンタン設定
- bloggerシンプルテンプレートTokyoの初期設定
- シンプルな無料テンプレートTokyo
- 無料テンプレート「Tokyo」のダウンロードはコチラ!!
bloggerテンプレートTokyoってこんなの
Tokyoの見た目はこんな感じです。bloggerでtokyoテンプレートを有効にしたサンプルブログを作りましたので参考にしてみてください。
シンプルなテンプレートTokyoのおすすめポイント
Tokyoテンプレートはシンプルで、かつ、ブログ初心者の方でもすぐ始められる機能もちゃんと持たせるコトの二つを意識して作りました。おすすめしたい具体的な機能についてまず紹介していきますね。
- シンプルな2カラムデザイン
- SEO対策
- スマホ対応のレスポンシブデザイン
- 付いてくるサイドバー
- 関連記事表示機能
- テンプレートデザイナー
シンプルで見やすい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」のダウンロードはコチラ!!
バグ等ありましたら下記「Message」よりお知らせください。
bloggerをこれから始めようかなという方のためにblogger初心者講座の記事を書きましたのであわせて参考にしてくださいね。(blogger初心者講座はこちら!)
【おしらせ、というか完全なる宣伝】
文体がもうぜんぜん適当すぎてあれだけどものすごい自由に書いてるブログ「檸檬だくだく」もよろしく.寝る前に読める恐ろしくくだらないやつです.
こんなにも一ミリも目を引かれないタイトルを取り扱ってます: ココア20g / ハイチュウとかってさ / なぜ米と小麦を食べようと思ったのかの謎 /
>初心者さんへ
2021/05/12 18:00 ramuneg話を聞く限りbloggerのバグではないでしょうか。moreをつけることで回避できたはずです。
>初心者さんへ
Tokyoに限らずbloggerの設定で一覧に表示する記事の数を設定できるので、それで設定してみてください。
設定しても反映されないのです。
トップページは2個
2021/05/06 09:41 初心者次へをすると4個
または1個のページもあります。
>初心者さんへ
2021/04/28 18:12 ramunegTokyoに限らずbloggerの設定で一覧に表示する記事の数を設定できるので、それで設定してみてください。
TOKYOのトップページに表示する記事一覧の数はどのような仕様できまうのでしょうか?
2021/04/28 10:19 初心者2つだったり、4つだったり
できるだけ多く表示したいです。
宜しくお願いします。
>masaさん
2020/12/14 22:40 ramunegたぶんパンくずリストもちょっと古めの、今は非推奨な実装になってたはずです。
パンくずリストとして機能しないというわけではない…はずですが、そのようにschema.orgの方に修正いただくのがベストだと思います。
ご返事いただきありがとうございました。
貴殿の公式サイトのほうで、クレジットを消す場合の料金、手続きなどをご案内いただければ、お手続きしたいと思いますので、ご一考いただければと思います(もっとも、価格にもよるかと思いますが)。
ただ、既出かもしれませんが、Tokyoに仮にテーマを変更したところ、サーチコンソールからぱんくずリストの問題の修正の案内がきてしまいました。
htmlを下記のように修正してみましたが、これでサーチコンソールも解決済みにしてくれるといいのですが。
2020/12/10 11:03 masadata-vocabulary.org → schema.org
Breadcrumb → Breadcrumblist
>masaさん
2020/12/09 23:53 ramuneg作った手前、いざダイレクトに聞かれるとそれは、残して、としか言えません。
でもすごくまじめな方だとお見受けしましたので、アドバイスとしては、消したところでそれを私が知るすべはない、といことです。
はじめまして。
TOKYOのテーマを使わせていただきたいと思っているのですが、
一番下の貴殿のクレジット表記は消去不可でしょうか?
あるいは、消去したいという場合、料金は発生しますか?
改変自由という説明を読んだのですが、クレジットのことは記載ありませんでしたのでお尋ねしました。
2020/12/09 19:19 masaよろしくお願いします。
>rossoさん
2020/12/05 22:21 ramunegけっこう前のなのに、
こうして使ってくださってとても嬉しいです。
ちゃんとした回答ができずこちらこそ申し訳ありません
お忙しい中、ご対応いただきありがとうございます。
2020/12/05 12:15 rosso早速テストしてみます。
申し訳ありませんでした。
>rossoさんへ
お使いいただきありがとうございます。
で検索してすべて消せばいけるはず。
お試しください。
tokyoに関しては作ったのが数年前でもう記憶があいまい過ぎるので、
今回いただいた分を最後にカスタマイズについての質問への回答を控えさせていただこうと思います。
というより質問いただいてももうきれいさっぱり忘れててわからない…。
2020/11/27 17:53 ramunegはじめましてbloggerでブログを書きたいと思い
シンプルなテンプレートをさがしていました。
tokyoはスッキリとしたデザインでステキです
まだ設定中なのですが ブログの表示を
タイトルだけできるのでしょうか?
続きを読む と表示がでますが
2020/11/23 17:01 rossoほとんど本文がタイトルの下に表示されます
タイトルと日付だけにしたいのですが
こちらこそ、お忙しい中お返事いただいてありがとうございます。
2020/06/29 15:03 匿名またよちよちやってみます。
いろいろとありがとうございました。
>うみさんへ
2020/06/21 22:27 ramuneg使っていただきありがとうございます。返信できてなくて申し訳ありません。
見てみましたがここらへんのjavascriptを使う方法はあまりくわしくないのです。お力なれず。
すばらしいテンプレートをつくってくださりありがとうございます。
一年近く愛用させていただいております。
と、また恐縮ながらご質問させていただきたくメッセージさせていただきます。
ラベルの階層化をしたいのですが、どのようなコードを入れればよいのでしょうか。
web検索した結果のコードのコピペをいくつか試してみたのですがどの方法もうまくいきません。
お手すきの際に一考いただけるとうれしいです。
2020/05/31 02:11 うみ>うみさん
2019/07/30 22:33 ramunegそうですか(^^)
無事解決されたようで何よりです。
ありがとうございました!
わかりました。ブログタイトルの入力方法が間違っておりました。
記事の一行目を「見出し」にすることでタイトルになるのだと思っていました。
「投稿」の横に入力セルがあるのですね。
無事、サンプル画面と同じようになりました。
お手間を取らせてしまい本当に申し訳ございませんでした。
2019/07/30 03:11 うみお忙しい中お返事いただきましてありがとうございます。
試しに公式テンプレート(デフォルト)に戻してみたところ、タイトルと内容は問題なく表示されました。
ということは記事の書き方は問題ないですね。
(すみません、基本的な確認方法まで教えていただいて..)
同じような問い合わせがないので、何か私のPCの問題なのでしょうか。
こちらを利用させていただきたいのに。
…なぜなのでしょう…
「この辺、いじってみてください」という箇所はありますでしょうか?
2019/07/29 23:37 うみ>うみさん
2019/07/29 00:06 ramunegお使いいただきありがとうございます。
その症状は…謎、ですね。他のテンプレート(公式テンプレート等)ではブログタイトルの位置にブログタイトルが表示されるのでしょうか。
無料テンプレートを提供いただき誠にありがとうございます。
ブログ初心者なのでこのようなテンプレートとても助かります。
と、質問失礼致します。
macで利用させていただいているのですが、なぜかサンプルブログのようにトップーページの記事欄でタイトルが本文と別々に表示されません。
<Tokyoのサンプルブログ>
日付/ラベル
ブログタイトル
ーーーーーーーーーーー
写真/ブログ内容
<私のブログ>
日付/ラベル
ーーーーーーーーーーー
写真/ブログタイトル/ブログ内容
です。
2019/07/27 00:51 うみまだHTMLは何もいじっていないので記事の書き方に問題があるのでしょうか。
>ムジカさんへ
2019/07/01 19:27 ramunegはい、がしがしカスタマイズしてみてくださいね!
ramunegさん、お早いお返事ありがとうございます
2019/06/30 20:54 ムジカ仕様であってこれで良い、ということが判っただけでなんだか安心しました
これからcssをいじり倒してカスタマイズしまくりたいと思います
改めて
テンプレートをありがとうございました
>ムジカさん
2019/06/30 19:18 ramunegこんにちは、ムジカさん。
Mac環境での動作報告いただきありがとうございます。
Tokyoで対応しているテーマデザイナー機能は色設定のみとなっています。
背景画像、幅は未対応です。
こんにちは
2019/06/30 13:43 ムジカTOKYOをダウンロードし動作を確認中ですが、Blogger テーマ デザイナーが使えません
背景画像・幅を調整・レイアウトなどで簡易的にカスタマイズしようにも「このテーマには適用できません」と表示されます
Macではダウンロードできないという方をお見かけしたのでMac対応はしていないのか気になりました
当方はMacOs10.14.5、「tokyo.xml」がダウンロードできています
まっさらにしたcssにコピペして貼り付けましたが、方法が間違っているような気もしています
>ぱぱいやさん
2019/04/27 15:26 ramunegテンプレートのHTML部分からsub-contentに囲まれている数十行をぜんぶ消して、今度はcssのmain-contentのwidthを100%、marginを0にすれば1カラムになると思います。
こんにちは。
2019/04/23 10:06 ぱぱいやこちらのテンプレートを1カラムのデザインに変更することは出来ますでしょうか?
サイドバーに入れたい項目がほとんどなくて、どうせなら本体部分を広くしたいなぁと思ってます。
>まあぼうさんへ
2019/04/06 19:55 ramuneg確かにMacはセキュリティが厳しかったりするのでxmlファイルがダウンロードできないのかもしれません。(bloggerのテンプレートはxmlというファイルで出来てます。)
ダウンロードしようするとどうなりますか?
こんにちは、はじめまして。
2019/04/06 17:15 まあぼうBlogger初心者です。パソコンのテンプレートをスマホでも表示したく、
探しているなかで「Tokyo」を知りました。
利用したいと考え、ダウンロードするのですが、うまくダウンロードが出来ません。
わたしの環境は、MacOS10.9なのですが、Macと互換性がないのでしょうか。
それとも、わたしのダウンロードのやり方が、違うのか・・・・
よろしくお願い致します。
わざわざ回答していただきありがとうございます。凄くわかりやすいです。
2019/04/04 09:39 サイバイマン試してみます。
>サイバイマンさん
2019/04/04 01:08 ramuneg一般的な対処法になっちゃいますが、position:fixedしたものにz-indexのものすごく大きい値を設定すると解決することが多いです。
わたしはz-indexに1,000番台までを使う事が多いので、それ以上(3,000とか)にしてみてください。
ラムネグ様
お世話になっております。
大変お手数なのですが、2度目の質問をさせて下さい。
スティッキーヘッダー(position:fixed;)をすると、本来固定したい部分の上にコンテンツが被さってしまうのですが、これはどのように解決すれば良いのでしょうか?
お手隙の際にお答え頂ければと思います。
どうぞよろしくお願い致します。
2019/04/02 23:33 サイバイマン>サイバイマンさんへ
2019/03/21 17:53 ramunegおっしゃるように記事タイトル部分は大きすぎてスマホで見づらいですよね。
あとはline-heightというので行間を変えるのもよりサイバイマンさんのイメージによりしっくり合うかもしれません。
お試しください。
> ふじみきさんへ
2019/03/21 17:51 ramuneg返信が遅れすみません。
紹介いただいた記事、読まさせていただきました。
とてもていねいに紹介くださりありがとうございます。
またいろいろいじってみてくださいね(^^)
ラムネグ様
お世話になっております。
回答していただきありがとうございます。
とても助かりました!
今度ともTokyoを愛用します。
2019/03/16 23:04 サイバイマン早々にご回答いただきありがとうございました!早速適用し思い通りの表示になりました。
今回のテーマ変更の自分の備忘録含めて記事にしました。
https://www.ciao-smile.com/2019/03/bloggervaster2tokyo.html
もし内容に問題がありましたら、ご連絡下さい。今後ともよろしくお願いいたします。
2019/03/16 15:30 ふじみき>ふじみきさんへ
2019/03/16 00:54 ramunegTokyoを気にってくださりありがとうございます。
ページ拝見しました。
記事内のトップ写真がアフィリエイト画像のため起こっているようですね。
最初に違う画像を挿入するか、もしくは「.mrp-post img{max-width:72px}」をcss内に記述すると収まると思います。
お試しください。
>サイバイマンさんへ
2019/03/15 21:24 ramunegTokyoを利用いただきありがとうございます。
資料読まさせていただきました。
【質問①について】
これは難しいです。
位置の変更はテンプレートのかなり深い部分までさわらないとできません。
代替案としては、タグを非表示(「.mylist .mycategory」を「display:none」)し、
タイトルをインライン化(「.mylist .mytitle」を「display:inline-block」)すればなんとなくはイメージに近づくかもしれません。
試してみてくださいね。
【質問②について】
「single-header」で検索、「mytitle」部分でフォントサイズの指定が可能です。
今回よりシンプルなテーマを求めて「Tokyo」を使わせていただきました。
配色を好みに合わせるだけで、大がかりなカスタマイズすることなく理想的なブログデザインができたと気に入ってます。何より高速に動作しますし。また個人的にはパソコン上だけでなく、スマホからのデザインが大好きです(^^)。
さてテーマの問題でないかもしれないんですが、「関連記事」のサムネイル画像の大きさが統一されていない時があります。何か改善策などございますでしょうか?例えば下記のページ表示のような感じです。
2019/03/15 21:18 ふじみきhttps://www.ciao-smile.com/2019/03/playtech-ag-bag.html
初めまして
Tokyoがとても素晴らしいと思ったので、先日から愛用させて頂いております。
2つ質問があるので、お手隙の際にお答え頂ければ幸いです。
【質問1】
最新記事のタイトルとタグを上下逆にすることはできないでしょうか?
【質問2】
ブログタイトルを小さくすることはできないでしょうか?
なお、スタイルシートにてh1 { font-size:00px;} のようなサイズ調整は試しました。
文章だけではわかりにくいかもしれないので、お手数ですがこちらのURLにアクセスしていただければ幸いです。
どうぞよろしくお願い致します。
https://docs.google.com/document/d/1JnfLejNaOv7ZElLtCHJrnmAOnKit5uLbp2H4EgTzh-s
2019/03/13 19:54 サイバイマン>YUUさんへ
2019/03/13 00:19 ramuneg記事読まさせていただきました。
貴重な意見ありがとうございます(^^)
次回作を作る事があったらぜひ参考にさせていただきたいと思います。
bloggerはかなり玄人向けのブログサービスだと思うので、
なにかと苦労も多いかと思いますがこれからもブログを楽しみながら頑張ってくださいね。応援しています。
>ramuneg様
参考ブログ様のやり方を試してみて24時間程待ってみましたが、特に機能することなく時間だけが過ぎていきましたので、結局手動で入れることにしました(苦笑
明らかに私がどこか間違えていたのだろうとは思いますが、色々と試行錯誤をしていたのは楽しく感じました。
折角アドバイスまでいただけたのに、このような形になって申し訳なさを感じている次第です……。
ところで、『Tokyo』の記事の件、書かせていただきました!
使っていて感じたこと等を素直に書かせていただいております。
一度ご覧いただき、不備(お名前やリンク先等)がありましたら遠慮なく仰っていただけると嬉しく思います!
(宣伝みたいになって申し訳ないです……)
https://www.boyakuyuu.work/2019/03/template.tokyo.html
2019/03/09 19:33 YUU>YUUさんへ
2019/03/07 01:29 ramuneg返信ありがとうございます。楽しみしています。
moreタグ置換の方法が一番いいと思います。
Tokyoにはmoreタグの置換機能はついていないので、すでにYUUさんが見られている解説サイトのやり方をそのまま入れこんでもらえれば機能するはずです。
がんばってみてくださいね。
>SEONEさんへ
ご報告いただきありがとうございます。
確かにSEONEさんのおっしゃるようにSEO的には「記事タイトル-ブログ名」の方がいいとされていますよね。
テンプレートの上部数行目くらいにある
——————-
——————-
を
——————-
——————-
2019/03/07 01:09 ramunegに変えてみてくださいね。
>ramuneg様
遅くなりましたが、お返事ありがとうございます!
今の所は使いづらいという点も特に見当たりませんが、私なりの視点で書かせていただきたいと思います!
ところで質問なのですが、テーマのカスタマイズで記事内(記事中辺りと記事下)に広告を表示させることは可能でしょうか?
2019/03/04 16:57 YUU一つ一つの記事でhtml編集する以外方法が無いようでしたら頑張るしかないのですが……。
あまり知識のないド素人なりに調べてみたのですが、どうやら記事内moreタグの下に表示させれることは可能なようです。
良い方法などがありましたら、ご教授下さると幸いです。
お忙しいと思いますが、どうぞよろしくお願いします。
初めまして!!blogger無料テンプレート「Tokyo」を使い始めたばかりですが
シンプルでなおかつ表示速度もサクサクとしてして気に入っていますが、
自分の記事を検索インデックスで見てみると
個別記事タイトルの前に自分のブログネームが先に表示されています。
【ブログネーム-記事タイトル】
この先頭のブログネームを表示させずに、もしくは記事タイトル
の後ろにもっていくことはできないのでしょうか?
検束インデックスでは記事タイトルが重要で、ブログネーム表示などは大抵タイトル末尾に表示されていますが。
2019/03/04 10:26 SEONE>YUUさんへ
2019/02/26 23:29 ramuneg使っていただきありがとうございます。
はい、記事にしていただくのはもちろんOKですし、使いづらい所なんかも正直に書いてもらって大丈夫です。YUUさんの書きやすいように書いていただければと思います。
ブログ運営がんばってくださいね。応援しています。
>とくこさんへ
2019/02/26 23:25 ramuneg遅くなりました。
「div class=”mylist”」で検索。
その下の方にあるrow20、とrow80を足して100になるように(10きざみのみ対応)変えてもらうとサムネイルのサイズが変わります。
>たまさんへ
2019/02/26 23:21 ramuneg遅くなりました。
main-contentで検索。直下を
—————-
float:leftをrightに
margin-rightをmargin-leftに
—————-
と変更するとサイドバーを左にできます。
はじめまして!
『コンビニ店員のボヤ記』というブログを運営しているYUUと申します。
Bloggerのテンプレートを探していて、こちらのシンプルで多機能なTokyoに惚れこんでしまいました!
早速使わせて頂いております。
もしよろしければなんですが、こちらのテンプレートを記事にしてもよろしいですか?
2019/02/24 13:49 YUU当方ほぼ雑記の弱小ブログですが、このTokyoをもっと他のBloggerユーザー様にも知ってもらいたいと思いまして……。
ブログトップの各記事のサムネイル画像のサイズどうやったら変更できますか?
2019/02/19 16:21 とくこはじめまして。超初心者です。サイドバーを反対の左側にすることは可能ですか?
2018/11/14 15:43 たま>Maiaさんへ
2018/10/11 20:39 ramunegお使いいただきありがとうございます。
ナビゲーションというのは記事一覧の下部にある「1,2,3…」という部分の事でしょうか?
だとすると他サイトなどで「ブロガーへのナビゲーション追加方法」について書かれた記事の手順の通り、テンプレートを編集すると追加できると思います。
はじめまして。
2018/10/10 11:57 Maia今日、Bloggerデビューし、このテンプレートをしりました。
色々といじっていてとても使いやすいなと感じているのですが、1点教えてください。
ナビゲーションを追加することはできるのでしょうか。
もしよければ教えてください。
Ramunegさん
お忙しい中お返事ありがとうございました。
問題がわかりました。
なぜか変更した直後、何度か更新をしないと反映されないと言う初歩的な問題でした。本当にお手数をおかけしてしまい申し訳ありませんでした。
2018/07/03 19:12 Sarge先日質問をさせていただいた者です。
2018/07/01 17:21 かびごんお忙しい中、ご丁寧にありがとうございました。
教えていただいた通りに変更をしたら、画像を表示することができました。
ありがとうございました。
>かびごんさんへ
気に入っていただきありがとうございます。
「id=’header-inner’」でテンプレートを検索してもらい、その下にある「<b:include name='title'/>」「<b:include name='description'/>」を消してみてください。これで文字が消えるハズ。
そのあと、「#header-inner」で検索してもらってその中にある「background-size: cover;」を「background-size: contain;」にすると写真が全部表示されるようになる、ハズ。
最後に、「background-size: cover;」のすぐ下に「height: 〇〇px;」と一行追加すれば写真サイズが変わるはずです。
ちゃんとは試せていませんが、一度お試しくださいね。
2018/06/30 23:44 ramuneg>sargeさんへ
申し訳ありません。忙しくて遅くなってしまいました。
書いてもらったURLのやり方をちょっと試してみましたが、ページ送りの表示はできてました。
TOKYOでは「</body>」の下にも10行くらい行があるのでちゃんと「</body>」のすぐ上にコピペするといけるハズ。
でもページ送りのデザインが崩れているのでb:skinの方で「.showpage a, .pagenumber a, .totalpages, .current」のカッコ内にある、
「display: inline-block;」を「display: inline-block !important;」に変えてあげるとデザインも参考URLと同じになると思います。
すでに自力で解決されているかもですが、参考にしてみてくださいね。
2018/06/30 23:26 ramuneg初めまして。
先日よりこちらのテンプレートを使用させていただいております。
素敵なテンプレート、ありがとうございます。
ブログタイトルを画像に変更しようとしたのですが、ページヘッダーガジェットより画像をアップロードし、「タイトルと説明の代わり」にチェックを入れても、ブログのタイトル文字が消えず、アップロードした画像が背景に設定されてしまいます。
2018/06/28 17:39 かびごんテンプレートのどの部分を変更すればいいか、ご教授いただければ幸いです。
お忙しいところ恐縮ですがよろしくお願いいたします。
こんにちは。
お返事いただいた後に返信させていただいたのですがうまく書き込みできてませんでしたでしょうか?
もし、できてなかったら申し訳ありません。お返事を一応書かせていただいたのですが手違いが起きてしまったかもしれません。無視をしたつもりはないので、ご理解ください。
もし、できていた場合はRamunegさんがお忙しいのだと思いますのでスルーしていただいて構いません。余計なお仕事を増やしてしまい申し訳在りませんでした!
2018/06/20 16:32 sargeお忙しい中お返事ありがとうございます。
参考にしたのは
https://xomisse.com/blog/how-to-add-numbered-pagination-to-blogger/
でb:skinとbodyの締めの前にコードを貼りつけるものでした。
これがダメだったので他のサイトも見たのですが全てCSSこそ違うのものの同じやり方を推奨していましたが反映されませんでした。
お手数を取らせてしまい申し訳在りません。
2018/06/12 08:17 sargesargeさんへ
2018/06/10 18:46 ramunegお待たせしてしまい申し訳ありません。
気に入ってくださりありがとうございます。
すみません、このコメント欄はスパム対策でHTMLコードが書き込めないようになっています。なのでsargeさんいただいたコメントもソースコード部分が消えちゃっています。
「https://tech-unlimited.com/escape.html」みたいなサイトでHTMLコードのエスケープ処理をしていただければちゃんと表示されます。もう一度コメントしてくださるともう少し状況がわかるかもしれません。
ブロガーのページナビ導入はけっこう難しかった印象がありますが、特に特殊な事はしていないので、他サイトで紹介されている方法でカスタマイズできるはずです。
初めまして。
素敵なテンプレートを配布してくださり本当にありがとうございます。
全てにおいて使い勝手がよく重宝させていただいております。
ひとつお聞きしたいのですが、トップページの下に「新しい投稿」と「前の投稿」をページ番号にしたくて色々HTMLをいじって試行錯誤してみたのですができません…どれも”]]>”の前にCSSを書き込み””の前にコードを打ち込むものでしたがことごとくダメでした…なにかいい方法がありましたら教えていただけると幸いです。
2018/06/06 14:32 sargeお忙しい中、御質問にお答えくださりありがとうございます。
2018/06/03 14:25 匿名無事変更できました!
気に入っていただきありがとうございます。
2018/06/02 20:15 ramunegトップページのタイトル文字のサイズですが「.mylist .mytitle」で検索してもらうと、その下の行に「border-bottom: 1px solid #ECECEC;margin-bottom: 1em;」と書かれているので、その並びに「font-size:〇〇%」と追加してもらえれば大きくなりますよ。
お試しくださいね。
はじめまして。
すごくシンプルなテンプレートありがとうございます。
トップページからの記事へのリンク(タイトル文字)の文字をもう少し大きくしたいのですが、どこを弄ればよいかわかりません。
2018/05/30 20:41 匿名よければ教えてくださると嬉しいです。
お忙しいなか、ご返信いただきありがとうございます。
2018/05/23 08:18 404ページについてまた、ご連絡が遅れてしまい大変失礼いたしました。
なかなか上手くいかず試行錯誤した結果、
<b:includable id='main' var='top'>
が記載されている下の行ではなく、直後に書き加えることで無事にカスタム404ページを表示させることができました。ご教示、ありがとうございました。
お待たせしました。いろいろ確認してみましたが、もしかすると
2018/01/07 22:49 ramuneg>
<b:includable id='main' var='top'>
の上に追加していませんか?
こちらでも上に追加すると同様のエラーメッセージが出る事が確認できました。
お忙しいなか、ご返信いただきありがとうございます。
お教えいただいたとおりにHTMLを書き加えたのですが、「The widget with id “Blog1” cannot contain element: “b:include”. A widget can only contain b:includable elements.」、または「The widget with id “Blog1” cannot contain element: “#text”. A widget can only contain b:includable elements.」と表示され、保存することができませんでした。
何か他にも変更が必要なのでしょうか?
ご返信のほどよろしくお願いいたします。
2018/01/06 14:45 404ページについていえいえ、報告いただきありがとうございます。返信が遅くなってしまい申し訳ありません。
840行目あたりの「
2017/12/29 16:34 ramuneg<b:includable id='main' var='top'>
」のすぐ下に—————————————————–
<b:include data='top' name='status-message'/>
—————————————————–
を追加すれば設定画面のカスタム404ページが有効になります。お試しください。
ご指摘いただいた通り実装漏れですので、時間がとれ次第修正版もリリースさせていただきますね。
こんにちは。
素晴らしいテンプレートの配布をありがとうございます。愛用させてもらっています。
質問なのですが、TokyoはBloggerの設定画面からのカスタム404ページの作成には対応していないのでしょうか?(そもそも、デフォルトの404ページが実装されていない?) カスタム404ページが設定できず困っています。
お手数をおかけしてしまい恐縮ですが、設定の方法をご教示いただけると嬉しいです。
2017/12/27 18:37 404ページについて何卒よろしくお願いいたします。
parakitchさんこんにちは。
2017/08/06 02:48 ramuneg-ヘッダータイトルについて
150行目付近の「header h3」の中にtext-indent:-9999px;を入力すればいけるかも。同じくその中でフォントサイズを指定すれば大きさを変えられるはず。
たびたびすみません。昨日、メッセージを送った者です。ヘッダーのカスタマイズに悪戦苦闘しています。 で、自分で用意した画像とタイトル文字が上手くかみ合わせることができないので、いっそのことタイトルを非表示にしたいと思いました。やり方を調べてみると、 text-indent:-9999px; というのを入力すればいいようだというのは分かったのですが(←この解釈が合っているかも不明(苦笑)、一体、どこに入力すればいいのかが分かりません。 お手数ですが、ご教示いただければ幸いです。
2017/08/04 12:22 parakitchはじめまして。初めてブログを作成する超初心者です。Tokyoのデザインを使わせていただいてます。ひとつ、質問させてください。ブログタイトルのフォントサイズを変更するにはどうすればいいのでしょうか。Bloggerの公式ヘルプページではカスタマイズ→上級者向けでできると書いてあるのですが、色の変更のみでフォントの種類やサイズの変更については、どうすればいいのかわかりません。HTMLにの知識は無いため、簡単にご教示いただければ助かります。よろしくお願いします。
2017/08/03 16:38 parakitchebiponさんへ
2017/07/01 00:15 ramunegうまくいきましたか!よかったです(^^)
返信が遅くなってしまいましたが、ブログ執筆楽しんでくださいね。
ramunegさんへ
いろいろとご教示、ありがとうございました。
無料配布なのに、ここまでご親切にして頂けるなんて、感謝感激です。
おかげさまで、トップページ投稿記事一覧のサムネイルから記事本文へのリンクが出来ました。
完璧です。
1回目のコード変更のときにふたつ見つかった「差替指定コード」が、2回目のときはひとつしか見つかりませんでした。
その結果、正しいコードに変更しても、変更前と変わらない状況はご報告した通りです。
きっと、私がいろいろいじって消してしまったのでしょう。
そこで、新たに「Tokyo」をダウンロードして、件のBloggerブログにアップしました。
2017/06/25 14:35 ebiponそこで「差替指定コード」を検索したら、元通りふたつ発見。
1151行目と1403行目にありました。
以前、変更したら「トップページのトップに移動した」のは下(1403行目)のコードでしたから、これを指定のコードに変更。
こうして、無事サムネイルからのリンクが出来た次第です。
いろいろとお世話になり、ありがとうございました。
本当にカッコいいテンプレートですね。
ebiponさんへ
2017/06/23 01:55 ramuneg確かに以前のカスタマイズ時にウィジェットをたくさん追加してたりすると行数が大きくずれるコトがあります。
わたしの伝えた行数はいったん忘れていただいてebiponさんが最初の返信で教えてくれた「トップページのトップ(上部)に移動しちゃった」という箇所を新しいコードに置き換えていただければうまくいくはずです。
※「<img expr:src='data:post.thumbnailUrl'/>」はテンプレート内で何度か使用しています。
ramunegさんへ
お手間をありがとうございます。
私のですと1155行目に「 」がありました。
それで、差し替えてみましたが、残念ながら、差し替え前と変わりはありませんでした。
ご提供のテンプレート「TOKYO」は今月16日に、こちらのサイトからダウンロードしたものです。
2017/06/20 22:32 ebiponダウンロードしたものが最新版と違うのでしょうか?
それともBloggerの公式テンプレートを使っていた頃にカスタマイズした影響が、まだ残っていてうまくいかないのでしょうか?
ebiponさんへ
2017/06/20 19:23 ramunegすみません。一部コードが間違ってました。以下だとうまくいくはずです。
最新版のテンプレートだと1378行目部分になりますので、差し替えてみてくださいね。
——————————————
<a expr:href='data:post.url'><img expr:src='data:post.thumbnailUrl'/></a>
ramunegさんへ
2017/06/20 09:40 ebiponお知らせありがとうございます。
はふたつありましたが、下の方のコードを入れ替えてみました。
結果、記事一覧のサムネイルにポインタを置くと、指のマークに変わりました。
これはいけると思い、サムネイルをクリックしてみたら、なんとトップページのトップ(上部)に移動するだけで、サムネイルが示している投稿記事本体へは飛びませんでした。
上のほうのも変えてみましたが、こちらは変化なしでした。
せっかくのお骨折りなのに、残念です。
また何か良い方法があればお知らせ下さい。
無料配布なのに、あつかましいお願いをして申し訳ありません。
ebiponさんへ
2017/06/19 19:43 ramunegbloggerテンプレートを使用くださりありがとうございます。返信がおそくなりすみません。
1344行目付近の「 <img expr:src='data:post.thumbnailUrl'/>」を以下のように変更すればいけるはずです。
一度お試しくださいね。
————————
<a expr:href='data:label.url'><img expr:src='data:post.thumbnailUrl'/></a>
はじめまして。
Bloggerのテンプレート「TOKYO」を、昨日から利用させていただいている者です。
シンプルで、読みやすいブログに仕上がっているところが気に入っています。
関連記事欄のサムネイル画像から投稿記事本体へリンクさせる方法は、「さゆ」さんへの解答でわかりましたが、トップページの投稿記事一覧のサムネイル画像から各投稿記事本体にリンクできる方法はないものでしょうか?
2017/06/16 10:59 ebiponもし可能であれば、お教えいただければ助かります。
お忙しいところすみませんが、よろしくお願い致します。
fluffyさんへ
2017/04/30 01:08 ramunegTokyoを使っていただいてありがとうございます。
一つ目の質問ですが、ブロガー編集画面より「設定」→「投稿、コメント、共有」→「最大件数で表示」の数字が1になっていないかと、”投稿”ではなく”日”になっていないか確認してみてください。
二つ目はあまり聞かない症状で対策が思いつきません。スミマセン…。
通常bloggerのカテゴリ表示はデフォルトで投稿順に20件積み重なる仕組みでfluffyさんのイメージはこれに近いと思います。なので最終的なやり方ですが一度ブログを作り直せば治るかもしれません。
初めまして。
ブログを生まれて初めて始めて、数日、の超初心者です。
ブログのテーマにTokyoを使わせていただいています。
いくつかブログを投稿し、カテゴリーで3種類に分けました。
使い方でよくわからないことが2つありましたので、書き込みさせてください。
1つ目の質問です。
トップページでは、なぜか最後に投稿した1つしか表示されません。
トップページでは記事が「写真+タイトル+本文の一部」で表示されて、
それがいくつかの記事で積み重なるスタイルにしたかったのです。
tokyoのサンプルページのようにしたいのです。
どうしたらいいでしょうか?
2つ目の質問です。
カテゴリーを押すと、カテゴリー別にズラッと記事が並ばせたいのですが、
カテゴリーも投稿日別にページをめくらないといけない設定になっています。
たとえば、同じカテゴリーに4つ記事があって、カテゴリーをおすと
同じカテゴリーで5つ積み重ねたいのに、
カテゴリーのトップページで最後の投稿日の1記事、
そして2ページ目で次に投稿した3記事、
3ページ目で最初に投稿した1記事、
といった具合です。
カテゴリーのトップページに日にちに関係なく、
記事を積み重ねることができるでしょうか?
お忙しい中お手数おかけしますが、教えていただけると助かります。
2017/04/29 15:06 fluffyまた、ブログのことはまだよく分かっていないので、もし変な質問だったらすみません。
さゆさんへ
2017/03/02 23:08 ramunegそれはよかったです。
そういっていただけると嬉しいです。頑張ってくださいね!
ramunegさん
ご回答ありがとうございます!
実装できましたー!
tokyoはシンプルだからこそ、テンプレート触るのがすごく楽しいです。
2017/03/02 22:08 さゆ引き続きカスタマイズしてみます(╹◡╹)
ありがとうございました。
さゆさんへ
コメントありがとうございます。かなり難しかったですよね。
addWrapper.appendChild(addThumbnail)を以下のように変えればいけるはずです。一度お試しください。
2017/03/02 00:57 ramuneg—————————–
addThumbLink = document.createElement(‘a’);
addThumbLink.setAttribute(‘href’, obj[‘link’]);
addThumbLink.appendChild(addThumbnail);
addWrapper.appendChild(addThumbLink)
はじめまして!
Tokyoで、初のBloggerに挑んでいます。
関連記事の表示についてですが、タイトルだけでなくサムネイル画像からも関連記事にリンクしたい場合はどのようにすればいいでしょうか。
javascriptで記述されている部分だったので、なかなか理解が追いつかず…
お手数をおかけしますが、ご教示いただければと思います。
2017/03/01 11:34 さゆどうぞよろしくお願いします。
C.I.さんへ
2017/02/18 09:14 ramunegはい!また何かありましたらお教えくださいね。
ramunegさん
2017/02/18 08:56 C.I.ご回答いただきましてありがとうございます。
希望通りのレイアウトになりました!ありがとうございました。
Harunaさんへ
2017/02/17 15:20 ramunegそれはとっても気になる症状ですよね。
なんにしても解決していたようでなによりです。
朝になったら治っていたという事ですのでblogger側のシステム負荷とかが原因かと思いますが、また発生しましたらお教えくださいね。
C.I.さんへ
Tokyo気に入ってくださりありがとうございます。
テンプレートの構造上左詰めになってしまいます。以下のようにするコトでC.I.さんの希望の見た目になると思います。
一度お試しください。
———–レイアウト画面で
2017/02/17 15:15 ramunegフッター左 :テキストを配置してもらってタイトルもコンテンツも空白にする
フッター中央:Attributionのみ配置
フッター右 :何も配置しない
————————–
昨日メッセージさせていただきました。
今朝問題解決していました。
大丈夫そうです。
Tokyoすごくお気に入りです。
2017/02/17 10:37 Haruna今後もよろしくお願いします。
お世話になってます。テンプレートTokyoを使っています。
2017/02/16 16:47 Haruna今日見てみると、画面に記事が並ぶ部分の写真横の本文が消えて空白になりました。テンプレートを触った覚えがないので何が原因かなと調べています。よろしくおねがいします。
Tokyoのシンプルなデザインがすごく気に入っています!
2017/02/15 16:05 C.I.フッター左右には何も置かず、中央にAttributionガジェットのみ配置したいのですが、ブログを表示すると左寄せになってしまいます。
解決方法を教えていただけませんでしょうか。よろしくお願いいたします。
はるさんへ
2017/02/07 15:52 ramuneg返信が遅くなってしまい申し訳ありません!
はい、できるだけ早く返信できるようにしますので、また何かあればお気軽に教えてくださいね!
こんにちは。
2017/02/07 11:42 はる先日コメントしました はるです。
解決しました。すみません、ありがとうございました。
初心者すぎて、わからないことだらけですが
またコメントさせて下さい。
ありがとうございました。
はじめまして。
2017/02/05 14:34 はる使わせて頂きます。ありがとうございます。
質問よろしいでしょうか。
テンプレート適用後、レイアウトを変更したのですが保存ができません。
原因がわからず困っております。
解決方法をご存知でしたらお教え願えませんか?
宜しくお願いします。
はい、応援しています。
2017/01/29 21:38 ramunegまた何かあったらお気軽に質問くださいね。
ありがとうございます。色々と試してみますね。
2017/01/28 15:52 ローレンスブログの運営のほうも頑張ります!
130行目の「width: 90%;」を100%にすれば余白をゼロにできると思いますが、ところどころ見た目がおかしくなるかもしれません。
2017/01/23 21:51 ramuneg一度試してみてくださいね。
迅速な対応ありがとうございます! 「モバイル端末でPCテンプレートを表示する。」と設定し、スマホでページを見てみたところ、以前よりも見やすくなりました。個人的な好みとしては、もう少し横幅一杯に文字を表示したい、というか文字の横の余白をゼロにしたいのですが、それにはどこをいじれば良いでしょうか。ご回答頂けたら嬉しいです。
2017/01/20 15:19 ローレンスローレンスさんへ
2017/01/19 20:50 ramunegテンプレートをご覧頂きありがとうございます。
おっしゃるとおりスマホだとテキスト表示幅が狭すぎたので修正いたしました。
再度テンプレートをDLいただければ反映されていますのでご確認いただければと思います。
よろしくお願いいたします。
初めまして。自分のブログに導入してみようかと検討しています。が、スマホで表示した時に横幅が妙に狭くなってしまっている?様に感じます。スマホの横幅ギリギリまで文字を表示させたりする為にはどのようにカスタマイズすれば良いでしょうか。
htmlやCSSといった事が分からないド素人ですが、ご回答頂けたら嬉しいです。
2017/01/19 18:06 ローレンスエリーさんのおっしゃるとおり、bloggerは中身が単純なhtmlではないので自分で修正するのはとっても難しいですよね。
2017/01/17 18:41 ramunegそのまま使う分にはめちゃくちゃカンタンに広告無しのブログを持てるのがbloggerのいいところだと思うので、また変更したいところがありましたら気軽に聞いてくださいね。
ありがとうございます。
2017/01/17 16:09 エリーご回答いただけないかとあきらめていました。
うまくできました。
シンプルでかわいいのですが、カスタマイズが素人には難しいですね。。
とはいえありがとうございました。
返信がとても遅くなってしまいました。ほんとうにすみません。
2017/01/16 13:06 ramunegテンプレート使用くださりありがとうございます。
デフォルトのボタンは管理画面の「レイアウト」→「記事表示部分」の編集から、「共有ボタンを表示する」のチェックを外してもらえれば削除できます。
こんにちは。
2017/01/06 13:07 エリーTokyo使わせていただいています。
質問なのですが、忍者おまとめツールでソーシャルボタンを表示したいと考えています。
デフォルトのボタンを削除したいのですがhtmlの削除該当部分を教えていただけないでしょうか。
よろしくお願い致します。
無事使えたみたいでよかったです。
2016/11/15 20:54 ramunegまた気になるトコロがあればどしどし教えてくださいね!
すみません!
2016/11/15 20:45 キリエ私のやり方が間違っていました。
無事に使えました。
これからいろいろいじってみるつもりです。楽しみ!
ありがとうございます!
初めまして。
日本語に対応してかわいいGoogle Bloggerのテンプレートがあるのをはじめて知って、使いたいと思いました。
しかし、手順通りにやってみたのですが、
XML の解析中にエラーが発生しました。行 1220、列 166: The element type “span” must be terminated by the matching end-tag “”
のようなエラーがたくさん出てきました。。
2016/11/15 20:35 キリエなにをどうすればいいのかわからないので、今のところ使い心地が試せずにいます。
htmlなどはさっぱりわからずどのようにしたらいいのか困っています。
もし解決方法をご存知なら教えてください。
お忙しいとは思いますがよろしくお願いします。