ブログについて

JINを本気でカスタマイズして動くヘッダー作ってみた

こんにちは!管理人のペガサス(@Pegasus_uublog)です!

wordpress テーマ“JIN”を使っている方は必見!

タイトルの通り、自力でカスタマイズして動くヘッダーを作ってみました!

このサイトのトップページに行くとヘッダーに動く文字が表示されるので見てみてください!

*スマホの場合は表示されません。パソコンの場合もPC環境によっては動かない可能性あり

今回はこれのやり方を説明していきます!

なお、ユーザビリティ的に良いのか悪いのかはわかりません。ただの僕の自己満なんでやってみたい人はぜひ!

ペガサス
ペガサス
それでは、スタート!

まずは動かしたい画像を用意

背景用文字用ふたつ用意してください!

僕の場合こんな感じ!

まずこれが文字用。

いや、何も見えんやないかーーーーい!!って思ったでしょ笑

文字が真っ白だから背景と同化してるんです。

白い空いてる部分をデスクトップにドラッグ&ドロップしてみてください。文字の画像があると思うので。

これは「.png」という画像形式で一般的に”ピング”と呼ばれています。

このピングの特徴は、背景が透過できること。

この文字の画像には文字だけで背景がないので、例えば背景が青色のWebサイトにこの画像をのっけたら

こんな感じになります。これ以上深く説明するのはめんどくさいのでもっと詳しく知りたい方は自分でググってください!笑

そして背景用の画像がこんな感じ

なんで宇宙かは知らん、なんとなく。笑

この背景の上を文字の画像が動いてるって感じです!

ちなみに画像サイズはこんな感じ!

文字画像→1533 x 87 ピクセル

背景画像→1262 x 87 ピクセル

それぞれ縦幅の数値は合わせた方が良いです!

具体的な数値はお好みで!

画像の動かし方

まずは、wordpressのカスタマイズ画面へ

「ヘッダー画像設定」で文字画像を設定してください。

今回スマホの場合は表示させないようにしているのでスマホは設定してません。

次に、また最初のカスタマイズ画面に戻り

「追加CSS」のところを押してください。

そしてCSSにこちらを入力してください

#main-image {
background-image:url(このカッコ内は背景画像のURLを貼る);
position: relative;
display: -webkit-flex;
display: flex;
width: 100vw;
height: 87px;
left: 50%;
margin-left: -50vw;
overflow: hidden;
}

#main-image img {
width: auto;
height: 100%;
}

#main-image img {
-webkit-animation: loop 30s -10s linear infinite;
animation: loop 13s -10s linear infinite;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform;
}

@keyframes loop {
0% {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
to {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-50%);
transform: translateX(-100%);
}
}

@media (max-width: 767px){
#main-image{
display:none;
}

#main-image img{
display:none;
}
}

コピペで大丈夫です。

コード内にも書いてますが(このカッコ内は背景画像のURLを貼る)のところは自分で用意した背景画像をwordpress上にのっけたらその画像のURLをコピーしてカッコ内にペーストしてください。

ヘッダーの縦幅を変えたい方は

#main-image {
background-image:url(このカッコ内は背景画像のWebURLを貼る);
position: relative;
display: -webkit-flex;
display: flex;
width: 100vw;
height: 87px; ←ここの値を調節する
left: 50%;
margin-left: -50vw;
overflow: hidden;
}

という感じでお願いします。

ちなみに文字画像と背景画像の縦幅は同じにした方が良いと前述で述べたが、その画像の縦幅と同じ数値にしてあげると良い感じになります。

以上、これでおそらく大抵の人は動くようになったと思います。(PCのみ)

最後に

細かい調節や修正はCSSをわかってないと厳しいと思うのであくまでやりたい方のみやってください。

多分ないと思うけど仮にこれをやって他の記事ページの表示が崩れても僕は責任取れないのでそこは自己責任でお願いします(T_T)

後は別に文字じゃなくても画像なら動かせるので何かフレッシュなアイデア求む!!

あと、動くヘッダー部分に何書くかは迷走中です!なんかNEWS的なの書きたいな!

「月間PV数が1万PV突破しましたああああ!」

てきな!まだ月間1000PVくらいだけどね!泣

それでは、こんなところで!

ペガサス
ペガサス
最後まで読んでくれてありがとう!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ブログランキング・にほんブログ村へ