ブログのデータが消えてしまった。
復活も絶望的である。
なので、もう一度ブログの構築を０からスタートさせることに決めた。
こんな失敗をした理由は、追々説明していきたいのだけれど、今回はブログの構築方針に絞って書いていくつもりだ。
テーマはCocoonで
テーマ
今回、サーバーはそのまま、Word Pressベースでブログを構築するところまでは、前回と同じである。
で、次に考えるべきはテーマだ。
テーマは色々あるので、これを機に変えても良いのだが。
今のところ使ったことのある、現在進行形で使っている「Cocoon」を継続して使うことにした。
理由は色々あるのだけれど、先ず第一に多機能で、無料で使える。そして、何より慣れているものが都合が良いという。
他の有料テーマも考えたのだけれど、趣味の延長上で使うという感じなので、無料テーマが無難だと判断した。
ファビコンを作る
ファビコンって何？ってな話なんだけれども、テーマにCocoonを選択した段階で、こんな感じのファビコンが選ばれる。
青地に白丸という感じのイメージだ。流石にこれでは味気ない。
だから、新たに作る事にする。
先ずは何か画像を用意しなければならないのだけれど、サイズは16×16とか、24×24とか、32×32とか、かなり小さいものなので、とにかく簡単な図形が良い。
簡単な図形の一例としては、文字をファビコンとしてデザインしてあげる方法がある。もちろん、特徴的な図形を考えればイイのだろうけれど、それはなかなかデザインのセンスが問われる話。
例えば、twitterであれば青い小鳥のファビコン、Youtubeであれば赤い四角の中に白い三角をあしらったファビコン、とにかく一目で分かるものが優れていると言える。
適当な図柄を思いつかないので、四角を4枚並べた単純な図柄にしてみた。
で、これをファビコンとして加工するのだけれど、幾つかファビコンを生成する事のできるサイトがあるので、これを利用した。
ココのサイトを利用して「favicon.ico」というデータを作り、これを利用する事にする。
ファビコンを利用する
さて、次に、ファビコンを設定する。Cocoonではファビコンの埋め込み方について専用サイトに解説してくれているので、それを参照して欲しい。
ココに書かれている通り、「外観」＞「カスタマイズ」として進み、「サイトアイコン」を設定すれば良い。
デザインを決定していく
見た目は重要
で、取り敢えずファビコンを決めたところで、次にデザインを決めていきたい。
訪れてくれた人が常に目にする部分なので、しっかりと選んで欲しい。見た目はかなり重要なのである。
「Cocoon」の設定は、「Cocoon設定」の項目の中から選ぶ事ができる。
そして、「Cocoon設定」では、他のテーマでは見られない細かな配慮がされているので、割と簡単にデザインを選ぶ事が可能となる。
で、「Cocoon設定」の中に、「スキン」という項目がタブに用意されているので、ここを選択することで、現在のデザインと、選ぶ事のできるスキンのリストが出てくる。
「スキン一覧」には、こんな感じでずらずらと選ぶ事のできるスキンが並んでくる。
このリストにないスキンも選択できるようなのだけれども、今回はこの中から選ぶ事にする。
好きなように替えられるというのは、なかなか悩ましいのだけれど、まあ、時間がないのでサクサクと決定していこう。
で、スキンは「COLOTS（グリーン）」というものを選んでいるのだけれど、このスキンを選んだ上で、デザインを変えていくことが可能だ。
ヘッダーを決めていく
デザインはスキンを選んだ時点でこんな感じになっている。
この段階ではかなり残念な感じであることはご覧の通りである。
一番気になるのはヘッダーデザインだな。
ヘッダーデザインも、「Cocoon設定」の中で調整が可能である。この続きは、次回触れていきたいと思う。
ヘッダーデザインのイメージを決めよう
トータルデザイン
さて、デザインは割とあっさりで残念な感じなのだけれど、余り作り込んでも開始が遅くなるだけ。
最初はデザイン性を重視しつつも、軽めに作ってあげるのが良いと思う。
で、最初に決めたのが「トータルデザイン」なんだけど、これはブログをどんな配色で統一していくかという方向性が決まっていれば、割と簡単に決まると思う。
前回のブログも緑を基調としたデザインであったため、今回もそれに倣って作っていくつもりだ。
実際にファビコンも緑色を選択したので、トータルのデザインもやっぱり「緑」と「森」をテーマにしていきたい。
ヘッダーの作成
じゃあってことで、ヘッダーの背景は森林のイメージを埋め込んでいくことにした。
具体的にはこんな感じの絵を使う。
何でも良いとは思うんだけど、前回のブログと同じ様な方針で、キャンプに関する記事を増やしたいと思うから、「森」が良いのかな、と。
時々デザイン変更することも視野に入れておくと良いかも知れない。
そんな訳で、これをヘッダーの背景に埋め込む。
具体的には、「Cocoon設定」の中に「ヘッダー」という項目があるので、これをチョイスしていく。
下の方に、「ヘッダーロゴ」と「ヘッダー背景画像」という項目があるハズなので、ここで画像を選択してあげればOKだ。
タイトルのデザインを調整する
見出しに気を遣おう
そんな訳で、見出しのデザインについてなんだけど……、このブログでやるよりもキッチリ説明されているサイトを紹介した方が遙かに早い。
だから先ずは、こちらのサイトをご紹介。
……説明する必要が無くなってしまうな。
とはいえ、簡単に説明しておくと、見出しのデザインに関してはCSSを弄ることになる。
「外観」＞「テーマエディター」と進んで、CSSをコピペすれば終わる。
CSSをコピーするやり方は、上に紹介したサイトを参考にすればバッチリなので、ここでは割愛する。
注意しておきたいのは、CSSの更新するにあたって、前のデザインに上書きする形になるので、一度クリアする必要があるって事かな。
この辺りは試行錯誤して、良いデザインを見つけてほしい。
デザインは統一した方が美しい
ただまあ、敢えて言うのならば、統一感を出しておくとイイと思う。
H2～H4が一般的によく使う見出しのコードなんだけど、これを似たデザインで統一しておくと良いと思うよ。
僕は、H3だけ違うデザインにしたのだけれど、この辺りは好みの問題だと思う。
デザインを加えるとこうなる。
どちらが好きかは好みによると思うけれど、左側が変更前で、右側が変更後のものである。変更前もすっきりしていて良いのだけれど、タイトルかどうかがいまいちよく分からないという感じがするので、敢えてラインを入れて見易くしてみた。
今後、もうちょっと弄るかも知れない。
コメント