アタックフォーメーション!

元ディーラー整備士が車業界から飲み物まで様々なテーマを本音で綴るブログ

アタックフォーメーション!

コピペでブログをカスタマイズ

CSS 反映しない

 

 プログラム関係が素人の僕はネットで検索してそのままコピペという形でしかできません。「コピペ一発」って書いてあっても上手くいかないことって多いですよね。

コピペ一発で反映されない場合はCSSコードの優先順位が関係しているそうです。それと使用しているブログテーマによっては標準でカスタマイズが施されています。最初からカスタマイズされているものに追加でカスタマイズしても優先順位で負けて反映されない可能性があるそうです。

一通りやりたかったことができたので苦労したことをメモしておきます。はてなブログproでPLAINというブログテーマを使用しています。

 ※スマホ版・PC版を別々のコードを入力しています。2019/03/10追記:ZENO-TEALでレスポンシブに変更しました。

好みのデザインがない場合は自分でアレンジする

※現在はZENO-TEALで四角の噴き出し風、見出しにしています。

好みのデザインが見つからない場合は自分でアレンジすることができます。四角のデザインから角を丸くしたい場合は「border-radius: 0.5em;/*角丸*/」を追加することで角が丸くなります。

「0.5」の数字を変更することで丸さが変化します。少しずつ変化させてちょうど良い見た目になるように調整できます。こういった微調整ができると既存のデザインからオリジナルに変えることができます。

意図しない場所まで反映した

はてなブログのPLAINではブログタイトルが『h1』でブログタイトル下のブログの説明が『h2』です。記事の中の見出し『h2』をCSSでデザインの変更をするとブログの説明まで記事内の見出しと同じデザインになってしまいました。

記事内の見出しだけ変更するように指定することで解決します。

www.attack.work

スマホ版のアイコンとヘッダメニューの削除

www.yukihy.com

参考にしたページはこちらです。スマホ版のアイコンとはてなブログのヘッダメニューが消えました。

画像を挿入したい時はデザイン→スマホマーク→ヘッダ→タイトル画像→スマートフォン用に画像を設定する→ファイルを選択から好きな画像を挿入→表示設定→画像だけ表示→サイズ設定→画像の高さに合わせる。

width: 100%;/*横幅いっぱいに設定*/
padding-top: 0px;/*タイトル上部にスペースをつくる*/
padding-bottom: 0px;/*タイトル下部にスペースをつくる*/
margin: 0px;/*ヘッダーまわりの余白を消す*/

捕捉:コード内のwidth以外を全部0pxにして余白を取りました。スマホ版はこれで完成。

css ヘッダ画像 余白

ヘッダー画像を余白なしで挿入

www.life-is-rpg.com

こちらの記事を参考にしました。画像サイズで指定しているサイトが多いのですが画像表示100%で指定をしているので横幅ぴったりは表示することができます。大きな画像を用意しないと綺麗に表示されないかも。

横幅 余白なし

画像の表示できる大きさはどうやって指定したらいいのかわからなかったのでいっぱいサイズ作りましたw多分cssで調整できるのでしょうがわからなかった....

ヘッダ画像 余白

左上の細い画像を挿入しました。ヘッダ画像が主張しすぎることなくスッキリできたと思います。

ヘッダー画像が荒くなる

迷ったところが表示される画像が荒くなってしまったことです。

  • 理由1.画像のサイズが小さく画像が引き延ばされた
  • 理由2.はてなフォトライブラリーのサムネイル画像を読み込ませていた

サムネイルの小さい画像から表示させていたので当然画像が荒い。画像をクリックして大きく表示してから右クリックで画像のURLをコピーしてください。 

ブログタイトルとブログの説明を画像に入れ替えるコードが一緒に入っているので画像URLとブログURLとブログタイトルを入れるだけで全部同時に設定できます。

ヘッダ画像がブログホームとリンクできるのも良いですね。

 

スマホ版のフッタメニューの設置

www.yukihy.com

こちらの記事を参考にしました。 

グローバルナビゲーションメニュー

大画面のスマホではメニューを上側に設置しても指が届きにくいので下に設置しました。カテゴリを押すと『ニョキ』っとカテゴリーが出てきます。カテゴリーの数を偶数にしないと空欄になります。

HOME以外が反応しない時の対処法

コピペして自分のブログのURLとカテゴリーを設定してみると『HOME』以外が反応しません。

対策前:src="http://code.jquery.co./jquery-1.9.1.min.js"
対策後:src="//code.jquery.co./jquery-3.3.1.min.js"

jqueryを新しいバージョンに変更。現在httpでは動きません。httpを消すかhttps:に変更することで正常に動くようになりました。

PC版 追従するグローバルナビゲーションの設置

www.bambi.pro

 こちらの記事を参考にしました。

グローバルナビゲーションメニュー

スクロールしても追従して常にグローバルナビゲーションが表示できます。

階層表示がおかしい場合の対処法

コピペしてみると階層表示が一つだけ幅広で空白が開いたようになりました。

グローバルナビゲーションメニュー 階層

コードを確認してみると画像にある縦棒がありませんでした。追加で記述することで解決できました。記事がたくさん増えてくると後から振り分けるのは大変です。カテゴリは記事数の少ないうちに親カテゴリー-子カテゴリーを作成して階層表示できるようにした方が良いです。

さいごに

まだまだ変更したいところがいっぱいあります。HTMLやCSSって難しいですね。現状はコピペしてわかるところを少し改良するレベルです。最初から最後までコードを書ける人って本当にすごい。