過去記事を貼る基本方法とカスタマイズ

自分の投稿した過去の記事を新しい記事へ載せる（リンクを貼る）基本のやり方と応用のやり方ついての記事です。

こんにちは。超初心者、はてなブログ専門、無料、簡単、５分で出来るをコンセプトにしたBlogカスタマイズ！です。

まずは結論から。
基本のやり方だと ↓ のような感じのリンクが貼付けできます。

今回おすすめしたいカスタマイズしたやり方だと ↓ のような感じのリンクです。

それではまず基本のやり方です。

まず、”記事を書く”モードに行きます。

＞＞右上に表示される”編集再度バー”の”追加”タブをクリック

　＞＞そして”過去記事貼り付け”をONにする

　　＞＞自動で”過去記事貼り付けタブ”が追加されます

そして”過去記事貼り付けタブ”をクリック

　＞＞自分の過去記事が表示されます。

　　＞＞お好みの過去記事を選んで、下にある”選択したアイテムを貼り付け”ボタンをクリック

これだけです。簡単ですね。

つづいて、これをカスタマイズする方法です。
まず下のHTMLコードをコピーして下さい。

<!--ここから「合わせて読みたい」のＨＴＭＬコード-->
<fieldset style="padding: center; border: 1px solid #ffa500; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;"><legend><span style="font-size: 18px; color: #ffa500; font-weight: bold;">&nbsp;合わせて読みたい&nbsp;</span></legend>
<p> </p>
<cite class="hatena-citation"></cite></fieldset>
<!--ここまで「合わせて読みたい」のＨＴＭＬコード-->

そして通常通り「記事を書く」の「HTML編集」モードで任意の位置にこのコードをペースト（貼付け）して下さい。「プレビュー」モードで見て貰えれば、↓ のような空の箱が出来ているはずです。

そして基本と同じように、右側にある「過去記事貼り付け」に行き、任意の過去記事を選択するのですが、先ほどとはちょっとやり方を変えます。
任意の過去記事の右側にある四角で囲まれた矢印を右クリックして下さい。

「リンクアドレスをコピー」をクリック
（右クリックをする時に場所がズレていると「リンクアドレスをコピー」が出ないのでご注意）

先ほど作った箱の中にカーソルを置き、
「プレビュー」では無く、「編集見たまま」モードで作業して下さい。

カーソルを置いたら、右クリックをしてペースト（貼り付け）を選択する。

別ウインドウが開くので「タイトル」を選択し、「選択した形式でリンクを挿入」をクリック。

下のように出来ていれば成功です。

基本のやり方でもカスタマイズのやり方でも、どちらでも問題無いと思いますが、一つの記事に多くの過去記事を貼り付ける場合、基本のやり方だと見難かったり、沢山スクロールしないといけなかったり等、読者に取っては不便かもしれませんので、上手く使い分けたいですね。

なお、色を変更したい場合は下の記事を参考にして下さい。

  合わせて読みたい 

HTMLカラーコード

以上です。

ではでは。

アドセンス広告に勝手に付いてしまうハイフン「-」の消し方

アドセンス広告に勝手についてしまうハイフン「-」を消す方法についての記事です。

こんにちは。超初心者、はてなブログ専門、無料、簡単、５分で出来るをコンセプトにしたBlogカスタマイズ！です。

Googleアドセンスの広告を自動では無く手動で記事内に貼り付ける場合、なぜかハイフン「-」が広告の上に勝手についてしまいます。小さいので気にしなくても良いのかもしれませんが、目障りなので削除したいですよね。この記事はその「-」の消し方についてです。
（人によっては付かないのかもしれませんが）

ではやり方です。

通常通り、Googleアドセンスから広告のHTMLをコピーして、はてなブログの記事作成からHTML編集モードでペースト（貼付け）して下さい。
ここまでは普通ですね。

そして、「</ins>」の直前に「・」があると思うのでそれを削除して、「<!-- -->」を手動で記入して下さい。
「<ins>」じゃなくて、「</ins>」の直前です。ご注意を。

以上です。

やり方は簡単ですが、いちいちやらなければならないのでかなり手間です。他にもっと良いやり方をしっている人がいればぜひ教えて下さい。

ではでは。

蛍光ペン風マーカーで文字をアレンジ

初心者の方でもコピペで簡単に、ブログ記事本文に蛍光ペンのマーカーのような線を引く方法についての記事です。

こんにちは。超初心者、はてなブログ専門、無料、簡単、５分で出来るをコンセプトにしたBlogカスタマイズ！です。

注意！：本設定をすると過去記事で斜体を使った文字は全てマーカーされてしまいます。またCSSをイジる時には元々入っているコードを絶対に削除・変更しないで下さい。

やり方は色々あるのですが、初心者向けという事で今回は一色しか設定出来ないようにします。また、おそらく斜体はあまり使われないと思うので、斜体を選択した時にマーキング出来るようにします。つまり斜体は使えなくなってしまいます。

それではやり方を。

 １．好きな色を一色だけ選んでコードをコピー

緑色が良い方は下のコードをつかう（コピーして！）

/*緑文字にマーカー*/
.entry-content em{
    background: -webkit-linear-gradient(rgba(255,255,255,0) 40%, #99ff99 80%);
}

ピンク色が良い方は下のコードをつかう（コピーして！）

/*ピンクで蛍光ペン風マーカー*/
.entry-content em{
    background: -webkit-linear-gradient(rgba(255,255,255,0) 40%, #ffccff 80%);
}

青色が良い方は下のコードをつかう（コピーして！）

/*青でで蛍光ペン風マーカー*/
.entry-content em{
    background: -webkit-linear-gradient(rgba(255,255,255,0) 40%, #66ccff 80%);
}

黄色が良い方は下のコードをつかう（コピーして！）

/*黄色で蛍光ペン風マーカー*/
.entry-content em{
    background: -webkit-linear-gradient(rgba(255,255,255,0) 40%, #ffff00 80%);
}

２．コードをCSSにペースト（貼付け）

「ダッシュボード」から「デザイン」に行き、「スパナマーク」をクリック。そして「｛｝デザインCSS」の中の一番上に先ほどコピーしておいたコードをペースト。そして「変更を保存する」をクリック。（元々「｛｝デザインCSS」に入っていたコードは削除・修正しないでね！）

これで設定は終わり！

３．マーキングしたい文字を”斜体”設定する

あとはいつも通りに新規記事作成モードに行き、「編集見たまま」で記事を作成して下さい。そしてマーキングしたい文字を「斜体 ”i”」にする。「編集見たまま」モードでは変化がありませんが、「プレビュー」で確認して下さい。

出来てますよね？

ねっ！簡単ですね！

 ４．(参考)　色や太さを変えたい時

色や太さを変更したい方は下のようにコードを変える事により出来ます。色々試してみて下さい。

(rgba(255,255,255,0) 40%, #99ff99 80%)

・左の４０％とはマーカーの太さを表し、数値が小さいほど太くなります。

・真ん中＃から始まる数字は色コードになります。色コードは下記リンク（広告ではないです）を参考にして下さい。

・右の８０％は色の濃さ表し、数値が小さいほど濃くなります。

  合わせて読みたい 

HTMLカラーコード

ではでは。

サイドバーにおすすめ記事を貼る方法

本記事はサイドバーに自分のおすすめ記事を載せる方法についてです。

こんにちは。超初心者、はてなブログ専門、無料、簡単、５分で出来るをコンセプトにしたBlogカスタマイズ！です。

誰にでも「これがおすすすめ」という自分の記事が一つや二つあるのではないでしょうか。でも、はてなブログにはデフォルメでおすすめ記事をトップ画面でもサイドバーにも載せられるようになっていないです。なので、ちょっと裏技のようなやり方でサイドバーに表示させる方法について。

とても簡単です。

↓ のように出来ます。

それではやり方に入ります。

一点だけ下準備が必要です。それはおすすめの記事を新しく作ったカテゴリーか、または元々あるカテゴリーに入れても良いですが、そのカテゴリーの中で”常に”最新記事になるようにしておいて下さい。理由はあとで分かると思います。
元々あるカテゴリーの中に既にあり、最新になる事が出来ない場合、面倒ですが新しくカテゴリーを作ることが必須になります。

そのように下準備が出来れば次に進んで下さい。

まずはいつも通り”ダッシュボード”にいきます。

＞＞”デザイン”をクリック

　＞＞”カスタマイズ”をクリック

　　＞＞”サイドバー”をクリック

　　　＞＞”+モジュールを追加”をクリック

そしたら別ウインドウが出ます。

＞＞”最新記事”をクリック

そして、下記３点を記入して下さい。

　・”タイトル”を好きな言葉にして下さい。

　・”表示件数”を１にして下さい。

　・”カテゴリー”をあなたのおすすめ記事のカテゴリーにして下さい。

以上です。

おすすめ記事を２件表示したければどうすれば良いか、なぜカテゴリーの中で最新じゃないといけないか、お分かり頂けると思います。工夫すれば他にも色々流用出来ると思います。

ではでは。

目次のカスタマイズ

読者フレンドリーの為にも長文（2000文字以上）の時には目次があった方が良いです。さらにカスタマイズした目次でオリジナリティを出しませんか。

こんにちは。超初心者、はてなブログ専門、無料、簡単、５分で出来るをコンセプトにしたBlogカスタマイズ！です。

本記事は目次の基本設定のやり方、また目次のカスタマイズについてです。

ではまず結論から

基本設定のみで ↓ こんな感じの目次が出来ます！

そして ↓ のようにカスタマイズする事も出来ます

まずは基本設定のやり方について。

いつも通りに”記事を書く”モードの”編集見たまま”でお好きな文字をテキトーに記入して下さい。

そして、目次の中に入れたい言葉を選択。

そしてそして、その言葉に見出しを設定して下さい。
（今回、私は”中見出し”を選びましたが、他がどうなるかは後で試して下さい！）

中見出しにしたので少しだけ太字になりましたね。

同じように目次にしたい言葉を全て”中見出し”にして下さい。
全て少しだけ太字になるはずです。

そしてカーソルを目次を入れたい場所に置いて下さい。

そしたら”[:contents]”という文字が自動で配置されます。

以上です！
最後に”プレビュー”で見てみて下さい！

どうです？
ちゃんと目次出来てますか？

続いて目次のカスタマイズについて。

注意：元々入っているコードを変更・削除しないで下さい。作業前には元々入っているコードのバックアップを取って下さい。

まず、下のコードをコピーして下さい。

/*===もくじの枠===*/
.entry-content .table-of-contents{position:relative;display:inline-block;
border-top:40px solid #696969;/*上部バーの色*/
background-color:#f5f5f5;/*背景色*/
border-radius:5px;padding-right:50px;
}

.entry-content .table-of-contents::before {display:block;
font-family:"blogicon";content:"\f000";font-size:25px;/*左上のアイコン*/
color:white;/*アイコンの色*/
position:absolute;top:-35px;left:35px;}

.entry-content .table-of-contents::after{font-size:20px;
content:"Contents";/*表示文字*/
color:white;/*文字色*/
position:absolute;top:-35px;left: 50px;}

/*===もくじ内部のカスタマイズ===*/
.table-of-contents li {
list-style-type:decimal;/*大見出しの前に数字*/
font-size:1.2rem;/*大見出しサイズ*/
line-height:1;padding-bottom:.3rem;}
.table-of-contents ul{padding-top:1rem;padding-bottom:.4rem;}
.table-of-contents li ul li {
font-size:1.1rem;/*中見出し-サイズ*/
list-style-type:disc;/*中見出しの前に黒丸*/
line-height:1.0;padding-top:0;padding-bottom:0;}
.table-of-contents li a,
.table-of-contents li a:visited 
{color:#454545;text-decoration:none;}/*リンクの色、下線の有無*/
.table-of-contents li a:hover
{text-decoration:underline;}/*マウスオーバーで下線を表示*/
.table-of-contents ul ul{display: none;}/*小見出しを表示しない*/

body{font-family: 'PT Sans Caption',sans-serif;}

@media screen and (min-width: 1000px){
.no_pc {
display: none !important;
}

コピーしたコードをデザインＣＳＳに貼り付けます。

「ダッシュボード」に行き、「デザイン」をクリック

　＞＞「スパナマーク」をクリックして「【】デザインＣＳＳ」をクリック

　　＞＞そこへ先ほどコピーしたコードをペースト（貼付け）

　　　＞＞最後に上にある「変更を保存」

以上です。

基本のやり方と同じように記事を書いてプレビューで確認して下さい。

カスタマイズされた目次が出来ているはずです。

さらに上のバーの色を変えたい場合はコードを変更する事により、お好きな色に変更出来ます。

例えば、黒なら#000000、赤なら#ff0000と決まっていて好みの色コードに変えればOKです！色コードはこちらからご確認下さい。

  合わせて読みたい 

HTMLカラーコード

もし、目次バーのところにある、はてな（万年筆）マークがズレてしまう場合は、下の二ヵ所の数字を変更してみて下さい。

以上です。

ではでは。

見出しのカスタマイズ（文字の背景に色付け、装飾）

文字に装飾を付けるとグッとやれる事の幅が広がります。記事っぽくもなりますね。

こんにちは。超初心者、はてなブログ専門、無料、簡単、５分で出来るをコンセプトにしたBlogカスタマイズ！です。

本記事は記事の中で「見出し」をカスタムして文字に装飾を付けるやり方についてです。設定方法はとても簡単ですが、デザインは無限にあるのでどんなデザインにするか、その為どうコードを組むかはテクニックがいると思います。

あくまで初心者向けなので、ここではシンプルな２種類だけを記事にします。
でも、やり方が分かれば無限に作れると思いますよ！

それではまず結論から。

こんな感じ ↓ に出来ます！

こんな程度ですが、有るか無いかで結構イメージが変わってくると思います。

ではやり方です。

注意！
あなたのデザインCSSには元々なにかコードが入っているかもしれませんが、それは消さないで下さい！！

まずいつも通りにダッシュボードに行きます。

＞＞「デザイン」をクリック

　＞＞「カスタマイズ」をクリック

　　＞＞「｛｝デザインCSS」をクリック

　　　＞＞表示されたエリアに↓をコピペ！

.entry-content h3 {
  padding: 6px 10px;
  border-left: 8px solid #000000;
  color: #333;
  line-height: 1.5;
  background-color: #f5f5f5;
}

h4 {
  border-bottom: dashed 2px #000000;
}

　　　　＞＞最後に「設定を保存する」をクリック

設定は以上で、次は実際に記事の中でどうするか。

＞＞いつも通りの記事作成モードでテキトーに「あいうえお・・・」を入力

　＞＞「あいうえお」のみを選択

　　＞＞「大見出し」をクリック

＞＞続いて「さしすせそ」のみを選択

　＞＞今度は「中見出し」をクリック

　　＞＞最後に「プレビュー」モードに切り替え

じゃじゃ～ん！！

ね！　簡単ですよね！

後は先ほど入力したプログラム言語を色々イジって見て下さい。
どうしたら、デザインを変えられるか、どうしたら色を変えられるか。
分かってくると思いますよ！

例えば、黒なら#000000、赤なら#ff0000と決まっていて好みの色コードに変えればOKです！色コードはこちらからご確認下さい。

  合わせて読みたい 

HTMLカラーコード

本記事は「見出し」のカスタマイズ方法でした。

ではでは。

吹き出しの作り方

吹き出しを使って会話形式の記事を作れるようになるとグッとやれる事の幅が広がります。

こんにちは。超初心者、はてなブログ専門、無料、簡単、５分で出来るをコンセプトにしたBlogカスタマイズ！です。

本記事は記事の中で”吹き出し”を入れる方法についてです。吹き出しは ↓ のような会話形式で使えるやり方です！今日は５分では厳しいかも…

では早速…　と行きたいですが、事前準備が必要です。

１．画像の事前準備

まずは ↓ のような人物画像（別に人物じゃなくてもOK）の準備が必要です。二人しか出来ない訳では無いので必要な人数分の画像を用意して下さい。

写真やイラストを入手のおすすめは「Canva」です。下のバナーからアクセスできます。無料で利用できるのでぜひ試してみて下さい。素材はとっても豊富でイラストもあるし、お勧めです。どれにしようか迷ってしまうので、この画像選びに一番時間かかるかも・・・

 

「Canva」については別記事に使い方等があるの参考にして下さい。

  合わせて読みたい 

・オリジナルのヘッダー画像の作成

画像選びが終わり、デスクトップ等に画像をダウンロード／保存し終わったら次に進みます。

２．画像をはてなブログに登録

まずは画面右上に□□□ボタンがありますよね？その中の”はてなフォトライフ”をクリック。そしたら画面が切り替わり、右上に”アップロード”ボタンが出るのでそれをクリック。

そしたら ↓ のように画像をアップロードする画面に切り替わるので、デスクトップ等に保存した画像をドラグ＆ドロップして下さい。アップロードされるはずです。

その後に画像のアドレスがどこにあるかを明確にし、コピーしておく必要があります。その為、まずは画像にカーソルを合わせて”右クリック”して下さい。そしたら”検証（Inspect element）”をクリックします。
そうするとコードが出てくるのでこの画像のアドレス部分（https:// .... jpg）のみを選択してコピー（どこかに控えておいて下さい）して下さい。頑張ってhttp://から始まるアドレスを見つけて下さい！

３．吹き出しコードを自分のはてなブログに登録

馴れるまでは、もうコードの内容なんか無視して単純にコピペで良いと思います。

下が基本のコードです。

.Man::after {background-image:url(ｈttps://............................jpg);}

そしてあなたが選んだ画像のアドレスを上の基本コードの"ｈttps://..........jpg"に置き換え、出来たコード（.Man::after {background-image:url(●●●);}）をコピーしておいてください。

そしたらいつもの通りにダッシュボードから”デザイン”に行き、”カスタマイズ”をクリック、そして”デザインCSS"をクリック。

注意！
あなたのデザインCSSには元々なにかコードが入っているかもしれませんが、それは消さないで下さい！！

４．吹き出しを記事に入れる

ここまでくればあと一息！ここでもコードの意味は深く考えずに基本のコードをコピペして使いましょう。基本のコードは下記です。

<p class="r-fuki Man">やっほー！</p>

この基本コードをコピーして置きます。そしていつも通りに”記事を書く”で記事を書くのですが、”HTML編集”モードで先ほどコピーした<p class="r-fuki Man">やっほー！</p>を入力して下さい。

そして”プレビュー”モードで確認して下さい。どうでしょう？ ↓ のように見えましたか？見えていない場合、何かが異なるはずなので、再チェックが必要です。

ここまで出来れば後は自分好みにカスタマイズするだけです。

５．カスタマイズ（複数人での会話形式）方法

５－１．複数の画像を用意。

５－２．それぞれの画像をはてなブログに登録

５－３．登録したそれぞれの画像のアドレスを控えておく。

５－４．デザイン>>>カスタム>>>デザインCSSにそれぞれの画像を下記のように入力

　　例１.Man::after {background-image:url(ｈttps://.....〇〇〇.....jpg);}

　　例２.Lady::after {background-image:url(ｈttps://......▲▲▲.....jpg);}

　　例３.Chield::after {background-image:url(ｈttps://.....◆◆◆....jpg);}

５－５．３人の会話を記事作成時のHTML編集モードで入れる

　　例１<p class="r-fuki Man">今日は何をしていましたか？</p>

　　例２<p class="l-fuki Lady">今日はカフェで友達と過ごしました。</p>

　　例３<p class="l-fuki Chield">僕は友達とサッカーしました。</p>

分かりますでしょうか？

吹き出しを右にしたい時は”ｒ”（小文字のアール）、吹き出しを左にしたいときは”ｌ”（小文字のエル）で調整しています。

男、女、子供の画像をそれぞれリンクさせる為に、”Man”、”Lady”、”Chield”を使いわけています。もちろん画像のアドレスもそれぞれ違います。なお、この記事では”Man”、”Lady”、”Chield”を使用しましたが、好きなワードで良いです。

こんな感じになっていればOKです。

ではでは。

 

無料写真・イラスト素材で簡単アイキャッチ画像！

読みやすい記事、人を惹きつける記事、人気の記事には写真やイラストが載っていますが、無料で簡単にダウンロード出来る素材屋さんの紹介です。アイキャッチにも使えますよ！

こんにちは。超初心者、はてなブログ専門、無料、簡単、５分で出来るをコンセプトにしたBlogカスタマイズ！です。

オリジナルのヘッダー画像の作成の記事でも紹介させて頂きましたが、改めて紹介します。

  合わせて読みたい 

・オリジナルのヘッダー画像の作成

おすすめ１：Ｃａｎｖａ

〇良い点

とにかくオシャレな写真やイラスト、フォントが沢山あり、テンプレートも豊富なので、少しのカスタマイズでオリジナルデザインが簡単にすぐ出来ちゃいます。
本記事の写真もＣａｎｖａの無料版から持ってきています。
テンプレートを元にオリジナルデザイン（写真とイラストを合体させたり、色を変えたり、文字の位置や大きさ変えたり等々）を作りたい方には本当におすすめです。

〇悪い点

最初のみ、多少使い方に迷う事があるかもしれませんが、二回目からは直感で使えるようになると思います。
無料版の場合、利用できない写真やイラストがあります。ただ、無料版でもかなりの両を使えるので大きな問題は無いと思います。

こんな感じです！

とにかく自分でデザインしたい！という人にはおすすめです。

【Canva】はこちら >>>

おすすめ２：写真ＡＣ. イラストＡＣ

〇良い点

こちらも無料で写真やイラストが沢山あります。手軽に好みの写真やイラストを探せてダウンロードできます。始めての場合、こちらの方が簡単にできるかもしれません。加工や商用利用も可！

〇悪い点

Ｃａｎｖａと異なる点として、こちらはどちらかと言うと素材屋さん。テンプレートもあるのでサイト上でカスタムをする事は出来ますが、テンプレートの質も量もＣａｎｖａには負けます。
無料版の場合、利用できない写真やイラストがあったり、広告を見ないといけなかったり、一日５回までしかキーワード検索出来ない等の縛りがあります。

こんな感じ ↓

とりあえず簡単に写真やイラストを入手したい人にはおすすめです！

【イラストAC】はこちら >>>

【写真AC】はこちら >>>

私自身はこの３つをケースバイケースで使い分けて使用しています。
皆さんも試してみて下さい。

なお、画像のサイズですが公式では明確にされていませんが、16：9の比率になるように合わせている方が多いです。ピクセルでいうと横を650pxや700px程度にして、縦は16：9になるよう自動で合わせて下さい。

それとアイキャッチ画像は必ず設定するようにしましょう。きっとその方がアクセス数増えますよ！

画像の読み込みは簡単です。
「記事を書く」モードから右上にある「写真を投稿」から画像を選び、右下またはポップアップされた画面の「選択した写真を貼り付け」をクリック。

簡単ですよね！

本記事はおすすめの無料画像・イラストサイトのご紹介と、アイキャッチ画像のお願いでした。

ではでは。

プロフにある「このブログについて」を非表示にする方法

行間の調整は思い通りに出来ていますか？改行、段落は上手く使い分けられていますか？

こんにちは。超初心者、はてなブログ専門、無料、簡単、５分で出来るをコンセプトにしたBlogカスタマイズ！です。

ブログもミニマムに、シンプルにカスタマイズしてたいですね。私はまだまだ道半ばですが... はてなブログではデフォルトでプロフィール欄に「このブログについて」が入っていますが、簡単に消せる（非表示）のでスッキリさせたい方は試して下さい。

まず結論から。↓ のように出来ます。

アドセンス広告を貼るようにした時や、ミニマリストの方、全体的にとてもグチャグチャしているのは嫌ですよね。

少しでもスッキリしたいと。

何か消したいと。

「Less is more」だと。

コイツは意味ありません。

機能は「名前とID」のところと同じです。
クリックして貰えれば分かりますが、同じように自分のプロフに飛ぶだけです。

こんな近いところに同じボタン必要ないのではと。多分プロフを見たい人は名前のところをクリックすると思うので消すしてしまいましょう。
やり方はとっても簡単。↓ のコードをCSSへコピペするだけです。

/*プロフ内の「このブログについて」を非表示*/
div.profile-about {
  display: none;
}

ダッシュボードに行く

＞＞デザインをクリック

　＞＞スパナマークをクリック

　　＞＞｛｝デザインCSSを選択

　　　＞＞上のコードを貼り付け

　　　　＞＞保存

注意：元々入っているコードは絶対に変更・削除しないで下さい！！

以上です！

簡単！

スッキリ、シンプルにしたい方、ぜひどうぞ！

ではでは。

エンターキーを上手く使った改行、行間の調整のやり方

皆さん、行間の調整は思い通りに出来ていますか？改行、段落は上手く使い分けられていますか？

こんにちは。超初心者、はてなブログ専門、無料、簡単、５分で出来るをコンセプトにしたBlogカスタマイズ！です。

はてなブログの記事作成時の改行のやり方について。
結論から言いますと、大切な事はたった二つ！

　１．”Enter”の改行と”Shift+Enter”での改行を使い分ける

　２．こまめ（、）には改行しない方が良い

皆さん、どう改行していますか？

　　一文（。）毎に改行？

　　こまめ（、）毎に改行？

　　一テーマ毎に改行？

　　感覚で改行？

　　殆ど改行しない？

　　気にしない？

改行をするタイミングの好みは、書き手も、読み手も人それぞれだと思います。でも、書き手として自分の期待した通りの”改行した状態”が読み手に見えていて欲しいですよね？だって自分の記事なのに思った通りに表示されていなく、さらにそれが読み手に取っても見難い状態だったら、何か納得いかないですよね！？

大層な事を言っていますが、注意する点は上記二つだけ。
では、具体的に見ていきましょう。

”Enter” と ”Shift+Enter” 改行の違い

一目瞭然、説明不要ですね！
好みに合わせて使い分けしましょう。

句読点でこまめに改行しない方が良い理由

どうでしょう？　PCでの見た目はどれも好み次第ですが、可笑しくないと思います。でもスマホの見た目はどうでしょう？　”Enter”のみで特に”、”で改行した時には行間に違和感ありますよね。”Shift+Enter"を使ってもしっくりきません。

ＰＣで作業していると、いちいちスマホの見た目をチェックするのは面倒だと思います。なので私はあまり改行しない方が良いのかなぁという気がしています。

以上です。

ではでは。

デザインテーマの設定

超初心者、はてなブログ専門、無料、簡単、５分で出来るをコンセプトにしたBlogカスタマイズ！です。

本記事は、はてなブログのテーマデザインの変更方法について。

ご存知でしょうか？はてなブログのテーマデザインには公式以外にも多々あります。しかも公式よりも優れていて全て無料です。公式を使っている方はぜひ一度他のテーマを見にいきましょう。必ずお気に入りが見つかると思います。

また、暫く使い続けた後に気分を変える為に変更する事もいつでも出来ます。

では、ほんの一例をいくつか。

どうでしょうか。ワクワクしませんか！？

それではやり方ですが。

＞＞まずダッシュボードへ

　＞＞そして「デザイン」をクリック

　　＞＞そして右にあるバーを一番下へ移動

　　　＞＞そして「テーマストアでテーマを探す」をクリック

 公式テーマストア

テーマ ストア - はてなブログ

そうすると別画面に切り替わります。

＞＞お好きなデザインを選んで下さい

　＞＞そのデザインの詳細に画面が切り替わるので、「プレビューしてインストール」をクリック

　　＞＞画面が切り替わり、自分のブログがどんな感じになるかプレビューでき、これで決定と思ったら「このテーマをインストール」をクリック

以上です！

簡単ですね！

最後の「このテーマをインストール」を押すまではプレビューなので、ちょっと違うかなぁと思えば前に戻って他のデザインとも比較して下さい。ぜひ試して下さい。

なお、モバイル（スマホ等）では専用のデザインテーマで表示され、モバイル向けのデザインテーマはありません。

そのため、デザインテーマをインストールした後で「レスポンシブデザイン」を有効にして下さい。そうするとＰＣで見た時とモバイルで見た時で同じように（同じデザインテーマ）見えるようになります。

ただし、この「レスポンシブデザイン」に対応していないデザインテーマもある為、「レスポンシブデザイン」に対応しているデザインテーマを選ぶ事をおすすめします。

レスポンシブデザインの設定は下記になります。

まずダッシュボードにいきます。

＞＞「デザイン」をクリック

　＞＞「スマホ」マークをクリック

　　＞＞「詳細設定」をクリック

　　　＞＞レスポンシブデザインに「チェック✔」

　　　　＞＞「変更を保存する」をクリック

これでモバイルもＰＣと同じように見えるはずです。スマホやタブレットでチェックしてみて下さい。

なお、今後色々カスタムしていきますが、レスポンシブデザインに「チェック✔」が入っていれば、ＰＣ向けとモバイル向け、両方をカスタムする必要はなくなります。

ＰＣの方をカスタムしていけば、自動でモバイル側にも反映されます。

トップ画面の中での記事の表示方法についてはこちらの記事をどうぞ。

 合せて読みたい 

一覧表示／カード型デザインの設定 - Blogカスタマイズ！

ではでは。

一覧表示／カード型デザインの設定

超初心者、はてなブログ専門、無料、簡単、５分で出来るをコンセプトにしたBlogカスタマイズ！です。

本記事は、はてなブログのトップ画面上で記事をどう表示させるかについてです。はてなブログには大きく分けて３タイプあります。

・全文形式
・一覧形式
・カード型

最新記事が表示されるというのがデフォルトの設定（全文形式）になっていますが、一覧表示、またはカード型にする事も可能です。どう見せたいかはあなた次第だと思いますが、私個人はなんとなくカード型が好きです。理由は沢山記事を完成させた達成感が味わえる事と、ブログというより情報サイトのようなイメージになりそちらの方が好みだからです。特に本ブログでは、アイキャッチ画像で説明分が無くても分かるようにしているつもりな為、カード型が必須だと考えました。好みの問題ですね！

一覧表示もカード型表示も設定は非常に簡単で、一つだけONにすれば良いです。ただし、デザインテーマを決める時に予め一覧表示かカード型かどちらかを決めておいた方が楽に進められます。基本的にはデザインテーマ一つに対して、一覧表示もカード型表示かのどちらかとお考え下さい。一覧表示をカード型にするにはCSSにカード型のコードを入れれば出来ますが、長文になってしまう為、別途記事にします。
なお全文形式（最新記事を表示する）はどのデザインテーマでも出来ます。

それでは設定方法を。

「ダッシュボード」

＞＞設定

　＞＞詳細設定

　　＞＞「全文形式」から「一覧形式」に変更

　　　＞＞トップ画面に表示させる記事数を選ぶ。（多くするとページ読み込み速度に懸念が出ます）

そして一番下までスクロールして「変更する」ボタンをクリック。

設定は以上です。

冒頭で説明した通り、一覧かカード型かはデザインテーマ次第となります。

一度デザインテーマや表示形式を設定しても後から修正する事は可能です。ですが、色々とカスタムした後にデザインテーマを変えると、ほぼ一からカスタマイズのやり直しが必要になる可能性が高いです。

なので、出来ればなるべく早目にデザインと表示形式を決定したいですね。

デザインテーマの設定についてはこちらの記事をどうぞ。

 合せて読みたい 

デザインテーマの設定 - Blogカスタマイズ！

ではでは。

オリジナルのヘッダー画像作成と設定方法

トップ画面にもっとオリジナリティを出しませんか？ヘッダーに設定する為のオリジナル画像の作成方法と設定方法についての記事です。

こんにちは。超初心者、はてなブログ専門、無料、簡単、５分で出来るをコンセプトにしたBlogカスタマイズ！です。

色々無料で作れるサイトがあるのですが、いくつか試した中で一番使いやすかった「Canva Pro」をご紹介します。なお本ブログのヘッダー画像もこちらで作成しました。

試しに作ってみましたが

こんなのとか・・・

こんなのとか・・・

こんなの・・・

センスが無い私の例だとアレですが...

テンプレートも沢山あるし、なにより簡単に直ぐ作れるのは便利です。

それでは作り方について

まずはトップ画面から、右上にある「デザインを作成」をクリック

そして「カスタムサイズ」を選び、サイズ（とりあえず私は500ｘ180にしましたが、公式推奨サイズは横1000px 縦200pxです）を記入し、「新しいデザインを作成」をクリック。

こんな感じに作成画面に移り、左側に表示されている項目からお好きなモノを選んでオリジナルのデザインを作って下さい。

こんな感じに進めてきますが、直感で使い方が分かるので操作は楽です。

色々試して貰えれば使い方は分かってくると思いますが、一点だけアドバイスを。
日本語に対応しているフォントが見つからない時には、「Text」タグを選択してから検索窓に「ひらがな」と入力すれば、日本語対応出来ているフォントが出て来ます。

どうでしょう？出来ましたでしょうか？

出来たら保存をする作業に移ります。

画面右上にある「Download」をクリックして保存形式（私はpng.を選びましたがJpg.で十分かと）を選んで、また「Download」をクリック。
ダウンロードが終わったら、画面の左下に現れるアイコンをクリック。

そしたら「Canva Pro」から自動で離れて、自分のＰＣ上で画像が表示されます。保存するには右上の「・・・」をクリックして「新しく名前を付けて保存」でデスクトップ等へ保存して下さい。（保存方法はＰＣによって異なる場合があります）

以上です！

簡単ですよね？

デザインに拘らなければ３分で出来るかと。

やテンプレートはありますが、それでも十分満足できるデザインになるのではないでしょうか。

Canvaは自分で色々カスタム出来るのがおすすめポイントです。

【Canva】はこちら >>>

Canva以外にもおすすめがあり、イラストACと写真ACですが、こちらの方は素材屋さんでダウンロードした後にエクセルやペイント等で自分でカスタマイズをする必要がありますが、あまりカスタムする必要が無いようなアイキャッチ画像ならこっちの方が簡単かもしれません。

【イラストAC】はこちら >>>

【写真AC】はこちら >>>

なお、私はCanvaもイラストACも写真ACもケースバイケースで使い分けてます。どれも無料で使用出来きます。

愛着のあるブログを作りましょう！

このヘッダー画像はあたなのブログの顔になります。出来れば早目に付くって読者の方に覚えて貰えるといいですね！

なお、ヘッダー画像でもアイキャッチ画像でも、画像作成後に、画像サイズや容量を必ずチェックして下さいね。大き過ぎたり、重すぎると後々読み込みスピードに影響がでます。Canvaでの作成後にサイズと容量を変更するのは「ペイント」等のアプリでも出来ますので。

画像が準備出来たら、実際に自分のサイトに貼り付けましょう。やり方はとっても簡単です。

「ダッシュボード」にいき

＞＞「デザイン」をクリック

　＞＞「スパナマーク」をクリック

　　＞＞「ヘッダ」をクリック

　　　＞＞「Choose File」で作った画像を選択

　　　　＞＞最後に「変更を保存する」

以上です。

ではでは～

HTMLカラーコード

超初心者、はてなブログ専門、無料、簡単、５分で出来るをコンセプトにしたBlogカスタマイズ！です。

本記事は、色々な場面で必要になってくるHTMLカラーコードについてです。ブログのトップ画面等に使われるテーマカラー、記事本文で使う文字や装飾のカラーはこのカラーコードで設定する必要があります。

ちなみに本ブログのテーマカラーは#03989Eという記号で表せます。

皆さんもぜひ自分のブログのテーマカラーを作って頂ければと思います。

カラーコードは下の原色大辞典様から探してみて下さい。

ではでは。