n-Relief’s blog

* 夫婦で営む 地域サロンの美容師ブログです *

超!初歩的なブログのカスタマイズ

皆さんこんにちは。松下です。

前回の記事でブログを引っ越した

お知らせをしました✩︎⡱

日頃 様々なインターネットサイトで

調べ物をしたり、

色々な方が書いているブログを拝見していると

   * 文章の説明やまとめ方

   * 画面のデザイン、配置 など

どのサイトも<読みやすい工夫>を

されていて、改めて細かなところに

関心が向くようになり、

「私もこんな風に読み易いブログに

したい!」と、PC作業は苦手ですが

ドッキドキしながらカスタムに

トライしてみました!

 

※ 初歩すぎる変更で「カスタム」と言って良いものか?わかりませんが…(´-_-。`)

 

 まずは独自ドメインの取得!

▫️私は はてなと提携している

【お名前.com】で手続きしました。

いつか取得したい!と思いつつも、

やり方が億劫そうで手が出ませんでした。

でも、やらなければ取得出来ん!

早速 調べながら手続きしました。

 

お名前.com「独自ドメイン取得方法」と「はてなブログへの反映」方法を説明するよ! | LIFE LOGS

↑↑こちらのサイトに詳しい手順や

注意事項がかかれており、

スムーズに取得できました!

検索にヒットしない等デメリットも

あるそうですが、専用のドメイン

持てると愛着が自然と湧いてきます!

記事を引き立てる〈見出し〉!

▫️つぎにトライしたのは〈見出し〉です。

ブログを書く際に『見出し』という

項目があるのは知っていても、

以前は「何の為に使うのか?」

すら解っていませんでした ( ̄▽︎ ̄;)

でも、今は大丈夫!w

見出しデザインがあるだけで記事全体の

メリハリができるし、

文章のまとまりが良くなると思います!

 

【CSSコピペ】シンプル系でおしゃれな見出しデザインを26連発! - オークニズム

↑↑こちらのサイト内デザインをコピペ

しました。

シンプルなデザインが記事全体を

読みやすくしてくれます!おススメ!

 

コピペする際の注意点も丁寧に書かれていたので、とてもわかりやすいです。 

 

 ーはてなブログの見出し仕様ー

  ・h3..... 大見出し

     ・h4..... 中見出し

     ・h5..... 小見出し

 

1. <ダッシュボード>をクリック

2. <デザイン>をクリック

3. <カスタム>をクリック(スパナマーク)

4. <デザインCSS>をクリック

 

↓↓コピペの前に 既存のcss をリセット↓↓ 

   

   /* 既存見出しのリセット*/

   h2,

   h2:before,

   h2:after {

   content: none;

   background: none;

   background-color: none;

   border: none;

   border-radius: 0;

   }

 

※ 冒頭のh2の前に .entry-content を付ける

※ h2→ h3h4に変換 → コードをコピペ

 

その他 変更したところ

 

ブログデザイン→ 公式テーマ'Reach '

… 公式以外のテーマのフルカスタムは今の自分だとハードルが高そうなので、まずは公式テーマで設定しました。

 

文字サイズの変更 (16px)

… 編集後、確認するとpcとスマホの表示で改行が変なところでされていたり、行間も広すぎたり狭すぎたりしたので、後々修正しましたー。

 

カテゴリーの「階層化」

→ 既存のままでも良いかと思いましたが、

スッキリ見せたかったので、階層化に

チャレンジ!

 

カテゴリ階層化【はてなブログユーザー導入必須】|空のきまぐれ

 

【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました - 小さな星がほらひとつ

↑↑こちらのサイトを参考にさせていただきました。

 

私の使用しているテーマの色がグリーンなので、カテゴリーの部分だけ色がブラックですが、とりあえず良しとしました (^^;;

「 ▶︎ 」のところをクリックすると枝分かれした項目が出ます。

 

ちょっと困ったところ

 

▫️編集画面で『 記事埋め込み 』を試みたら、URL又はタイトル表示になってしまい、

色んな方のブログで見かける”カード”タイプの埋め込みができず、困りました。

調べたところ、URLだけでなく、どの記事かを表す「entry」と末尾に「 :embed 」を付け加えるとカードタイプの表示になる

ということがわかりました!

( 知らなかったのは私だけ??)

 

 例)「 https://www.〇〇〇〇ー〇〇〇/entry/〇〇○○〇〇:embed

スマホ編集の時は末尾「:embed 」の後に「:title 」を付けると同様に表示されます。

 

カードタイプのリンク表示はタイトルだけよりも目にとまり、合わせて読みやすいですね。

記事の書き方でURL表示と使い分しよう!

 

おわりに

▫️感想

初歩的なカスタムでしたが

何も変更しなかった頃の記事よりも

パッと見たときの印象や区切りができて

記事編集が少しステップアップできたかな?

 

特に見出し変更の効果は絶大!

これは絶対変更した方が良いです!

 

はてなブログの使い方、カスタムに関して

詳しい方 プロの方々が たくさん情報を

公開して下さっていて、本当に助かりました!

パソコンに不慣れな自分でも

変えたいところがちゃんと変更できました。

cssやHTMLは全く知らない分野でしたが、

今回のカスタムを通じて もう少し知識を増やしたいと思います。。。

 

そして、一番大切なのは「内容」ですが、

『何を』

『どんな風に』

『どう伝えるのか?』

を表すには〈画面表示の見た目〉も

大切なんだな、と改めて勉強になりました。

 

今回 苦戦してどうしても出来なかったのが、「目次」のカスタム。

エラーになっているのは分かったけど、その先の直し方が 私には難しくて諦めました。

これは今後やり方を勉強します!

(いつ出来上がるなかな?)

 

▫️もうひとつ やってみたいこと

カスタムの続きとして、Amazonのページへ

飛べるようにしたいのです。

(URL表示でも出来るのでしょうけど)

なぜか?

お店やディーラーさんでも取り扱いの

無い商品があって、でも 「これを使って

もらえばもっと髪の毛がよくなるのにな…」

と思う物もあるんです。(主にヘアケアグッズ)

お客様に口頭で説明もしますが、ブログからAmazonの商品ページへ飛んでもらえば

どんな商品で どんな風に役立つのかが

分かりやすいし、良さそうと思ってもらえれば、その場で購入もできるからです。

Amazonは多くの方が利用している

ショッピングサイトですし!

↑ こちらも出来るまでに時間がかかりそうですが、もっとブログ編集に慣れてカスタムも

アイコンなどを加えたりしたいな、と思案しています。

 

▫️文章力をつけたい!

 

f:id:n-Relief:20190413000405j:image 

≪ ブログ運営 × 集客 × マネタイズ ≫

著者 : 菅谷 伸

シンプルな記事画面、読みやすくお役に立てる内容を心掛け 良いブログにしたい!

そして 長く続ける!!と思うけど、

実際は 挫ける時もあるブログ。

これを機に自分のブログを見直したかったので、改善点が詳しく書かれているこちらの本を購入しました。

ヒントがたくさん!

熟読せねば!(まだ読んでいる途中)

 

今回は美容と全く関係ない話でしたが、(せっかく覚えたブログ変更内容をどうしても書きたかったんです〜)

美容だけに限らず 色々な話題もここで書き留めたいと思いますので、読んで頂けたら嬉しいです!

 

 

以上、< 超!初歩的なカスタム > まとめでした! 

 

ご訪問 ありがとうございました。

 

■︎□︎■︎□︎■︎□︎■︎□︎■︎□︎■︎□︎■︎□︎■︎□︎■︎□︎■︎

 

〒232-0006

横浜市南区南太田 1-4-23 1F

 

< お問い合わせ >

045-315-6624

※ ご予約優先制

 

< 定休日 >

毎週 火曜日

第2 第4 水曜日

f:id:n-Relief:20190413002332j:image