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

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

関連記事

私の放置されたポケモンたちを紹介

ネタに困ったりモチベーションが下がったらブログチャレンジをしよう

はてなブログのブログチャレンジ、やってますか?実は私、最近この機能を知りました。タスクをクリアするごとにポイントが溜まって、レベルが上がってくんです。これはモチベーションアップにいいなって思いました。 …

精神障害者な私のEvernote活用法

精神障害者な私がEvernoteに保存しているものを公開します。ありがちなものは割愛しています。 マイマニュアル 自分の取扱説明書みたいなものです。コミュニケーションで気をつけることや考え方、こんなと …

U-mobileのLTE SIMが届いたのでNexus 5でテスト

楽天SIMを解約して、U-mobile dのSIMを契約してみた。申し込みから4日でSIMカードが届いたよ、早い!ちょうど2枚のSIMが手元にあるので、通信速度を比べてみた。測定場所は関東某県某市、時 …

NFCタグを買ってみた

NFCタグでスマホをかざすだけでなんか出来たらかっこいいよね? と思ってNFCタグを衝動買いしました!今のところ、使いみちはなさそうです!(ドヤァ) 売っているところ 私は安かったのでこちらのショッ …

書いている人


《たかなしゆう》
コミュ障が福祉の仕事に就くようです\(^o^)/
あっしの詳細はプロフィールを見てね!

ブログ更新情報

広告

カテゴリー

アーカイブ

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