ラベル BloggerCustomize の投稿を表示しています。 すべての投稿を表示
ラベル BloggerCustomize の投稿を表示しています。 すべての投稿を表示

【Blogger】アフィリエイト広告コードのWebビーコン1px画像を非表示にしたい

Bloggerでブログを書いていると、
アフィ広告リンクの後ろに小さい枠線、空白が表示されていた。

「(広告名) 」とか「(広告名)□」みたいなやつ。

今までは気にならなかったんだけど、
今年になってやっぱり気になりだしたので、
何とか非表示に出来ないかと模索。

先人の方々が既に実践されていました。

Google Search ConsoleにてFeedで取得できる件数が500件から150件に激減

これも今更なネタ。
ブログ(サイト)を運営していく上で、検索エンジン様に登録してもらうのは定石。
Google様への登録には、「Google Search Console」に自分のサイトを登録すればOK。

で、基本面倒くさがりの私。
登録したものの放置してますwwwwwwww

最近、Google Search Consoleからエラーメールが届いたので、
超久しぶりにSearch Consoleへログイン。
すると、↓にあるように、
インデックスに送信・登録されている件数が異常に少ない。
image

おかしいなと思い、よくよく調べてみたらAtom形式だと、「max-results=500」として
最大500件取得するように設定していても実際には150件になってしまうそう。
以下、参考URL。
Blogger:Feedで取得できる記事の最大件数が500件から150件へと変更された? - Dr.ウーパのコンピュータ備忘録

2015年11月下旬にBlogger側の仕様が変更されたんだけど、
2年以上も放置してたわけですねwwwwwwwwwwwwwwwwww

Atom方式ではなく、サイトマップ方式(sitemap.xm)を登録すればOKとのことで、
サイトマップを改めて再登録。
登録の方法は↓を参照。
Blogger/Googleサイトのサイトマップ送信 - Google Search Consoleの使い方(旧ウェブマスターツール)

これでしばらく様子を見ることにしよう。


<余談>
ちなみにGoogleの検索エンジンと双璧をなす、マイクロソフトの「Bing」にも同様に
Bing webマスターツール」がある。
Bingについてはsitemap.xmlを登録してますたwwwwwwwww


Google Adsenseの非同期広告コードをBloggerに貼り付けるときにハマった

久しぶりにGoogle Adsenseの管理画面にアクセスしてみると、
スマホ向け画面にページ単位で広告を表示させることができるようになったとのこと。

さっそく設定してみる。
やり方はすごく簡単で、<head>タグに以下のようなコードを埋め込むだけ。
image

このコードをコピーして、
Bloggerのテンプレート編集画面から埋め込もうとすると、
以下のエラー画面が表示された。
XML の解析中にエラーが発生しました。行 614、列 19: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.

ナンノコッチャ??
HTMLなんかチンプンカンプンな俺にとっては未知のエラー。
いろいろコードをいじったりしてもエラーが解消されず。
asyncを除去するとエラーが消えるけど、
それだと非同期にならないので根本的な解決策ではない。

それを見事に解決する策が先輩ブログに既に記載されていた。
クリボウの Blogger Tips: 2013-08

要するに、
コードの「async」の部分を「async='async'」に置換すれば良いだけ。

レイアウト画面のガジェットのところでHTMLコードを直接記述する場合にはAdsenseのコードをそのままコピペで問題ないんだけど、
テンプレートのHTMLソースを編集する際には上記のasyncを置換する必要があるのでご注意。


このブログの読者でBloggerを使ってる人なんかほとんどいないので、
どーでもいい内容の話でしたwwwwwwwwwwwwwwwwww


アフィのリンクを勝手に作ってくれるLinkplazaを設置

久々にブログの設定を弄った。
ブログに書いた記事の文書から
勝手に自動でアフィリエイトリンク化してくれるサービス、
Linkplazaなるものを設置してみた。

↑のサイトで会員登録して、
楽天アフィリエイトIDを打ち込んで、
生成されたコードをHTMLに書いて終わり。


楽天アフィリエイトなので
当然ながら作成されるリンクは楽天。
まぁめんどくさがりな俺にはうってつけかwwwwww

こんなホソボソとブログをやっているんだけど、
ちまちまとアフィ収入があるのでバカにできないなぁw


これからもコツコツと気長に記事を増やしていこう(・∀・)


BloggerからGoogleAdsenseが申し込めるようになった

もう既にAdsenseを使ってるので、「でっていう?」状態なんですけども。

以前(8月頃)は↓のように「承認されていません」と表示されて登録ボタンが押せなかった。
image

それが何故かたまたま今日覗いてみたら登録ボタンが押せるようになってる!(・∀・)
image

ついにGoogle様からこのブログでもAdsense使ってもいいよ!ってお達しが出たわけだ。
ほぼ毎日頑張って記事を書いたからかな?
今見たら190件ものブログ記事書いてたのか・・・。
我ながら頑張って長続きしてるもんだ。

でも、スゲー今更感。
すでに直接HTMLソースからAdsenseコードいれてますしおすし。

兎にも角にも、ちょっとしたモヤモヤ感がスッキリしたので
よしとするか!


ブログ記事の関連記事ってことでLinkwithinを導入

ただ単一の記事を読んでいただいた方向けに、
他にも関連記事としてこんな記事がありますよーって記事下部分に追加する
「Linkwithin」を当ブログでも導入しますた。


ブログにSNSボタン(忍者おまとめボタン)を設置

Bloggerに↓のようなSNSボタンが標準で備え付けられている。
だが、如何せん微妙・・・。

image

それの代わるものを今回は「忍者おまとめボタン」なるものへ挿げ替えようというお話。


SNS大杉ワロタ
SNSっていっぱいあるよねー。
ぱっと思いつくものだけで、
mixi、twitter、facebook、google+、はてな
こんなクソブログでも、今後のことを考えると
皆が利用しているSNSに対応したボタンを設置したほうがいいかなー?
と思った次第でありまする。

コード取得
ツイートボタン、いいねボタンなどをまとめて簡単設置|忍者おまとめボタン

まずは画面右上の「忍者おまとめボタンを新規作成」より会員登録をしよう。

会員登録後、ブログを選択する画面が出てくるので「Blogger」を選ぶ。
image

あとは適当に使いたいボタンを選んで、順番を決めていくと、コードが表示されるので
ブログのHTMLに貼り付けるだけ。
ちなみにスマホ表示は「無効」にした。

ブログへ設置

せっかくSNSボタンを付けるなら記事の直下に設置したくね?
でも貼り付け方がわからんwwwwwwwwww
と思ったら、忍者の公式ヘルプに設置方法があった。

Bloggerの記事下に忍者おまとめボタンを設置するにはどうしたらいいですか?|ヘルプ|忍者おまとめボタン

この方法によると、HTMLソースの「div class=’post-body entry-content’ 」で
一行下にある「<data:post.body/>」の直下に
作成したコードを貼り付ければいい。

以上!

設置後のデザイン変更とか
とりあえず適当にボタンを選んだけど、デザインとか種類変えたいなー
という優柔不断な人でも無問題!
忍者おまとめボタンのサイト上で設定変更するだけで自動的に変わる模様。
だが、設置しているWebサービスを変更する場合(Twitterを消すとか)はコードを貼り直す必要があるそうな。。

とりあえず勢いで作ったので、
おいおいメンテナンスをしていこうかな。

【追記】
設置したはいいが、すごいやっつけ感が・・・
この辺りはCSSをいじればいいのかなぁ?
よくわからん(´・ω・`)

【成功】ブログでAAがズレないCSS設定

過去記事の再チャレンジ!
よーく記事を読み返してみると、AA内で改行コード<br />を入れるのを忘れてたっていうw
これは恥ずかしい・・・。
で、ちゃんと改行コード<br />を入れてみたのが↓

        lヽ ノ l        l l l ヽ   ヽ
  )'ーーノ(  | |  | 、      / l| l ハヽ  |ー‐''"l
 / D  | | |/| ハ  / / ,/ /|ノ /l / l l l| l  D ヽ
 l   ・  i´ | ヽ、| |r|| | //--‐'"   `'メ、_lノ| /  ・  /
 |  V  l  トー-トヽ| |ノ ''"´`   rー-/// |  V |
 |  ・   |/     | l ||、 ''"""  j ""''/ | |ヽl  ・ |
 |  D   |       | l | ヽ,   ―   / | | l  D  |
 |   !!  |     / | | |   ` ー-‐ ' ´|| ,ノ| | |  !! |
ノー‐---、,|    / │l、l         |レ' ,ノノ ノハ、_ノヽ
 /        / ノ⌒ヾ、  ヽ    ノハ,      |
,/      ,イーf'´ /´  \ | ,/´ |ヽl      |
     /-ト、| ┼―- 、_ヽメr' , -=l''"ハ    |  l
   ,/   | ヽ  \  _,ノーf' ´  ノノ  ヽ   | |
、_    _ ‐''l  `ー‐―''" ⌒'ー--‐'´`ヽ、_   _,ノ ノ
   ̄ ̄   |           /       ̄


どうよ??
少し行間が開きすぎているかな~(´・ω・`)


というわけで、こちらのサイトを参考に、少しCSSを弄ってみた。

Jugemブログでアスキーアートをずれないように綺麗にコピペ!~AAやらないか?~ | [M]まったり・こんふぃでんしゃる【Confidential】




AA用のCSSクラスを以下の用に修正。
.aa{
font-family:"MS Pゴシック","MS PGothic","Mona","mona-gothic-jisx0208.1990-0",sans-serif;
font-size:16px;
line-height:18px;
text-align: left;
margin-left : 0 ;
margin-right : auto ;
}

で、修正後のAAが↓

        lヽ ノ l        l l l ヽ   ヽ
  )'ーーノ(  | |  | 、      / l| l ハヽ  |ー‐''"l
 / D  | | |/| ハ  / / ,/ /|ノ /l / l l l| l  D ヽ
 l   ・  i´ | ヽ、| |r|| | //--‐'"   `'メ、_lノ| /  ・  /
 |  V  l  トー-トヽ| |ノ ''"´`   rー-/// |  V |
 |  ・   |/     | l ||、 ''"""  j ""''/ | |ヽl  ・ |
 |  D   |       | l | ヽ,   ―   / | | l  D  |
 |   !!  |     / | | |   ` ー-‐ ' ´|| ,ノ| | |  !! |
ノー‐---、,|    / │l、l         |レ' ,ノノ ノハ、_ノヽ
 /        / ノ⌒ヾ、  ヽ    ノハ,      |
,/      ,イーf'´ /´  \ | ,/´ |ヽl      |
     /-ト、| ┼―- 、_ヽメr' , -=l''"ハ    |  l
   ,/   | ヽ  \  _,ノーf' ´  ノノ  ヽ   | |
、_    _ ‐''l  `ー‐―''" ⌒'ー--‐'´`ヽ、_   _,ノ ノ
   ̄ ̄   |           /       ̄


うん、あまり変わってない気がするが気にしない!w

CSSで見出し・リスト・箇条書き・引用を装飾

CSS/HTMLの知識が全くない。
というか、こういうコーディングって大嫌いw
でも、ブログを管理していく上で避けては通れないCSS/HTML。
よく使う書式(見出し、リスト等)をCSSで弄ってみたので、コードを紹介。
ブログを書くツールだと自動で作ってくれるけど、
見た目がショボいのでCSSで装飾。
参考サイト
例によって大いに参考にしたサイト。
ほとんど丸パクリしたw
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える | Webクリエイターボックス



見出し
これだけは上記サイトから拝借していない。
CSSコード

h5{
font-size: 16px;
margin: 5px 0;
padding: 5px 0 5px 10px;
border-left: 8px #00BFFF solid;
}

"h5"ってのが、HTMLでのヘッダに相当。
h1~h6までが見出しに相当していて、
自身のブログのHTMLを確認したらh1~h4まで使っていたので、h5を指定。

HTMLコード


<h5>
"見出し"
</h5>

見た目。
こんな感じ

リスト
  1. その1
  2. その2

みたいなやつ。

CSSコード

#ol1 li{
color: #3cf;
font-size:200%;
list-style: decimal inside;
}
    #ol1 li span{
    color: #000000;
    font-size:12px;
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'MS Pゴシック',sans-serif;
    }

HTMLコード

<ol id="ol1">
  <li><span>その1</span></li>
  <li><span>その2</span></li>
</ol>

見た目。
  1. その1
  2. その2

箇条書き
  • ああああ
  • いいいい

みたいなやつ。

CSSコード

#ul1 li{
list-style: square outside;
color:#3cf;
list-style-image:none;
}
    #ul1 li span{
    color:#000000;
    }

HTMLコード

<ul id="ul1">
  <li><span>ああああ</span></li>
  <li><span>いいいい</span></li>
</ul>
見た目
  • ああああ
  • いいいい

引用
フヒヒヒヒヒwwwwww

みたいなやつ。

CSSコード

#bq1{
border-left:5px solid #03ACEA;
background: #CEECF5;
padding: 10px;
}

HTMLコード

<blockquote id="bq1">フヒヒヒヒヒwwwwww</blockquote>

見た目。
フヒヒヒヒヒwwwwww


と、まあこんな感じ(´ー`)

RSSボタンの設置

こんなブログをRSSで定期的に購読してくれる人はまだいないだろうけど、
頻繁にRSSフィードを参照する機会が増えてきているので備忘録をば。

自身のRSSフィードを把握する(Blogger用)

↓のサイトに詳しく書いてる。

[Blogger] 今すぐ知りたい人へ!RSSフィードのURLを確認する方法 | Bloggerをカスタマイズするときに見るブログ

上記サイトよりRSSフィードはこんなの。

Atom 1.0

http://<User名>.blogspot.com/feeds/posts/default

RSS 2.0

http://<User名>.blogspot.com/feeds/posts/default?alt=rss

どっちでもRSSとしてはきちんと機能するようで、
バージョンは新しいほうがいいかということでRSS2.0の方にする。

 

その1. 単純なRSSボタンの設置

RSSフィードアイコンのフリー素材をネットから探してきて、
画像を貼り付けて、リンク先を上記のRSSフィードにすればいいだけw

素材は↓から引っ張りますた。

フリー素材:Web2.0チックなフィードアイコン : Curo.jp

 

その2. feedlyのボタンを設置

最近といってももうかなり前になるかな。
RSSリーダーとして最強ツールだった「Google Reader」が突然のサービス終了し、
ポストGoogle Reader的存在が「feedly」。
ちなみに俺は使ってませーんw
別のRSSリーダーを使っている。そのうち記事にしようかな。

↓のサイトを参照。

最近人気の feedly の登録アイコンを設置してみた | ひとぅブログ


 

このfeedlyのページから掲載するボタンのデザインを選んで、
自分のRSSフィードのURLを打ち込めば自動でコードを生成してくれるので、
そのコードをコピペしてどっかブログのパーツ(ガジェットとか)に書くだけで出来上がり。

 

完成

んで、出来上がったRSSボタンがこちら。

imagefollow us in feedly

おーいい感じ(・∀・)

ソースコードをそれっぽく見せるやつ

まだまだブログのデザインは発展途上。
いちいち逐一報告するのめんどくさいので、
今回はこれだけw
SyntaxHighlighter
これを導入。
Linuxとかでよく使うコマンド(ソースコード)
rm –rf /
ってのを、
rm -rf /

ってな感じにかっこ良く見せることができるのだ(・∀・)



詳しい導入方法とかはネットにたくさん転がっているので、
そちらを見てくださーいw(他力本願)

以下、テスト
    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }

【失敗】AAがずれないためのCSS

 調べればたくさん出てくるんだけども、
↓のサイトを参考にした。


A大佐のブログ FC2でAAがズレる件・・・




追加のCSSに↓を挿入。

.aa{
font-family:"MS Pゴシック","MS PGothic","Mona","mona-gothic-jisx0208.1990-0",sans-serif;
font-size:16px;
line-height:18px;
}

実際には
<span class="aa">ココにAA挿入</span>

という感じでAAを突っ込めばいいのかな。



以下、テスト。
        lヽ ノ l        l l l ヽ   ヽ   )'ーーノ(  | |  | 、      / l| l ハヽ  |ー‐''"l  / D  | | |/| ハ  / / ,/ /|ノ /l / l l l| l  D ヽ  l   ・  i´ | ヽ、| |r|| | //--‐'"   `'メ、_lノ| /  ・  /  |  V  l  トー-トヽ| |ノ ''"´`   rー-/// |  V |  |  ・   |/     | l ||、 ''"""  j ""''/ | |ヽl  ・ |  |  D   |       | l | ヽ,   ―   / | | l  D  |  |   !!  |     / | | |   ` ー-‐ ' ´|| ,ノ| | |  !! | ノー‐---、,|    / │l、l         |レ' ,ノノ ノハ、_ノヽ  /        / ノ⌒ヾ、  ヽ    ノハ,      | ,/      ,イーf'´ /´  \ | ,/´ |ヽl      |      /-ト、| ┼―- 、_ヽメr' , -=l''"ハ    |  l    ,/   | ヽ  \  _,ノーf' ´  ノノ  ヽ   | | 、_    _ ‐''l  `ー‐―''" ⌒'ー--‐'´`ヽ、_   _,ノ ノ    ̄ ̄   |           /       ̄ 

・・・だめじゃん(´・ω・`)