簡単にブログをカスタマイズする方法！！- 前編 –

はい。
今回は、初心者さん向けのブログカスタマイズについて。

趣味でブログを書かれている場合、大抵は無料のブログサービスを利用されていると思いますが、好みに合ったテンプレートでも「ここを少し変更したい」と思う部分が出てくると思います。

そんな時は、ブログサービス名+カスタマイズといったワードで検索を掛けると思いますが、意図する結果が出て来なかったりして、意外と面倒なんですよね。

なので、今回は「Seesaa」「Ameba」「FC2」といった無料ブログに限定せず、どんなブログサービスを使っていても、共通の作業でカスタマイズ出来るような方法を、簡単にまとめてみたいと思います。

ブログの表示方法について

ブログを表示する為には、主に2つの技術を使っています。1つはブログの骨格となるHTML。もう一つが装飾を指示するCSS。

難しい事を書いても取っ付きにくいので、家の作りで例えると、柱や梁・屋根や基礎といった「骨組み」になるのがHTML。壁紙やフローリングといった「装飾」に使うのがCSSです。

骨組みと装飾が合わさって「家」が出来上がりますが、ブログも同様で、HTMLとCSSを合わせる事によって表示されています。

カスタマイズ前の準備

ブログのカスタマイズに準備しておきたいのが、バックアップの環境です。要は、カスタマイズ作業をしていて、「間違えた」「表示がおかしくなった」といった場合、簡単に元に戻す為の保険のような物です。

フリーソフトとして配布されている、テキストエディタなんかを使うと作業は楽になりますが、右も左も分からない作業の為に、使ったことがないアプリを導入するのは抵抗があると思いますので、簡易版としてWindowsに付属している「メモ帳」でも代替可能です。

作業を始める前に、利用されているブログサービスの管理画面からカスタマイズの項目を選択し、HTMLファイルとCSSファイルの内容を、個別のメモ帳にまるっとコピペし、それぞれ分かりやすい名前で保存しておきます。

全てのファイルをコピペするのが面倒なら、カスタマイズ作業を進める際にメモ帳を開いておき、変更前の文字列を部分的にコピペする。どんな方法でも良いので、変更前の文字列を手元に残しておくと安心です。

カスタマイズの流れ

どんなブログサービスを使っていても、基本的な手順は殆ど同じです。この流れを覚えておけば、カスタマイズのたびに検索を掛けて調べるといった必要が無くなり、ご自身で好きなように変更出来るようになります。

① バックアップを取る
② 変更したい場所の名前を調べる
③ 指示内容を書き換える
④ 保存する
⑤ 確認して問題が無ければ完了

バックアップの準備が出来たら、次は変更したい場所にどんな名前が付けられているのかを探します。変更したい場所の名前が分かれば、その部分を探して指示を書き換え、保存して終了。

ブログのカスタマイズと聞くと難しいイメージがあるかもしれませんが、作業自体は単純で、変更したい場所の名前を見つけてあげて、その部分に対して変更内容を書き換えてあげる。これだけで、自分好みのブログにカスタマイズする事ができます。

HTMLの構造について

では、変更したい場所の作りや名前は、どういった書き方になっているのか。読み進めると難しく感じるかもしれませんが、基本的な構造は全て同じです。例えば、ブログ見出し部分の作りを見てみると…。

HTMLファイル

<h1>ブログのタイトル</h1>

先頭にある<h1>という文字が、「見出し」を意味するHTMLタグになっています。なので、ブログのタイトルを<h1></h1>で挟んであげる事により、「これがブログの見出しですよ」と指定する事が出来ます。

今回のh1タグ以外にも、HTMLタグ一覧に記載されているようなタグが沢山ありますが、基本的には同じ。

<HTMLタグ名>表示内容</HTMLタグ名>

といったように、<HTMLタグ名>がHTMLタグのスタート。その後に表示したい内容を書いて、</HTMLタグ名>で閉じる。要は、書きたい内容がHTMLタグでサンドイッチにされている状態です。※タグを閉じる際の「/」を忘れずに。

CSSの役割と名前について

ただ、上記のように記載したままだと。
ブログのタイトル
といった感じで、黒くて太い大きな文字で表示されてしまいます。

なので、CSSを使ってデザインを整えてあげる。CSSを利用する事によって、文字のサイズや色を変える事ができるますが、適当に装飾の指示を書いても、どのHTMLタグに適応すれば良いのか分からなくなってしまいます。この時に登場するのが名前です。

基本的に、名前の付け方は2種類だけで「id」と「class」という文字の中に書いてあります。※入れ子になっている場合もあります。

HTMLファイル

<h1 id="title">ブログのタイトル</h1>

上記のような文字列にある「id=”title”」という部分の「title」が名前になります。今回は「title」という名前を付けましたが、この「id=”○○”」○部分は好きな名前を付ける事が出来るので、利用しているブログサービスによって異なります。

これらをふまえ、HTMLとCSSを指定してあげると…。

HTMLファイル

<h1 id="title">ブログのタイトル</h1>

CSSファイル

#title {
	font-size: 16px;
	font-weight: normal;
	color: #906;
}

ブログのタイトル

といったように、体裁を整える事が出来ます。今回は、見出しを意味するh1タグを例にしましたが、他のタグになっても基本的な構造は同じです。なので、カスタマイズで重要になるのは…。

① 変更箇所のHTMLタグを探す
② 「id」や「class」名を調べる

この2点です。これが分かれば、カスタマイズの半分が終わったも同然。、設定されている「id」や「class」名を探して、CSSファイル内の指示を書き換えるだけです。

名前の表記について

なお、HTMLファイルとCSSファイルでは、同じ名前であっても書き方が異なります。HTMLタグと名前が一緒にくっついている場合なんかもありますが、基本的には下記の2点を覚えておけば良いかと。

表記の違い

HTMLファイル側

① id="名前"
② class="名前"


CSSファイル側

① #名前 {指示内容}
② .名前 {指示内容}

HTMLファイルに「id=”○○”」と書いてある場合、CSSファイルではid名の前に#(シャープ)が付いて「#○○」と記載されています。

HTMLファイルに「class=”○○”」と書いてある場合、CSSファイルではclass名の前に.(ドット)が付いて「.○○」と記載されています。

idとclassの主な使い分けは、ページ内で1度しか使わない要素には「id」を。複数回使用する要素には「class」を使用する。といったイメージになっています。

ブログをカスタマイズする・まとめ

少し長くなったので区切りたいと思いますが、ブログカスタマイズの基本は、変更したい部分のHTMLタグに割り当てられている、「id」や「class」名を調べる事です。

これらの名前が分かれば、後はHTMLとCSSを照らし合わせつつ、自分の思い通りに表示されるよう、指示を書き換えれば良いだけ。この方法は、特定のブログサービスで使われている訳では無く、全WEBサイト共通の手法なので、ベースを覚えてしまえば、いくらでも応用が効きます。

長々と書きましたが、今回は下記の3点。

① バックアップを取る
② 基本的にHTMLタグはサンドイッチになっている
③ HTMLタグに「id」や「class」名を付けて装飾されている

という事だけを覚えておいて頂ければ問題無いかと。次回は、実際の手順やコツなんかを書いてみたいと思います。

最後まで読んで頂き、ありがとうございます！！

今回の投稿と同じ「WordPress」にある前後の記事は、下記のようになっております。お時間がある時にでもチェックして頂けると嬉しいです！！

また、11月1日現在「 ガジェット 」には「 174 件」の投稿があります。カテゴリー内での人気記事や、ブログの最新記事リストも記載しておきますので、宜しければ合わせてご覧くださいませ。

簡単にブログをカスタマイズする方法！！- 後編 -
次回記事簡単にブログをカスタマイズする方法！！- 後編 -
ブログをカスタマイズする際、良く使われているタグや要素、CS…
読みやすいブログデザインとレイアウトを総まとめ -2015年版-
前回記事読みやすいブログデザインとレイアウトを総まとめ -2015年版-
ブログを沢山の人に読んでもらうには、読みやすいと思えるのデザ…

このエントリーをはてなブックマークに追加 シェア＆フォローして頂けると嬉しいです！
タグ:『』｜Posted By MACO


『ガジェット』の新着記事 『WordPress』の人気記事『当ブログ』の新着記事
コメント
お気軽にコメント下さい

お名前(ペンネーム)

あなたのBLOG URL ※無記入でもOK！

コメント記入欄

※コメント欄の『利用規約』を読み、本規約の内容を承諾してから送信下さい。
※書き込んだコメント内容は、管理者の認証を受けた後にブログへ表示されます。