初心者でも簡単!コピペでOK! はてなブログで蛍光ペン風マーカー、アンダーラインのカスタマイズ。2020/4/24改訂版!
⚠️この記事は2020年4月24日に改訂しました。
今回は超簡単な蛍光マーカー風のアンダーラインのカスタマイズの解説です。
いろいろなサイトを見ていても、強調したい文章にアンダーラインを入れている方を見かけます。
伝えたいことや強調したいことが明確になりますし、なによりインパクトを感じますよね!
今回のカスタマイズはとっても簡単なので、やってみてください!
↓ 今回参考にさせていただいたサイトです。
蛍光マーカー風のアンダーライン
蛍光マーカーでラインを引いた感じに、文字の下に ラインを入れます。
今回は『太字』と『斜体』と『アンダーライン』への設定です。
『太字』と『斜体』は蛍光ラインを入れたい文章を選んでから『 B 』もしくは『 i 』でそれぞれに設定した蛍光ラインを入れることができます。(プレビュー画面で確認できます)
アンダーラインに関してはHTML編集で<u>〇〇〇〇</u>(◯の中に蛍光マーカーで装飾したい文字を入れる)に囲むと蛍光ラインが入ります。後ほど詳しく説明します。
どれか1つでも構いませんし、色やラインの幅などを変えて使い分けてもいいと思います。
蛍光マーカーの設定方法
今回貼り付ける場所は 『設定』⇨『詳細設定」⇨『headに要素を追加 』に貼り付けます。
下の方にスクロールして
*バックアップ推奨、自己責任でお願いします。
『太字』を蛍光マーカーにしたい場合のコード
<style type="text/css">
/* 強調表示を蛍光ペン(ピンク)風に */
article strong{
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(255,153,255,1) 60%) !important;
}
/* bタグは太字 */
article b{
font-weight:bold !important;
}
</style>
『斜体』を蛍光マーカーにしたい場合のコード
<style type="text/css">
/* 斜体表示を蛍光ペン(黄)風に */
article em{
font-weight:bold;
font-style: normal;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important;
}
/* iタグは斜体*/
article i{
font-style:oblique !important;
}
</style>
『アンダーライン』を蛍光マーカーにしたい場合のコード
<style type="text/css">
/* アンダーライン表示を蛍光ペン(緑)風に */
article u{
font-weight:bold;
text-decoration: none;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(102,255,204,1) 60%) !important;
}
</style>
アンダーラインを蛍光マーカーにする場合のみHTML編集での入力が必要です。
蛍光マーカーで装飾したい文字を <u>と</u> で囲むことで蛍光マーカーで装飾されます。
<u>koromorog</u>
をHTML編集に入力すると
koromorog
こんな感じになります。
CSSコードの編集
コードの 『rgba(255,153,255,1)』の部分が色。『transparent 20%』部分でラインの幅を書き換えることができます。
幅を調整する
『transparent 20%』のパーセンテージを大きくすることで、蛍光ラインの幅が狭くなります。
色を変える
『rgba(◯,◯,◯,◯)』の部分にはrgbaで色を指定します。
カラーコードから変換する場合は、↓↓ のサイトでカラーコードを選んで
カラーコード変換|各種設定用のカラーコードに変換 | すぐに使える便利なWEBツール | Tech-Unlimited
さいごに
今回のカスタマイズ、簡単にできる割にはなかなか使い勝手のいいカスタマイズです。
ワンクリックで文字の装飾ができるのはとっても便利!
文章も映えますし、何かを伝えるブログサイトにとってとても意味のあるものだと思います!
⚠️この記事は2020年4月24日に改訂しました。
初心者でも簡単にグローバルメニューを追加する方法。[Minimalism]なら超簡単!コピペでOK!
今回は自分のサイトにグローバルメニューを簡単に設置する方法です。
グローバルメニューを設置するメリット
グローバルメニューとは、グローバルナビゲーションやヘッダーメニューとも言われます。よく見かける、上図でいうと赤枠で囲ってある部分のことです。
サイト内のコンテンツを紹介、リンクするために設置するメニューのことで、探している情報や記事カテゴリーなどにジャンプできる便利な機能です。
ここではグローバルメニューを設置するメリットを紹介します。
サイトの回遊性が上がる
せっかく来訪してくれたユーザーに対して、の内容や有用性をわかりやすく伝える手段になります。
ユーザーが必要な情報にたどり着きやすいサイトであれば必然的に回遊性も上がります。
SEO対策
グローバルメニューを設置することで多くの内部リンクを集めます。
検索エンジンは内部リンクの多く貼られたサイトを重要なコンテンツと判断する傾向にあるので、SEO対策にも有利に働きます。
Googleアドセンスの審査にも有利、とGoogle自体が認めているようです。
サイトのページが AdSense のご利用条件を満たしているか確認する - AdSense ヘルプ
サイトの利便性を高めるには、見つけやすく使いやすいナビゲーション バー(またはメニューバー)を用意することが大事です。ナビゲーション バーを作成する際のポイントは、以下のとおりです。
- 項目の並び - すべての項目を適切に並べる
- 読みやすさ - テキストを読みやすくする
- 機能 - 適切に機能するプルダウン リストを作成する
例 旅行関連のサイトの場合は、次のようなナビゲーション バーが効果的です。-> ホーム <> 目的地 <> ギャラリー <> レビュー <> 会社概要コンピューター プログラム関連のサイト場合は次のようになります。-> ホーム <> C++ <> PhP <> JavaScript <> 初心者向け <> 会社概要どのようなサイトでも、サイトの利用方法がすぐにわかるようなナビゲーション バーを設置することが大切です。詳細については、ユーザーの利便性に関するガイドラインのわかりやすいページ構造でユーザーを誘導するをご覧ください。 >>>上記サイトより
Googleアドセンス審査を考えているなら必須なのかもしれません。
グローバルメニューの設置方法
参考にさせていただいたブログです。ありがとうございました!
今回コードを貼り付ける場所は
- デザイン→カスタマイズ→ヘッダ→タイトル下
- 設定→詳細設定→headに要素を追加(グローバルメニューにアイコンを使用する場合)
です。
⚠️以前ご自身でカスタマイズしたコードなどの下に貼り付けてください。※バックアップ推奨、自己責任でお願いします!
グローバルメニューのみの設置(アイコンなし)
アイコンなしだとこんな感じです。
↓ アイコンなしの場合のコード
<!-- グローバルメニュー -->
<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="〇〇〇〇
"></i>△△△△</a></div>
<div class="menu"><a href="〇〇〇〇
"></i>△△△△ </a></div>
<div class="menu"><a href="〇〇〇〇
"></i>△△△△ </a></div>
<div class="menu"><a href="〇〇〇〇
"></i>△△△△ </a></div>
<div class="menu"><a href="〇〇〇〇
"></i>△△△△ </a></div>
</div>
</div>
</nav>
をデザインのヘッダのタイトル下に貼り付けます。
↓ 貼り付ける場所
〇〇〇〇の部分には表示したいURL ( 当サイトでは各カテゴリのTop画面 )
△△△△の部分には表示したい文字(当サイトでは”HOME""LIFE"など)
をそれぞれ入力してください。
上記の場合のグローバルメニューは5つになります。
設置数を増やしたければ
<div class="menu"><a href=" 〇〇〇〇
"></i>△△△△ </a></div>
を増やせば OKです。減らす場合は削ってください。
グローバルメニューにアイコンを使用する場合
アイコン設置バージョンです。
アイコンは『Font Awesome』を使用します。
まずは『headに要素を追加』に以下のコードを貼り付けます。
<!-- グローバルメニューアイコン fontawesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
↓ 貼り付ける場所
次に下記のコードをデザイン→カスタマイズ→ヘッダ→タイトル下に貼り付けます。
<!-- グローバルメニュー -->
<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href=" 〇〇〇〇
"><i class="fa fa-□□□□" aria-hidden="true"></i>△△△△ </a></div>
<div class="menu"><a href=" 〇〇〇〇
"><i class="fa fa-□□□□" aria-hidden="true"></i>△△△△ </a></div>
<div class="menu"><a href=" 〇〇〇〇
"><i class="fa fa-□□□□" aria-hidden="true"></i>△△△△ </a></div>
<div class="menu"><a href=" 〇〇〇〇
"><i class="fa fa-□□□□" aria-hidden="true"></i>△△△△ </a></div>
<div class="menu"><a href=" 〇〇〇〇
"><i class="fa fa-□□□□" aria-hidden="true"></i>△△△△ </a></div>
</div>
</div>
</nav>
〇〇〇〇の部分には表示したいURL ( 当サイトでは各カテゴリのTop画面 )
△△△△の部分には表示したい文字(当サイトでは”HOME""LIFE"など)
をそれぞれ入力してください。
□□□□にFont Awesomeから使用するアイコンを選び
上の入力の部分を貼り付ければOKです。
例:<i class="fa fa-home" aria-hidden="true">となります。
さいごに
今回のグローバルメニュー設置を設置したことで当サイトはGoogleアナリティクスでいうところの『直帰率』が明らかに下がりました。
数字で言うと直帰率38%台まで下がりました。(恥ずかしながらグローバルメニュー設置前は69%でした・・・)
ちなみにメニュー数に関しては7つくらいまでにした方が良いようです。
アイコンも無料版はてなブログでも充分にバリエーションがあるので不自由しないのでぜひ試してみてください。
小さな会社のWeb担当者・ネットショップ運営者のためのWebサイトのつくり方・運営のしかた 売上・集客が1.5倍UPする プロの技101
- 作者:坂井 和広
- 発売日: 2017/08/11
- メディア: 単行本
楽天カードオススメの理由と新規入会キャンペーンを解説! 新規入会キャンペーンのポイントを間違いなく獲得する方!! [2020年4月最新版] [PR]
現在の新規入会&初回利用キャンペーンは5000ポイント+楽天銀行口座開設&入金で1000ポイントです!
おそらく現在は新型コロナウイルスによる緊急事態宣言中なので当分(これまでの8000ポイントオーバーのキャンペーン周期は約3ヶ月おき)は随時開催の5000ポイントキャンペーンだと思われます。
2020年4月現在
今や数あるクレジットカードの中でも顧客満足度調査で9年連続1位という、とても人気のクレジットカードです!
そこで今回は楽天カードについて
楽天カードが選ばれる理由
種類や特徴
新規入会キャンペーン特典とその注意点
などを詳しく紹介していきます。
「もう手元に楽天カードがあるよ!」
「カードの説明はいいからポイント申請どうすればいい?」
という方はスキップできます。 ↓↓
顧客満足度調査で9年連続1位の理由とは?
みなさんのまわりでも楽天カード持ちの方がたくさんいらっしゃると思いますが、2017年上半期の国内のクレジット取扱高で首位を獲得して以降、さらにそのシェアを拡大している理由はインパクトのあるCMだけではありません。
単純にクレジットカードとしてのメリットがとても大きい事によります!
年会費永年無料
楽天カードは年会費が一切かかりません!
*種類によって年会費が発生するものもあります。
当サイトでは年会費永年無料の楽天カードのみご紹介します。
楽天スーパーポイントが『貯めやすい』『使いやすい』
paypayやLINEpayをはじめとしたQR決済サービスの開始に伴って、各ポイント関係の運営企業が顧客拡大に力を入れいて、その中でdポイントとともに楽天スーパーポイント提携店が急激に増えています。
もともとは楽天市場(日本最大級のネットショップサイト)など、インターネット上でのみ利用できたポイントでしたが、近年は飲食店、コンビニ、ドラックストア、スポーツ店など、様々なジャンルのお店での利用可能になりました。
カード払いのポイント還元率が非常に高い
楽天スーパーポイントを効率よく貯められるのが楽天カードでのカード払いです。
提携店のどこで利用しても100円につき1ポイント(還元率1.0%)が付与されます。
さらに、楽天市場などの利用に関しては最低でも2倍以上、スーパーポイントアッププログラムでは、楽天の各サービスを利用するごとに楽天市場でのお買い物の際に付与されるポイント還元率が最大16倍までアップします。
新規入会特典&初回利用でポイントが大量にもらえる
これこそ楽天カードの新規入会の最大のメリットです。
楽天カードを新規登録すると2000ポイント、カードを利用してお買い物をするだけで3000ポイントの合計5000ポイントをGETできます!(2020年4月7日現在)
この新規入会キャンペーン特典は月に1回くらいの頻度で更新されますのでタイミングを見計らって入会するのもアリです!
その他サービス
楽天カードの種類にもよりますが、持っていることによって様々なサービスが受けられます。
①海外旅行傷害保険
利用付帯と自動付帯があり、カードの種類によって異なります。
・利用付帯・・・
年会費無料の楽天カードでも受けられる、空港までの公共の交通費、海外旅行の代金などをクレジットカードで支払った場合に適用されるサービス
・自動付帯・・・
②ハワイ・ワイキキの楽天会員専用ラウンジが利用可能
2017年に開設された、ハワイ・ワイキキの楽天カードラウンジ(Tギャラリア ハワイ by DFS内)が無料で利用できる。
日本語で対応してくれるスタッフの常駐するトラベルデスクでサービスを受けられます。
オススメのカード(年会費永年無料)
楽天カード
メリット
- 種類の多い楽天カードの中で、一番オーソドックスなカード・ダントツ人気
- 年会費永年無料で海外旅行保険も利用付帯
- 身分証明書不要のネット申し込みで簡単・スピーディー
- 楽天Edy・Apple Pay 対応可なのでキャッシュレス利用OK
- 学生・主婦でもたいてい審査が通る
デメリット
- ETCカードが有料(月額500円+税)
- 誰でも持てるイメージでステータス低め
- 登録解除をしないとメルマガが多い
- 楽天市場での購入が多い場合(月9000円以上)は楽天ゴールドカード(年会費2000円)の方が得
楽天PINKカード(特に女性にオススメ)
メリット
- 楽天カードのメリットが全て当てはまる
- 有料で選べるオプションサービスがある
デメリット
- アメックスブランド不可
- 優待・割引オプションは人を選ぶ
- 色がピンクで子供っぽい?
楽天PINKカードのオプションサービスの詳細
楽天PINKカードのオプションサービスは3つあります。
①ライフスタイル応援サービス(月額300円+税)
様々な優待・割引が利用できるサービスで飲食店、映画館、習い事、介護など、11万件を超えるサービスが受けられます。
②楽天グループ優待サービス(月額300円+税)
楽天グループの対応ショップの全商品に使えるクーポンが利用できるようになります。
毎月のネットショッピング次第ではかなりの恩恵を受けることもできます。
③女性向け保険オプション
楽天PINKカードの最大の魅力のオプションサービス。女性特有の病気(乳がんや子宮筋腫など)の治療費を補償してくれる保険に格安で加入できます。
*2020年4月中旬までの新規の保険の募集を停止していますが、保険期間2020年6月1日〜2021年6月1日までの案内画面を準備中とのことです。楽天PINKカードを持っていれば募集が始まればいつでも加入できます。詳しくは下記公式サイトをご確認ください。
新規入会キャンペーン特典の詳細と獲得方法
楽天カードは常に入会キャンペーンが行われていますので、いつでも大量のキャンペーンポイントをお得にGETして入会することができます。
が、何も理解せずにただ入会してしまうと場合によっては全てのポイントを獲得、利用できない可能性もあります。
せっかくの大量の入会ポイントです。1ポイントも無駄にしないために、その仕組みをしっかりと理解して入会の申し込みをしましょう。
新規入会キャンペーン特典 5000ポイントの詳細
この記事の前半でも記述しましたがこの新規入会で獲得できる5000ポイントは、2種類の特典の合計ポイントです。
『新規入会すると5000ポイント獲得!』
ではなく、
『新規入会すると最大5000ポイント獲得!』
ということなんです。
下図は楽天カードの公式サイトにある、全てのポイント付与までの流れです。
楽天カードに申し込むには、楽天会員に登録し、楽天ID(Eメールアドレス)が必要です。
まずはじめに、ここから楽天会員に登録します。>>> 楽天会員登録|会員費無料
次に下のバナーから楽天カードに申し込みましょう!>>>>
新規入会特典獲得詳細
*カード利用特典のポイントはキャンペーン内容によって変わることがあります。
簡単に言うと2種類のキャンペーンポイントがあり、それぞれの獲得条件とポイントの有効期限に違いがあります。
2種類のキャンペーンポイントの獲得方法
それぞれのポイントの獲得・利用に当たっての注意点を解説していきます。
[ 新規入会特典 ]
新規入会特典は楽天カードが発行され、カード発行から半年以内に楽天e-NAVIに登録して申請をすることで獲得できます。
楽天e-NAVIとは
楽天カード会員専用オンラインサービスのことで
- 利用明細の確認
- お得なキャンペーン
- 支払い方法の変更
- 登録情報の変更
- 利用可能額の確認
- ネットキャッシング
などをカードの情報を管理できるWebサービス
〜楽天e-NAVI登録方法〜
楽天e-NAVIに必要なものは 楽天カードと楽天ID・パスワード。
楽天ID(楽天会員登録時に設定したEメールアドレス)がまだの方 ↓ から作成できます。
楽天e-NAVIに登録さえできればあとは所定の情報を入力していけば受け取りはカンタンです!
[ 初回カード利用特典 ]
初回カード利用特典は文字通り楽天カードを利用することでポイントを受け取ることができます。
⚠️注意点⚠️
⚠️カード発行から約40日以内に楽天カードでお買い物をして、カード初回利用と口座振替設定の両方が完了した月の翌月20日頃にポイントが加算される
なんでもいいのでカードが届いたらなるべく早く利用してください。カードの年会費やキャッシング利用分など、カード利用とみなされないものもありますが、普通にお買い物をすれば問題ありません。
⚠️獲得できるポイントは期間限定ポイント
ポイント付与から利用できる期限はポイント付与後に楽天e-NAVIで確認できます。
まとめ
楽天カード発行から新規入会特典を全て獲得するまでの手順をおさらいします。
- 楽天会員に登録。楽天会員登録>>>楽天会員登録|会員費無料
- 楽天カード申し込み>>> 楽天カード
- 楽天カード到着後、半年以内に楽天e-NAVIに登録>>>楽天e-NAVI: ログイン画面⇨2000ポイントGET
- 楽天カードでお買い物(カード発行から約40日以内)⇨3000ポイントGET
日本で一番使われている、お得で便利な楽天カード。
特典はキャンペーン内容によって変わることが多いので、公式サイト、CMなどの情報をもとに、ぜひお得に使い始めましょう!
【洗い流さないトリートメント】紫外線対策にオススメ‼️【ヘアケア】 [PR]
今回はUVケアのできるアウトバス(洗い流さない)トリートメントを紹介します!
寒さも和らいできた今日このごろ…
いよいよ紫外線の季節がやってきます!
紫外線は1年中降り注いでいますが、5月頃から一気に強くなります!
早めの準備でうるツヤ髪をキープしましょう!
アウトバストリートメントの種類
アウトバス(洗い流さない)トリートメントの形状にはいろいろありますが、今回は大まかに4つのタイプに分けて特徴を上げていきます。
ミストタイプ
仕上がりの質感が軽め。水分が多いのでコーティング効果や保湿効果が乳液タイプやオイルタイプのものと比べて弱いが、浸透率が高いので髪の内部補修に向いているものもある。
乳液タイプ、オイルタイプとの併用がオススメ!
乳液タイプ
コーティング効果と保湿効果、浸透率どれも備えた万能型のトリートメント。
ミストタイプとオイルタイプの中間くらいの質感。
凡庸性と使いやすさでサロン専売品、市販どちらもかなりの種類がある。
オイルタイプ
髪の表面をしっかりコーティングし、ツヤを出してくれる。
最近はスタイリング剤として使えるかなり重ためのものや、ナチュラルにツヤが出るタイプのものなどかなりバリエーションも増えている。
スプレータイプ
使い方はミストタイプとほぼ同じ。
今回紹介するのはUVカットスプレーに限る。
手を汚さずに使用できる。
ものによってはUV対策として頭皮を保護したり、肌にも使えるものもある。
手軽にできるUVケアトリートメント5選
紫外線防止効果、手軽さなどをもとにアイテムを5つご紹介します!
ミルボン エルジューダ サントリートメントエマルジョン
ウエラ INVIGO サンUVカラープロテクションスプレー150ml
ビタミンB5とビタミンE配合。紫外線からのダメージから守り、なおかつ潤いを与えます。2層式なので必ず振ってからスプレーしてください。
タマリス フィルージュAS アロマシャボン UVカットスプレー 100g
[rakuten:co-beauty:10159286:detail]
保湿美容成分(加水分解ヒアルロン酸、アセチルグルコサミン、水溶性プロテオグリカン、水溶性コラーゲン)で潤いをあたえ紫外線から肌・髪を守ります。
SPF50+ PA++++
*廃盤になってるようで在庫限りの販売です!
タマリス ソルティール UVケアミルク 80g
SPF16 PA++
ルベル トリエ エマルジョン ココヴェール 50ml
さいごに
今回は紫外線対策にオススメのアウトバストリートメントを紹介させていただきました。
こういったアイテムはすぐにモデルチェンジされていって新しいものがたくさん出てきます。
ヘアスタイルとともに時代に合ったツールがどんどん出てくるんでしょうね!
楽しみです!
【無料版はてなブログ】トップページのカスタマイズ。簡単コピペ!
今回はトップページについてです!
サイトのトップページはいわば『顔』です!
無料版はてなブログのその『顔』となるトップページは、最新記事が最上位にあって、ページ下部に進んでいくと今までの記事の全文がただひたすらズラーッと並んで全てが表示されていて、とにかく見辛くてなりません( ;´Д`)
はてなブログの有料版ですとトップページに記事を簡単にアーカイブ表示できるようなんですが、無料版はてなブログでもスッキリ見やすいトップページに変更、設定する方法がありますので、今回はそれを紹介したいと思います。
トップページを一覧で表示するには
無料版のはてなブログのトップページに記事の一覧を表示する方法は2通りあります。
①無料版のはてなブログにもとから搭載された『続きを読む』機能を使う。
②『Javascript』を使う。
このふた通りの方法があります。
『続きを読む』機能を使う
この『続きを読む』を挿入することで、全文表示されている記事を省略して表示できます。
それぞれの記事を省略することで、下に表示されている過去の記事も確認しやすくするということです。
『続きを読む』機能に関してはもともと無料版はてなブログにも標準装備なので設定やコピペなども何もせず、記事を書きながらワンクリックでできます。
『続きを読む』の使い方
とにかく簡単。記事の境界にカーソルを合わせて
これだけです。
簡単です!
『続きを読む』のメリット
先述にもある通り、簡単に誰でも今すぐにでもできます!
標準装備で、何も設定を変える必要もないので不具合なども一切ないと思われます。
『続きを読む』のデメリット
記事を制作中に機能を使うということになりますので、以前に書いた記事は全文表示になります。これまで作った全ての記事に適用するとなるとなかなかの手間かもしれません。
それと、当たり前ですが記事の区切りを自分で決めることになるので、どこで区切るかわたしならちょっと迷います(笑)
それよりなにより一番のデメリットは ”目次” 以降に『続きを読む』を使うと目次が機能しなくなるということです´д` ;
『続きを読む』以降の文章がリンクしなくなるので、記事一覧としての見た目は良いんですけど、なんとなくスッキリしません。
『Javascript』を使ってアーカイブ形式に表示する
はてなブログ無料版には『Java script』を埋め込んでカスタマイズする方法がたくさんあります。
今回参考にさせていただきましたのはこの2記事です。ありがとうございました。
↑↑の記事に詳しく書いてありますが、要は、トップページを開いたときに自分のブログのアーカイブページに飛ばす設定をします。
アーカイブ形式のメリット
一度設定しておくと、全ての記事に反映される。
これが一番です!
アーカイブ形式のデメリット
ネット上ではgoogleの評価が下がるらしいと言われているみたいですが、それだけの理由で評価が下がるとは考えにくいですし、基準もよくわからないので私は気にしないことにしました(笑)
長い目で見ても読んでいただく方々が読みやすいサイトの方がいいと思うので!
『Javascript』のソースコード
こちらのコードを元にして貼り付けます。
<!-- トップページ記事一覧設定 -->
<script type="text/javascript">
if( location.href == 'https://◯◯◯/'){
location.href='https://◯◯◯/archive';
}
</script>
<noscript>
<p><a href="https://◯◯◯/archive">koromorog 〜ころもろぐ〜</a></p>
</noscript>
赤文字の部分はご自身のブログのURLに置き換えてください。
注意点としては3行目以降のURLの後ろにある『archive』を消さないように!
青文字の部分はご自身のブログタイトルに。
貼り付ける場所
下にスクロールしていって
貼り付けたらまた下に移動
『変更する』を忘れずにクリック!
ここまで間違いがなければトップページを読み込んでみると一覧表示になっているはずです。
さいごに
今回のカスタマイズはトップページをすっきり見やすくするのには必須ではないでしょうか?
過去の記事が埋もれて行ってしまうのは仕方がないとは思いますが、せっかく書いた記事なので出来るだけ目に止まって欲しいです!
はてなブログのフォントとフォントサイズを変えてみる
今回は、はてなブログの『フォント』と『フォントサイズ』を変えてみたいと思います!
それに加えて、『余白設定』と『行間設定』も少し手を加えていきます!
フォントを変更するメリット
ブログでもサイトでも、フォントはとても大切な要素ですよね。
好みはあるでしょうが、フォントを変えているブログを見つけるとこだわってるな〜と感じます。
それと、フォントのサイズに関して『googleが推奨している文字サイズ』というものもあるらしいです。フォントのサイズをデフォルトのままにしておくとSEO的にも不利になるらしいです。こんな記事を見つけました。
ところで、あなたは「googleが推奨している文字サイズ」というのがあることをご存知だろうか?
一言でいうと
16px以上
ということで、はてなブログの中でも、少しでもオリジナリティを出していきたいと考えている方がほとんど。
ブログを始めて、かなり早い段階で取り掛かることになるかと思います!
ソースコードの貼り付け場所
いつもの『デザインCSS』に貼り付けます!
*デザインCSSを設定するときは、新しいソースコードを貼り付ける前にコピーなどでバックアップをとっておいてください!
フォントサイズと行間の設定
フォントサイズと一緒に、行間設定も貼り付けちゃいます。
/*文字の大きさと行間*/
.entry-content{
font-size:16px;
line-height:1.8em;
}
『font-size』の横の数字でサイズを変更できます。
『line-height』は行間です。
数値はご自身で決定してください。
このままコピペでもどちらでも構いません。わたし的にはこれくらいがちょうどいい感じです。
フォントを変更
フォントは王道の『メイリオ』にしました。
/*フォントの設定*/
body{
font-family:"メイリオ",Meiryo,"游ゴシック","Yu Gothic",YuGothic,"HiraginoKaku Gothic ProN",Hiragino Kaku Gothic Pro","MS ゴシック",sans-serif;
}
font-familyの後に記入されたフォントが優先的に適用されて、 それが使えない場合?次のフォントが適用されます。
さいごに
いかがでしたか?
今回はフォントのサイズとフォント自体を変えてみました。
少しのことなんですが、なんとなくスッキリ見えていいですね。
自分のサイトがビルドアップされていくのってなんか嬉しいですね!
はてなブログの目次をカスタマイズしてみた。
はてなブログ無料版でもなるべくかっこよく読みやすいブログサイトにするために、今回は『目次』機能をカスタマイズしていこうと思います(^-^)/
私の場合経験も浅いですし自分の記事が整理できない不安もあるので、まず始めに目次から考えます。
私にとっては目次があることによって効率が上がります。
自分の記事なのに路頭に迷うことがありますので(´Д` )
目次の必要性
メリット
目次があることによって単純にその記事の概要がわかるようになります。
何よりも整理された文章で読みやすく感じるかと思います。
それと検索エンジンで検索した際、はてなブログで目次を設定しておくと設定していない場合と比べて検索結果に表示されやすくなることもあるようです。
アンカーリンクとしての機能
アンカーリンクとはページ内リンクのことです。はてなブログの目次機能では、アンカーリンクでそのページ内での特定の見出しへ即時に移動することができるため、見る側からすると、とても便利ですね。
はてなブログの見出し
見出しを選ぶ
見出しにしたい文字、文章を選んでからどの見出しにするか決定します。
大見出し
大見出しは記事の内容を大きくまとめた見出しに当たります。
中見出し
中見出しは大見出しの下に挿入する、大見出しを細分化する見出しです。
小見出し
小見出しは中見出しの下に挿入する、見出し(目次に表示される文章)としては一番細く細分化する見出しです。
標準
標準は文章として使います。
目次の設置場所
記事中の目次を設置したいところにカーソルを合わせておいて目次のアイコンをクリックすると ” [:contents]” というコードが表示されます。
大見出し、中見出し、小見出しにしている文章は全て拾ってくれます。
ちなみに目次は記事中のどこにでもいくつでも設置できます。
ここまでははてなブログ無料版のデフォルト機能です。
デザインCSSを編集(コピペでOK)
はてなブログの目次機能の使い方がわかったところで、次は少しだけその機能をカスタマイズしたいと思います。
③をクリックするとCSSを書き込む欄が開きます。
もともと記載されている部分には触れず、改行しても構いません。
今後のことも考えて、綺麗にわかりやすく並べましょう。
CSS編集にあたっての注意点
- 元から記載されているCSSは消さない、いじらない。
- 必ずバックアップ(PCのメモ帳などにコピー)を取っておく。
- 何があっても自己責任で。
上記は必ず守ってください!
今後ブログサイトをより一層良いものにしたいと思っているので、デザインCSSの変更、改良などが増えてくると思います。
私も他探りなので、いつも恐る恐るコピー取りながら編集しています(笑)
CSS内の /*○○○○○*/ のところの ○○○○○ は自分の分かりやすいように書き換えても問題ありません。
目次のデザイン関連
.entry-content .table-of-contents {position:relative;margin-left: 0;padding: 15px 10px 15px 55px; /* 枠内の余白(上右下左) */font-size: 100%; /* 文字の大きさ */font-weight:bold;list-style-type:decimal; /*数字以外が良ければ変更 */background:#fff;border-top:40px solid #87cefa; /* 「この記事の目次」周りの色 */border-left:2px solid #87cefa; /* 線の太さ */border-right:2px solid #87cefa;border-bottom:2px solid #87cefa;line-height: 200%; /* 行間 */border-radius: 6px; /* 角丸にしない場合は不要 */color:#444; /* 数字(マーク色変更) */}
目次を目立たせる
.entry-content .table-of-contents::before {font-family: 'blogicon';content: "\f039 もくじ";display: block;font-size: 130%;font-weight: bold;position: absolute;top: -40px;/*上からの位置調整*/left: 20px; /*左からの位置調整*/color: #fff !important;}
リストのマークを変える
大見出し
.table-of-contents li{font-weight:bold; /* 通常はnormal */list-style-type:decimal; /* マークの種類 */
中見出し
.table-of-contents li ul li{margin-left:20px;font-weight:normal;list-style-type:disc;
小見出し
.table-of-contents li ul li ul li{list-style-type:lower-latin;}
マーカーのプロパティはサルワカさんが詳しく書いてくれています。神です。
リンクの色指定、アンダーライン消す
.entry-content .table-of-contents li a{color:#444; /* 目次リスト部分のテキスト色 */text-decoration:none; /* リンクの下線をつけたくない場合 */}
カラーコード
完成!
上記の全てをそのままコピペした状態がこちらです!
今後もいろいろな記事、サイトを参考に変えていこうとは思っていますが、なかなか気に入ってます(⌒▽⌒)
さいごに
今回ははてなブログの目次部分のデザインをCSS編集してカスタマイズしてみました。
「はてなブログ 目次 カスタマイズ」と検索すると参考にできるサイトがたくさん出てきて、それを見ながらであれば結構難しいところもなく、すんなりとカスタマイズできた印象でした。
皆さんも色んな『目次』、作ってみてください。