ブログのデザインを変えてみよう

スポンサーリンク

目次

ゴール


本記事ではブログの章構成および表のデザインの変更する方法をまとめます。
例として章構成および表のデザインを下の画像のようなものにすることを目指します。

【章構成のデザイン】

【表のデザイン】

必要なもの

必要なもの 価格(円)
1 PC ピンキリ
備考 インターネット接続可能なこと
2 WordPressのアカウント 無料
備考 持っていない場合は、こちらを参照→WordPressのインストール方法

デザインの変更方法


HTMLのデザインはCSS(Cascading Style Sheets;カスケーディング・スタイル・シート)によって定めれれています。
ですので、ブログのデザインを変更する場合はCSSファイルの内容を変更していくことになります。
テーマごとにCSSファイルは定められていると思いますが、今回の記事ではSimplicity2を例としてまとめたいと思います。

CSSファイルの編集するにはWordPressの左側のメニューにある外観->テーマの編集を選択し、スタイルシート style.cssを選択します。
また、このとき編集するテーマが”Simplicity child”であることにも注意してください。

本ブログでは
/* Simplicity子テーマ用のスタイルを書く */
の下にデザインを設定するコードを追加していくことにします。

章構成のデザインの変更

style.cssの追加コード


下記のコードをstyle.cssに追加します。

デザイン確認


デザインを確認するために、下のtestDesign.htmlをブログ投稿画面で確認してみてください。

すると、下の様に表示されるはずです。

表のデザインの変更

style.cssの追加コード


下記のコードをstyle.cssに追加します。

デザイン確認


デザインを確認するために、下のtestDesign.htmlをブログ投稿画面で確認してみてください。

すると、下の様に表示されるはずです。

以上!

スポンサーリンク

フォローする

スポンサーリンク