ブログカスタマイズの雑談BLOG

このブログでは、ブログのカスタマイズやパソコン、ネット関連の記事を書こうと思っています。
現時点では「Seesaaブログ」のカスタマイズに関する記事が多いので、とりあえずはSeesaaブログの記事内で書いている言葉（単語）について、少しだけ説明しておこうと思います。他の記事で使う言葉と共通なんですが、それはそれってことで。
カスタマイズに関する一般的な言葉の説明は、また別の機会に記事にしたいと思います。



この記事で説明している言葉は以下の通りです。
リンクを貼ったので、クリックすると該当部分に飛びます。
私が記事を書く時のクセみたいなものまで説明していますが、気にしないでください。

CSS

CSSとは、スタイルシートのことです。
Seesaaブログの「管理画面＞デザイン」で自分のテンプレートを選択したら、「スタイルシート編集」「HTML編集」「コンテンツHTML編集」「カバー画像設定」の4つのタブがありますが、その最初のタブで設定します。





タブには「スタイルシート編集」と書いてありますが、通常、スタイルシートのことを「CSS（カスケーディング・スタイル・シート）」と言うので、このブログで私は頻繁に「CSS」を使います。いちいち「スタイルシート」と書くのが面倒だからです。
CSSとだけ書いていたら「スタイルシート編集」のことだな、と思ってください。
CSS（スタイルシート）は文字通りスタイルを設定します。

HTML

HTML（ハイパーテキスト マークアップ ランゲージ）はWeb上のマークアップ言語です。マークアップとか言われても、私自身もちょっとよくわからないです。何というか、Web上で「ココにはこれを表示する」みたいに、何をどこに置くのかを設定するものです。サイトやブログは、HTMLで何をどこに置くのかを指定して、CSSでどのようなスタイルにするのかを設定することで成立しているわけですね。



ちなみにSeesaaブログの管理画面では、HTMLが「HTML」と「コンテンツHTML」に分かれています。




この画像は「コンテンツHTML」編集画面です。
「HTML」も「コンテンツHTML」も、中身に記述するものは同じです。Seesaaブログのシステム上、ページの大まかな構成を「HTML」でやって、細かい部分（パーツ）を「コンテンツHTML」でやります。なので、「コンテンツHTML」で編集するのは、サイドバーの各コンテンツ（カレンダーや検索ボックスなど）部分です。
編集後のページのソースを見ると、「HTML」に書いた内容も「コンテンツHTML」に書いた内容も、一気に全部表示されています。（当然です）



コードの記述方法はどちらも同じです。同じような内容を記述します。
じゃあ全部一気に編集した方がいいじゃない、と思うかもしれませんが、ページ構成の大まかな部分と、それぞれのパーツに分けておいた方が編集しやすいのでSeesaaブログの管理画面では分けているのだと思います。たぶん。

「コード」と「タグ」

「コード」と「タグ」という言葉についてですが、私はあまり気にせずに使っています。
HTMLの記述なんかは「コード」と言いますね。「タグ」は「< >」で囲まれている記述を言うのでしょうが、私は「コード」も「タグ」も混在した状態で適当に使っています。
使っている私自身が何も考えていませんので（笑）、気にしなくてけっこうです。厳格に区別しているつもりもありません。何となくニュアンスでご理解ください。


ちなみにここで言っている「タグ」は、ブログの「カテゴリ」や「タグ」とか言う時の「タグ」とは別のことを言っていますので混乱しないようにお願いします。HTMLに記述する「<title>」みたいなものを「タグ」と言っているわけです。これを私は「コード」と言ったり「タグ」と言ったりしているけれども気にしないでね、というお話です。

class（クラス）

CSSで設定したスタイルを適用する方法としてclass（クラス）があります。
何と言うか、classは「名前」だと思っておいてください。（正確にはもちろん「名前」ではありません。class属性とか何とかあるんですが面倒です。きちんと知りたい方はご自分でお調べください）
HTMLでその名前を付けた部分には、その名前でCSSに書いたスタイルを適用する、って感じです。



例えば「赤枠で囲む」というスタイルを作って、「見出し1」を赤枠で囲む設定をしてみます。
毎回、HTML上の見出しタグに「赤枠で囲む」という指示を記述するのは面倒だし、SEO的にもやらない方がいいみたいなので、CSSで「赤枠で囲む」というスタイルを作って、それを適用します。
「赤枠で囲む」というスタイルには、「akawaku」（赤枠）という名前を付けたいと思います。


CSSにクラス名（classの名前。ここでは「akawaku」）を記述する時は、名前に「.」を付けるルールがあります。
なので、CSS上には



と記述します。



で、この「赤枠で囲む」という指示を、どの部分に指定するのかはHTMLに記述します。
「見出し1」に適用したいのですから、使うのは「h1」です。
HTMLにクラス名を記述する時は「class="akawaku"」のように、「class」を書くルールがあります。



これがHTMLの記述です。


「赤枠で囲む」というスタイルを適用するためには、CSSとHTMLの両方に記述しなければいけません。
また、クラスは共有できますから、1回決めておいたらどこにでもどのタグにでも使えます。
上の例でいうと「見出し1」だけにしか使えないわけではありません。「pタグ」でも「div」でも使えます。

コメントアウト

CSS（スタイルシート）やHTMLにコードやタグを記述する場合、文字として記述しているけれどもブラウザ上では見えないようにすることができます。これを「コメントアウト」と言います。


CSSでは「/*」と「*/」で囲まれた文字、HTMLでは「<!--」と「-->」で囲まれた文字は、ブラウザ上では見えません。
通常は、例えばソースコードを変更したり削除したりする時に、コードをそのまま削除してしまうともしかしたらまた使う可能性があるわけで、じゃあ無効化してしまおうぜ、って感じで使います。「コメントを無効化（アウト）」という意味になりますね。



ソースには書いてあるけれどもブラウザ上では見えない、という仕様になりますので、コメントアウトは「見出し」として使用できます。
私はCSSでもHTMLでもコメントアウトを使って見出しを入れまくっています。見出しを入れておかないと、どこに何の指示が書いてあるのかわからなくなるからです。
カスタマイズが終わったら消せばいいだけですので、編集途中ならばコメントアウトで見出しを入れておいた方がいいと思います。

デフォルト

このブログでは「デフォルト」という単語が頻発します。
「通常時」とか「元の状態」という意味で使っています。「デフォルトのテンプレート」とか「デフォルトの状態だと」のように使います。


ちなみに「デフォルトのテンプレート」が意味するのは、Seesaaブログの新デザインシステムで使用されるテンプレート「シンプルA. ホワイト 右カラム」のことです。
このブログは「シンプルA. ホワイト 右カラム」を元にカスタマイズしていますからね。

「コピペしてください」コピペの方法

私はよく「コピペしてください」とか書くんですが、これは「コピー＆ペースト」つまり、「コピーして貼り付けをする」ことを指しています。
「コピー＆ペースト」の略語が「コピペ」です。コンピュータ用語ですが、今では一般的な言葉に昇格しているのではないでしょうか。


コピーはマウスの右クリックでもいいし、キーボードの「Ctrlキー」＋「C」でもできます。
貼り付けも、もちろんマウスの右クリックからできますし、「Ctrlキー」＋「V」でもできます。
「コピペしてください」と書いている部分は、「この部分を全部コピーして、該当箇所に貼り付けてください」という意味になります。



このブログではコピペしてほしいコードを枠線で囲んで表示しています。
コピペのやり方ですが、まずは枠線内のコードを全部選択してください。選択されている部分は文字色が反転（青色の背景色が付く）されているはずです。
その状態でコピーします。（マウスの右クリックや、「Ctrlキー」＋「C」）
そして、ご自分のCSSやHTMLの貼り付けたい場所にマウスのカーソルを置いて、マウスの右クリックや「Ctrlキー」＋「V」を使って貼り付けてください。



コピーするコード（例えば「編集後のコード」とか「追加するコード」など）には、文字に色が付いたものがありますが、文字の「色」はコピーされません。赤や青で書いてある文字もコピペすれば、普通の黒色で表示されますので、気にせずにコピペしてください。
また、コピペしたらタグが全部左寄りになってしまった、なんてこともあるかと思います。
気にしなくていいです。というか、気になるようでしたら、手動でいちいち「タブキー」とか使って任意の場所に移動させてください。

「探してください」タグやclassの検索方法

私は『管理画面の「スタイルシート編集」画面で「○○」というclassを探してください』なんてことを記事で書いていたりします。というか、ほぼ、書いています。
「探してください」と書いていますので、ご自分の編集画面でそのclassを探してください。
記事内ではコード画面の画像を掲載していますので、画像を見ながら「ここらへんかな？」って感じで探してみるといいと思います。



検索方法ですが、まずは、該当編集画面（例えば「スタイルシート編集」画面）を開きます。
画面の中（コードが書いてある場所）でマウスを1回クリックします。そして、「Ctrlキー」＋「A」で記述内容全部を選択し、「Ctrlキー」＋「C」で丸ごとコピーします。


次にパソコンの「メモ帳ソフト」を開きます。（テキストエディタソフトなら何でもいいです）
コピーしていたコード記述をメモ帳に全部貼り付けます。（「Ctrlキー」＋「V」）
そして、メモ帳の上にある「編集」ツールから「検索」を選択して、探したい単語（classなど）を検索します。
編集したい箇所が見つかったら、メモ帳の中で編集します。


編集が終わったら、メモ帳の記述を丸ごとコピーして、Seesaaブログの該当編集画面（「スタイルシート編集」画面）に全部、貼り付けます。
つまり、元々の「スタイルシート編集」画面に書いてあった記述全部を「メモ帳に記載したコード記述と入れ替える」作業をするわけです。



これを繰り返して編集していくのが、一番簡単なのかもしれません。
「スタイルシート編集」画面内で検索すると、なんだかうまくいかないんですよね。
一度、外部エディタ（メモ帳など）に貼り付けて編集するか、もしくは簡単な編集だったら、ブログの編集画面に直接書き込むやり方が無難だと思います。

コードの文字色

追加してほしいコードや編集後のコード、元のコードにも、私が記述しているコード（枠で囲っているもの）には色を付けていることが多いです。

赤色：変更箇所
青色：追加したもの
緑色：追加した上で注意してほしい箇所

こういうルールで文字色を付けています。（もちろんこのルールから外れた記述もあります）

掲載しているコード画像について

コードを追加したり変更したりするわけですから、わかりやすいようにと思って、コード画面の画像を掲載しています。
最初は頑張って「元のコード」と「編集後のコード」の2つの画像を掲載していましたが、途中で面倒くさくなりました。一応、テキストでも元のコードや編集後のコードを書いていますから、テキストか画像か、どちらかがあればもういいかな？って感じです。



掲載しているコード画像は、管理画面をキャプチャして作っています。
なのでSeesaaブログの管理画面での「行数」が入っているんですが、信じないでください。
私がやったカスタマイズを私と同じような順番でやれば、画像のような行数になります。たぶん。
でも、途中の記事をいきなり見た場合なんかは、行数がズレていると思います。（記事を見ている方の編集画面の行数と、私が掲載している画像の行数が同じになることはないでしょう）
まあ、そんなことは私は知ったこっちゃないです（笑）
気にせずに画像を掲載していきますので、ご了承ください。

ページの呼び方

Seesaaブログには色んなページが存在します。
例えばトップページ、記事ページ、カテゴリページとか、たくさんあります。
カスタマイズをする上で「○○のページ」と書いて説明していますが、正式な名称を私は知りません。
勝手に「タグ一覧ページ」とか「画像詳細ページ」とか呼んでるだけです。
記事ページに至っては「記事ページ」や「個別記事ページ」など、適当に呼んでいますが、ニュアンスで判断してください。




次の記事の紹介

次の記事では「Seesaaブログの編集にあたり私が作ったclass」を説明します。