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

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pc-ueno.jpg” name=”うえのさん”]こんにちは~!
姫路のホームページ屋さん
うえのです(@flexbox)です。[/speech_bubble]

 

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

 

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

 

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

 

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pikutosan.png” name=”ピクトさん”] むずかしい専門知識はなしでおねがいね [/speech_bubble]

 

 

[speech_bubble type=”drop” subtype=”R1″ icon=”pc-ueno.jpg” name=”うえのさん”] もちろんですよ [/speech_bubble]

 

 

作業のながれ
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;
}

 

 

 

 

 

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pc-ueno.jpg” name=”うえのさん”] 文字を太くしたいよ!って方はこちらのコードをコピー[/speech_bubble]

 

 

/* ヘッダーカスタム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(赤色)ですね。

 

 

 

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pc-ueno.jpg” name=”うえのさん”] ファイルを更新ボタンを忘れずに![/speech_bubble]

 

 

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

 

 

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

 

 

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

 

 

 

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

 

 

[speech_bubble type=”drop” subtype=”R1″ icon=”pc-ueno.jpg” name=”うえのさん”]  使い方は簡単で上の写真のように3ステップ。[/speech_bubble]

 

 

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

 

 

 

 

 

 

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

 

 

 

 

 

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

 

 

 

 

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

 

 

 

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pc-ueno.jpg” name=”うえのさん”] ここで自分のイメージに近い色を決めるのもよしです。
[/speech_bubble]

 

 

 

 

 

 

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

 

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

 

 

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

 

 

 

 

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

 

 

 

 

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

 

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

 

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

 

 

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

 

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

 

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

 

 

キャッシュとは?

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

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

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

 

 

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pc-ueno.jpg” name=”うえのさん”] ワードプレスでは、キャッシュを利用して早く表示させるプラグインもあります。
データを扱うだけにぼくは怖くて使っていません。[/speech_bubble]

 

 

 

 

キャッシュの消し方

 

 

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

 

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pc-ueno.jpg” name=”うえのさん”] 2ステップを写真で説明します。[/speech_bubble]

 

 

 

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

 

 

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

 

 

 

 

 

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

 

 

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

 

 

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

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pc-ueno.jpg” name=”うえのさん”] 慌てなくても大丈夫。壊れたのではないですよ。[/speech_bubble]

 

 

 

 

 

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

 

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

 

 

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

 

 

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

 

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

 

 

 

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

 

 

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

 

 

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

 

 

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pikutosan.png” name=”ピクトさん”] おー!色が変わってる![/speech_bubble]

 

 

[speech_bubble type=”drop” subtype=”R1″ icon=”pc-ueno.jpg” name=”うえのさん”] カスタム完了です、お疲れ様でした。[/speech_bubble]

 

 

 

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

 

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

 

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

 

[speech_bubble type=”drop” subtype=”R1″ icon=”pc-ueno.jpg” name=”うえのさん”]うえのでした。
(@flexbox)[/speech_bubble]

 

 

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

 

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

 

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

 

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

耳より情報

ブログ記事でお話出来ない情報は、メルマガで発信しています。

例えば・・・

・HSP当事者が感じる生の声。

・HSCを持つ親が知りたい事。

・HSPと発達障害について。

その他、トピックス的情報など。

下のボタンをクリック

シェアありがとうございます

記事に関するご質問は、下のバナーからお問い合わせいただけます。

クリックすると、フォームが表示されるので気軽にご質問お願いします。

ABOUTこの記事をかいた人

HSPと知って、自分の感じてきた生きづらさを解放する方法を模索中。1日平均2,000UUのメディア運営の三年目。 ブログへ気持ちを書き出す事で双極性障害2型を克服しつつある。現在、家族関係のPTSDを治療中。スナップカメラマン。電王ファン。Perfume愛。 【詳しいプロフィールはこちらで~す