Google Bloggerでは、様々なデザインのテンプレートが予め用意されていますが、自分独自のデザインを使いたいって思ったことないでしょうか。本記事では、僕が試行錯誤しながらテンプレートを作成する過程で学んだことをまとめます。 テンプレートとは 簡単にいうと雛形。ページによって異なる文章などの内容は空白にしておき、全てのページに共通なものだけを記述したもの。ページのレイアウトとかデザインとかブログのタイトル画像とかコピーライトとかを記述します。各ページの記事などは、システムがテンプレートの指定した部分に後で当てはめて使います。こうすることで、ページを作る度に、例えば、文章だけを書けば、いつも同じデザインやレイアウトを自動で施して表示されて、便利になります。 HTML(XML)を使う Google Bloggerでテンプレートを作成するには、HTML(本当はXML)を書けなければなりませ
このブログ「行き着く先はあんこ」は 2015 年 9 月 13 日に Blogger から WordPress に移行しました。 今回はそのことに関する内容、メモみたいなことです。 Blogger から WordPress へ以前は Google が運営する「Blogger」という無料ブログサービスを使っていました。他のブログサービスを使ったことがないので詳しい比較はできませんが、無料ブログの中ではかなり自由にカスタマイズできるようです。 ブログを始めたきっかけは自分の備忘録もあるのですが、サイトのデザインをいじってみたいなーなんていう理由もありました。そういう訳で、カスタムできる幅の大きい Blogger が候補にあがりました。無駄な広告も無く、完全に無料で運営できる点も大きかったです。 ここで Blogger のいいところをいくつか紹介すると、 カスタマイズの幅が大きいサーバーが必要な
Blogger launched it’s official version of the Contact Form Widget but, it works only on the Blogger Sidebar. If you want to add the contact form to the sidebar, stop reading and refer this tutorial – Contact Form Widget for Blogger SidebarContact Form Widget for Blogger Sidebar. If you don’t want to add the contact form to your Blog’s sidebar but want it to appear on a specific page, then this tut
Bloggerではブログ運営で必須の「お問い合わせフォーム」をガジェットから簡単に追加できます。 今までサイドバーやフッターに設置していたお問い合わせフォームをscriptでページに設置する方法のメモです。 この方法は、面倒なHTMLの編集をすることなく、わずか3工程で設置できます。 この投稿は「Create Separate Contact Page in Blogger」を参考に作成しています。 この記事内では、連絡フォーム=お問い合わせフォームです。 連絡フォームをページに設置する方法1. ガジェットを追加レイアウトのsidebar-section(テンプレートにより異なる)の「ガジェットを追加」から、その他のガジェットをクリックし「連絡フォーム」を選択します。 3行程目が完了したら追加した「連絡フォーム」を削除して下さい。 1度でも追加したことがある人は2へ進んで下さい。 ※この1
Bloggerテンプレートタグの解析もやっていかないとかな? Ardor(@ArdorOnline)です。 表示されているイメージのように、 トップページに表示される記事のレイアウトを変更しました。 でも記事ページは、そのままですよ! 今回は、トップページ表示をCSSで変更する方法をご紹介します。 個人的に「読みやすいな」と思うブログの条件として、 まず挙げるのが次の条件です。 トップページは、記事の要約一覧が表示されていること 記事ページには、詳細な内容が表示されること 理想を言ってしまえば、トップページの要約には、 左右どちらかに画像、その隣に本文の一部があると 一覧にしても見やすいと思います。 配布されているテンプレートで、実現しているものは無いかと探したところ いくつか見つかりました! http://btemplates.com/2012/blogger-template-simp
次に該当する箇所を削除します <!-- ここから --> <b:if cond='data:title != ""'> ~ 中略 ~ <b:include name='quickedit'/> <!-- ここまで --> 削除をしたら「テンプレートを保存」 この時点で間違いがなければ、フォームが非表示になっているはずです ページの作成新規でページを作り、HTMLモードで以下のコードを貼り付けます <div class='widget ContactForm' id='ContactForm1'> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p>お名前</p> <input class='contact-form-name' id='ContactForm
We already posted a few tutorials on how to add related posts widget with thumbnails in Blogger with summaries or only titles, which can be compiled into a single All-In-One Widget with powerful options. This new customizable related posts widget for Blogger integrates all the features we've seen before and more, such as thumbnails (square or round), post dates, excerpts, display only titles / thu
Today I'm going to show you how to add a customizable related posts gallery to the bottom of your Blogger post pages. This is an independent alternative to nRelate and LinkWithin — you don't have to sign up for a service, share your stats, or show ads when you use this code. Demo: This is the related posts gallery I use on this blog. Scroll down to the bottom of this post for a live demo of this c
Now here is a wonderful hack for displaying related posts beneath each of your blog posts along with post thumbnails. The related posts are picked from other posts having same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest. Adding the Related Posts Widget to Blogger/Blogspot Step 1. Log in to your
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く