ストークのヘッダー下お知らせリンクをカスタムしてみた

ワードプレス

 

うえのさん
こんにちは~!
姫路のホームページ屋さん
うえのです(@flexbox)です。

 

ストークユーザーが多くて、変わり映えしないブログのデザインになります。

 

少しだけカスタムしてみると、見た目がハッキリ変わってきます。

 

ヘッダー下のリンクを使っている人向けに、初期設定を好みの色に変更するカスタム方法を書いていきます。

 

 

ピクトさん
むずかしい専門知識はなしでおねがいね

 

 

うえのさん
もちろんですよ

 

 

作業のながれ
1.管理画面→外観→カスタマイズを開く。

2.追加CSSを開く

3.カスタム用CSSをコピペ、色を好みに変更。

4.仕上がりを確認、終了。

 

 

 

 

めちゃ簡単な方法

 

 

1.【管理画面】 → 【外観】 → 【カスタマイズ】

 

赤枠をクリックしてください。

 

 

 

 

2.カスタムメニューから【追加CSS】をクリック

 

 

下の写真を参考に赤枠をクリック

 

 

 

 

 

3.ヘッダーカスタムcssをコピー、追加cssの赤枠みたいに貼り付け。

 

 

(1)下のcssを全部コピー

 

 

/* ヘッダーカスタムcss */
.header-info a{
display: block;
font-size: .9em;
text-decoration: none;
text-align: center;
color: #000;
background: #feff49;
padding: .4em;
}

 

 

 

 

 

 

うえのさん
文字を太くしたいよ!って方はこちらのコードをコピー

 

 

/* ヘッダーカスタムcss */
.header-info a{
display: block;
font-size: .9em;
text-decoration: none;
text-align: center;
color: #000;
background: #feff49;
padding: .4em;
font-weight: bold;
}

 

 

 

 

※ このコードは、蛍光の黄色になります。

 

 

(2)写真のようにペタッと貼ります

 

 

 

(3) 色の変更をしていきます。色は #と6桁の数字で表現されています。

 

写真は、#f55e5e で蛍光色の黄色。初期設定は、 #feff49(赤色)ですね。

 

 

 

 

うえのさん
ファイルを更新ボタンを忘れずに!

 

 

色を決める便利ツールの紹介

 

 

色は全体的なバランスやヘッダーとの相性もあるので、色決めってむずかしい。。。

 

 

無料で配色を自動で決めてくれるサイトで、ぼくもよく使っています。

 

 

 

ウェブ配色ツール by フォルトゥナ

 

 

うえのさん
 使い方は簡単で上の写真のように3ステップ。

 

 

右上のメニューをクリックして、メニュー画面を出します。

 

 

 

 

 

 

そこから、ドーナツ上のリングからブログのテーマ色に小さな黒リングを移動。中の四角で色の明るさや濃さを調整します。

 

 

 

 

 

ここが決まったら、下へスクロール。ヘッダーに合わせるなら背景色ブロックのコードをオススメします。

 

 

 

 

全体をイメージしにくいので、フォルトナのページが今出ているコードにそれぞれ変化するので参考になります。

 

 

 

 

うえのさん
ここで自分のイメージに近い色を決めるのもよしです。

 

 

 

 

 

 

4.仕上がりを確認、終了

 

cssが反映しているか、自分のブログでチェックします。

 

 

管理画面の左上に自分のブログの名前が出ていますが、ここをクリック。ブログのトップページになりましたね。

 

 

 

 

初期設定の赤から変わっていればOKです(*^^*)

 

 

 

 

もしも、変わっていない場合はキャッシュを消そう

 

cssが反映されていない場合は、まずコードの .  や { } が正しいかチェック!

 

  • 抜けていませんか?
  • 半角になっていますか?
  • 見えないけど空白スペースが入ってませんか?

 

 

きちんとコードがチェック出来たら、ブラウザのキャッシュ(閲覧履歴データ)が原因。

 

キャッシュは悪玉ではなくて、サーバーのデータを記録して、見たことのあるページを早く表示するものです。

 

パソコン内にあるデータを読み込みするので、cssを変更する前の記録を読み込んでいる可能性があります。

 

 

キャッシュとは?

インターネットを見る時に、グーグルクロームやサファリで見ています。

一度見たページを次に見るために、データをパソコン内に保存します。

スムーズにページ見るために保存しているデータの事をキャッシュ(cache)といいます。

 

 

 

うえのさん
ワードプレスでは、キャッシュを利用して早く表示させるプラグインもあります。
データを扱うだけにぼくは怖くて使っていません。

 

 

 

 

キャッシュの消し方

 

 

  1. ブラウザを開いて、F12キーを押す。
  2. ブラウザ左上の↻マークを長押し。キャッシュ消去と再読み込みをクリック。

 

 

うえのさん
2ステップを写真で説明します。

 

 

 

1.ブラウザを開いて、F12キーを押す。

 

 

開いているブログの管理画面とは、別に新しいタブを開きます。

 

 

 

 

 

なんでもいいですが、Yahoo!でやってみます。

 

 

Yahoo!を開いて、F12キーを押すと写真のような画面に変わります。

 

 

開発者モードの画面になっていますね。

 

うえのさん
慌てなくても大丈夫。壊れたのではないですよ。

 

 

 

 

 

2.ブラウザ右上の↻マークを長押し。
キャッシュ消去と再読み込みをクリック

 

開発者モードのままで、画面左上を見てください。

 

 

写真のような↻マークを長押しすると写真のメニューが現れます。

 

 

短いクリックですと、ページの再読み込みだけ。

 

失敗してももう一回長押しするとこのメニューが出てきます。

 

 

 

少し長めにページを読み込みます。終わるまで待ちましょう。

 

 

読み込みが終わったら、F12キーを押してください。元の画面に戻ります(*^^*)

 

 

これでもう一回、ブログのトップページを開いてcssが反映しているか確認します。

 

 

 

ピクトさん
おー!色が変わってる!

 

 

うえのさん
カスタム完了です、お疲れ様でした。

 

 

 

ストークのカスタムまとめ

 

いかがでしたか?cssに詳しくないと、カスタムってハードルが高いように感じます。

 

簡単に出来て、似たようなデザインから一歩抜け出す事が出来るカスタムがあるんです。

 

うえのさん
うえのでした。
(@flexbox)

 

 

ストークのカスタム関連記事も書いています

 

ストークで写真付きの関連記事をブログカードで出してみよう。

 

Instagramを10分でブログに埋め込み連携。プラグインの設定を解説!

 

1分で出来る!Googleマップをブログに簡単に埋め込む方法(レスポンシブ対応)

コメント