Twenty FifteenでCSSを使い見やすく

 
前々回のブログではメニューが背景に溶け込んで見づらくなりましたが、

今回は、そのメニューをCSSを使って見やすくする方法です。


WordPressのテーマ Twenty Fifteenを使ってみた。


twentyfifteen


 

 


上側の写真を見ると、左側のメニューが見やすくなっています。


 


以下、どのようにして、CSSにより見やすくしたかを書いていきます。


まず、「Enhancing CSS」というCSSを追加できる


プラグイン(追加プログラム)を追加します。

 

プラグインの追加の仕方ですが、とても長くなるので


今回は割愛させていただきます。

 

もし、プラグインの追加の仕方が分かりにくい場合は、


以下のリンクををクリックしていただけたらと思います。

WordPressプラグインのインストールと停止・削除・更新の方法

 

追加されましたら、「ダッシュボード」の「外観」をクリックすると


「拡張CSS」という項目が現れます。


そこをクリックします。

 

すると、「拡張CSS」という画面が表示され、その下にある、

白い空白にCSSを書くことができます。

 

残念ながら、いきなりCSSを書こうと思っても、

書くことは難しいです。

 

まず、サイトで使われているメニューが書かれたコードを探します。
 
見つかりましたら、コードをCSSに変えます。

そして「拡張CSS」の白い空白に貼り付けることにより

メニューの色が変わります。

 

その方法について


まず、ダッシュボードから「公開ページを

見る」とします。

 

開きましたら、右クリックで「ページのソースを表示」

もしくは近い言葉が書いてあればそこをクリックします。

 

すると、画面が切り替わりそのページ全体のコードが

表示されます。

 

次に、「最近の投稿」を  「全体のコード」の中に見つけます。

 

116行目前後に、


<h2 class="widget-title">最近の投稿</h2>


が、見つかりました。

 

<h2 class="widget-title">最近の投稿</h2>  をCSSのコードに書き換えます。


以下のようになります。

 

h2.widget-title{color:#fff;font-weight:bold;}


文字を白にして、さらに太くしました。

 

この CSSを「拡張CSS」の白い空白に書きます。

 

「変更を保存」ボタンを押して、保存をした後、


サイトを表示してみますと、「最近の投稿」が白く太く見やすくなります。

 

「最近の投稿」以外に、「最近のコメント」「アーカイブ」

「カテゴリー」も太く見やすくなりました。

 

同じように、他の部分も見やすくなるように、全体のコードから、

見つけてCSS化します。

 

もっと、簡単に見つけたい場合は、


「さくらインターネット」のレンタルサーバーでしたら、


「ファイルマネージャー」を使ってみてもいいと思います。

 

他のレンタルサーバーにも似たようなものがありましたら、


それを使って見てもいいと思います。


とても地味で時間がかかりますが、


地道にやっていくと成功して


達成感が生まれるかもしれません。


と、いうことで今回は終了します。