Googleの提供する無料ブログサービス、「Blogger」を使って同盟ページを作る方法をまとめました。Bloggerは、無料で使える上に強制的な広告がない素晴らしいサービス。
日本で不人気な理由は、ブログとしてはコミュニティ機能がない、スマホからの投稿が他と比べてやりにいくいという理由があると思いますが、同盟ページを作るのならばこのデメリットはあまり関係ないのでおすすめです。
1)Googleアカウントを作る
※すでにお持ちの方は新規で作成する必要はありません。
アカウントを作ったら、Bloggerにアクセスします。
https://www.blogger.com/
初回は最初に「新しいブログを作る」のポップアップが出ると思いますが、2回目以降は下記三角を押して、一番下に「新しいブログ…」が出てくるのでそこから作れます。(ひとつのGoogleアカウントで複数ブログを作成できます!便利!)
2)新しいブログを作る
ブログの名前と、希望のURLを指定します。
URLはすでに他の人が登録されているものと同じURLは使えません。
3)テーマを選ぶ
ブログが作成されたらテーマを選択します。
左のメニューから「テーマ」をクリック。
テーマの中からContempoのLightを選びます。
「適用」をクリック。
4)レイアウトの調整
左のメニューから「レイアウト」をクリックします。
まずはサイドバー。
デフォルトは「自己紹介」「ブログアーカイブ」などがあるため、消せないものは非表示、消せるものは削除します。
(好みで表示したい場合はもちろん表示のままでOK)
鉛筆マークを押すと編集できます。
「このウィジェットを表示する」をクリックし、オフにする。
「ブログ アーカイブ」は削除できるため、削除をクリックする。
上記のような状態になればOK。(自己紹介、不正行為の報告は目のアイコンに斜線、それ以外は削除)
同様にメインの方も非表示にしていく。
特にページの本文の「注目の投稿」「人気の投稿」は非表示にする。
ブログの投稿をクリックし、下記のように設定します。
メインページに表示する投稿数は「1」
投稿ページのリンクテキストはなるべく目立たないように「.」などにする。
「共有ボタンを表示する」以外をオフにし、保存。
右下のフロッピーマークを押して保存します。
下記のような表示になります。
5)背景を変更
背景を好みの画像に変更できます。
ご自身で用意した画像をアップロードすることもできます。
いずれも「画像を変更」から。
修正をしたら、右下のフロッピーマークで保存し、左上の矢印マークでメニューに戻ります。
今度は「カスタマイズ」横の下向き三角をクリック。
HTMLを編集をクリックします。
難しそうな画面が出てきますが……
3547行目までスクロールし、3547行目〜3552行目までを削除。
代わりに下記コードをコピー&ペーストします
<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='postBody'/>
<b:else/>
<b:include data='post' name='postBody'/>
</b:if>
右上のフロッピーマークを押し、保存します。
その後、左上の矢印マークでメニューに戻ります。
もう一度テーマに入り、「カスタマイズ」をクリックします。
「詳細設定」を開き、デフォルトで「テキスト」となっている部分をクリックするとスクロールができるので、一番下の「CSSを追加」をクリックします。
薄い文字で「カスタムCSSを追加」と出てくるので、そこに下記CSSコードをコピー&ペーストします。
.jump-link {
display: none;
}
右下のフロッピーボタンを押して保存します。
7)新しい投稿でページを作成する
同盟ページに記載したい内容を入力します。
タイトル欄に同盟の名前、本文に同盟の説明や同盟バナーを載せます。
一番右の鉛筆マークを押すとHTMLでの記載も選択できます。
8)完成
出来上がりです!!!
是非皆さん一度Bloggerで同盟作りを試してみてください。
8)ファビコン設定&検索エンジン設定
設定から、検索エンジンに表示されるようにするか選択したり、ファビコンを設定できるので、好みに合わせて設定してください。
サイドバー(下)に、画像、テキスト、リンクリスト、HTML/JavaScript、メールフォームなどを入れることができます。(便利!)
サイドバー(上)は自己紹介専用らしく、他のガジェットを追加するとデザインが崩れてしまうので注意してください。
Bloggerで作成された同盟のご紹介
しゃちまる様の「GRIDMAN ALLIANCE」。本記事をご覧になって作ってくださりました!
作り方を説明するために作ったページです。問い合わせフォームなど無い場合のサンプル。
そのほか
Bloggerでできることを知るには、こちらのBloggerなびを参照するのもおすすめです。