Webサービス はてなブログ コンピューター

【はてなブログカスタマイズ】タイトル横にアイコンを置きたいコード

投稿日:

はてなブログのタイトル横にアイコンを置きたいコードだよ\(^o^)/
たぶん広告とかも置きたいよ!

f:id:m6tczm4q:20160530175233p:image

なんで”置きたい”って言ってるかというと、うまくできなかったからだよッ!
なんたってこのコードはドットインストールのHTML/CSSの動画を流し見しただけのド素人の私が書いたんだもんね!
だからプログラマーのみんなから見たら「なにこのゴミみたいなコードwww」って思うかもしれないね(´⊙◞⊱◟⊙`)
そんなふうに思った方は、ぜひ正しいコードを教えてね♡

あっ、だからメインブログじゃなくてカスタマイズ実験用のブログで試してみてからのほうがいいよー!

設置の仕方

まずは[ダッシュボード]→[デザイン]→[スパナマーク]で設定画面を開けゴマ!

HTML

[ヘッダ]→[タイトル下]に下記のHTMLコードを貼り付けよう。

あ、”URL”って書いてあるところに自分のURL貼ってね!

CSS

それから下記のCSSコードを[デザインCSS]に貼り付けよう。

するとアイコンが現れたでしょ?

位置の調整

あとは根気よくお好みの位置に来るまで”top:-100px;”と”right:50px;”のピクセル数を弄くってね(爆)
これらはtop-editareaからの距離を示してるよ(たぶん)。
top-editareaってどこ? って人は、ブラウザがChromeの人は[右クリック]→[検証]から探してね。

そんで試行錯誤しながらどんなふうに位置が変わるか見てやっておくれー。
……これがなかなかいい位置に来ないでしょー?(笑)
ここらへんがうまくいかなかった部分だよ!

カスタマイズ

HTMLがわかる人は<!– ここは適当に変える –>って書いてあるところを好きなものに変えてね。
例えば、ホームボタンつけちゃうとかさ。
そこを広告のコードにするとたぶん広告になるはずだよ。
ああ、検索ボックスなんかもいいね。

完成

はい、これで完成。
クリックしたりして確認してみてね(広告の場合はクリックしちゃダメだよ!)。

質問などあったらお気軽にどうぞ〜。
ただ、私、例によってド素人だからまともに答えられないと思うけど(笑)
アドバイスなども喜ぶお(´,,•ω•,,`)

-Webサービス, はてなブログ, コンピューター
-

執筆者:


comment

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

関連記事

『Authy』で2段階認証を簡単・便利に!

最近、さまざまなWebサービスで使われるようになってきている2段階認証。ログインの際に、IDとパスワードとは別にスマートフォンアプリで生成したワンタイムコードを入力させてセキュリティを向上させるという …

Android 5.0 Lolipop(Nexus 5)のメモ

動作が重い・バッテリーの消費が激しい 再起動してRAMを空ける。 Amazon系のアプリをアンインストールすると良いとの情報。 また、OK Googleをオフにすると、マシになる気がする(私の主観)。 …

Nexus 5のボリュームボタンが上下に割れたので交換してもらえるか聞いてみた

Nexus 5のボリュームボタンが割れた……。いつのまに……。   情報収集してみると、どうやらNexus 5の修理は、初期不良などはGoogleで無償、ユーザーの過失などの場合はLGジャパンに有償で …

【方法】適職がわからない? まずは自分を知ろう!

無職まで残りわずかな高梁ゆうです、こんにちは。次の仕事どうしよう……やっぱり長く勤められるように、自分に適した仕事を選びたいよね。今日はそんなお話。 職業選択には自分を知ることが大切 あなたは自分を知 …

【画像】Nexus 5をdocomoワイヤレスチャージャー02で通知LED点灯して充電

参考までにdocomoのワイヤレスチャージャー02で通知LEDを点灯させながら充電する写真UPしとく。 LED通知アプリは「Light Flow Lite – LEDと通知制御 (Goog …

書いている人


《高梁ゆう》
パンツ大好きぱんつブロガーの高梁ゆうだよ!
無職になったウェーイ\(^o^)/
あっしの詳細はプロフィールを見てね!

ブログ更新情報

パンツ好きすぎてブログ作っちゃいました

広告

カテゴリー

アーカイブ