どうも、ゴトーだ。
昨日の記事で、ブログのデザインのカスタマイズ方法がわからないというブコメを頂いたので、最近カスタマイズを覚えた身からアドバイスができると思って記事にしてみた。
この記事の内容を実践してもらえれば、簡単なカスタマイズなら汎用的にこなせるはずなのでぜひ参考にして欲しい。
カスタマイズ環境
この記事ではGoogle Chromeを使うことを前提にしているので、同じように行いたい場合はGoogle Chromeで揃えたほうが効率的だと思う。
ただ確認した限りFirefoxでも同じような機能はあるので主要なブラウザならおそらく大丈夫だろう。
そもそもどうやってカスタマイズするの？
今回はCSSをカスタマイズするので管理画面から、「デザイン」を選択し、そのあと「カスタマイズ」アイコンをクリックすればCSSカスタマイズ画面が表示される。以下のような画面だ。
ここの「デザインCSS」という項目の内容をカスタマイズ後のCSSに置き換えれば上手くいく。
ただ、デフォルトだとこのように@importという値だけ入っているはずだ。
これは指定されたURLのCSSを読み込んでくれというものになっているが、これだけだとカスタマイズしづらいので、指定されたURLにアクセスして、それをダウンロードして自分のPCに入れてしまおう。
なぜこのようなことをするのかというと、自分で新しく追加するだけなら@importの下に自分で定義したものを書けばよいのだが、既存の値を上書きしたいときもあるので、CSSファイルを手元に持っておいたほうがカスタマイズしやすいからだ。
ファイルをダウンロードしよう
/* <system section="theme" selected="afternoon"> */ @import "/css/theme/afternoon/afternoon.css"; /* </system> */ /* <system section="background" selected="default"> */ /* default */ /* </system> */
例えば既存のデザインCSSの項目の値がこのようになっていた場合、「/css/theme/afternoon/afternoon.css」の部分をブラウザで開けばよいのだが、ドメイン名が省略されているのでそのままコピペすれば良いというわけではない。
このブログの場合、ドメイン名が「http://www.gamehuntblog.com」なので、それと先程の値を組み合わせて、「http://www.gamehuntblog.com//css/theme/afternoon/afternoon.css」にアクセスすれば現在のCSSが表示される。
するとCSSの文字列がブワーっと表示されるが、このファイルをブラウザの機能を使って保存しよう。
MacのGoogle Chromeを使っている場合は、以下の画面のような手順で保存ができる。Windowsの場合もおそらく同じようなメニューが有るはずなので探して欲しい。
ダウンロードできたら、カスタマイズ作業に入っていこう。
スタイルを決める方法
実はカスタマイズをするにあたって何も最初からCSSを勉強する必要はない。
ここではケーススタディとして「見出しタグのカスタマイズ」ということにして実際にどうやるのかを説明していく。
ではこのブログの見出しタグを参考にしたい！という人がいたとして、どのように参考にするのかというと、そのタグの位置にマウスポインターを置いて右クリック。
そうしたらオプションが表示されるので、「検証」をクリックしよう。
すると今ポインターが当たっているところがどんなCSS設定になっているかを確認することができる。
もしもポインターの位置がずれていると、左の画面でフォーカスされているところが見出しタグになっていないかもしれない。
今回参考にしたいのはh3という見出しタグなので、もしそうなっていなかったらh3の行をクリックして、正しい位置にフォーカスしてあげよう。
フォーカスすると右側の画面に、どんなスタイルになっているかが書かれている。
これをそのまま参考にして先程ダウンロードしたCSSに書き加えるか、書き直せば良いのだが、いかんせんどのようにカスタマイズするのか分からないという人もいると思うので、具体的なカスタマイズ方法を紹介しよう。
カスタマイズの具体的な方法
例えば、この見出しには左端に青いボーダーが表示されているが、これを試しに消してみよう。
「border-left」というスタイルのところのチェックを外せばボーダーが消えた状態にすることができる。
するとあら不思議、ボーダーが消えてしまいました！
こんな風にこの画面でポチポチいじってると、どのスタイルがどのように影響しているかがわかるので便利。
例えば、この青色を赤色にしたいというときには、このカラーパレットをクリックする。
そうすると色の選択画面が表示されるので、赤色に変更してみよう。
これだけで赤いスタイルの画面になっているはずだ。(どれが本当の見出しで、どれがスクショなのかがわかりづらい…)
次にボーダーを細くしてみよう。
「border-left: 4px solid #5f91d0;」をなっているところの「4px」というところをクリック。
クリックすると編集できるのようになるので「1px」に変更。
するとボーダーが細くなっているのがわかる。
こんな感じで、既存のスタイルを書き換えながら、自分の好きなスタイルを決めていくのが便利だ。
もちろんこれだけやっても、自分のPC画面にしか表示されていないので、リロードしたら消えてしまうので注意だ。
この状態のスタイルが気に入ったら、これをコピーしよう。
これが目当ての見出しのスタイルなので、先程ダウンロードしたCSSに書き加えれば良い。
CSSをカスタマイズ
ダウンロードしたファイルを何らかのエディタで開いて編集したい。
特別なエディタである必要はなくて、Evernoteですらかまわない。ただ、後々のことを考えるとファイル内検索ができるもの方がいいかも。
既存のスタイルを書き換えてもよいのだが、少し難しいので、今回は末尾に追記する形にする。
先程カスタマイズしようとしたタグはh3タグなので、このような形式で追記してみよう。
h3 { =先ほどコピーした内容をここに= }
もしもカスタマイズしたいタグがh4なら「h3」のところをh4に書き換えよう。
追記したら全てのCSSファイルの内容をコピーしておこう。
はてなブログに反映させる
そうしたら最初のときと同じように、はてなブログの管理画面から「デザイン」を選択し、「カスタマイズ」アイコンをクリック。デザインCSSのところを選択。
そこにコピーした内容をそのままペーストしよう。
ペーストして、選択状態を外すと現在のCSSによるプレビューが表示されるので、そのプレビューで想定していたデザインになっているかを確認しよう。
問題がなければ「変更を保存する」ボタンをクリックすれば完了だ。
余談
この方法は知り合いのプログラマーに聞いて教えてもらったが、初心者だとこういう発想が出てこなくて、何をすれば良いのかわからないはずなので、分からないことは何かと聞いてしまったほうが早いと思う。
ここに書かれていなくても、CSSのカスタマイズくらいなら多少はアドバイスできるので、詳しく知りたい人はTwitterでリプ飛ばしてもらえれば(DMでも可)協力するつもりだし、Twitterではゴトーになりきっていないので恐れず聞いてもらえればと思う。