bloggerカスタマイズで行ったことのまとめ

当ページのリンクには広告が含まれています。
bloggerカスタマイズで行ったことのまとめ
管理人<br>e-pon
管理人
e-pon

今回は、前回まで紹介してきたbloggerのCSSやhtml編集を使ったカスタマイズの紹介です。

この記事ではこんなことをまとめています。
  • 今回の記事の目的について
  • CSSだけで画像に影を作る
  • CSSでカエレバカスタマイズ
  • CSSで見出しカスタマイズ
  • HTML編集画面目次作成プラグインをに挿入
  • CSSテンプレート全体をフェードインさせる
  • bloggerでブログカードを使う
目次

今回の記事の目的について

今回の記事の目的は、前回までのブログ初心者さんから中級レベルさん向けです。

「広告が付かない無料ブログで、CSS編集画面、HTML編集に貼り付けるなどのカスタマイズを行うことで、見やすくキレイなブログが作れます。」という内容です。

インスタなど、サイトがキレイなので見やすい

インスタなどを使っているときスマホで見たときのサイト全体がキレイです。ブログもスマホで見たとき、すっきりキレイを意識して作ることも、ブログ収益化にとっては大切なポイントとなるかもしれません。

今回の記事では、どんなカスタマイズをしたか?ということと、カスタマイズ参考元の紹介をさせていただきたいと思います。

CSSだけで画像に影を作る

画像を貼り付けて記事を読みやすくするといい、と前回までの流れで説明したかもしれませんが、「記事を長々と書くよりも、ブロックごとに分けて書く。」というスタイルが、今のブログ記事の主流です。

文章を区分けする(ブロック化)方法として見出しを設定することであったり、枠線を使ってみる、ブログカードの挿入などありますが、画像もその一つです。

その画像もカスタマイズすることが出来ます。

画像カスタマイズの種類

画像カスタマイズの種類は、いろいろあります。例えば画像の角を丸くする・画像に枠線を入れる…などなど、個性的な表現をCSSソースでカスタマイズすることが可能です。

画像に影を作るとは?

今回、管理人が新しく立ち上げたサイトで使った方法は、「画像に影を作る」という方法です。この「画像に影を作る」は、こんな感じになります↓

パソコン

画像に影を付けると、こうなります↓

パソコン画像影

画像に影を付けることによって、画像が画面から浮いているように見えることで、テンプレートの印象が変わってきます。

画像カスタマイズを紹介していたサイトはこちら

bloggerカスタマイズするために世話になった記事は「ぽんひろ」さんのサイトからです↓

ぽんひろ.com
ブログの画像に使えるCSSスタイル20選!コピペで簡単! ブログで画像を使うときに困ったことありませんか?真ん中に寄せたい、サイズを大きくしたい、影をつけたい、文字を上に入れたい、文字を周りに入れたい、角を丸くしたいな...
管理人<br>えーぽん
管理人
えーぽん

ぽんひろさん、ありがとうございます。他のソースコードも使ってみたいと

思いましたm(__)m

このCSSは、ボックスに影をつけるためのソースコードです。

画像カスタマイズの手順を記事に

画像カスタマイズ手順を記事にしたので、良かったら参考にしてください↓

あわせて読みたい
bloggerの画像をカスタマイズしてみました bbloggerにあるCSS編集を使って画像に影をつけました、運営しているブログで行った画像カスタマイズの手順を画像を使って初心者さんにも分かりやい紹介をします。※bloggerテーマは「Emporio」です。

CSSでカエレバカスタマイズ

次は、カエレバカスタマイズです。ひとつの商品に複数の広告サイトリンクを設定するHTMLソースを作成してくれる「カエレバ」サイトと大変便利なサイトがあります↓

あわせて読みたい
商品紹介ブログパーツ カエレバ ありそうで無かった、商品紹介用のブログパーツあります!

いくつかのASP登録を済ませておくと、一つの紹介で多くのショップボタンを設置できます。

ASPの登録を澄ませれば、サイト記事内にカエレバソースを利用できるようになります。上記のカエレバサイトに必要な項目を登録します。登録後、こんな感じのリンクを使えるようになります↓

カエレバリンク

管理人のbloggerブログでは、Amazon登録がまだ出来ていません。 もしもアフィリエイトで、先日Amazon申請承認されました。Amazonアソシエイト申請承認されれば、こちらにAmazonリンクも加えられます。

カエレバカスタマイズとは、上記で説明した「カエレバサイトが用意したリンクボタン」を、さらに見やすいボタンにカスタマイズすることです。

そのカエレバカスタマイズを、今回立ち上げたbloggerで使っています。カエレバカスタマイズすると、こうなります↓

カエレバカスタマイズ

スマホでは、こう表示されます↓

カエレバカスタマイズ

参考にさせていただいたサイト

この方法を教えれくれたのは、ブログサイト「ひょんなことから」さんです↓

ぴょんなことから
CSSコピペで完了!カエレバ・ヨメレバのデザインをカスタマイズ カエレバ・ヨメレバのカスタマイズの方法の詳細を、コピペだけでカスタマイズが完了するようにCSSを紹介します。どこにCSSを記載するのかということや、カスタマイズがうま...

実は、bloggerで使えるという「カエレバカスタマイズソース」は、他にもいろいろありました。

ですが、「ひょんなことから」さんが紹介してくれたCSSは、スマホ画面でキレイにレスポンシブ表示されるという点とか、iPhone標準のブラウザであるsafariで使っている広告ブロックアプリのために、画像が消える…といった問題が、他のソースではありましたが、このCSSソースでは、それが起こりませんでした。

管理人<br>えーぽん
管理人
えーぽん

bloggerに合ったソースと言えるかも…。あと少し、カラーと変えました。

カエレバカスタマイズ設定の手順を記事に

カエレバカスタマイズのソースコードを自分好みに設定する手順を紹介しているので、良かったら参考にしてみてくださいね↓

あわせて読みたい
blogger CSSでカエレバカスタマイズをやってみた 今回は、bloggerでカエレバカスタマイズの設定を行った手順を紹介します。参考コードソースにau payボタンも追加、カラーコードを変更する方法なども説明します。

CSSで見出しカスタマイズ

次は「見出しカスタマイズ」です。このカスタマイズは、bloggerや、他の無料ブログを使っているブログ初心者さんでも、簡単に使えるカスタマイズです。

参考にさせていただいたサイト

見出しCSSカスタマイズを参考にさせてもらったサイトは、「サルワカ」さんのブログです↓

サルワカ | サルでも分かる図解説...
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選 h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。
管理人<br>えーぽん
管理人
えーぽん

サルワカさんの紹介する見出しカスタマイズですが、本当にかわいいタイプからシンプルなタイプなど、たくさん用意してくれていて、毎回参考にしています。

HTML編集画面目次作成プラグインをに挿入

次は、「目次カスタマイズ」です。目次のカスタマイズですが、管理人は現在、こういうタイプを利用しています↓

参考にさせていただいたサイト

今回、参考にさせてもらったサイトは、「スケ郎のお話」さんです↓

スケ郎のお話
[Blogger] 目次を簡単に自動生成(忙しい人向けのコピペ素材) プログラミング関連の備忘録。AI関連APIの解説等を行っています。 少しでも誰かの役に立てれれば嬉しいです。
管理人<br>えーぽん
管理人
えーぽん

目次カスタマイズも探し回った結果、スケ郎さんが紹介してくれた方法で

上手くいきました。

CSSテンプレート全体をフェードインさせる

テンプレート全体をフェードインさせる方法は、4年前から使っている(bloggerブログ)を参考にしました。当時、どのサイトを参考にしたのか、記述していないため、ここに直接CSSソースを貼っておきます↓

 /*テンプレート全体 フェードインCSS*/
body{
    animation: fadeIn 1s ease-in 0s 1 normal;
    -webkit-animation: fadeIn 1s ease-in 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0; transform: translateY(-60px);}
    100% {opacity: 1; transform: translateY(0px);}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0; transform: translateY(-60px);}
    100% {opacity: 1; transform: translateY(0px);}
}
/*テンプレート全体 フェードCSSここまで*/

このソースコードを、bloggerのCSSを追加に貼り付けると、ブラウザで上から下にブログが表示されます。実際に確認してもらうと分かりやすいかと思います↓

あわせて読みたい
ブログが見つかりません Blogger は Google のブログ公開ツールで、世界中のユーザーとアイデアの共有を簡単に行うことができます。Blogger では、テキスト、写真、動画を個人のブログやチーム ブ...

bloggerでブログカード使う

bloggerにない設定のブログカードですが、外部サイトを利用して簡単に使えます。ちなみに、ブログカードとは、サイトなどのリンクをこんな形で表示することです↓

ブログカードを作成してくれるサイト

現在、管理人が利用させてもらっているサイトは、「ブログカード風の紹介リンクタグ作成」さんです↓

あわせて読みたい
ブログカード風の紹介リンクタグ作成 ブログカード風の紹介リンクのタグを簡単に作成できます。

bloggerで使えるブログカード作成サイトを紹介してくれたのは、「ウラの裏」さんです↓

ウラの裏
内部リンクを効果的に!Bloggerで使えるブログカード4選 ブログを運営している人なら、内部リンクがSEOに効果的なことはご存じだろう。記事内に自分のブログの他ページのリンクを貼ることで、ユーザーの滞在時間を伸ばし、PV数を...

見た目で選ぶか、タグソースのシンプルさで選ぶか…検討した結果、見た目で選びました。

また、別の機会で設定方法の紹介記事をまとめたいと思います。今回は、以上となります。最後に、現在、使っているbloggerのテーマは、Emporioという公式テーマです。なぜ、公式テーマを使っているか、とかなどについては、別の機会で紹介したいと思ってます。

スポンサーリンク




この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

e-ponのアバター e-pon ブログ管理人

管理人である「えーぽん」です。滋賀在住、パートタイムと家事をこなす50代の普通の主婦です。Wordpressが好きで趣味でブログを書いてましたが、将来を考えた結果、ブログ収益化を始めることに。
脱パート目指してがんばります。

目次