自分のサイトを少しでも見やすくしてみませんか？？
自分はそんなお手伝いがしたいです。
- 『でも自分で編集なんてできない』
- 『変えたいけどお金がかかるならやらない』
という方に、『誰でも簡単にWebデザインができる方法』を教えていきたいと思います。
本当に簡単にできるので、この記事を見ながら実際にやってみてください。
まずは基本からです。
目次
WordPressでのテーマエディタの編集
WordPressでサイトのデザインを変えたいのであれば、
WordPressを開き、『外観』→『テーマエディタ』をクリックし、右側の『テーマファイル欄』の『スタイルシート』を選択し、その画面上で編集します。
難しそうな英語の羅列(コード)を変更していくことで、自分のブログがデザインされていくって感覚です。
HTMLとかCSSとかです、聞いたことくらいはありますか？
『でもコードなんて書けないしHTML、CSSの知識なんて全くないよ』と思うかもですが、コピペでOKです。
もう一度言いますコピペでOKです。
自分のソースコードを見てみよう
自分のブログの画面に移動して、
『右クリック』→『検証』でOK
『Ctrl+Shift+I』でもOKです。
↑のような感じになればOKです。
これで出てきたのが自分のサイトのソースコードです。
部分的なコードを見ていく
ここで自分が編集したいコードを見ることでその部分を編集すればいいとわかります。
詳しく言うと、ここの文字のサイズはテーマエディタの何行目を編集すれば変わるよってのを教えてくれます。
では見る方法です。
※重要：部分的なコードを見たい
部分的なコード(本来編集したい箇所)を知りたい場合は、
↑の画像の『ここをクリック』と僕が書いているところをクリックし 、
自分のサイト上の編集したい箇所にマウスポインタを置くと
といろいろと要素が出てきます。
↓の『部分的なコード』と僕が書いたところにはその選択した個所に現在設定されているデザインが表示されています。
さらにクリックすると右下にもっと詳しい要素を表示され、
さらに、テーマエディタで何行目にそのソースコードがあるか教えてくれます。
画像では見難いかもですが、１８と書かれています。
↑実際に18行目に同じコードがあることが分かります。
ここを編集すればいいって話ですね。
基本的に大きさを変えるのであれば、数字を変えるだけでいいですし簡単ですね。
このディベロッパーツールではいろいろなツールがあるのでぜひ遊んでみてください。
使っているとすぐ使い方が身に付きます。
実際に変更する前に
実際に変更して、サイトのデザインがもとに戻らないくらいに失敗しないためにも、
自分が編集した画面がどうなるか確認しながら編集したいですよね？
出来ます！
先ほどの画面に戻ります。
↑↑↑の※重要を思い出し、編集したい箇所にカーソルを合わせクリックします。
今回は、文の両端の余白を編集します。
内側の余白をpaddingと言うのですが、
今は上下が0px,両端が40pxとなっています。
ここの40pxを変更しますと
幅がかなり小さくなったことが分かります。
注意：ここで編集しただけでは実際には変更されません。
これを利用して、自分でどのような画面になるか試しながらコードを編集します。(ここを編集するとここが変わるのか～など考えながら)
間違って変なデザインになっても、戻れるので安心ですね。
自分がいいな！って思ったデザインになったら実際にテーマエディタへコピペを行いましょう。
テーマエディタでの編集(コピペでOK)
変更した点をコピーし、テーマエディタで表示されている行数を確認します。
ここでは3878行目と表示されているのでこの辺りをテーマエディタで探してみましょう。
探すと同じ項目があります。
そこに今コピーしたものをペーストし上書きしましょう。
これで完了です。
忘れずに、『ファイルを更新』をしましょう。
変更はすぐには反映されないので、数時間ほど待ちましょう。
次の日には反映されているかと思います。
おわり。