ブログ運営

【ブログカスタマイズ】太字を蛍光ペン仕様に|アドセンス広告を自動挿入|写真にALT属性を追加

blog-customize3

こんにちは。シーアです。(@seer1118b

ブログを書いていると、参考に他の方のブログを見ることも増えますよね。

シーア
シーア
こんなかっこいいブログデザインにしたいな〜!

そんな憧れを、CSSカスタマイズで実現してみましたよ。

参考にさせて頂いたブログとともにご紹介します。

当ブログは、今はワードプレスに移転しました。この記事は、はてなブログ時代のカスタマイズです。

この記事を読めば、より視覚で訴えられるデザインになり、読者の方にアピールすることができますよ。

はてなブログCSSカスタマイズ|蛍光ペンでマーカーしたようなデザイン

こういうやつです。

人気のブログでよく見る、蛍光マーカーデザインも、CSSで対応可能。

シーア
シーア
こちらの記事を参考にしましたよ。

このやり方では、はてなブログの設定画面から「デザイン」→工具のマーク→「デザインCSS」にCSSを挿入しています。

私はレスポンシブデザインのテーマではなかったので、このやり方だと、スマホには反映されません。

工具のマークの隣の、スマホ版にも別途同じCSSをコピペする必要があります。

PC・スマホどちらにも表示させられるやり方として、「設定」→「詳細設定」→「headに要素を追加」で挿入するやり方もあり、どちらでもOKです。

太文字を蛍光ペンにするのではなく、下線を蛍光ペンにするやり方もあります。

色はHTMLカラーコードで自由に変更可能

シーア
シーア
蛍光マーカーの色の変更は、カラーコードを変えるだけ!

色のコードを変えれば、黄色・ピンク・グリーンなど自由自在。

普段使う文字の色に合わせて、蛍光ペンの色を選ぶといいですね。

色がかぶると見えにくいし、過去の記事を全部修正して回るのも大変なので。

はてなブログCSSカスタマイズ|アドセンス広告を記事中に自動挿入

Googleアドセンスの広告スペースを、下記の設定にしています。

  • トップページのタイトル下
  • 一番下のフッター
  • 右側のサイドバー(PCのみ)

記事の中にアドセンス広告を入れるには、書いている途中に、コードを入れることになります。

シーア
シーア
でも、毎回新しい記事を書くたびに、手動で入れるのはとても面倒…。

そこで、自動的にコードを挿入するスクリプトを入れました。

開発者の方のブログからコピペさせてもらうだけで、簡単です!

特定のカテゴリの記事には広告を入れない、という設定もできます。

はてなブログCSSカスタマイズ|写真にALT属性を追加

category-blog-customize

アイキャッチ画像は、必須で入れるのがおすすめ。

ブログに入れている写真は、自分が日常や旅先で撮影した写真を使っています。

シーア
シーア
記事の内容とは全く関係ないことも、結構あるけど…。

検索エンジン的には、画像がいくらキレイでかわいくてもわかりません。

この画像が何の画像なのかを認識してもらうために、ALT属性というものを設定したほうが、SEO対策には良いのです。

はてなブログでは、普通に写真をアップロードしただけでは、ALT属性を変更・修正できません。

デフォルトでは、無意味な英数字の羅列。

そこで、画像のALT属性・Title属性を変更できるGoogle Chromeの拡張機能を入れてみました。

ブラウザはGoogle Chrome限定ですが、便利な機能が無料で使えるのはありがたいですね。

ただし、新たに写真を入れるときにしか変えられません。

過去記事に遡って、画像を一度削除して、もう一度選択して入れ直す…という作業をするのは面倒くさい!

シーア
シーア
時間のあるときに気が向いたらやろうかな…?

はてなブログのスマホアプリから写真をUPすることもあるので、そういう場合には使えませんね。

【簡単】はてなブログをCSSカスタマイズで自分色にしよう

ライト
ライト
ブログを自分仕様に変えていくのは楽しいね!

中身も大事ですが、見た目がキレイだと読みやすい!

これも、知識のある方が、素人にも分かりやすく公開してくれているおかげ。

真似してみたいカスタマイズがあれば、リンク先の記事からご確認下さい。

私のブログより詳しく説明していらっしゃるので、見てみて下さいね。

関連記事 

Google AdSenseの導入までの流れです。

厳しいと言われている審査ですが、特に引っかかることなく通過できました。コツなどまとめています。 

アドセンス承認
Google AdSenseの導入に成功!スピード承認までの流れを公開こんにちは。シーアです。(@seer1118b) ブログをはじめて、1ヶ月と少しが経過した頃。開設当初から目標にしていた、Google...

ブログを始めてから、パソコンを開くことが増えました。

持ち運べる軽いノートパソコンなら、Chromebookがおすすめ。

4万円弱で、0.9kgと軽くてサクサク動くパソコンが買えますよ。

【ASUS Chromebook Flip C101PA】ブロガーにおすすめ!サラッと持ち運べてどこでも使えるノートパソコンこんにちは。シーアです。(@seer1118b) これまでWindowsしか触ったことのなかった私が、なぜChromebookを選...
よくばりブロガー|シーアカフェへようこそ
シーア
シーア
借金があっても、自分の力で幸せと豊かさを手に入れます!

夫の借金発覚をきっかけに、債務整理や家計の見直しを実行しました。投資や節約、陸マイラー活動について発信しています。

TwitterPROFILE

ライト
ライト
お好きなカテゴリーにどうぞ!

COMMENT

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