こんにちは
ゆっきーです(^^)
HTMLやCSSを自由に編集できるBlogger。
しかし、自由にはリスクも伴いがちです。
今回はBloggerを本格カスタマイズするその前に、
いくつか押さえておきたい注意点や基本事項を扱っていきます(^^)
テーマのバックアップを取ろう！
本格カスタマイズにはしばしばHTMLをいじることが必要となります。
しかし、
HTMLをいじるということはサイトの構造をいじるということであり、
例えるなら、機械の中身をいじるようなものです。
もし、その際に何か変なことをすれば、当然、動作がおかしくなる原因になります。
しかし、機械とウェブサイトとでは大きな違いがあります。
それは…
バックアップをとれるということです。
Bloggerでは
ブログ管理画面から、
「テーマ」→「バックアップ/復元」→「テーマをダウンロード」
で、
テーマのバックアップデータをxml形式でダウンロードすることができます！
バックアップをテーマに適用するなら、
「テーマ」→「バックアップ/復元」→「ファイルを選択」
で、バックアップしたデータを選択し
「アップロード」
で復元完了です(^^)
これで何か変なことが起きても安心ですね。
まぁ実際めんどくさいですが、
カスタマイズの前にバックアップを取っておくことは、カスタマイズを安全に完了させるために重要です(｀・ω・´)
HTMLをいじろう！
HTMLとは
ハイパーテキストマークアップランゲージの略です。
(HyperText Markup Language)
ウェブサイトのほとんどはこの言語によって作られています。
ウェブサイトの構造を担っているものですので、ここをいじることによって、サイトに機能や要素を導入することができます。
しかし、変な風にいじれば当然サイトがおかしくなる原因になります。
いじるときは慎重に、適切に行うようにしましょう！
Bloggerでは、ブログ管理画面から、
「テーマ」→「HTMLの編集」
にて編集可能です！
以下、HTMLのカスタマイズの際に使えるテクニックをいくつか紹介します(*´ω｀)
文字検索
Windowsでは
HTML編集画面で「Ctrl+F」を押すことで、
検索窓が開き、文字検索ができます。
編集作業では必ずと言っていいほど使うので覚えておきましょう(｀・ω・´)
(Macでは Cmd+C のようです）
元に戻す
Windowsでは 「Ctrl＋Z」で直前に行った作業を元に戻すことができます。
なんかやらかした場合に活用しましょう(｀・ω・´)
(Macでは Cmd+Fのようです）
コメントアウト(コメント化)
コンピュータはプログラムに書かれていることを、なるべくすべて解釈しようとします。
しかし、時にはコンピュータに読み取って欲しく無いようなメッセージが生じることがあります。(メモ書きとかね)
そんなときは、
その文章をコメントアウト(コメント化)して、コンピュータにその文章を無視させることができます！
このコメントアウト、
どんなときに使えるのかと言いますと…
例えば、
HTMLを編集して、あるコードを消す、というカスタマイズを行う場合…
本当に消してしまうのは、少し不安が残りますよね。
しかし、コメントアウトを用いれば、
コメントアウトを行った部分はコンピュータが読み取れなくなるだけのため、
そのコードを残したまま、コードの機能だけを無効にできるのです！
HTMLでのコメント化の方法は、
コメント化させたい文章を、<!-- ~ --> で囲うだけです。
つまり、
<!-- 「文章」 -->
このような形になります。
<!--
「文章」
-->
こんな感じで段落を区切っても大丈夫です。
何段落でもまとめてコメント化できますが、
コメントアウトの中にコメントアウトを入れることは出来ないので注意しましょう。
CSSをいじろう！
CSSとは
カスケーディングスタイルシートの略です
(Cascading Style Sheets)
単に「スタイルシート」と呼ばれる場合もあります。
CSSの役割はHTMLで記述された表示を「装飾」することです。
例えば、文字に色をつけたり、形を整えたりします。
こちらはブログ管理画面から
「テーマ」→「カスタマイズ」→「上級者向け」→「CSSを追加」
から追加可能です。
Bloggerでは、
HTMLとCSSが完全に分けられているので、CSSをいじることによってサイトの構造が破綻することはありません。
（たぶん）
なお、矛盾する2つのコードがあった場合、
より下に書かれたコードが優先されるようになっています。
CSS版コメントアウト(コメント化)
CSSでもコメントアウトを行うことができます。
CSSでは文章を /* ~ */ で囲うことで
コメントアウトできます。
つまり、
/* 「文章」 */
または
/*
「文章」
*/
でコメントアウト可能です！
その他のルールは基本的にHTMLと同じです。
モバイル版でのCSS適用
CSSによるカスタマイズがモバイル版で適用されないことがあります。
そこで、モバイル版でもCSSを適用させる方法を紹介します。
コードの前に「.mobile」をつければOK
つまり、
.mobile 「文章」
という感じに記述すれば大丈夫です！
実験用ブログを作る
これはどっちでも良いのですが、
私がしていることです(^^;)
Bloggerでは、アカウント一つ毎に100個のブログを作ることができます。
そんだけ作れるんだし
カスタマイズ練習用のブログを作ってしまおう！
ということです。
実際、外部テンプレートとかダウンロードすると、レイアウト構造がめちゃくちゃになって、取り返しのつかないことになることがしばしばあります。
たくさん記事が残っている本命ブログでそのようなことが起こらないように、
大胆なカスタマイズを行う際には、ダミーブログでしっかり挙動を確認することが賢明でしょう。
「マイブログ」の編集
そうそう、
プロフィールからリンクされている「マイブログ」の欄には、そのアカウントのすべてのブログが自動的に表示されるようになっています。
つまり練習用のブログも自動的に表示されてしまうわけです。
それはちょっと恥ずかしいですよね(^^;)
なので消しましょう！
プロフィールの画面から
「プロフィールの編集」→「表示するブログを選択」
から、マイブログに載せたいブログを任意に選択可能です！
まとめ
いかがでしたか？
カスタマイズに挑む前の基本的なテクニックについて理解していただけたらなと思います(^^)
カスタマイズって、意外と夢中になってしまって、記事を書くことがおろそかになるという本末転倒なことが起こりがちですが…
適度に折り合いをつけながら、カスタマイズを楽しんでいきましょう(｀・ω・´)
にほんブログ村(クリックお願いしますm(__)m）
