アメブロ記事内の外部リンクに画像を自動表示
ここのところブログを見やすくする為に試行錯誤しています。
どんなに頑張った内容のブログ記事を書いても読みづらいと当然ながら誰も見てくれません。出来るだけそうならない様に、とにかく記事内の視認性を高めたいと思ってあれこれお試し中。
・アメブロ記事内のリンクを下線・青色・強調されるように変更
・続きアメブロ記事内のリンクが下線・青色・強調されるように変更
今回はサイト内へのリンクと外部サイトへのリンクで見た目が変わるようにしました。
具体的には、ブログ内にある外部リンクには、このようなアイコン
が表示されるようにしてみたいと思います。
ということで例によってネット上で情報収集。
最初はリンクを張るたびに手作業でアイコンを貼り付けるのかと思って居たのですが、当然ながらそんな面倒な手間はいらずCSSで処理できる事を確認。
なんとなく理解したので
メッセージボードと記事内のみ外部リンクにアイコン画像が表示されるよう以下をCSSに追記
画像へのパスの部分には、表示するアイコンを置いた場所へのパス（URL）を記述します。
※4/9修正→詳細記事
ブログテンプレートの種類によっては「.subContents」の部分を「.entry」に変えてもいいかも知れません。ちなみにこの部分を削除するとブログ内全ての外部リンク（サイドバー含む）にアイコンが出てきます。
Amazonアフィリにまでアイコンが付与されてしまいますが、それはご愛敬。
記述をみてもわかると思いますが、「target_blank」により別窓でリンクする場合のみアイコンが表示されます。
一応サイト作成上のルールというか暗黙の了解のようなもので、「同じサイト内」へのリンクは「target_self（アメブロでいうところの【同じウインドウ】）」、「違うサイトへのリンク」は「target_blank（アメブロでいうところの【新しいウインドウ】）」で開くというのがあります。
そのしきたりに従ってこんな風にしています。
ただ昔の記事などは、書いている当時そんなルールは知らなかったので結構適当にリンクを張っていたような記憶が・・・・
過去記事でおかしくなっているのを発見した時は、都度々々修正していくようにしようかなと思います。
どんなに頑張った内容のブログ記事を書いても読みづらいと当然ながら誰も見てくれません。出来るだけそうならない様に、とにかく記事内の視認性を高めたいと思ってあれこれお試し中。
・アメブロ記事内のリンクを下線・青色・強調されるように変更
・続きアメブロ記事内のリンクが下線・青色・強調されるように変更
今回はサイト内へのリンクと外部サイトへのリンクで見た目が変わるようにしました。
具体的には、ブログ内にある外部リンクには、このようなアイコン
が表示されるようにしてみたいと思います。ということで例によってネット上で情報収集。
最初はリンクを張るたびに手作業でアイコンを貼り付けるのかと思って居たのですが、当然ながらそんな面倒な手間はいらずCSSで処理できる事を確認。
なんとなく理解したので
メッセージボードと記事内のみ外部リンクにアイコン画像が表示されるよう以下をCSSに追記
/*外部リンクに画像付与*/
.subContents a[target="_blank"]{
background:transparent url(画像へのパス) center right no-repeat;
padding-right:15px;
}画像へのパスの部分には、表示するアイコンを置いた場所へのパス（URL）を記述します。
※4/9修正→詳細記事
ブログテンプレートの種類によっては「.subContents」の部分を「.entry」に変えてもいいかも知れません。ちなみにこの部分を削除するとブログ内全ての外部リンク（サイドバー含む）にアイコンが出てきます。
Amazonアフィリにまでアイコンが付与されてしまいますが、それはご愛敬。
記述をみてもわかると思いますが、「target_blank」により別窓でリンクする場合のみアイコンが表示されます。
一応サイト作成上のルールというか暗黙の了解のようなもので、「同じサイト内」へのリンクは「target_self（アメブロでいうところの【同じウインドウ】）」、「違うサイトへのリンク」は「target_blank（アメブロでいうところの【新しいウインドウ】）」で開くというのがあります。
そのしきたりに従ってこんな風にしています。
ただ昔の記事などは、書いている当時そんなルールは知らなかったので結構適当にリンクを張っていたような記憶が・・・・
過去記事でおかしくなっているのを発見した時は、都度々々修正していくようにしようかなと思います。
・アメブロカスタマイズ目次
ツイッターとfacebookの連携
Facebookのアカウントを取得してしばらく経ちますが、ほとんど放置状態となっています。
世間ではやたらにFacebookは流行ると言われていますが今ひとつ実感が湧かず。
ツイッターやブログほどシンプルでないのが取っつきにくい原因でしょうか？
とはいえ、そう言いつつもそれなりに情報は仕入れています。
大体の感じとしてわかったのは、Facebookとは全部入りのSNSパックのような物なんだということ。
Mixi＋ブログ＋ツイッター＋掲示板の全ての機能が使えるようなイメージ。
ブログ＜・・・同じようなもの・・・・＞Facebookのノート
ツイッター＜・・同じようなもの・・・＞Facebookのウォール
今のところこんな認識です。
そうなってくると頭に浮かぶのは、「ブログを書いているのにFacebookにも書き込む必要とは？」・
「ツイッターをやっているのにFacebookで近況をつぶやく理由はあるのか？」というような疑問。
要するにツール毎にどう使い分ければいいのかがピンとこない訳です。
おそらくこのあたりが理由で今ひとつ積極的に手を出す気が起きないのでしょう。
しかしせっかくアカウントを取得し、伸び盛りのツールであるのにほったらかしているのは少しもったいなく思います。
そこで今のところとしてはツイッターと連動させ、タイムラインをウォールに自動的に表示させておくという無難な選択肢を選ぶ事にしました。
ただ情報を集めてみると、こういった他のツールと連動させるというのはあまり推奨はされていないようですね。
それぞれのツールによって繋がっている人の属性が違うので、同じコンテンツを使い回すべきではないというのがその理由。逆にツイッターでもfacebookでも両方でフレンドとなっている場合でも、同じ情報を何度も見たいと思う人はいないので、やはり使い回しはNGという理由もあります。
一々納得できる内容です。
これについてはいずれFacebookの空気感が読めるようになった時にでも考えて生きましょう。「使い分け」が必要なのはわかります。
でもツイッターもブログもFacebookもとなると、全てに全力投球はなかなか大変なのが事実ですから、今はFacebookについては「稼働させながら放置」を選択です。
ということでツイートをFacebookに流すアプリはないかと物色。
なんとなく良さそうなのをみつけたので以下に設定方法を記載しておきます。
使用するアプリは「Smart Tweets」
①まずfacebookの検索ボックスに「smart tweet」と入力。
②すると候補のアプリがでてくるのでクリック
③こんな画面が出たら「アプリへ移動」をクリック
④次に「install to Profile」をクリックし
⑤許可のリクエスト画面で「許可する」をクリック
⑥次にツイッター側でこんな操作をしろ的な説明画面が出てくるので
「Click here to Authorize with Twitter」をクリック
⑦するとツイッターへと移動するので（多分事前にログイン状態になっていた場合）
「許可する」をクリック
⑧【アプリに転送します】という文字が出てしばらくすると連携完了の画面になります
⑨【Setting】画面にてツイッターのハッシュタグやRTの表示方法を変更して「Update」をクリック
これで設定は終了です。
たまにツイートを取りこぼすこともあるようなので、その時は素直に諦めましょう。
世間ではやたらにFacebookは流行ると言われていますが今ひとつ実感が湧かず。
ツイッターやブログほどシンプルでないのが取っつきにくい原因でしょうか？
とはいえ、そう言いつつもそれなりに情報は仕入れています。
大体の感じとしてわかったのは、Facebookとは全部入りのSNSパックのような物なんだということ。
Mixi＋ブログ＋ツイッター＋掲示板の全ての機能が使えるようなイメージ。
ブログ＜・・・同じようなもの・・・・＞Facebookのノート
ツイッター＜・・同じようなもの・・・＞Facebookのウォール
今のところこんな認識です。
そうなってくると頭に浮かぶのは、「ブログを書いているのにFacebookにも書き込む必要とは？」・
「ツイッターをやっているのにFacebookで近況をつぶやく理由はあるのか？」というような疑問。
要するにツール毎にどう使い分ければいいのかがピンとこない訳です。
おそらくこのあたりが理由で今ひとつ積極的に手を出す気が起きないのでしょう。
しかしせっかくアカウントを取得し、伸び盛りのツールであるのにほったらかしているのは少しもったいなく思います。
そこで今のところとしてはツイッターと連動させ、タイムラインをウォールに自動的に表示させておくという無難な選択肢を選ぶ事にしました。
ただ情報を集めてみると、こういった他のツールと連動させるというのはあまり推奨はされていないようですね。
それぞれのツールによって繋がっている人の属性が違うので、同じコンテンツを使い回すべきではないというのがその理由。逆にツイッターでもfacebookでも両方でフレンドとなっている場合でも、同じ情報を何度も見たいと思う人はいないので、やはり使い回しはNGという理由もあります。
一々納得できる内容です。
これについてはいずれFacebookの空気感が読めるようになった時にでも考えて生きましょう。「使い分け」が必要なのはわかります。
でもツイッターもブログもFacebookもとなると、全てに全力投球はなかなか大変なのが事実ですから、今はFacebookについては「稼働させながら放置」を選択です。
ということでツイートをFacebookに流すアプリはないかと物色。
なんとなく良さそうなのをみつけたので以下に設定方法を記載しておきます。
使用するアプリは「Smart Tweets」
①まずfacebookの検索ボックスに「smart tweet」と入力。
②すると候補のアプリがでてくるのでクリック
③こんな画面が出たら「アプリへ移動」をクリック
④次に「install to Profile」をクリックし
⑤許可のリクエスト画面で「許可する」をクリック
⑥次にツイッター側でこんな操作をしろ的な説明画面が出てくるので
「Click here to Authorize with Twitter」をクリック
⑦するとツイッターへと移動するので（多分事前にログイン状態になっていた場合）
「許可する」をクリック
⑧【アプリに転送します】という文字が出てしばらくすると連携完了の画面になります
⑨【Setting】画面にてツイッターのハッシュタグやRTの表示方法を変更して「Update」をクリック
これで設定は終了です。
たまにツイートを取りこぼすこともあるようなので、その時は素直に諦めましょう。
続き・アメブロ記事内のリンクが下線・青色・ちょっと強調されるように変更
前回の記事アメブロ記事内のリンクが下線・青色・ちょっと強調されるように変更のその後です。
変更後、ブログの様子をみてみると【このブログの読者になる】まで文字が大きくなって少し不格好だったので、「このブログの読者になる（チェック）」を少し変更で追記していたCSSに更に書き加えました。
これでなんとか思った形で表示されるようになりました。
と思っていたら今度はページ最下部のアドセンス広告が太字で表示されたまま。
そこでこの記事などを参考にしながら試行錯誤の末、
CSSに以下の記述をすることで解決。
一応表示を見てみる限り大丈夫なものの、はたしてこのやり方であっているのでしょうか？
どうもまだまだわからない事が多いので随時勉強していく必要がありそうです。
変更後、ブログの様子をみてみると【このブログの読者になる】まで文字が大きくなって少し不格好だったので、「このブログの読者になる（チェック）」を少し変更で追記していたCSSに更に書き加えました。
.readerMainLink a{
color:blue;
font-weight:bold;
font-size:100% !important;
text-decoration:underline;
}これでなんとか思った形で表示されるようになりました。
と思っていたら今度はページ最下部のアドセンス広告が太字で表示されたまま。
そこでこの記事などを参考にしながら試行錯誤の末、
CSSに以下の記述をすることで解決。
/*ページ最下部の広告*/
#footer_ad ul{
color:#06F;
font-weight:normal;
font-size:12px;
}
#footer_ad #advertising3 a{
color:#06F;
font-weight:normal;
font-size:12px;
}一応表示を見てみる限り大丈夫なものの、はたしてこのやり方であっているのでしょうか？
どうもまだまだわからない事が多いので随時勉強していく必要がありそうです。
・アメブロカスタマイズ目次
アメブロ記事内のリンクを下線・青色・ちょっと強調されるように変更
色々な人のブログを読んでいると、「記事内のリンクは文字色青色の下線付きにして、リンクであることをわかりやすくするべき」だという意見が多かったので、早速このブログも変更してみました。
要するにヤフーのトップページみたいにした方が多くの人に「これはリンクだ」と認識してもらえるということですね。
CSSのカスタムについて参考にしたのは、この方やこの方のブログ。
ただ上記の方々のブログに記載されているCSSの追記をしても、自分のブログではリンクが青色下線付きになりませんでした。文字色の変更はなんとなく出来たものの下線がつきません。おそらく使っているスキンのテンプレートが違うからだと思います。
仕方がないので少し検索。
要するにCSSの中で記事内のリンク表示を制御している部分を探し
text-decoration: none;
となっているところを
↓↓
text-decoration: underline;
に変えればいいんじゃないかという結論に達しました。
そこでこのブログのCSSの中で多分このあたりという箇所を探し
修正しては表示して様子をみるという行為を繰り返し
おそらくここだというところを発見。
そして
こうなっていたものを
こんな風に変更。
これで記事内のリンクが青色・太字・少し大きめ・下線付きとなりました。
通常のカスタム可能なCSSを使っているのであれば、こういったCSSの編集の仕方でなくてもいいと思います。これはあくまでこのブログのテンプレートに合わせた形です。
普通にするのなら上記に挙げた方々のブログに載っている通り
もしくは
のどちらかをCSSの最後にコピペすればいいと思います。
ちなみにこのままだと記事下のアドセンス広告まで強調表示されてしまいます。
そこで以下の記述をCSSに追記し広告の表示は以前と同じ状態に戻しました。
赤文字の部分に別のカラーコードを割り当てれば広告の文字色を変更することが出来ます。サイズを変えれば大きさを変えたりも出来ますので、やり方によってはアドセンス広告をすごく見えにくくする事も可能です。
最近ではアメブロをカスタマイズしている人のブログでそのようにしているのもよく見かけます。
しかし以前の記事でも少し触れた通り、無料でブログサービスを利用している以上広告が表示されるのは当たり前。サイバーエージェントも慈善事業をやっている訳ではないので、キャッシュポイントがどこにも無いなんてありえません。
「記事内のアドセンス広告を薄くする」事もそうですが、「サイドバーの一番上に出てくるバナー広告を一番下に表示させたり」といった、広告を見えづらくするカスタマイズはやはりルール違反ではないかなと思います。まあサイドのバナー広告に関しては、元々表示されないスキンがあったりしましたから微妙なところではありますけれども。
いずれにしても、月1000円ほど払えば広告は堂々と消せますし、それでもいやなら違うブログサービスに引っ越しすればいいだけです。
このあたりについては人によって考え方も違うので、あくまでこれは自分の意見。特に押しつけるつもりはありません。どうするのかは自由です。でも自分で個人事業や経営をやっているにも関わらず、他社の提供している無料ブログサービスの中で広告を薄くしている人を見ると色々と悲しくなります。
アドセンス広告について自由にすればいいとは思うものの、注意すべき事が１つだけあります。
それは明らかに広告を見えにくくした事が原因としか考えられない状況で、アメブロのアカウントをBANされた人がいるという事実。
アメーバの利用規約をみる限り明言はされていませんが、広告表示を弄る事が規約違反になる可能性は十分あります。育てたブログがある日いきなり消えてしまうのは一財産失うようなもの。
そのあたりはしっかり頭にいれておきましょう。
要するにヤフーのトップページみたいにした方が多くの人に「これはリンクだ」と認識してもらえるということですね。
CSSのカスタムについて参考にしたのは、この方やこの方のブログ。
ただ上記の方々のブログに記載されているCSSの追記をしても、自分のブログではリンクが青色下線付きになりませんでした。文字色の変更はなんとなく出来たものの下線がつきません。おそらく使っているスキンのテンプレートが違うからだと思います。
仕方がないので少し検索。
要するにCSSの中で記事内のリンク表示を制御している部分を探し
text-decoration: none;
となっているところを
↓↓
text-decoration: underline;
に変えればいいんじゃないかという結論に達しました。
そこでこのブログのCSSの中で多分このあたりという箇所を探し
修正しては表示して様子をみるという行為を繰り返し
おそらくここだというところを発見。
そして
/* ■メインカラム■ */
#main a{
text-decoration:none;
color:#06F;
}
#main a:visited{
text-decoration:none;
color:#06F;
}
#main a:hover{
text-decoration:underline;
color:#F06;
}こうなっていたものを
/* ■メインカラム■ */
#main a{
text-decoration:underline;
color:blue;
font-weight:bold;
font-size:110%;
}
#main a:visited{
text-decoration:underline;
color:blue;
font-weight:bold;
font-size:110%;
}
#main a:hover{
text-decoration:underline;
color:#F06;
font-weight:bold;
font-size:110%;
}こんな風に変更。
これで記事内のリンクが青色・太字・少し大きめ・下線付きとなりました。
通常のカスタム可能なCSSを使っているのであれば、こういったCSSの編集の仕方でなくてもいいと思います。これはあくまでこのブログのテンプレートに合わせた形です。
普通にするのなら上記に挙げた方々のブログに載っている通り
.subContents a{
color:blue;
font-weight:bold;
font-size:110%;
text-decoration:underline;
}
.subContents a:visited{
color:blue;
}もしくは
.entry .contents a{
color:blue;
text-decoration:underline;
font-weight:bold;
font-size:110%;
}
.subContents a:visited{
color:blue;
}のどちらかをCSSの最後にコピペすればいいと思います。
ちなみにこのままだと記事下のアドセンス広告まで強調表示されてしまいます。
そこで以下の記述をCSSに追記し広告の表示は以前と同じ状態に戻しました。
/* ■記事下の広告■ */
#advertising2 a{
color:#06F;
font-weight:normal;
font-size:12px !important;
*font-size:75% !important;/*forIE6IE7*/
}赤文字の部分に別のカラーコードを割り当てれば広告の文字色を変更することが出来ます。サイズを変えれば大きさを変えたりも出来ますので、やり方によってはアドセンス広告をすごく見えにくくする事も可能です。
最近ではアメブロをカスタマイズしている人のブログでそのようにしているのもよく見かけます。
しかし以前の記事でも少し触れた通り、無料でブログサービスを利用している以上広告が表示されるのは当たり前。サイバーエージェントも慈善事業をやっている訳ではないので、キャッシュポイントがどこにも無いなんてありえません。
「記事内のアドセンス広告を薄くする」事もそうですが、「サイドバーの一番上に出てくるバナー広告を一番下に表示させたり」といった、広告を見えづらくするカスタマイズはやはりルール違反ではないかなと思います。まあサイドのバナー広告に関しては、元々表示されないスキンがあったりしましたから微妙なところではありますけれども。
いずれにしても、月1000円ほど払えば広告は堂々と消せますし、それでもいやなら違うブログサービスに引っ越しすればいいだけです。
このあたりについては人によって考え方も違うので、あくまでこれは自分の意見。特に押しつけるつもりはありません。どうするのかは自由です。でも自分で個人事業や経営をやっているにも関わらず、他社の提供している無料ブログサービスの中で広告を薄くしている人を見ると色々と悲しくなります。
アドセンス広告について自由にすればいいとは思うものの、注意すべき事が１つだけあります。
それは明らかに広告を見えにくくした事が原因としか考えられない状況で、アメブロのアカウントをBANされた人がいるという事実。
アメーバの利用規約をみる限り明言はされていませんが、広告表示を弄る事が規約違反になる可能性は十分あります。育てたブログがある日いきなり消えてしまうのは一財産失うようなもの。
そのあたりはしっかり頭にいれておきましょう。
・アメブロカスタマイズ目次
アメブロにZenbackを導入して記事下に表示させる方法
少し乗り遅れた感はありますが、今更ながらこのブログにZenbackを導入してみました。
Zenbackとは、はてブやツイッターなどのソーシャルボタンやブログ内の関連記事、似た種類の関連リンクなどを自動的に表示してくれるブログパーツです。
昔は制限があり一部の人しか使えなかったようですが、昨年の１２月頃に誰でも使えるようになりました。今現在非常に人気があり、あちこちのブログでよく見かけます。
ちなみにzenbackブログより、
導入することでブログに表示されるようになる内容。
---------------------------------------------------------------------
・その記事をソーシャルなどにポストするボタン
（Twitter、はてブ、mixiチェック、Evernote、Facebook）
・その記事に関係する自分のブログ記事
・その記事に関係する他のzenbackユーザーのブログ記事（関連リンク）
・その記事についての最新のTwitterのつぶやき
・その記事についてのはてなブックマーク
----------------------------------------------------------------------
開発をしているのはMovableTypeでおなじみのSixApart社。
このブログパーツを設置するメリットは、「自ブログ内における関連記事の表示」と「他のブログと自動的に関連リンクが結ばれる事」によるPVの増加です。
単なる日記ブログを書いているだけならあまり気にしなくても良いかもしれませんが、多少なりともノウハウや専門家っぽい事を書いているブログであれば、あって困らない効果と言えます。
ただし、自分のブログにアクセスが流れてくる反面、こちらからも他のブログにアクセスが流れていくという事は当然なので、そのあたりの事もちょっとだけ頭に入れておいていいと思います。
導入するのは簡単。
公式サイトの「新規登録＆コードを取得する」から順に進んで行けば表示する為の「スクリプトコード」が手に入ります。後はそれを自分のブログに組み込むだけ。アメブロの場合はタグにJavascriptが使われている関係上「フリープラグイン」の中に放り込む事となります。
しかしフリープラグインに入れた場合は、関連記事その他諸々はサイドバーにしか表示されません。これだとあまり意味がないので（出来れば記事下に表示されるようにしたい）、少し検索。
こちらのブログを参考にさせていただき（というか丸々ですが）、先程のzenbackのスクリプトコードに少しだけ追加します。上記のブログと同じ物をこちらにも書いておきます。
赤文字の部分をzenbackのスクリプトコードと入れ替えます。
あとはそのままフリープラグインへコピー＆ペースト。
導入してから関連記事の表示がされるまでは少し時間がかかるようです。
効果のほどはその後わかるでしょう。
Zenbackとは、はてブやツイッターなどのソーシャルボタンやブログ内の関連記事、似た種類の関連リンクなどを自動的に表示してくれるブログパーツです。
昔は制限があり一部の人しか使えなかったようですが、昨年の１２月頃に誰でも使えるようになりました。今現在非常に人気があり、あちこちのブログでよく見かけます。
ちなみにzenbackブログより、
導入することでブログに表示されるようになる内容。
---------------------------------------------------------------------
・その記事をソーシャルなどにポストするボタン
（Twitter、はてブ、mixiチェック、Evernote、Facebook）
・その記事に関係する自分のブログ記事
・その記事に関係する他のzenbackユーザーのブログ記事（関連リンク）
・その記事についての最新のTwitterのつぶやき
・その記事についてのはてなブックマーク
----------------------------------------------------------------------
開発をしているのはMovableTypeでおなじみのSixApart社。
このブログパーツを設置するメリットは、「自ブログ内における関連記事の表示」と「他のブログと自動的に関連リンクが結ばれる事」によるPVの増加です。
単なる日記ブログを書いているだけならあまり気にしなくても良いかもしれませんが、多少なりともノウハウや専門家っぽい事を書いているブログであれば、あって困らない効果と言えます。
ただし、自分のブログにアクセスが流れてくる反面、こちらからも他のブログにアクセスが流れていくという事は当然なので、そのあたりの事もちょっとだけ頭に入れておいていいと思います。
導入するのは簡単。
公式サイトの「新規登録＆コードを取得する」から順に進んで行けば表示する為の「スクリプトコード」が手に入ります。後はそれを自分のブログに組み込むだけ。アメブロの場合はタグにJavascriptが使われている関係上「フリープラグイン」の中に放り込む事となります。
しかしフリープラグインに入れた場合は、関連記事その他諸々はサイドバーにしか表示されません。これだとあまり意味がないので（出来れば記事下に表示されるようにしたい）、少し検索。
こちらのブログを参考にさせていただき（というか丸々ですが）、先程のzenbackのスクリプトコードに少しだけ追加します。上記のブログと同じ物をこちらにも書いておきます。
<!-- X:S ZenBackWidget -->zenbackで作られたソース<!-- X:E ZenBackWidget -->
<script>
$(function() {
$("#zenback_loady").insertBefore("#advertising2");
});
</script>赤文字の部分をzenbackのスクリプトコードと入れ替えます。
あとはそのままフリープラグインへコピー＆ペースト。
導入してから関連記事の表示がされるまでは少し時間がかかるようです。
効果のほどはその後わかるでしょう。
・アメブロカスタマイズ目次