タグ: カスタマイズ

  • はてなブログに何分で記事を読めるかを表示するコピペカスタマイズ

    はてなブログに何分で記事を読めるかを表示するコピペカスタマイズ

    最近他のブログを読んでいると、読了時間が表示されたサイトがありますよね。

    こう言ったものです。↓

    はてなブログに読了時間を表示するカスタマイズ

    個人的には必要ないかなと思うのですが、あったらちょっとおしゃれかなとも思い、やり方を探していたんですね。

    そしたら簡単にコピペで2分でできたので、皆さんにも紹介しますね。

    記事を何分で読めるかを表示するカスタマイズ

    このカスタマイズはJava scriptを使うので、表示速度にちょっとですが影響します。

    なので、すでに表示速度が遅い人や絶対にこれが必要って人以外は、無くてもいいかなと思います。

    まぁ、ここは個人の自由ですね。

    それでは今回参考にさせていただいたのは、すずろぐさんの記事です。ありがとうございました。

    コードはこれになります。

    <script type="text/javascript">
    addEventListener('DOMContentLoaded', function() {
    var wpm = 800;
    var length = $('.entry-content').text().trim().replace(/[\n\r]/g,'').length;
    var message = '<p style="font-size: 80%; color: #999999; text-align: right;">この記事は約'+ Math.ceil(length/wpm) +'分で読めます。</p>';
    $('.entry-content').prepend(message);
    }, false);
    </script>

     

    3行目のvar wpm = 800は、800文字を読むのに1分と計算しているので、自分で好きに変えることが出来ます。

    5行目のfont-size : 80%は、文字の大きさです。大きくしたい場合は100%など好きに変えて結構です。

    その横のcolorは#999999としていますが、これも好きに変えてOKです。カラーはHTML色見本で調べることが出来ます。

    また、この記事は約‘+ Math.ceil(length/wpm) +’分で読めます。の赤文字部分も変更可能です。

    次にこのコードを、「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「記事」→「記事上」にコピペします。

    はてなブログに読了時間を表示するカスタマイズ

    以上です。

    言葉を変えて、「あなたなら1分で読めます」にしてみました。

    はてなブログに読了時間を表示するカスタマイズ

    最後に

    おしゃれなので導入したい人は多いと思いますが、カスタマイズのし過ぎは表示速度に影響するので、ほどほどにしておきましょう。

    また、カスタマイズしたコードや日付・場所はメモに書いて保存しておくと、整理する時などに助かりますよ。

    コピペカスタマイズについては、はてなブログのカスタマイズ集(すべてコピペでOK)と収益化方法などのまとめで紹介しているので併せて読んでみて下さい。

  • カエレバの使い方や設定方法を画像・リンク付きで紹介

    カエレバの使い方や設定方法を画像・リンク付きで紹介

    アマゾンや楽天の商品をブログで紹介するときは、Rinkerかカエレバを使う人がほとんどですよね。

    個人的にはRinkerの方が簡単にリンクを作れるのでお勧めですが、wordpress専用なので、はてなブログなどの他のブログを使っている人は、カエレバが一番よいですね。(Rinkerの設定方法はこちらからどうぞ)

    それではカエレバを使うにあたって、アマゾンともしもアフィリエイト、バリューコマースは必須なので登録をしてください。

    各ASPに登録したら、バリューコマースでYahooショッピングの提携を、もしもアフィリエイトで楽天市場と提携をしてください。

    なぜもしもで楽天の提携をするかと言うと、楽天は報酬をポイントで払うのでうまみがないためです。どうせなら現金でほしいですよね。(3か月連続で5000ポイント(5万円の報酬)超え、審査に受かれば現金で支払われます)

    なので、もしもアフィリエイトから楽天の提携をした方がお得なんです。

    カエレバの設定方法

    設定は簡単なので、5分もあれば登録できます。

    必要なものは以下になります。

    1. ブログ名の記載
    2. アマゾンのIDをここから取得しコピペ
    3. 楽天用にもしもアフィリエイトのIDをコピペ(IDの調べ方はここをクリック)
    4. Yahooショッピング用にバリューコマースのsid pidをコピペ(調べ方はここをクリック)
    5. 7netをもしもアフィリエイトで使うなら、先ほど調べたIDをコピペ

    カエレバ 使い方 カエレバ 使い方 設定方法

    保存を押したら、完了です。

    カエレバの使い方

    次に、カエレバで任意の商品を検索します。(例はNIKEを検索)

    カエレバ 使い方 設定方法

    下にスクロールダウンして、気に入った商品があれば「ブログパーツを作る」をクリック。

    カエレバ 使い方 設定方法

    ブログパーツ生成方法です。

    デザインを「amazlet風-2(cssカスタマイズ用)」に変更し、その他は特に触らなくてOKです。(画像のサイズを変えたい場合は、「画像小・中・大を選ぶ)

    カエレバ 使い方 設定方法

    リンクを表示したいものすべて、チェックを入れます。

    カエレバ 使い方 設定方法 最後に、表示されたコードをコピーして記事に貼り付けたら完了です。って、アレ?かっこ悪いですね・・・

    カエレバ 使い方 そうなんです。カエレバはカスタマイズしないとこういった味気のないリンクが表示されるので、カスタマイズは必須なんです。

    カエレバのカスタマイズ

    はてなブログ向けですが、カスタマイズ後はこんな感じになります。

    カエレバ 使い方

    カスタマイズのコードはかなり長いですが、一応私が使っているものを紹介するので、下のボックスをクリックしてコードを確認してみて下さい。ちなみに結構昔に設定したもので、どのブログを参考にしたか分かりません。

    これはカエレバやヨメレバ、トマレバなどの総合カスタマイズです。

    [ac-box01 title=”はてなブログ カエレバカスタマイズコード”]

    <style>
    .cstmreba {
    	width:98%;
    	height:auto;
    	margin:36px auto;
    	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
    	line-height: 1.5;
    	word-wrap: break-word;
    	box-sizing: border-box;
    	display: block;
    }
    /* WordPressで自動挿入されるPタグの余白を対処 */
    .cstmreba p {
    	margin: 0;
    	padding: 0;
    }
    .cstmreba a {
    	transition: 0.8s ;
    	color:#285EFF; /* テキストリンクカラー */
    }
    .cstmreba a:hover {
    	color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
    }
    .cstmreba .booklink-box,
    .cstmreba .kaerebalink-box,
    .cstmreba .tomarebalink-box {
    	width: 100%;
    	background-color: #fafafa; /* 全体の背景カラー */
    	overflow: hidden;
    	border-radius: 0px;
    	box-sizing: border-box;
    	padding: 12px 8px;
    	box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
    }
    /* サムネイル画像ボックス */
    .cstmreba .booklink-image,
    .cstmreba .kaerebalink-image,
    .cstmreba .tomarebalink-image {
    	width:150px;
    	float:left;
    	margin:0 14px 0 0;
    	text-align: center;
    	background: #fff;
    }
    .cstmreba .booklink-image a,
    .cstmreba .kaerebalink-image a,
    .cstmreba .tomarebalink-image a {
    	width:100%;
    	display:block;
    }
    .cstmreba .booklink-image a img,
    .cstmreba .kaerebalink-image a img,
    .cstmreba .tomarebalink-image a img {
    	margin:0 ;
    	padding: 0;
    	text-align:center;
    	background: #fff;
    }
    .cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info {
    	overflow:hidden;
    	line-height:170%;
    	color: #333;
    }
    /* infoボックス内リンク下線非表示 */
    .cstmreba .booklink-info a,
    .cstmreba .kaerebalink-info a,
    .cstmreba .tomarebalink-info a {
    	text-decoration: none;
    }
    /* 作品・商品・ホテル名 リンク */
    .cstmreba .booklink-name>a,
    .cstmreba .kaerebalink-name>a,
    .cstmreba .tomarebalink-name>a {
    	border-bottom: 1px solid ;
    	font-size:16px;
    }
    /* powered by */
    .cstmreba .booklink-powered-date,
    .cstmreba .kaerebalink-powered-date,
    .cstmreba .tomarebalink-powered-date {
    	font-size:10px;
    	line-height:150%;
    }
    .cstmreba .booklink-powered-date a,
    .cstmreba .kaerebalink-powered-date a,
    .cstmreba .tomarebalink-powered-date a {
    	color:#333;
    	border-bottom: none ;
    }
    .cstmreba .booklink-powered-date a:hover,
    .cstmreba .kaerebalink-powered-date a:hover,
    .cstmreba .tomarebalink-powered-date a:hover {
    	color:#333;
    	border-bottom: 1px solid #333 ;
    }
    /* 著者・住所 */
    .cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address {
    	font-size:12px;
    }
    .cstmreba .kaerebalink-link1 div img,.cstmreba .booklink-link2 div img,.cstmreba .tomarebalink-link1 div img {
    	display:none !important;
    }
    .cstmreba .kaerebalink-link1, .cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 {
    	display: inline-block;
    	width: 100%;
    	margin-top: 5px;
    }
    .cstmreba .booklink-link2>div,
    .cstmreba .kaerebalink-link1>div,
    .cstmreba .tomarebalink-link1>div {
    	float:left;
    	width:24%;
    	min-width:128px;
    	margin:0.5%;
    }
    /***** ボタンデザインここから ******/
    .cstmreba .booklink-link2 a,
    .cstmreba .kaerebalink-link1 a,
    .cstmreba .tomarebalink-link1 a {
    	width: 100%;
    	display: inline-block;
    	text-align: center;
    	box-sizing: border-box;
    	margin: 1px 0;
    	padding:3% 0.5%;
    	border-radius: 8px;
    	font-size: 13px;
    	font-weight: bold;
    	line-height: 180%;
    	color: #fff;
    	box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26);
    }
    /* トマレバ */
    .cstmreba .tomarebalink-link1 .shoplinkrakuten a {background: #76ae25; border: 2px solid #76ae25; }/* 楽天トラベル */
    .cstmreba .tomarebalink-link1 .shoplinkjalan a { background: #ff7a15; border: 2px solid #ff7a15;}/* じゃらん */
    .cstmreba .tomarebalink-link1 .shoplinkjtb a { background: #c81528; border: 2px solid #c81528;}/* JTB */
    .cstmreba .tomarebalink-link1 .shoplinkknt a { background: #0b499d; border: 2px solid #0b499d;}/* KNT */
    .cstmreba .tomarebalink-link1 .shoplinkikyu a { background: #bf9500; border: 2px solid #bf9500;}/* 一休 */
    .cstmreba .tomarebalink-link1 .shoplinkrurubu a { background: #000066; border: 2px solid #000066;}/* るるぶ */
    .cstmreba .tomarebalink-link1 .shoplinkyahoo a { background: #ff0033; border: 2px solid #ff0033;}/* Yahoo!トラベル */
    .cstmreba .tomarebalink-link1 .shoplinkhis a { background: #004bb0; border: 2px solid #004bb0;}/*** HIS ***/
    /* カエレバ */
    .cstmreba .kaerebalink-link1 .shoplinkyahoo a {background:#ff0033; border:2px solid #ff0033; letter-spacing:normal;} /* Yahoo!ショッピング */
    .cstmreba .kaerebalink-link1 .shoplinkbellemaison a { background:#84be24 ; border: 2px solid #84be24;}	/* ベルメゾン */
    .cstmreba .kaerebalink-link1 .shoplinkcecile a { background:#8d124b; border: 2px solid #8d124b;} /* セシール */
    .cstmreba .kaerebalink-link1 .shoplinkwowma a { background:#ea5404; border: 2px solid #ea5404;} /* Wowma */
    .cstmreba .kaerebalink-link1 .shoplinkkakakucom a {background:#314995; border: 2px solid #314995;} /* 価格コム */
    /* ヨメレバ */
    .cstmreba .booklink-link2 .shoplinkkindle a { background:#007dcd; border: 2px solid #007dcd;} /* Kindle */
    .cstmreba .booklink-link2 .shoplinkrakukobo a { background:#bf0000; border: 2px solid #bf0000;} /* 楽天kobo */
    .cstmreba .booklink-link2  .shoplinkbk1 a { background:#0085cd; border: 2px solid #0085cd;} /* honto */
    .cstmreba .booklink-link2 .shoplinkehon a { background:#2a2c6d; border: 2px solid #2a2c6d;} /* ehon */
    .cstmreba .booklink-link2 .shoplinkkino a { background:#003e92; border: 2px solid #003e92;} /* 紀伊國屋書店 */
    .cstmreba .booklink-link2 .shoplinkebj a { background:#f8485e; border: 2px solid #f8485e;} /* ebookjapan */
    .cstmreba .booklink-link2 .shoplinktoshokan a { background:#333333; border: 2px solid #333333;} /* 図書館 */
    /* カエレバ・ヨメレバ共通 */
    .cstmreba .kaerebalink-link1 .shoplinkamazon a,
    .cstmreba .booklink-link2 .shoplinkamazon a {
    	background:#FF9901;
    	border: 2px solid #ff9901;
    } /* Amazon */
    .cstmreba .kaerebalink-link1 .shoplinkrakuten a,
    .cstmreba .booklink-link2 .shoplinkrakuten a {
    	background: #bf0000;
    	border: 2px solid #bf0000;
    } /* 楽天 */
    .cstmreba .kaerebalink-link1 .shoplinkseven a,
    .cstmreba .booklink-link2 .shoplinkseven a {
    	background:#225496;
    	border: 2px solid #225496;
    } /* 7net */
    /****** ボタンカラー ここまで *****/
    
    /***** ボタンデザイン マウスオーバー時ここから *****/
    .cstmreba .booklink-link2 a:hover,
    .cstmreba .kaerebalink-link1 a:hover,
    .cstmreba .tomarebalink-link1 a:hover {
    	background: #fff;
    }
    /* トマレバ */
    .cstmreba .tomarebalink-link1 .shoplinkrakuten a:hover { color: #76ae25; }/* 楽天トラベル */
    .cstmreba .tomarebalink-link1 .shoplinkjalan a:hover { color: #ff7a15; }/* じゃらん */
    .cstmreba .tomarebalink-link1 .shoplinkjtb a:hover { color: #c81528; }/* JTB */
    .cstmreba .tomarebalink-link1 .shoplinkknt a:hover { color: #0b499d; }/* KNT */
    .cstmreba .tomarebalink-link1 .shoplinkikyu a:hover { color: #bf9500; }/* 一休 */
    .cstmreba .tomarebalink-link1 .shoplinkrurubu a:hover { color: #000066; }/* るるぶ */
    .cstmreba .tomarebalink-link1 .shoplinkyahoo a:hover { color: #ff0033; }/* Yahoo!トラベル */
    .cstmreba .tomarebalink-link1 .shoplinkhis a:hover { color: #004bb0; }/*** HIS ***/
    /* カエレバ */
    .cstmreba .kaerebalink-link1 .shoplinkyahoo a:hover {color:#ff0033;} /* Yahoo!ショッピング */
    .cstmreba .kaerebalink-link1 .shoplinkbellemaison a:hover { color:#84be24 ; }	/* ベルメゾン */
    .cstmreba .kaerebalink-link1 .shoplinkcecile a:hover { color:#8d124b; } /* セシール */
    .cstmreba .kaerebalink-link1 .shoplinkwowma a:hover { color:#ea5404; } /* Wowma */
    .cstmreba .kaerebalink-link1 .shoplinkkakakucom a:hover {color:#314995;} /* 価格コム */
    /* ヨメレバ */
    .cstmreba .booklink-link2 .shoplinkkindle a:hover { color:#007dcd;} /* Kindle */
    .cstmreba .booklink-link2 .shoplinkrakukobo a:hover { color:#bf0000; } /* 楽天kobo */
    .cstmreba .booklink-link2 .shoplinkbk1 a:hover { color:#0085cd; } /* honto */
    .cstmreba .booklink-link2 .shoplinkehon a:hover { color:#2a2c6d; } /* ehon */
    .cstmreba .booklink-link2 .shoplinkkino a:hover { color:#003e92; } /* 紀伊國屋書店 */
    .cstmreba .booklink-link2 .shoplinkebj a:hover { color:#f8485e; } /* ebookjapan */
    .cstmreba .booklink-link2 .shoplinktoshokan a:hover { color:#333333; } /* 図書館 */
    /* カエレバ・ヨメレバ共通 */
    .cstmreba .kaerebalink-link1 .shoplinkamazon a:hover,
    .cstmreba .booklink-link2 .shoplinkamazon a:hover {
    	color:#FF9901; } /* Amazon */
    .cstmreba .kaerebalink-link1 .shoplinkrakuten a:hover,
    .cstmreba .booklink-link2 .shoplinkrakuten a:hover {
    	color: #bf0000; } /* 楽天 */
    .cstmreba .kaerebalink-link1 .shoplinkseven a:hover,
    .cstmreba .booklink-link2 .shoplinkseven a:hover {
    	color:#225496;} /* 7net */
    /***** ボタンデザイン マウスオーバー時ここまで *****/
    .cstmreba .booklink-footer {
    	clear:both;
    }
    
    /*****  解像度768px以下のスタイル *****/
    @media screen and (max-width:768px){
    	.cstmreba .booklink-image,
    	.cstmreba .kaerebalink-image,
    	.cstmreba .tomarebalink-image {
    		width:100%;
    		float:none;
    	}
    	.cstmreba .booklink-link2>div,
    	.cstmreba .kaerebalink-link1>div,
    	.cstmreba .tomarebalink-link1>div {
    		width: 32.33%;
    		margin: 0.5%;
    	}
    	.cstmreba .booklink-info,
    	.cstmreba .kaerebalink-info,
    	.cstmreba .tomarebalink-info {
    	  text-align:center;
    	  padding-bottom: 1px;
    	}
    }
    
    /*****  解像度480px以下のスタイル *****/
    @media screen and (max-width:480px){
    	.cstmreba .booklink-link2>div,
    	.cstmreba .kaerebalink-link1>div,
    	.cstmreba .tomarebalink-link1>div {
    		width: 49%;
    		margin: 0.5%;
    	}

    [/ac-box01]

    設定後は自分でクリックしてみて、ちゃんとリンクが飛ぶか確認してください。

    最後に

    上記コードを使わない人は、カエレバのカスタマイズはオンラインで探せるので、「カエレバ カスタマイズ」で検索してみて下さい。

    もしもアフィリエイトのIDの調べかた

    もしもアフィリエイトに行き、検索窓で楽天市場と検索します。

    もしもアフィリエイトのID調べ方 カエレバ設定方法

    ●楽天市場の商品購入と書いてあるリンクの、広告リンク取得をクリック。

    もしもアフィリエイトのID調べ方 カエレバ

    ●バナー広告のソースの中にある、a_id=1234567の数字部分をコピペして貼り付けます。

    登録方法の説明に戻るには、ここをクリック

    バリューコマースpid sidの調べ方

    既に登録している人は、バリューコマースから「既に登録済みの方」をクリックしログイン、トップページの検索窓からYahoo!ショッピングと検索。必ず「!」を付けて検索してください。

    カエレバ設定方法 バリューコマースの設定

    ●ここで「広告素材を選ぶ」をクリック

    カエレバ設定方法 バリューコマースの設定

    ●画面左の「MyLink」→「再検索」→「広告主のサイトを見る」でURLコピーし、下に貼り付け→「適当な名前を入れる」→「MyLinkコードを取得」をクリック。

    カエレバ設定方法 バリューコマースの設定

    ●コードの中に、sid pidが記載されているので、これをコピペで完了です。

    カエレバ設定方法 バリューコマースの設定登録方法の説明に戻るには、ここをクリック

  • はてなブログにYoutubeの動画を埋め込む方法

    はてなブログにYoutubeの動画を埋め込む方法

    はてなブログに自分がやっているYoutubeチャンネルを載せたり、紹介で他人の動画を載せたいと思った事ありますよね?

    実はすっごく簡単なんですよ。

    今回はササっと動画を埋め込む方法を紹介します。

    Youtube動画をはてなブログに埋め込む方法

    方法が2つあるので、それぞれ紹介します。

    URLをコピペする方法

    1 YoutubeのURLをコピペ

    はてなブログにYoutube動画を貼り付ける方法

    もしくは「共有」ボタンをクリックし、URLをコピペ

    はてなブログにYoutube動画を貼り付ける方法

    2 「見たまま編集」でリンクを貼り付け、そのURLを選び、リンクマークをクリック

    はてなブログにYoutube動画を貼り付ける方法

    3 「プレビュー」をクリックし、「埋め込み」を選び、「選択した形式でリンクを挿入」をクリック

    はてなブログにYoutube動画を貼り付ける方法

    ちなみに緑のカッコの「URLを貼り付けた時にこのウィンドウを開く」にチェックを入れると、次回からリンクを貼り付けただけで形式を選ぶ画面が開きます。

    はてなブログにYoutube動画を貼り付ける方法

    これで完了。見たまま編集でもプレビューでも、Youtubeが表示されます。

    HTMLから埋め込みする方法

    この方法は動画の開始時間が設定できるので、特定の位置から動画を紹介したい場合におすすめです。

    1 「共有」ボタンをクリックし、「埋め込む」を選ぶ

    はてなブログにYoutube動画を貼り付ける方法

    2 右下の「コピー」をクリック

    はてなブログにYoutube動画を貼り付ける方法

    3 HTML編集でコピペ

    はてなブログにYoutube動画を貼り付ける方法

    以上です。

    はてなブログにYoutube動画を貼り付ける方法

    最後に

    以前「はてなブログにyoutubeの曲を使って大丈夫?音楽著作権の話」で紹介したように、はてなブログに音楽の動画をアップするとJASRAC的に著作権の侵害になるので、ルール的には著作権切れのものしかアップできません。(ルール的には)

    広告を一切貼っていないサイトならOKなのですが、無料版を使っていてもはてなブログの広告が出るのでNGです。

    基本的にYoutube上にアップされている動画は拡散OKなので、著作権の問題などは発生しません。ただし、音楽に限ってはJASRACとはてなブログが契約を結んでないので問題が起こる可能性があるのでご注意を。

  • はてなブログ・ボタンリンクの作り方とアフィリエイトリンクでの使い方

    はてなブログ・ボタンリンクの作り方とアフィリエイトリンクでの使い方

    WordPressでは使っている人が多いボタンですが、はてなブログの人は使っていない人が多いですね。

    私も多用はしませんが、アフィリエイトリンクの時は目立たせるようにボタンを使っています。特にスマホで見た時は、大きいので押しやすいですよね。

    こんなやつですね。(正確に言うとこのブログはwordpressなのでちょっと仕様が違いますが、ほぼ一緒です)

    ボタン

    記事に入れる内部リンクはテキストリンクを使うことが多いですが、やっぱりアフィリエイトのリンクは目立たせた方がいいこともあるので、ぜひ使ってみて下さい。

    テキストリンクの効率的な使い方は、「テキストリンクの使い方!これを学べば収益・PVがぐっと上がるよ」を参考にどうぞ。

    ボタンリンクのカスタマイズ

    まずはFont Awesomeをアイコンを使うために、設置します。と思いましたが、Font Awesomeなどの装飾を使うと表示速度が落ちるので、辞めました。(笑)

    CSSだけでやります。

    完成図はこんな感じになります。再生ボタンが見にくいですが、中央あたりにあります。

     

    下のコードを私はフッタで読み込んでいますが、デザインCSSに入れてもOKです。場所「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「フッタ」です。(デザインCSSに入れる場合は、<style></style>を削除してください)

    はてなブログ 上に戻るボタンの設置方法 カスタマイズ

     

    <style>
    .button1 a{
    display: block;
    padding: 1em 3em;
    width:50%;
    background: #ffcd44;/*ボタン色*/
    color: #ffffff !important;
    border-bottom: solid 4px #B28F30;
    border-radius: 15px;
    text-decoration: none !important;
    font-size: 120%;
    text-align:center;
    }
    .button1 a:hover {
    background: #ffa500;/*ボタン色*/
    }
    .button1:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
    }
    </style>

    色や形のカスタマイズの方法を紹介しますね。

    今の色は黄色ですが、6行目のbackground: #ffcd44;/*ボタン色*/の#の数字を変えたら色が変わります。カラーコードは原色大辞典で調べることが出来ます。(下は画像です)

    はてなブログ ボタン カスタマイズ

    次にカーソルが上に来たらオレンジに変わります。この色を変えるのは、14行目の#の数字です。(下は画像です)

    はてなブログ ボタン カスタマイズ

    クリックしたら下に沈むようになっているので、クリック感が出ますね。

    ちなみに7行目の color: #ffffff !important; の#部分を変えると文字の色が変わり、8行目の border-bottom: solid 4px #B28F30; の#部分を変えたら、ボタン下部の濃ゆくなっている部分の色を変えることが出来ます。

    最後にHTML編集で、以下のコードを使って記入したら完成です。

    <center>
    <p class=”button1″><a href=”リンク先のURL”>ボタン(自由に変更)</a></p>
    </center>

    はてなブログ リンクボタン

    ちなみに、ボタンの文字はお好きな文字に替えて使ってください。(下はスクショです)

    はてなブログ ボタン カスタマイズ

    もし2つボタンを使うなら、もう一つ同じように準備しておけば楽になりますね。

    はてなブログ リンクボタン カスタマイズ方法

    <style>
    .button2 a{
    display: block;
    padding: 1em 3em;
    width:50%;
    background: #3cb371;/*ボタン色*/
    color: #ffffff !important;
    border-bottom: solid 4px #006400;
    border-radius: 15px;
    text-decoration: none !important;
    font-size: 120%;
    text-align:center;
    }
    .button2 a:hover {
    background: #ffa500;/*ボタン色*/
    }
    .button2:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
    }
    </style>

    HTML編集は上と同じですが、 名前がbutton2になります。

    <center>
    <p class=”button1″><a href=”リンク先のURL”>ボタン(自由に変更)</a></p>
    </center>

    当然レスポンシブなので、スマホで見たらこんな感じです。

    もっとボタンが欲しい人は、buttonの後ろの数字を変えればいくらでも作れます。

    <center>
    <p class=”button3″><a href=”リンク先のURL”>ボタン3(自由に変更)</a></p>
    </center>

    他のデザイン

    シンプルなデザインです。

    はてなブログ ボタンカスタマイズ

    [su_accordion][su_spoiler title=”コードを見る” open=”no” style=”default” icon=”plus” anchor=”” anchor_in_url=”no” class=””]

    <style>
    .button3 a{
    display: block;
    padding: 1em 3em;
    width:50%;
    background: #FFFFFF;/*ボタン色*/
    color: #1B95E0 !important;
    border-bottom: solid 4px #006400;
    border: double 4px #1B95E0;
    border-radius: 15px;
    text-decoration: none !important;
    font-size: 120%;
    text-align:center;
    }
    .button3 a:hover {
    background: #F7F8F9;/*ボタン色*/
    }
    .button3:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
    }
    </style>

    HTML編集には以下のコード

    <center>
    <p class="button3"><a href="リンク先のURL">ボタン(自由に変更)</a></p>
    </center>

    [/su_spoiler]

    細長くしてみました。

    はてなブログ ボタンカスタマイズ

    [su_spoiler title=”コードを見る” open=”no” style=”default” icon=”plus” anchor=”” anchor_in_url=”no” class=””]

    <style>
    .buttonlong a{
    display: block;
    padding: 1em 3em;
    width:80%;
    background: #3cb371;/*ボタン色*/
    color: #ffffff !important;
    border-bottom: solid 4px #006400;
    border-radius: 15px;
    text-decoration: none !important;
    font-size: 120%;
    text-align:center;
    }
    .buttonlong a:hover {
    background: #ffa500;/*ボタン色*/
    }
    .buttonlong:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
    }
    </style>

    <center>
    <p class=”buttonlong”><a href=”リンク先のURL”>ボタン(自由に変更)</a></p>
    </center>

    [/su_spoiler] [/su_accordion]

    アフィリエイトリンクに使う方法

    では、アフィリエイトリンクでこのボタンを使っても見ましょう。例としてもしもアフィリエイトでやってみますが、どのASPでも同じです。

    1 任意の広告に行き、テキストを選び、ソースコードをコピー

    アフィリエイトリンクでボタンを使う方法・はてなブログ

    2 はてなブログの記事編集に行き、HTML編集で<a href=”リンク先のURL”>ボタン(自由に変更)</a>部分にコードを貼り付ける

    3 プレビューで確認

    アフィリエイトリンクでボタンを使う方法・はてなブログ

    簡単でしょ?

    最後に

    以前も「はてなブログのヘッダーにおすすめ記事を作ってwordpressの様に見せる方法」でも紹介したのですが、このボタンってかなりwordpressっぽいのでおしゃれになりますよね。

    皆さんもぜひ使って、収益アップを狙ってください。

  • はてなブログのヘッダーにおすすめ記事を紹介するカスタマイズ

    はてなブログのヘッダーにおすすめ記事を紹介するカスタマイズ

    他のブログを見てて、「あ~、このデザインいいな~。あっ、wordpressか・・・」って思ったことないですか?

    wordpressに引っ越しも面倒だし、でもこのデザイン欲しいし・・・(ちなみにwordpressに引っ越ししたらこんなことをしないといけません)

    って私が思ったのは、ヘッダーにおすすめ記事を入れるものなのですが、はてなでも出来ちゃいました。

    ちょっと時間はかかりますが、はてなブログのヘッダーをかっこよくカスタマイズしましょう!

    基本的にはてなブログProを使っている方を対象にした記事なので、無料版での動作確認はしておりません。

    この機会にProの利用を検討される人は、はてなブログPro登録からどうぞ

    ヘッダーのおすすめ記事

    ヘッダーのおすすめ記事は、こう言ったものになります。

    はてなブログのヘッダーにおすすめ記事を入れる コピペ

    はてなブログのヘッダーにおすすめ記事を入れる コピペ

    これ、かっこいいですよね。ずっと憧れてたんです。

    今回もほぼコピペでOKなカスタマイズなので、是非やってみましょう。

    おすすめ記事のCSS

    貼り付ける場所は2か所あります。

    まずはこちらを、「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「デザインCSS」に貼り付けます。

    はてなブログ 目次カスタマイズ

    <style>
    /* ヘッダー下おすすめ記事 */
    .toprecommend-toptitle{/*おすすめ記事のタイトル*/
    background: yellow;/*お好きな色*/
    text-align: center;
    color: #000;/*お好きな色*/
    margin-bottom:-1em;
    padding-top:1em;
    font-weight: bold;/*太文字*/
    }
     
    .toprecommend {/*おすすめ記事の大枠*/
    background: #f0f8ff;/*お好きな色*/
    width: 100%;/* コンテンツ幅と合わせる */
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    margin: 0em auto;
    text-align:center;
    padding-bottom:2em;
    margin-bottom:2em;
    }
    .toprecommend-box {/*おすすめ記事1つの枠*/
    width: 24%;
    height: 250px;
    padding: 8px;
    margin-left: 1em;
    background: #fff;/*お好きな色*/
    box-sizing: border-box;
    margin: 2em 0.5em;
    border-radius: 3px;
    }
    .toprecommend-box:hover{/*触れた時*/
    background: Deepskyblue;/*お好きな色*/
    }
    .last-box {
    margin-right:1em;
    }
    .toprecommend-image img {
    width: 100%;
    height: 180px;/*画像の高さをいじるところ*/
    object-fit: cover;
    }
     
    .toprecommend-boxtitle a{
    display:block;
    font-size:85%;
    font-weight: bold;/*太文字*/
    color:#555; /*お好きな色*/
    line-height: 1.5!important;
    }
     
    .page-entry .toprecommend-container,
    .page-entry .toprecommend-toptitle,
    .page-archive-category .toprecommend-container,
    .page-archive-category .toprecommend-toptitle
    {
    display:none;/*記事ページなどには表示しない*/
    }
     
    /* パソコン */
    @media screen and (max-width: 1100px) {
    .toprecommend-image img {
    width: 100%;
    height: 150px;/*画像の高さをいじるところ*/
    object-fit: cover;
    }
    }
     
    /* タブレット・スマートフォン向け */
    @media screen and (max-width: 768px) {
    .toprecommend {
    flex-wrap: wrap;
    justify-content: space-between;
    padding:1em;
    }
     
    .toprecommend-box {
    width: 47%;
    height: 150px;
    margin:0.5em auto;
    }
     
    .toprecommend-box:nth-child(2n) {
    margin-right:0.5em;
    }
    .toprecommend-image img {
    width: 100%;
    height: 80px;/*画像の高さをいじるところ*/
    padding:0;
    object-fit: cover;
    }
     
    .toprecommend-boxtitle a{
    font-size:75%;
    }
    }
    </style>

    色の変更を紹介します。

    13行目のbackground: #f0f8ff;/*お好きな色*/の#の文字を変えると、おすすめ記事の背景の色が変わります。

    今はうす水色ですが、分かりやすい様にピンクに変えてみました。

    はてなブログのヘッダーにおすすめ記事を入れる コピペOK

    はてなブログのヘッダーにおすすめ記事を入れる コピペ

    カラーコードは、原色大辞典で探せます。

    次は、34行目のbackground: Deepskyblue;/*お好きな色*/のDeepskyblueを変えると、PCではカーソルが上にある時、スマホはタップした時の色が変わります。

    はてなブログのヘッダーにおすすめ記事を入れる クリック時の色を変える

    はてなブログのヘッダーにおすすめ記事を入れる クリック時の色を変える<Deepskyblueを#fdd35cに変えました>

    色は先ほどの原色大辞典で探せます。

    今の設定ではトップページのみにおすすめ記事が表示されるので、もし各記事にも表示したい場合は、57.58.59行目の

    {
        display:none;/*記事ページなどには表示しない*/
    }

    を削除すればOKです。

    ヘッダーに入れるコード

    お次は、次のコードを「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「ヘッダ」→「タイトル下」に入れます。

    はてなブログのヘッダーにおすすめ記事を入れる クリック時の色を変える

    <div class="toprecommend-container">
    <div class="toprecommend">
    <div class="toprecommend-box">
    <span class="toprecommend-image"><a href="記事のURL"><img src="画像URL"></a><br></span>
    <span class="toprecommend-boxtitle"><a href="記事のURL">記事タイトル</a></span>
    </div>
    <div class="toprecommend-box">
    <span class="toprecommend-image"><a href="記事のURL"><img src="画像URL"></a><br></span>
    <span class="toprecommend-boxtitle"><a href="記事のURL">記事タイトル</a></span>
    </div>
    <div class="toprecommend-box">
    <span class="toprecommend-image"><a href="記事のURL"><img src="画像URL"></a><br></span>
    <span class="toprecommend-boxtitle"><a href="記事のURL">記事タイトル</a></span>
    </div>
    <div class="toprecommend-box last-box">
    <span class="toprecommend-image"><a href="記事のURL"><img src="画像URL"></a><br></span>
    <span class="toprecommend-boxtitle"><a href="記事のURL">記事タイトル</a></span>
    </div>
    </div>
    </div>

    ここからが各自手直しが必要なので、説明しますね。

     <span class=”toprecommend-image”><a href=”記事のURL“><img src=”画像URL“></a><br></span>
      <span class=”toprecommend-boxtitle”><a href=”記事のURL“>記事タイトル</a></span>

    変える部分は記事のURLと書かれた部分で、2か所同じURLが必要です。これは読者が画像をクリックしても、記事のタイトルをクリックしても同じページに移動するようにするためです。

    画像のURLの一番簡単な方法は、記事を書く画面で写真を投稿する、もしくはすでにある写真を選び、「選択した写真を貼り付け」をクリックします。

    はてなブログのヘッダーにおすすめ記事を入れる カスタマイズ

    すると画面に写真が表示され、次にHTML編集をクリックすると画像URLが見れるので、https://cdn-ak.f.st-hatena.com/images/fotolife/n/xxx/20200130/20200130073544.jpg部分をコピペします。

    はてなブログのヘッダーにおすすめ記事を入れる カスタマイズ

    残りも同じように作業していきます。

    ちなみに、おすすめ記事を増やしたかったら増やせますが、減らすとどうしても位置がおかしくなるので、最低4つはおすすめ記事が必要です。

    はてなブログのヘッダーにおすすめ記事を入れる 記事を増やす方法<おすすめ記事6つの場合>

    増やし方は分かると思いますが、念のために。

    <div class=”toprecommend-box”>
      <span class=”toprecommend-image”><a href=”記事のURL”><img src=”画像URL”></a><br></span>
      <span class=”toprecommend-boxtitle”><a href=”記事のURL”>記事タイトル</a></span>
    </div>

    枠を増やすコードは上記したものが1つの枠になるので、上のコードをコピペすれば増やせます。

    ちなみにスマホ表示を考えて、偶数個にした方がいいですね。

    <コードをちょっと変えましたが参考にさせていただいたのは、Migaru-daysさんです。ありがとうございました>

    最後に

    これでブログの見た目がwordpressっぽくなったので、PVが増えるかもしれないですね。(そんなわけないです(笑))

    まぁ、wordpressっぽいというのは抜きにしても、読んで欲しい記事をアピールできるので、PVは増えるでしょうね。

    1つ注意点として、ヘッダーで画像を読み込む=ページの表示速度が落ちるので、Lazy loadの設定も一緒にやって、画像の遅延読み込みをしておきましょうね。

    はてなブログでLazy loadを使う方法!コピペで簡単に使えるを参考にどうぞ。

  • コピペOK!はてなブログで吹き出しを使って会話形式にする方法

    コピペOK!はてなブログで吹き出しを使って会話形式にする方法

    吹き出しを使った記事って憧れませんか?

    私は昔、「何これ!?使ってみたい!」と結構衝撃でした(笑)

    最初の設定は少し面倒ですが(と言っても慣れてる人だったら5分もかからないです)、不具合もなく(比較的)簡単に吹き出しを使えるものがあるので、紹介します。

    はてなブログの吹き出しを使う方法

    ちょっと長いですが、まずはこのコードをデザインCSSに貼り付けます。場所・「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」

    はてなブログ 目次カスタマイズ

    コードが長いので、コピペする時に開けて使ってください。

    [ac-box01 title=”コードを見る”]

    /* 吹き出しのCSS */
    .entry-content .l-fuki,
    .entry-content .r-fuki {
      position: relative;
      width: calc(100% - 82px);
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      padding: 20px;
      border-radius: 6px;
      border: 2px solid #ddd;
      box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
      background-color: #fff;
      z-index: 1;
      box-sizing: border-box;
    }
    .entry-content .l-fuki {
      margin: 20px auto 36px 0;
    }
    .entry-content .r-fuki {
      margin: 20px 0 36px auto;
    }
    .entry-content .l-fuki::before,
    .entry-content .r-fuki::before {
      position: absolute;
      content: "";
      top: 16px;
      width: 10px;
      height: 10px;
      border-right: 2px solid #ddd;
      border-bottom: 2px solid #ddd;
      background-color: #fff;
      z-index: 2;
    }
    .entry-content .l-fuki::before {
      right: -7px;
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
    }
    .entry-content .r-fuki::before {
      left: -7px;
      transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
    }
    .entry-content .l-fuki::after,
    .entry-content .r-fuki::after {
      position: absolute;
      content: "";
      width: 60px;
      height: 60px;
      top: -6px;
      border-radius: 50%;
      border: 3px solid #fff;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      box-shadow: 1px 1px 5px #aaa;
      box-sizing: border-box;
    }
    .entry-content .l-fuki::after {
      right: -82px;
    }
    .entry-content .r-fuki::after {
      left: -82px;
    }
    @media screen and (min-width: 478px) {
      .entry-content .l-fuki::after,
      .entry-content .r-fuki::after {
        width: 80px;
        height: 80px;
      }
      .entry-content .l-fuki,
      .entry-content .r-fuki {
        width: calc(100% - 106px);
      }
      .entry-content .l-fuki::after {
        right: -106px;
      }
      .entry-content .r-fuki::after {
        left: -106px;
      }
    }
    .クラス名::after {background-image:url(画像のURL);}
    .クラス名::after {background-image:url(画像のURL);}

    [/ac-box01]

    注)レスポンシブでない人は、<style>上のCSS</style>とスタイルで囲って、スマホ用のデザインCSSに貼り付けましょう。

    最後の「.クラス名::after {background-image:url(画像のURL);}」で、登場人物の設定をします。

    例えば .jibun::after {background-image:url(https://cdn-ak2.f.st-hatena.com/images/fotolife/n/xxx/20200203/20200203064149.jpg);}と言った感じです。

    クラス名はローマ字で書き、数字も使えます。(良い例・dog1 悪い例 1dog)

    この個所はいくらでも増やせるので、その都度設定してください。

    画像のURLの取得方法は、このようにします。

    1 はてなフォトライフにいく。

    はてなブログ プロファイルのカスタマイズ2 アップロードをクリックし、画像をアップ。左下に表示されたアップロード済みの画像の上で右クリックし、画像アドレスをコピーを押す。

    吹き出しの設定 はてなブログ

    設定は以上です。

    吹き出しの使い方

    吹き出しの使い方は、すっごく簡単です。

    HTML編集に下記コードを入れる。(かっこ部分は説明なので入れないように)

    • <p class=”l-fuki クラス名”>本文</p>(画像が右表示)
    • <p class=”r-fuki クラス名”>本文</p>(画像が左表示)

    クラス名をデザインCSSに登録したものに替え、本文を書くだけです。

    はてなブログ 吹き出し形式 会話 吹き出し設定 カスタマイズ

    上の画像は、私が設定したHTMLです。

    はてなブログ 吹き出し形式 会話 吹き出し設定 カスタマイズ

    見たままモードでは、文字しか表示されないので、プレビューでチェックしましょう。

    はてなブログ 吹き出し形式 会話 吹き出し設定 カスタマイズ

    ちなみに改行するときは、Shift+Enterで改行します。

    はてなブログ 吹き出し形式 会話 吹き出し設定 カスタマイズ

    今後は、以下のコードをすぐに使えるように、メモなどに貼り付けておいた方がいいです。

    <p class=”l-fuki クラス名”>本文</p>

    <p class=”r-fuki クラス名”>本文</p>

    <参照・Shiromagさん>

    スマホで表示されない場合の対処法

    はてなブログで吹き出しがスマホに表示されない場合

    一般的にCSSの設定が上手く反映されない時は、コピペしたコードを上の方に貼り付けると機能することがほとんどです。

    私は356行目にコードがありますが、例えばこれを150行目に移すとかです。

    はてなブログで吹き出しがスマホに表示されない場合の対処法

    また、このCSSには<@media screen and (min-width: 478px) >というコードがあるのですが、このせいでスマホに反映されない可能性もあります。

    これは他のカスタマイズCSSで画像の幅調整などをやっていたら、そのコードが優先されている可能性があります

    なので、他に@media screenを使っていたら、それより上の行にコピペしましょう。

    あんまり上過ぎても、大事な読み込みより前に吹き出しの読み込みをしなくちゃいけなくなるので、表示速度が遅くなりますよ。

    最後に

    簡単だったでしょ?

    会話形式で記事を書くと書きやすい場合があるし、読者も飽きが来にくいのでお勧めですね。

  • はてなブログでカスタムURLを使ってPVアップを狙おう

    はてなブログでカスタムURLを使ってPVアップを狙おう

    皆さん、ブログのURLは自分で設定していますか?

    「URL?何それ?」

    えっ・・・!?URLをそのままにしているんですか?

    「別にはてなブログの公式ページでも何も言ってないし、誰にも言われたことが無いです」

    URLをカスタマイズすることによって、SEO的にも良いんですよ

    「SEOにも良い?やりたい!」

    では今から紹介しますね

    基本的にはてなブログProを使っている方を対象にした記事なので、無料版での動作確認はしておりません。

    この機会にProの利用を検討される人は、はてなブログPro登録からどうぞ

    カスタムURLを使うメリット

    カスタムURLには主にこんな特徴があります

    何の記事かURLを見ただけで分かる
    Googleが推奨している

    Googleが推奨しているってだけで、もう使ったほうがよさそうですよね

    「なんで推奨しているの?」

    Googleが記事をインデックスする時に、URLから何の記事かが判別するからでしょうね

    「でも、何の記事かURLを見ただけで分かるっていうのは何?」

    カスタムURLの使い方

    例えばはてなブログのURLは、こう言った風に表示されます。記事URLの確認場所は、「設定」→「詳細設定」→「記事URL」です

    はてなブログ カスタムURLを使うメリット

    標準であれば、自分のブログURL/entry/2020/02/02/210745 の様に、日付と更新時刻がURLになります。

    タイトルは、日付+記事タイトルが日本語で表示されます。

    ダイアリーは日付時刻ですが、スラッシュ「/」が少ないですね。

    じゃあ、タイトルを選べば何の記事か分かりやすいですが、日本語表示されたURLはこんな風に変換されるんです

    はてなブログ カスタムURLを使うメリット

    entry以降の日本語文字がこんな風に変換されるので、例えば読者が別のウェブサイトにURLを貼り付けたら、意味が分からない文字列になるし、Googleもこれが何の記事か分からないので、SEO的にも良くないんです

    「じゃあ、どうするの?」

    はてなブログのカスタムURLで、英語で設定するんです。

    例えば先ほどの「はてなブログでカスタムURLを使う方法」だったら、以下の様に設定します

    custom-url-hatenablog
    how-to-use-custom-url-on-hatenablog

    英語が苦手って人もいると思いますが、簡単に分かりやすいものを書けば大丈夫です

    下の画像は、「はてなブログのアイキャッチ画像の設定方法」と言う記事ですが、URLはhow-to-set-featured-image-hatenablogとしています

    カスタムURLの使い方

    単語と単語の間は「ー」で繋ぎ、大文字は使いません。時々無駄に「/」で繋いでいる人を見ますが、「/」はカテゴリで分けたいときに使うのであって、その他では基本的に使いません。

    下の画像は私のwordpressのサイトなのですが、/life/という個所でスラッシュを使っています。

    これは元々カテゴリ名だったもので、カテゴリで区別できるようにしたものです

    カスタムURLの使い方

    このページのURLは、hatenablog-manetizeで、タイトルは「はてなブログでアフィリエイトしてお金を稼ぐ方法」なんですね。

    こういう風に分かりやすいURLが一番いいですよ。記事のタイトルを全部英語に訳して、URLにする必要はありません

    はてなブログでカスタムURLの設定方法

    はてなブログ カスタムURLの設定方法

    記事を書く画面の右に、編集オプションなどの表示がありますよね

    そこにカスタムURLとあるので、先ほど言ったように記事に合うURLをタイプしてください。

    これだけです。

    最後に

    こう言うちょっとしたひと手間で検索順位の上昇も見込めるので、面倒くさがらずに毎回URLを設定してみて下さい。

    すぐに慣れるので、面倒だと思わなくなりますよ。

  • はてなブログのブログタイトルのカスタマイズ・コピペで簡単にできる!

    はてなブログのブログタイトルのカスタマイズ・コピペで簡単にできる!

    はてなブログのブログタイトル(自分のブログ名)はオリジナルだと、ちょっと味っ気ないですよね。

    自分のブログに合うようにブログタイトルをカスタマイズして、他のサイトと差別化を図りましょう。

    ブログタイトルのカスタマイズ

    私がやっているはてなブログのブログタイトルは、customize-testと言ってカスタマイズの練習をしているブログなのですが、ブログタイトルはこんな感じです。

    はてなブログ ブログタイトルのカスタマイズ

    背景の色も白だし、タイトルも左に寄っているし、文字も小さいのでちょっと変更してみました。

    はてなブログ ブログタイトルのカスタマイズ

    背景をナビゲーションバーと同じ色にし、文字も大きく、白に変えてみました。ナビゲーションバーの設置方法は「Innocentにグローバルメニューをコピペで設置する方法」を参考にどうぞ。

    ブログタイトルに画像を使う人も多いですが、高速化をしたいのならお勧めしませんので。

    一昔前はみんな画像を貼っていたと思うのですが、写真ブログ以外は特にこだわりがなければ、画像を使わない方がユーザビリティも上がります。

     

    ブログタイトルのフォントサイズ、色、背景を変える方法

    カスタマイズのコードを張る場所は、「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「デザインCSS」です。

    はてなブログ ブログタイトルのカスタマイズ

    まずは、タイトルの背景とタイトルの色、フォントサイズを変えるコードです。

    1行目のbackgroundの#00bfffを、任意のカラーコードに変えると、タイトルの背景色が変わります。

    • 黒・・・#000000
    • 赤・・・#ff0000
    • 青・・・#0000ff

    カラーは原色大辞典よりどうぞ。

    4行目のcolorの#以降を変えると、文字色が変わります。

    5行目のfont-sizeは文字の大きさで、2emはブログで使っているフォントの2倍の大きさと言う意味なので、任意の大きさに変えましょう。

    • 1.2em・・・1.2倍の大きさ
    • 1.5em・・・1.5倍の大きさ
    • 3em・・・3倍の大きさ

    今の段階では、こんな感じに表示されます。ブログタイトルの枠が大きいですね。しかも左に寄っているのでアンバランスだし・・・。

    はてなブログ ブログタイトルのカスタマイズ

    ブログタイトルを真ん中に位置し、ヘッダー狭める方法

    次に、文字を真ん中に位置し、ヘッダーを狭くします。下記コードを同じデザインCSSに貼り付けます。

    2行目のpadding-topはタイトル上の余白を、padding-bottomはタイトル下の余白をどのくらいにするかと言うものです。

    私は狭くてよかったので0pxにしていますが、お好みでサイズを変えて下さい。

    はてなブログ ブログタイトルのカスタマイズ タイトルを真ん中に持ってくる方法

    もしヘッダーの幅はそのままでタイトルを真ん中に持ってくるだけなら、上のコードは使わずに、以下のコードだけで大丈夫です。若干太いですが、ブログタイトルの大きさを変えたら問題なさそうですね。

    はてなブログ ブログタイトルのカスタマイズ タイトルを真ん中に持ってくる方法

    #blog-title {
    text-align: center;
    }

     

    ブログタイトルのフォントを変える方法

    ブログタイトルのフォントを変えたい場合は、Google fontを使って変えるのが簡単です。

    以下に9つの文字例があるので、気に入ったもので設定してみて下さい。Google fontで確認できます。

    はてなブログ ブログタイトルのフォント変更する方法

    気に入った文字の番号のCSSを下記からコピペして、タイトル下に貼り付けて下さい。場所・「ダッシュボード」→「デザイン」→「レンチマーク」→「ヘッダ」→「タイトル下」

    はてなブログ グローバルメニュー カスタマイズ Innocent

    1. <link href=”https://fonts.googleapis.com/earlyaccess/mplus1p.css” rel=”stylesheet” />
    2. <link href=”https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css” rel=”stylesheet” />
    3. <link href=”https://fonts.googleapis.com/earlyaccess/hannari.css” rel=”stylesheet” />
    4. <link href=”https://fonts.googleapis.com/earlyaccess/kokoro.css” rel=”stylesheet” />
    5. <link href=”https://fonts.googleapis.com/earlyaccess/sawarabimincho.css” rel=”stylesheet” />
    6. <link href=”https://fonts.googleapis.com/earlyaccess/sawarabigothic.css” rel=”stylesheet” />
    7. <link href=”https://fonts.googleapis.com/earlyaccess/nikukyu.css” rel=”stylesheet” />
    8. <link href=”https://fonts.googleapis.com/earlyaccess/nicomoji.css” rel=”stylesheet” />
    9. <link href=”https://fonts.googleapis.com/earlyaccess/notosansjapanese.css” rel=”stylesheet” />

    次に以下のコードの「ここに貼る」部分を任意のものにし、デザインCSSに貼れば完成です。

    1. Mplus 1p
    2. Rounded Mplus 1c
    3. Hannari
    4. Kokoro
    5. Sawarabi Mincho
    6. Sawarabi Gothic
    7. Nikukyu
    8. Nico Moji
    9. Noto Sans Japanese

    例えば8番を選ぶと、こんな感じになります。(日本語用のフォントなのでcustomize-testをカスタマイズテストに変更しました)

    はてなブログ ブログタイトルのフォント変更する方法

    #title{
    font-family: “Nico Moji”;
    font-size: 30px;
    letter-spacing: 15px;
    }

    ちなみにfont-sizeで文字の大きさを変え、letter-spacingで文字と文字の間隔を変えます。

    <参照記事・ミニマムコラム

    グーグルフォントを使と、こっちのCSSの文字サイズが反映されるので、最初に紹介した文字サイズは反映されません。

    最後に

    ブログタイトルはブログの顔なので、他のサイトと差別化を図ってインパクトがあるもの、もしくは覚えやすいものにしたいですね。

    その他のカスタマイズは、「はてなブログのカスタマイズ集(すべてコピペでOK)と収益化方法などのまとめ」からどうぞ。Lazy Loadで高速化や、サイドバーに画像リンクの貼り方など色々なカスタマイズを紹介しています。

  • はてなブログのアイキャッチ画像の設定方法とカスタマイズ方法

    はてなブログのアイキャッチ画像の設定方法とカスタマイズ方法

    みなさん、アイキャッチ画像は毎回アップしていますか?

    えっ!?してない?

    そんな人は必ず設定しましょうね。

    しかもただ単に画像をアップするだけじゃなく、文字を入れて読者が一目でどんな記事なのか分かるようにすれば、アクセスアップ間違いなしです。

    Windows標準機能のペイントや、macも画像を開いてツールから文字を入れれますが、私がいつも使っているものは、Canvaという無料ソフトです。

    アイキャッチ画像のメリット

    はてなブログ アイキャッチ画像の作り方

    上の画像の左側はアイキャッチ画像無しのトップページで、右がアイキャッチ画像付きにになります。

    記事にアイキャッチ画像があれば、サイドバーの最新記事や人気記事に画像が付くので人目を惹きやすくなります。(サイドバーに画像を使うのには設定が必要です)

    はてなブログ アイキャッチ画像の作り方

    また、ツイートしたときにも画像が付くので、クリックされやすくなりますよね。

    下のスクショは私の別のブログなんですが、海外旅行好きの人は良かったら読んでみて下さい。(笑)

    はてなブログ アイキャッチ画像の作り方

    アイキャッチ画像の設定方法

    まずはてなブログのアイキャッチ画像の設定方法ですが、簡単です。

    はてなブログ アイキャッチ画像の設定方法

    記事を書くときに(もしくはすでにある記事の)一番上に写真を投稿すると、それがアイキャッチ画像として表示されます。

    「写真を投稿」→「任意の画像をクリック」→「選択した写真を貼り付け」を順にクリックしていくと、上の画像の赤枠の様に写真が表示されます。

    記事内で使わない画像をアイキャッチ画像として使う方法

    記事で使わない写真をアイキャッチ画像として使う場合、例えば過去に使った写真を使う場合は、まず任意の写真をクリックして記事に表示します。

    次にHTML編集をクリックすると、以下の様に写真のURLが見れます。

    はてなブログ アイキャッチ画像の設定方法

    今回で言えばこの赤線のURL

    https://cdn-ak.f.st-hatena.com/images/fotolife/n/user name/20200121/20200121061706.jpg

    を「編集オプション」のアイキャッチ画像の下にある個所に貼り付けます。

    はてなブログ アイキャッチ画像の設定方法

    この方法だと、記事の下の方で使っている画像をアイキャッチ画像として使う場合にも有効です。

    Canvaの使い方

    やっと本題ですCanvaの使い方です。

    私はほとんどシンプルにしか使わないのですが、それでも有ると無いのでは全然違うので皆さんもやってみて下さい。

    まずはCanvaに行き、デザイン作成→カスタムサイズ→幅・高さを設定。通常の幅・高さは600x400にしていますが、グーグル砲を狙うなら1200x800で設定します。

    Canvaの使い方

    次にアップロードを選び、「画像または動画をアップロード」をクリックして任意の画像をアップします。画像と選んだサイズが合わない場合は、画像の大きさを変えて下さい。(使う画像は、著作権フリーの画像の探し方で紹介していますが私はPixabay、もしくはCanvaの「写真」をよく使います)

    Canvaの使い方

    次に、「素材」→「図形」をクリックして正方形の図形を選びます。

    Canvaの使い方

    正方形を選ぶと下の写真の様になっているので、形を調整します。私はいつも長方形にしています。

    Canvaの使い方

    形を変えたら、右上にある「透明度」をクリックして、四角の透明度を変えて後ろの画像が見えるようにしましょう。

    Canvaの使い方

    テキストをクリックし、「見出しを追加」を選びます。

    Canvaの使い方

    最後に見出しに記事のタイトルを書き、右上にある「矢印」をクリックしダウンロードします。標準ではPNGになっているので、JPEGに変えてダウンロードしましょうね。

    はてなブログ アイキャッチ画像のカスタマイズ

    これをhttps://compresspng.com/で軽量化して60KBくらいにして使いましょう。100KBとかあると表示速度がかなり遅くなるので注意です。

    また、記事に写真を載せる時は画像遅延読み込みのLazy Loadを使うと表示速度が上がります。こちら「はてなブログでLazy Loadを使う方法」を参考にどうぞ。

    最後に

    慣れないうちはこのひと手間が面倒かもしれませんが、慣れれば1分もかからないので、毎記事アイキャッチ画像を作りましょうね。

    これがあるだけで、私のブログは回遊率が結構上がりましたよ。

    また、画像を記事にアップロードする前は必ず圧縮してから上げないと、表示速度が遅くなるので気を付けて下さいね。

    こちら「画像を圧縮して表示速度を上げる方法」を参考にどうぞ。

  • はてなブログ・「あわせて読みたい」などのリンクを目立たせるコピペカスタマイズ

    はてなブログ・「あわせて読みたい」などのリンクを目立たせるコピペカスタマイズ

    はてなブログに限らず、ウェブサイトのリンクって「こんな感じ」ですよね。

    それをちょっとカスタマイズして目立たせましょう。

    やっぱりリンクが目立つことによってクリック率が上がるので、PV数も増えるし、良いことだらけだと思います。

    あわせて読みたいのCSSカスタマイズ

    下記のコードを、デザインCSSに貼り付けます。場所は「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「デザインCSS」です。

    はてなブログ カスタマイズ リンクを囲って目立たせるCSS

    .entry-content .box0 {
    position: relative;
    margin: 36px 0 16px;
    padding: 16px 10px;
    border: 2px solid #df8182;/* 枠の色 */
    background-color: #fffbf5;/* 背景色 */
    }
    .entry-content .box0:last-child {
    margin-bottom: 0;
    }
    .entry-content .box0:before {
    position: absolute;
    top: -12px;
    left: 10px;
    padding: 0 10px 0 26px;
    content: "関連記事";
    background-color: #df8182;/* 文字背景色 */
    border-radius: 10px;
    color: #fff;/* 文字色 */
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    }
    .entry-content .box0:after {
    position: absolute;
    top: -16px;
    left: 4px;
    width: 28px;
    height: 28px;
    background-color: #df8182;/* マーク背景色 */
    border-radius: 14px;
    line-height: 25px;
    text-align: center;
    content: "→";
    font-size: 18px;
    font-family: "blogicon";
    color: #fff;/* マーク色 */
    }

    注)枠の色や背景の色解説している所の#以降の文字を変えたら、それぞれの色が変わります。色は原色大辞典よりどうぞ。不具合があったのでマークは「→」に変更しました!

    はてなブログ リンクを枠で囲って目立たせるカスタマイズ

    次は使い方です。見たまま編集ではできないので、HTML編集モードでやります。

    例)リンクをつけた状態の「記事はこちらから」をHTML編集で見ると、このようになります。

    • <p>記事は<a href=”https://example.com/”>こちら</a>から</p>

    これに<div class=box0″></div>をつけ足します。

    • <div class=”box0″><p>記事は<a href=”https://example.com/”>こちら</a>から</p></div>

    これだけです。

    お次はこのように2行にする場合を紹介します。

    はてなブログ リンクを枠で囲って目立たせるカスタマイズ

    2行以上あっても使い方は同じで、<div class=”emphasize-link”></div>で囲います。

    • <div class=”box0″><a href=”https://example.com/”>はてなブログの高速化1</a><p><a href=”https://example.com/2/”>はてなブログの高速化2</a></p>
      </div>

    基本的に、<div class=”box0″></div>で囲えばOKです。

    はてなブログ あわせて読みたいボックス設定方法

    次は、box1 box2 box3の3つのコードを書いています。必要なものだけコピペして使ってください。こちらはサルワカさん参照です。

    .box1 {
        padding: 0.5em 1em;
        margin: 2em 0;
        font-weight: bold;
        border: solid 3px #ffd700;
    }
    .box1 p {
        margin: 0; 
        padding: 0;
    }
    
    .box2 {
        padding: 0.5em 1em;
        margin: 2em 0;
        font-weight: bold;
        border: solid 3px #ff8c00;
        border-bottom: solid 10px #ffa500;
    
    }
    .box2 p {
        margin: 0; 
        padding: 0;
    }
    
    .box3 {
        position: relative;
        margin: 2em 0;
        padding: 0.5em 1em;
        border: solid 3px #95ccff;
        border-radius: 8px;
    }
    .box3 .box-title {
        position: absolute;
        display: inline-block;
        top: -13px;
        left: 10px;
        padding: 0 9px;
        line-height: 1;
        font-size: 19px;
        background: #FFF;
        color: #95ccff;
        font-weight: bold;
    }
    .box3 p {
        margin: 0; 
        padding: 0;
    }

    BOX1と2は「タイトルが無いボックス」ですが、それなりにリンクを強調して使えるので入れましたが、「あわせて読みたい」などのタイトルを入れたい場合はBox3のみ使用してください。

    使い方は先ほどのBox0と同じで、<div class=”box1“></div>で囲めばOKです。Boxの番号に合わせてこちらの番号も変えて下さい。

    はてなブログ あわせて読みたいボックス設定方法

    見たまま編集では文字しかないですが、プレビューで確認するとしっかりボックスになっているはずです。

    最後に

    これでリンクが目立つので、クリックされる可能性は上がりますね。

    もしこの方法で囲いが使えない場合は、もうすでに似たようなCSSを書いている可能性があるので、チェックしてみて下さいね。

    注)このカスタマイズを参考にしたサイトが無くなっていたので誰が作ったか分かりませんが、ありがとうございました。