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のちょっとしたTips

マージの順番 [Ctrl]+[クリック]で選択した順に、下にどんどんマージされていく。つまり、①→②→③の順にクリックすると、縦に①②③とマージされる。[Shift]での選択も同様。上から下に選択する …

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

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

キヤノンの『Creative Park』が無料なのにすごい!

こんにちはひふへほ。今回はプリンターでおしゃれ楽しいキヤノン『Creative Park』というサイトを紹介します。 サイトはこちら→Canon Creative Park なにがすごいのか 誰でも利 …

はてなブログのちょっとしたTips

はてなブログのTipsをメモ書き。 はてなブログで編集ボタンが出てこない Adblockなどのコンテンツブロッカー(広告ブロックなど)を使っているとはてなブログの編集ボタンが出てこない。 記事編集画面 …

他人のツイートログをEvernoteに自動で保存する方法(1)

自分がフォローしている他人のツイートをEvernoteへ自動で送って、ログとして保存しておきたい。 検索するといくつか方法が出てきたが、どれも古い情報で、RSSフィードのサポートが終了している現在のT …

書いている人


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

ブログ更新情報

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

広告

カテゴリー

アーカイブ