広告を中央揃えにする方法 みなさん、こんばんは。 いろんなブログを見て回るとヘッダーやフッターの広告がずれているブログを結構見かけます。 きっとアドセンス広告などのHTMLコードをそのまま貼り付けているために起こる現象だと思われます。 きちんと中央揃えにしたほうが見栄え的にも良く、クリック率も変わってくると思います。 今日は広告を中央揃えにする方法を見ていきたいと思います。 広告のずれ はてなブログではヘッダー下やフッターに広告を貼り付けている方、結構いますよね。 普通に広告のHTMLコードを貼り付けていると広告がずれている場合がよくあります。 なぜ中央揃えにしないのか疑問ですが、おそらくノートパソコンの解像度、例えば1366×768なんかのノートパソコンでブログを表示しているとピッタリ中央になっているのではないかと思います。 私はデスクトップで1920×1080のモニターで閲覧しています

はてなブログって使いやすいけど、記事を書く時、強調で文字を大きくするときの『中』サイズが大きすぎませんか？ そして、文字装飾の大きさの種類が少ないぞ～と思いませんでしたか？ 簡単に変える方法に今さらながら気が付きました。パソコン初心者の方向けです(*^^) ついでにデフォルトの文字サイズ変更についても記載しておきました！ 目次 はてなブログの記事内の文字の大きさ 簡単な文字の大きさ変更方法 標準の文字の大きさの変更を固定したい時 おわりに はてなブログの記事内の文字の大きさ 見慣れた画面がこちらに…。 このＴＴ兄弟のようなマークが文字の大きさですね。 【大(200%)】 【中(150%)】 【標準】 【小(80%)】 小はいいんですよ。納得の大きさです。 小声で言いたいことは、小を使います。 でも、標準の文章の中で少し強調したいときの、中の大きさ！ 結構派手に強調しちゃって、割と大声な感じ

目次の上にリンクユニットを配置してみたいアドセンスの配置で「目次の上のリンクユニットはクリックされやすい」と見たことはありませんか？ 配置を変えるだけで、アドセンス収入が上がったら純粋に嬉しい・・・ その後、悪戦苦闘する事半日近く・・・ようやく設置できました（苦笑） すべてはブログの先輩方のおかげです。 目次の上以外でも、タイトル直下にリンクユニットを配置する事を考えましたが、当ブログはプルダウンメニューを使っていて、タイトル直下だと被るので、あまりよくないのかな？と思って、目次の上の配置に決めました。 アドセンス広告にプルダウンメニューが被る配置は、アドセンスのポリシー違反です。 リンクユニットも同じ対応になるかは見つけられませんでした（汗） （またズボラ感まる出しですみません） 目次の上にリンクユニットを配置する方法その１ 手順が一番少ない方法です半日かかって、目次の上にリンクユニット

先日、嗚呼蛙 (id:aaafrog) さんの下記の記事を読みまして、 改めて見出しタグについて考えさせられました。 今回はその見出しタグについて書いてみようと思います。 見出しタグとは 見出しタグとは、htmlのh1～h6というタグです。 h1 … h6 高 ←　重要度　→ 低 数字が小さい方が重要度が高いと言われています。 また、 h1（記事タイトルなど） h2（大見出し） h3（中見出し） h3（中見出し） h2（大見出し） h3（中見出し） h4（小見出し） h4（小見出し） こんな感じで、h1～h6が上から順番に使われているのが望ましいとされているようです。 はてなブログでは記事の大見出しがなぜかh3 はてなブログでは、ヘッダー部のブログタイトルにh1、ブログの説明文にh2が使われています。 そして記事の部分に入るとそれまでの見出しがリセットされて、記事タイトルがh1になっていま

スマホ用のフッターに固定する「ボトムメニュー」のCSSを紹介します。HTMLとCSSをコピペするだけで出来るので、ぜひ試してみてください。 「レスポンシブ」にする方法は、PCの時は表示しない↓↓をご覧ください♪♪ ボトムに張り付く固定メニューバーの設置方法 コピペで簡単！スマホ固定フッターメニューのやり方 「固定フッターメニュー」 とは？ コードは２つ コピペでOK！【HTMLコード】 コードを変更する箇所： 【HTMLコード】をコピペする場所 コピペでOK！【CSSコード】 【CSSコード】をコピペする場所 はてなブログの場合 PC表示の際はボトムメニューを表示しない！ ボトムメニューのためフッターを底上げする ボトムナビゲーションがiPhoneXのホームバーに被る問題に対応 PC、タブレットでは上部固定のグローバルナビゲーションを表示する ブログのアクセスを増やすには？ ボトムに張り付

こんにちは。やゆよです。 このブログ、たいして記事も書いていないのにカスタマイズばかりしていた時期がありました。 そこで今回は、はてなブログ公式の目次機能をちょっと見やすくするカスタマイズする方法をお伝えします！ 当ブログで使っている目次はこんな感じ。 はじめに（コードを貼るところ） PC、レスポンシブの場合 スマートフォンの場合 目次カスタマイズ 目次に「目次」の文字を入れる 目次リストを数字にする 目次に背景をつける 目次の文字を小さくする 目次の色を変える リンクテキストの色を変更する 訪問済みの色を変更する カーソルを重ねた時の色を変更する 全部まとめたコードはこちら まとめ はじめに（コードを貼るところ） まずはじめに、カスタマイズ用のコードを貼る箇所を説明します。 PC・レスポンス版とSP版では貼る場所が違うので気を付けてくださいね！ ちなみに記事を書く時の目次の使い方は公式ブ

まだまだ勉強中ですが、ブログ内のいろいろな場所のフォントの種類、フォントのサイズ、行間の高さ、見出しの色等のカスタマイズについて調べたことをまとめました。 カスタマイズするにはコードを書く必要があるのですが、私はブログを『はてな記法』で書いているので、HTMLやCSSの仕組みについてあまり詳しくありません。コードのどの値がどの部分に関係しているかわからず苦戦しました。 コード内の数字はこのブログを書いた時の値です。今後もカスタマイズするので、現在のブログの見た目とは違う点も出てくると思います。 目次 目次 使用環境 設定する場所 ブログ全体のフォントの種類の変更 さまざまな場所のフォント、行間、余白、色等の変更 文字のサイズの単位について 行の高さの単位について 見出しの設定値（padding、margin、border）について 段落の余白について あとがき おすすめの記事 使用環境 私

スマホのリンク付きのリスト一覧などでよく見る右側の とか のアイコンが付いたリスト。アイコンが丁度各リストの中央に来るようにする方法です。 擬似要素 :after を利用IE6 を対応させるなどの条件のために、これまでは直接 img 要素で入れたり background-image として入れることが多かったアイコンですが、スマホ対応だったりモダンブラウザのみの対応の場合は、擬似要素の :after が活用できるようになりました。 CSS2 で導入された時点ではコロンは１つでしたが、CSS3 ではコロンが2つの ::after も利用できるようになっています。擬似クラスが増えた際に擬似要素と擬似クラスを明確に分けるために、 after や before などの擬似要素はコロン２つとなりました。 現状では :after も ::after もどちらも利用できる状況のため、どちらを使っても大丈

見出しのアクセントとしてよく使われるアイコン画像。 imgタグで表示させるよりもcssで書いたほうがメンテナンス性にも優れます。 センター寄せをする方法も含め、まとめておきます。 １．backgroundで表示する方法 cssでアイコン画像を表示させる一番スタンダードな方法です。 backgroundのプロパティ内容は場合によって変更して使いわけます。 html <h1 class="title">タイトルです</h1> テキストが１行の場合 CSS title { padding-left: 30px; line-height: 30px; background: url(../images/icon.png) no-repeat; } line-heightでアイコン画像とテキストの上下位置を中央にするテクニックです。 line-heightはアイコンの高さ分を指定し、 padding

今日ははてなブログ内の任意の位置にアドセンスを自動で貼り付ける方法について紹介を。 皆さん、アドセンスってどうやって貼り付けていますか？ 管理画面の記事上・記事下に貼り付けて自動で入れ込んでいる人もいれば任意の位置に手動で貼っている人もいると思います。 ただ、記事上にコードを挿入すると画面最上部に配置されるし、記事下に貼り付ければシェアボタンの下側にアドセンスが来ちゃいますよね。 これは少なからず、クリック率を下げる要因になります。 手動で貼り付ける方法も面倒ですよね。 以前の記事でも紹介しましたが、個人的にいいなと思うアドセンスの広告配置が導入文末尾(最初の見出しの上)と記事直下なんですよね。 wordpressだとプラグインで簡単に任意の場所に挿入できるのですが、はてなブログだとその機能がないようなので今日はアドセンスを見出し前や記事直下に自動で挿入する方法について備忘録を兼ねてメモ。

こんにちは、裕真です。 ワードプレスからはてなブログに変更した初日から思っていたことですが、、、 「はてなブログは行間が広すぎる！」 現在、このページを見ているあなたは修正後なので特に見にくいとは感じないと思いますが、以前にアクセスしてくれた人は行間がありすぎて読みにくかったことでしょう。 ということでようやく修正しました！ 修正方法 修正は簡単です。CSSというWEBページのデザインを決めているコードを直せばいいのですが、プログラミングの知識がない人向けにコピーして治す方法を紹介します。 １.ダッシュボードからデザイン ２.工具のマーク→デザインCSS ３.コードを入力 コードを入力する画面が表示されるので、以下のコードを入力してください。 .entry-content p { margin:0} 入力後、上部にある「変更を保存する」ボタンをクリックすれば修正が完了します。ブログにアクセ

はてなブログだけでなく、アマゾンや楽天・ヤフーショッピングの商品を紹介する際にはブロガーのかん吉さんが作ってくださったサービス「ヨメレバ・カエレバ」を使うことで 簡単にリンクを作成することができます。 それらを綺麗に表示させるカスタマイズはもう出ているのですが、先日あるブロガーさんに会ったときにカスタマイズをしたら喜んでいただけたので、紹介したいと思います！ 参考リンク 実装図 カスタマイズの注意点 カスタマイズ PC スマホ レスポンシブ その他のカスタマイズ 最後に 参考リンク 今回のカスタマイズはほとんど今までやってこられていた方をちょっと変更したような形になっているため、あらかじめ参考リンクを貼っておきます。ありがとうございます！ shufulife.com 実装図 実際に導入した様子はこんな感じになります。 PC スマホ PCでバランスよく表示させたのと、スマホではなるべくコンパ

このブログはわかったブログの運営者かん吉さんが開発したブログツール「カエレバ」「ヨメレバ」「トマレバ」を利用しています。 これらのツールは、商品・書籍・宿泊施設を紹介するのにとても便利で、多くのブログサイトで利用されています。 今まで僕はこの3つのデザインを個別にカスタマイズして使っていたのですが、それを今回統一させようと思いカスタマイズしました。 CSSをコピペして頂ければカスタマイズ完了のレスポンシブデザインですので、気に入った方はどうぞお試しください。 「バリューコマース」や「もしもアフィリエイト」を利用すると、様々なショップのボタンを表示させることが可能になります。設定がお済みでない方は、それぞれ以下のリンクから無料会員登録を済ませ、アフィリエイトコードを取得しましょう。 バリューコマース もしもアフィリエイト カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ 今回のカスタマイズ

商品を紹介する場合、楽天とアマゾンの両方で一度に紹介出来たら便利だと思いませんか? 楽天ポイントを貯めている人は楽天で買い物がしたいですし、Amazon会員の人はAmazonで買い物がしたいですよね。 そこで、利用者のニーズを考えてカエレバに登録をしてみました。そのブログパーツのカスタマイズについての紹介をしたいと思います。 カエレバでアマゾンと楽天の連携リンクを作成する 商品リンクの見本 カエレバ　ユーザーデーター入力の方法 楽天のもしもIDの取得 ②並立リンク用の探し方 ③もしものa_idの探し方 AmazonのもしもIDの取得 Yahoo!ショッピングのもしもIDの取得 カエレバのユーザーデータ入力フォームを完成させる カエレバでのブログパーツ作成方法 スタイルシートを追加して希望のブログパーツにする 表示にひと手間加えてクリック率をあげる方法 カエレバからコピーしたcssにメッセー

2018.8.7　 ver.2.4 に更新しました カエレバ・ヨメレバのカスタマイズ(*´∀｀*) 「ホバーした（カーソルを合わせた）ときに色が付いたらいいかも」と思いつき、ちょこちょこ弄ってver.2ができました♪ このデザインが気にいっていただけたら、コードをコピペしてご活用ください(*´艸｀*) 元は主婦ライフさんのコードを弄らせてもらったもの。 カエレバ・ヨメレバはいろんなカスタマイズが考えられています。 他のデザインはかん吉さんが下記記事にまとめてくれていますよ！ www.wakatta-blog.com では、やり方やコードをご紹介しますね。 カエレバ・ヨメレバのカスタマイズ！ ver.2の特徴 更新情報 カスタマイズ後のスクショ PC表示 スマホ表示 カエレバ・ヨメレバのリンクを貼る CSSをコピペ まとめ コードが知りたい方は「CSSをコピペ」まで飛んでください カエレバ・

商品リンクを別々に表示するよりも カエレバ・ヨメレバでまとめて表示してあると すっきりしていて見やすいと思いませんか。 そこで、ブログを書き始めて2か月の私が 設定した時に困った事、 気が付かなかった事を思い出しながら はてなブログにカエレバを設定する方法、 設置する前に準備しておくこと、 カスタマイズする時の注意点などを 超初心者の方でもわかりやすいように 画像を交えて解説しました。 目次 １．はてなブログ表示とカエレバ表示の違い ２．アマゾン・楽天のアフィリエイト契約 ３．カスタマイズする前にバックアップを忘れずに ４．バックアップする場所 例 定期的にコードを確認 ５．カスタマイズコードをコピーする前に ６．カエレバ　カスタマイズのコピー部分 ７．ヨメレバ　カスタマイズのコピー ８．背景のカラーを変えたい時は １．はてなブログ表示とカエレバ表示の違い カエレバ・ヨメレバはブログ上で

どうも、部屋で行為をしている時に無音で扉を開ける母親にプライバシーについて説教をした海山カヘンです。もちろんその間も下半身はブラブラです。 このブログは最初の記事でも言及している通り、グーグルアドセンス等で広告収入を得る事を一つの目標に設定しています。 その為の第一歩として「プライバシーポリシー」の設定が必須のようです。 難しくはないのですが、やる事は多めなので記事にしてみました。皆さんの参考になれば幸いです。 「プライバシーポリシー」って何ですか？ 「プライバシーポリシー」はウェブサイトにおいて、収集した個人情報をどのように取り扱うのか（管理、活用、保護）を明文化したものを言います。 見に来てくれるお客様に「ウチでは個人情報をこう使うよ！」と見えるところに看板を立てましょう、ということですね。 しかし、「ちょっと待って、個人情報なんて収集してないよ？」というサイトさんもあるかと思います。

こんにちは！ 西野栄祐です。この記事を見に来てくれて嬉しいです！ 苦戦中のあなたに、プライバシーポリシーテンプレートをプレゼント贈ります😊 多く方々より、感謝のコメントを頂き非常に嬉しいです😄※最下端に記載 ⇒YouTubeチャンネル登録はコチラ 副業やネットビジネスで収入を増やしたい初心者へ毎日配信中(*´ω｀*) グーグルアドセンス申請中の方！プライバシーポリシーはもう設置しましたか？！審査最大3日間といいながら、連絡がまったくない方、多くいらっしゃるのではないでしょうか。。 私は、0からスタートし2週間で合格しましたが、何も連絡ないので不安・イライラでした。。合格した要素？かもしれませんが、私は審査中にプライバシーポリシーを設置しました。だからあなたも、先に設置してしまいましょう！ 他のブログでもプライバシーポリシーを公開されている方がいます。人にとって少し表現が違いますが、気に