初心者のVaster2のカスタマイズ方法(GoogleChromeデベロッパーツール)[Blogger / Vaster 2] Akari

初心者のVaster2のカスタマイズ方法(GoogleChromeデベロッパーツール)[Blogger / Vaster 2]

CSSやHTMLはなんとなく聞いたことあるなぁ…程度で、Vaster2のカスタマイズ記事を公開している私が、実際どのようにカスタマイズを進めているかをまとめました。

かなり泥臭いやり方なので、もっとスマートな方法があると思います。
ただ、とても簡単なので誰でもできます。
もし自分でカスタマイズをやってみたいなという人は、参考にしてみてください。

スポンサーリンク

GoogleChromeの「検証」を使う

私がメインで使用しているブラウザのGoogleChromeには、「デベロッパーツール」という機能があります。
右クリックしてくると出てくる「検証」という項目をクリックして起動します。


変更したい部分がどのように書かれているか探す

デベロッパーツールの左側の部分に書かれた文字列にマウスをあてると、そこの文字列がブログ上ではどの部分に当たるかが色で示されます。
また、文字列をクリックすると、右側により詳しい内容が示されます。


↑例を出してみました(クリックで拡大します)。

この場合、記事リストの記事が「article-list」という部分で設定されていることが分かります(左側の文字の部分)。
また、周囲に10px余白を取っていることもわかります(右側の四角の部分。周囲に10と書かれています)。

HTMLを編集する

Bloggerの「テーマ」→「HTMLの編集」から、該当の部分を探します。

HTML部分をクリックして、Ctrl+Fを押すと検索画面が出るので、それを利用すると簡単です。
※外の部分がアクティブな状態でCtrl+Fを押すとブラウザの検索画面になってHTML全体を検索できないので注意してください


デザイン的な部分を決めているのは「.」(ピリオド、ドット)で始まる部分です。
例えば、↑の例で出した部分のデザインを変えたい場合は「.article-list」で始まる部分を探します。
そして { と } の間に、変えたい内容を書き込みます。

どこに配置するかなどを決めているのは<と>で囲まれた部分です。
例えば、↑の例で出した部分の配置場所を変えたい場合は「<div class="article-list">」の部分を変えます(ということでいいはずなのですが、私自身ほとんど配置はいじってないので、おそらくそういうことだろうという程度の認識です)。

実際に変えて再読み込みする

HTMLを書き換えて「テーマを保存」したら、実際にブログを再読み込みして反映されているかを確認します。

HTMLの中に変更したい部分が見つからない場合

ときどき、デベロッパーツールで見つけた名前と同じ名前がHTMLの中に見つからない場合があります。
このとき、新しく書き足すとうまくいく場合があります。

---
こんな感じに変更しながら、このブログのカスタマイズ記事は作成されています。
非常に簡単な手順で変更できるのでカスタマイズに興味のある方は試してみてください。
Bloggerのカスタマイズ記事がもっと増えて欲しいので、ご自分のブログで共有してくれるととても嬉しいです!

関連記事:初心者でもわかるVaster2のカスタマイズ方法の記事リスト
スポンサーリンク

0 件のコメント :

コメントを投稿