へぼプランナーのダウンザライン戦記

■オリジナリティ付与の仕方？
私はプロのデザイナー（＆WEBデザイナー）ではありません。趣味の範疇でWEBをいじっているレベルです（一時期、イベント企画のとき予算の都合上外注に出せず某サイトを構築運営したことはありますが、Web2.0レベルではなく、Web0.5レベルです）。今回、テニスブログの中身をいじってみて勉強になりました。

今回、どういう反応が返ってくるか予測がつかないので迷いましたが、いつもテニスに対する知識を教えていただいている分、今回得た知識をシェアしていこうと考え、記事にさせていただきます。

ほんとうは、ネタがなくなったからですが（笑）。

なお、デザインの変更は自己責任において行ってください（私の方法は我流です。あらかじめご了承ください）。また、変更する前に元のソースコードをご自分のPCなどに保存しておいてください。ほか、これぐらいのことは知ってるしもうやってるよという方は読み飛ばしていただいて結構です。

また、説明が分かりづらい部分もあるかと思いますが、自分が他人に説明できるまでのレベルに達していないため噛み砕いて平易に説明することができません。いつも、テニスに関することはいろいろと平易にコメント頂いている身なので心苦しいですが、ご容赦ください。


■ブログ全体の配色や文字サイズ、文字色について
まず、ブログの編集画面で、『デザイン管理』の項目を開いてください。ご自分が今使用しているテーマのところで、『編集』をクリックしてください。デザイン基本設定変更というページが表示されます。そこの、『スタイルシートソース』のところを編集していきます。

過去の古いテーマ（スキン）はともかく、最新のテーマ（スキン）はどのコードが何を表示するかあらかじめコード内に書かれています。それをたよりに変更したい部分のあたりをつけます。
font-size:25px; 文字の大きさ
font-weight:extra-bold;　太文字
color:#1f6224;　文字色
line-height:150%;　行間
text-decoration: underline;　文字の装飾
background-color:#FFFFFF;　背景の色
などといった部分の、数字や＃～の部分をいじれば、文字の大きさや色や背景色を変えることができます。＃～は色の数字です。WEBカラーリファレンスなどを参考にしてください。

a:link {
color:#0000CC;
text-decoration:none;
}
a:visited {
color:#660033;
text-decoration:none;
}
a:active {
text-decoration: underline;
}
a:hover {
text-decoration: underline;
について、a:linkはリンク文字の設定です。a:visitedは訪問済みのリンク文字の設定です。a:activeはリンクをクリックしたときのリンク文字設定の設定です。a:hoverはリンク部分にカーソルを置いたときのリンク文字の設定です。text-decoration: underline;　のunderlineは下線のことです。
スタイルシートリファレンスが参考になると思います。

そのほかの部分は、あまりいじらないほうが賢明かと思います。あとは、再構築をすればＯＫです。




■オリジナルパーツについて
まず、これは我流です。やっつけ仕事です。そのことをご了承ください。

ブログの編集画面で、『パーツ管理』の項目を開いてください。で、『新規作成』をクリック。種類やタイトルなどの項目を記載してください。ソースの部分ですが、一番手っ取り早いのは、私のここのブログをブラウザで表示しブラウザのメニューの『表示』→『ソース』で、ソースコードを表示。該当部分、つまり、ブックマークの部分のソースをコピーすることです。

あるいは、同様にご自分のテニスブログのソースを表示し、カテゴリ別アーカイブの部分の＜DIV ＣＬＡＳＳ＝～　から　＜／ＤＩＶ＞までをコピーしていただいてもかまいません。

『カテゴリ別アーカイブ』という文字は任意の文字に変えてください。それが項目タイトルとして表示されます。
＜ｌｉ ｉｄ＝”ｃａｔｅｇｏｒｙ＿ｉｄ1”＞＜ａ ｈｒｅｆ=～の部分はすべて削除してください。代わりに、任意の文を入れます。たとえば、どこかのコードを拾ってきてペーストしてもかまいません（ただし、エリアの幅は考慮してください）。あるいは、いつも記事本文を書くときにリンクをつけたときに自動で書き込まれる＜ａ ｈｒｅｆ＝”ｈｔｔｐ:／／～などをコピペして、リンク集を作ることもできます（つまり、新規投稿の記事作成画面を使い、それをコピーすれば簡単です）。

あとは、ブログ編集画面の『レイアウト変更設定』で作成したパーツを表示エリアに移動させ、再構築をすればＯＫです。

ただし、今お使いのスキンのコードが、私の今使っている『ナチュラル ＩＩ （顔アイコン対応）』のコードとあまりにもかけ離れている場合、上手くいかないかもしれません（たぶん大丈夫と思いますが、自己責任でお願いします。ご自分の今のブログのソースをコピペで使われる場合は大丈夫です）。昔の古いスキンは、最新のスキンと少しコードの記述が違う？ようなので上手くいかないかもしれません。

なお、もしかしたら今後スキンを変えたりしたときにパーツが使えなくなるかも知れません。これは特に、パーツ両側スキンと片側スキンで問題になるかもしれませんが、もしかしたら、きちんと互換性を保つようにもなっているのかもしれません。




■画像を変えたい場合
背景に画像が使われている場合、その画像を変更することもできます（画像編集ソフトを持っていないとダメです）。
まず、ブログの編集画面で、『デザイン管理』の項目を開いてください。ご自分が今使用しているテーマのところで、『編集』をクリックしてください。デザイン基本設定変更というページが表示されます。そこの、『スタイルシートソース』のところを編集していきます。

background-image:url(http://xxxxxx.blog.tennis365.net/image/header.gif);
の部分の　http://xxxxxx.blog.tennis365.net/image/header.gif　をブラウザで表示させます。それをそのままPCに保存してください。

保存したものを画像編集ソフトで開き、加工していきます。あるいは、保存した画像と同じ縦横サイズで新たに画像を作ります。作ったら、ご自分のブログ編集画面の『ファイル管理』で、ファイルをアップロードします。アップロードできたら、下のファイル名一覧に出てきたheader.gifをクリックさせブラウザに表示。URLアドレスをコピーします。

先の『スタイルシートソース』の
background-image:url(http://xxxxxx.blog.tennis365.net/image/header.gif);
URLアドレスの部分をコピーしたURLアドレスと置き換えます。
なお、加工や新画像置き換えする場合、画像サイズは元画像と同じサイズにすることを忘れないでください。

あとは、再構築するだけです。
なお、繰り返しますが必ず自己責任で行ってください。また、スタイルシートソースをご自分のＰＣのメモ帳などにバックアップコピーしてください。




■最後に、あくまで自己責任で
ある程度までは、コメント欄を通じてケアいたします。逆に言いますと、ある程度以上はケアできません。申し訳ありませんが、ご了承ください（すみません、いつもコメントでテニスのことについてたくさん親身にケアしていただいているのでできるかぎりはケアしたいと思いますが、技術的なことなのでやり取りが難しく、また、万一のときの責任も私は負うことができません。本当に心苦しいですがお許しください。）。

テニス365さんが、グループブログ機能や、ブックマーク機能、パーツテンプレート提供などを開始するのを待つのも、一つの方法かと思います。

P.S.
私は一時的にブックマーク表示させています。ただ、テニスブログが緩やかな閉鎖状況に推移していく危険性も認識しています。なので、もしかしたら非表示にしたり数を少なくするかもしれません。ご了承ください。また、ブックマークしているブログ以外にもたくさんよいテニスブログはあります。事実、私はブックマークしていないテニスブログもよくアクセスしています。といいますか、新着のタイトルで読むか読まないか判断しています。ブックマークしていないからといって他のテニスブログをまったく見ていないとかチェックしていないというのは絶対にないです。そのことは、ご理解ください。


▼トレーニング報告
10分ランニング＆ダッシュ、腕立て腹筋背筋スクワット×20（今後、サーキットトレーニングに移行予定）。あとは、素振り（サービスを重点的に）15分やりました。