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

退職代行サービスで会社辞めた!妻子いるのにどうするの?

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

コピペ一発で反映できないcssをド素人が頑張って設定してみた

どうもこんにちは!

Googleアドセンスに合格してからブログデザインをいじくりまわしています。

プログラム関係がド素人の僕はネットで検索してそのまま引用という形でしかできませんが一通り設置したので苦労したこととかメモしておきます。

無料でアップしていただいてる神様的な方々が素人向けに解説していますが僕はもっとレベルが低いんです。

「コピペ一発」って書いてあるのに上手くいかないんですよ!

難しいことは抜きでド素人がド素人に捕捉します。

コピペ一発で反映されない場合は優先順位が関係しているそうです。

あとブログテーマによって使用しているコードが違うみたいでコピペしたコードがブログテーマのコードを違う場合、指示が出せていない状態だそうです。

 

はてなブログproでPLAINというテーマを使用しています。Wordpressや他のブログサービス、ブログテーマ違いで上手くいかなかったらごめんなさい!

 ※僕はスマホ版・PC版を別々のコードを入力しています。

   

 

見出しのデザイン

 参考にしたページはこちら

saruwakakun.com

たくさんあります!

この見出しのように僕は青線で角が丸く囲むデザインにしました。

四角のデザインから角を丸くしたい場合は「border-radius: 0.5em;/*角丸*/」を追加することで角が丸くなります。「0.5」の数字を変更することで丸さが変化します。少しずつ変化させてちょうど良い見た目になるように調整しよう。

こういった微調整ができると選べるデザインが増えますね。

 

見出しのデザインを変えると問題が!ブログタイトルが一緒に変化してしまった。

はてなブログのPLAINでは

「ブログタイトルがh1」

「ブログタイトル下のブログの説明がh2」のようで「h2」をデザイン変更するとブログの説明がh2見出しと同じデザインになってしまいました。

記事内の見出しのみ指定できるそうなのですが...わからないので画像挿入でごまかすことにしました!!

 

スマホ版ブログタイトルとブログの説明の削除。余白のない画像の設定

参考にしたページはこちら

www.yukihy.com

スマホ版はこれで対策できました。

アイコンとはてなブログのヘッダメニューが消えました。

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

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

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

css ヘッダ画像 余白

 

 

PC版ブログタイトルとブログの説明の削除。余白も取ります。

こちらを参考にしました。

www.life-is-rpg.com

ほんとうに参考になりましたありがとうございます!

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

横幅 余白なし

 

 

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

ヘッダ画像 余白

左上の細い画像を挿入しました。

ヘッダ画像が主張しすぎることなくスッキリできたと思います。

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

理由1.画像のサイズが小さかった。小さい画像が引き延ばされたのですね。

理由2.はてなフォトライブラリーのサムネイル画像をリンクしていた。

サムネイルの小さい画像から表示させているのでそりゃあ画像が荒いですよ(;^ω^)

大きく表示してから右クリックで画像のURLをコピーしてください!

 

ブログタイトルとブログの説明を画像に入れ替えるというコードが入っているので画像URLとブログURLとブログタイトルを入れるだけで全部設定されます。ヘッダ画像をクリックするとホームに飛ぶのも良いですね。

 

   

スマホ版コピペ一発フッタメニュー

こちらを参考にしました

www.yukihy.com

 

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

メニューを上に設置してもスマホだと指が届きにくいと思い、下に設置しました。

カテゴリーを押すとニョキっとメニューが出てきます。4つボタンと5ボタンバージョンがあるのでお好みで。横2つ表示にしましたがどこのサイトを参考にしたか忘れました検索してみてください!

カテゴリーを偶数にしないと一つ空くようです。

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

対策するには

(src="http://code.jquery.co./jquery-1.9.1.min.js")

これを

(src="//code.jquery.co./jquery-1.9.1.min.js")

に変更します!これで動くと思いますがjavaがもっと新しいバージョンがあるみたいで(1.9.1)を

(3.3.1)に変更しました。

さらに新しいバージョンがあると思いますが機能するしわからないのでこのまま使っていますw

解決するまで2時間ほどかかったド素人です('◇')ゞ

現在https化されていてhttpは反応しないとのこと...今後cssをいじる上で非常に勉強になりました。

 

PC版コピペ一発グローバルナビゲーションメニュー(追従)

 こちらを参考にしました

www.bambi.pro

 

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

スクロールしても常に上部にメニューが表示されます!便利!

いざコピペしてURL入力してみると表示が変なんですよ!

階層表示が一つだけ幅広で空白が開いたようになる。

よ~く確認してみると

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

この棒がないんです。なので棒があるところをコピペしてないところを全部消去!

これで解決しました!まだ記事数の少ないうちに親カテゴリー-子カテゴリーを作成して階層表示できるようにした方がいいです。記事がたくさん増えてくると後からでは大変なので。

 

あとがき

今回はこれくらいで。

まだまだ触りたいところがいっぱいあるけどcss難しいですね。現状はコピペしてわかるところを少し改良するレベルです。最初から作成できる人すごいです。ブログ開設して間もない方、アドセンス合格目指している方、ブログ作成一緒に頑張りましょう!

 

最後まで読んでいただきありがとうございました☆

こちらの記事もどうぞ

www.attack.work