BloggerはGoogleが提供しているブログ作成サービスです。無料でドメインを取得できるうえに、強制広告もない仕様となっています。実はあの有名な「いらすとや」もBloggerなんですよ。
Bloggerの登録はこちらのリンクからどうぞ。
→ Blogger.com - あなただけの素敵なブログを簡単に作成できます。
目次
テーマの設定
記事のタイトルにもなっている、『テーマ』とはBloggerにおけるブログデザインのことです。Bloggerは無料で利用できるのがメリットではありますが、初期デザインはシンプルすぎるし配布されているテーマはかわいくない！（そもそも日本語に対応していない）といったデメリットが…。しかし、日本のBloggerユーザーがテーマを製作・配布してくださっています。テーマを自作してみたい方はBLOGGER LABOを要チェックです！
テーマのダウンロード
今回導入するテーマはくぅく堂さんの「QooQ」です。こちらのサイトより配布をされています。通常版とリスト版の２種類がありますので、デモサイトを確認して好きな方をダウンロードしましょう。ちなみに当ブログでは通用版のQooQを使用しています。
※2022年10月より再配布が可能になりました。もしカスタマイズしまくりの「QooQ ver.りり」に興味がある方がいましたらTwitterのDMで教えてください。
テーマの適用と編集画面の開き方
テーマの適用（および復元）と編集画面の開き方について説明します。
- ①左上にある三本線をクリックして［メインメニュー］を表示する
- ②［テーマ］をクリック
-
③カスタマイズの横にある［▼］をクリック
※［カスタマイズ］＞［詳細設定］から色の変更ができます。 - ④［元に戻す］をクリック
- ⑤［アップロード］をクリック
- ⑥ダウンロード（バックアップ）した「.xml」ファイルを選択して開く
HTMLを編集したいときは、④で［HTMLを編集］をクリックすると、ソースコードが記述されている画面が表示されます。
テーマのバックアップ【重要】
テーマをカスタマイズする際は必ずバックアップを取るようにしてください。バックアップも先ほどと同じように［メインメニュー］から、［テーマ］＞カスタマイズ［▼］＞「バックアップ」＞［ダウンロード］の順にクリックすると「.xml」ファイルをダウンロードすることができます。
テーマの編集について
これからテーマを編集し、自分だけのデザインにしていくうえで「HTML／CSS」「JavaScript」を扱うようになります。基本的にはコピペをすればなんとかなりますが、ペーストする位置が非常に大事になりますので、そこは注意してコードを紹介しているサイトの指示に従いましょう。
【便利なショートカット】
［Ctrl］＋［Ｕ］…Webページのソースコードをのぞき見できちゃいます！
［Ctrl］＋［Ｆ］…Webページ内の文字検索
HTMLの編集について
ざっくりとした説明にはなりますが、HTMLの構成は「頭（head）」と「体（body）」の２つに分かれています。それぞれの役割については以下のようになっています。
-
①<head>から</head>まで
Webページには表示されない、SEOやOGPに関わる情報を記述する。
後述のCSSはこの中に記述する。
-
②<body>から</body>まで
Webページの表示に関わる部分。
JavaScriptは＜head＞と＜body＞のどちらにも記述できるので、貼り付け位置をしっかりと確認しましょう。どこに書けばいいかわからないときは、はっきりと記述する位置が書かれているサイトを参考にするほうがいいです。
-
SEOとは
Search Engine Optimization（検索エンジン最適化）の略。検索結果の上位に表示されるように対策します。 -
OGPとは
Open Graph Protcolの略。TwitterやLINEでURLを投稿した際に表示されるリンクプレビューを設定します。
「HTML／CSS」「JavaScript」について、もっと知りたい方はプロゲートを使って無料で学習することができます。ぜひ利用してみてください！
CSSの編集について
CSSとは、文字や画像の位置、サイズ、色、背景などWebページを構築する上でレイアウトやデザインを担当するプログラミング言語です。
QooQの場合、CSSは必ず<b:skin>から</b:skin>までの間に書かれています。CSSを追加したいときは</b:skin>の直前に書き足すようにすれば大丈夫です。
コメントアウトを使う
コメントアウトとは、プログラミング言語によって決められた記号や文字を使って、記述したコードをプログラムの実行に影響しないようにすることです。編集前のコードを残しておきたいときや、「〇〇に関する記述」などメモ書きに使用することで何をしたか表すことができます。
HTMLのコメントアウトする方法↓
<!-- ここにコメントを入れる -->
CSSのコメントアウトする方法↓
/* ここにコメントを入れる */
実際に英語の羅列を見て難しそうと感じる方もいらっしゃるかもしれませんが、バックアップを取っていればどうにでもなるので身構えずにどんどん自分好みのデザインにしちゃいましょう！
0 件のコメント:
コメントを投稿