日々楽しく、自由きままに!

気まぐれおやじの日々の出来事や趣味の旅行記を綴っています

初心者必見!知識ゼロでも出来るブログのカスタマイズ

当ブログには広告を掲載しています

★気まぐれおやじの広告★

f:id:koulog:20210508202031j:plain

皆さんこんにちは、こんばんは!

皆さんはどの様にブログのカスタマイズをしていますか?

おいらは今記事そっちのけで、めっちゃカスタマイズにハマってます

つい先日はど素人が調子こいてやっていると、テーマデザインがぶっ飛んでしまうと言う大チョンボをやらかしてしまいました

幸い元に戻ったので良かったのですが、もう本当に冷や汗ものでした

その時の様子の記事が👇👇👇

koulog.hatenadiary.com

 

 

おいらのブログはコピペだらけのカスタマイズ

皆さんのブログを見ていると、あれも良いな、これも良いな、あっ!こんな事やあんな事も出来るんだとキリがありません

そこでブログ初心者のおいらが、見よう見まねでアレやコレやと、先輩方からのコピペ+色の変更のみのカスタマイズを紹介します

また、今回は記事内のカスタマイズについての自分用備忘録でもあります!

はてなブログの写真を中央にする方法

先ずブログを始めた当初にカスタマイズしたのが写真を中央に入れる事です

ブログの端から端まで写真を入れるのに何かデザイン的に違和感があって、少し小さく載せたいのですが、その場合デフォルトでは左に寄ってしまいます

キャプションを入れると中央に寄りますが、キャプションを入れずに中央に寄せたいので、これを解消する為のCSSコードを入れました

こちらの先輩から参考にさせてもらいました

n2blog.hatenablog.jp

にほんブログ村の登録方法とはてなブログにバナーの貼り方

皆さんのブログを拝見すると、にほんブログ村に登録してバナーを貼っています

はてなブログからにほんブログ村に飛んで、INポイントやPVポイントを稼ぐのが狙いみたいです

そこでおいらも早速登録し、バナーを貼ってみました

下の三つがおいらが貼っているバナーです

</a </a にほんブログ村 旅行ブログへ

気まぐれおやじのブログは、にほんブログ村に参加しています

ポチっと応援よろしくお願いします

貼り方はこちらの先輩のブログを参考にしました

jmangasuki2.hatenablog.co

はてなブログに自分のYouTubeチャンネルのボタンの貼り方

YouTubeのチャンネルを持っている方は、ブログに連携させる事が出来ます

文字通りチャンネル登録者数のアップに繋げるのが狙いです

おいらもYouTubeチャンネルのボタンを貼りました

下のボタンがおいらのYouTubeチャンネルのボタンです

 

 残念な事に登録者数は増えていません(恥)

(北海道旅行が好きな方、今後北海道旅行に行こうと思っている方は、是非とも旅行の参考に見に来て下さい)

貼り方はこちらの先輩のブログを参考にしました

www.kanzaki3.com

はてなブログGoogleアドセンスの設置方法

ここではGoogleアドセンス合格が前提となります

まだ合格していない方は、まずはGoogleアドセンスの申請から始めて下さい

koulog.hatenadiary.com

おいらは無事二回目の申請で合格をいただいたのですが、基本的にどこに?どう?広告を貼って良いのかサッパリ分からなかったので、先輩の知恵をお借りしました

参考にさせていただいたのがこちらの先輩です

cherrydaisukichang.hatenablog.com

はてなブログに見出しを入れる方法 

見出しとはまさにこの上の様に、文面のタイトルの様なものです

おいらは最初見出しの作り方が分からなくて、「はてなブログ タイトル」と打っても全然出てこなくて、そもそもこのタイトルの様な物が見出しと気づくのも含めて、仕組みを理解するのに1時間以上かかってしまいました

そこでたどり着いたのがこちらの先輩で、こちらの先輩からは見出しの重要性や、見出しの使い方を参考にさせていただきました

dearbrother.hatenablog.com

そして、見出しのデザインはこちらの先輩のデザインを使わせていただきました

saruwakakun.com

はてなブログに目次を入れる方法

ブログに目次を入れる事は、見に来てくれた人にページの内容を的確に伝える事が出来る有用なツールです

また、ブログの目次は見たいところをクリックすると、その項目にジャンプする事が出来ます

全文読むのは面倒なので、目的のところだけさっと読みたい、こんな時にも目次はとても便利です

そこで目次を入れるのに参考にさせていただいたのがこちらの先輩です

oyakudachiafi.hatenablog.com

そして目次のデザインはこちらの先輩のデザインを使わせていただきました

www.fuji-blo.com

自分好みのカラーに変更してみた

使わせていただいたのは、下のガーリーデザインです

f:id:koulog:20210508124845j:plain

この色を自分なりにカスタマイズして、下の様に色の変更をしました

f:id:koulog:20210508125039j:plain

ピンクからオレンジに変えてみました

CSSコードの色番号を自分好みの色に変更するだけです

色の変更はこちらの色見本から選べます

www.colordic.org

はてなブログに会話形式の吹き出しを入れる方法

 

f:id:koulog:20210323130248p:plain
気まぐれおやじ

皆さんこんにちは、こんばんは!
気まぐれおやじのブログにようこそ

 

こんな吹き出しを使った会話形式のブログ、よく見かけますよね

皆さんも使ってみたいと思った事ありませんか?

設定が難しそうな気がして諦めていませんか?

実際に設定してみたらこれが意外と簡単なんです

ど素人のおいらでも出来たので、皆さんもすぐ出来ますよ

会話形式の吹き出しはいくつかあるみたいですが、LINE風に吹き出し内の背景にも色を入れれる方を選択しました

f:id:koulog:20210407124632p:plain
ぽん太

こちらの先輩を参考にさせて頂いたワン!

www.chankome.com

はてなブログで蛍光マーカーで文字を装飾・強調する方法

自分のブログを読みやすくするために、こんな感じで蛍光マーカーを使いたいと思う方も多いでしょう

太字やアンダーラインよりも強調する事が出来て、読みやすくなります

こちらの先輩では、一回の設定で3色の蛍光マーカーが使えます

そしてスマホ対応なのも良いですね

hirochiki10.hatenablog.com

蛍光マーカーも自分好みにカスタマイズ 

最初は3色も使えるのか~と喜んでいたのですが、実際は3色も使う機会も少なく、太字のみ使いたい時も、必然と蛍光マーカーが入るのも使い勝手が悪く斜体はほぼ使わないので斜体ボタンは黄色で設定しグリーンの蛍光マーカーは、HTMLコードで要れるようにして、2色対応にしています

まだこちらの色はデフォルトのままですが、目次の時と同様にCSSコードの色番号を自分好みの色に変更する事も可能です

はてなブログでアレンジ!囲み枠の使い方

皆さんのブログをみているとポイントや、注意などの文章を実線や点線で囲んでいるのをよく見ます

これはCSSコードは必要無く、直接HTMLコードを貼り付けるだけなのですごく簡単です

事前に好きな囲みのHTMLコードをメモ帳やWordにコピペしておき、そこで文章を入力したHTMLコードをコピーして、HTML編集画面に貼り付けるだけです

ポイント!こういうのよく見ますよね こちらが今回のポイントです!みたいな

 

 
こちらの先輩のデザインを
使わせていただきました
 

smatech.hatenablog.com

はてなブログCSSスマホページをカスタマイズする方法

CSSコードをデザインCSS に貼り付けても、全く対応しない場合があります

おいらもこの状況は丸一日悩んだ苦い経験があります

そんな悩みを解決してくれたのが、こちらの先輩です

clrmemory.com

はてなブログで「上に戻る」ボタンを設置する方法

おいらのブログ結構長い記事の時があって、読者さんの事を考えると、読み終わってブログの最上部まで戻りたい時、マウスでスクロールして戻るのって結構大変やな~って思うんですよね

皆さんのブログの中には「上へ戻る」ボタン、「TOPに戻る」ボタンが画面の右下についている場合があり、そこを押せば一発でブログの最上部まで戻れて非常に便利だと思っていました

そこで「上に戻る」ボタンを設置してみたいと思い、こちらの先輩を参考にさせていただきました

glglsti2019.hatenablog.com

スマホ対応にならない問題点

f:id:koulog:20210508153146j:plain

PCには右下にボタンが設置出来て上下に一気に移動します

 

f:id:koulog:20210508153847p:plain

スマホには、本来なら赤丸のとこらへんにボタンが出てこないとダメなのですが、何度か設定し直したのですが、出てくれませんでした

何かが間違っているのでしょうか?

それとも【無料版】では対応出来ないのでしょうか?

本来ならPCよりスマホの方にボタンを付けたいのですが・・・

ど素人のおいらには分かりません

 

追記

2021年5月15日に、ごろ鯛(たい)さんからコメントをいただきました

おいらのテーマデザインが、レスポンシブ対応で無いのが原因では無いかと、アドバイスをいただきました

ど素人のおいらは、レスポンシブ対応のテーマデザインかどうかなど考えもせず、見た感じだけで決めていたので、早速テーマデザインを調べてみました

するとレスポンシブ対応のテーマデザインではありませんでした

そこで、レスポンシブ対応のテーマデザインに変更すると、スマホ画面の右下にボタンが現れました

 

f:id:koulog:20210516151833p:plain

ボタンはオリジナルにしましたが、ちゃん右下に出ています

いや~!さすが先輩ですわ!

コメントをいただかなければ、一生解らず終いだったかもしれませんでした

ごろ鯛(たい)さん本当にありがとうございました 

はてなブログのカスタマイズまとめ

いかがでしたでしょうか?

今回は【無料版】はてなブログのカスタマイズを、先輩方からのコピペ+色の変更のみのカスタマイズを紹介しました

これさえやっておけば、【無料版】でもシンプルかつキレイなデザインに出来ます

 是非やってみて下さい

これからのブログの事

カスタマイズは難しいけど楽しいです

思いのままにカスタマイズ出来る様になりたいですね~!!

「上に戻る」ボタンの設置で、スマホ対応も出来るならクリアーしたいですし、グローバルナビゲーションやボトムナビゲーションも、【無料版】はてなブログでも出来るなら付けてみたいですね

余り根詰めてやると、またブログがグチャグチャになってしまっては大変なので、その辺はほどほどにしておき、ど素人が調子に乗る事無く、少しずつブログが見やすい様になれば良いなと考えています

 

今回も最後まで読んで頂き

ありがとうございました

では、また。。。

 

</a </a にほんブログ村 旅行ブログへ

気まぐれおやじのブログは、にほんブログ村に参加しています

ポチっと応援よろしくお願いします

 

 

動画はこちら

f:id:koulog:20210511111040p:plain