金と女とアラサーと

多趣味なまつしょうが、借金生活から逃れるために日々を少しだけ便利にしてくれるものや楽しくさせてくれるものを紹介します。

金と女とアラサーと

まつしょうのブログ~記事内のデザインを整える~

 

<2019/2/27更新>

はてなブログで新規ブログを作成する

作成の流れを以下に記載していきます。

今回は内容うんぬんというより、作成する上でのカスタムや見栄えについて書いていきます。

※これはテスト記事です。

 

ブログのテーマを決める

テーマの設定方法は下記のhiroさんがアップロードしているYoutube動画を参照してください。


【最新×簡単】10分でできるはてなブログカスタマイズ動画

グローバルナビを挿入する

グローバルナビとは、そもそも何かと言うと・・・

グローバルナビゲーションとは、Webサイトの全てのページに共通して設置された案内リンクを指します。 会社概要やサービス紹介などWebサイト内の主要なページに対してリンクされ、Webサイト内のショートカット機能として活用することが一般的です。

別名ヘッダーメニューとも呼ばれますがこれがついていると初めて見に来た人でもブログの中を回遊することが簡単になります。

こちらについても、設定方法は上記のhiroさんのYoutubeから確認することができます。

サイドバーにプロフィールを入れる

そこまでできたら、今度はプロフィールを充実させましょう。(途中)

Twitterアカウントをリンクさせる

Twitterリンクは簡単です。下記の通り実施してください(途中)

問い合わせフォームを埋め込む

Googleフォームを使って、ブログと連携させましょう。(途中)

プライバシーポリシーを設置する

Google AdSenseAmazon アソシエイトなどを利用する場合、個人のcookie情報やユーザの閲覧履歴を元にした広告を表示することがあるため、その旨をサイト内で説明する必要があります。また、このブログで掲載している広告が原因のトラブルが発生した際に、当ブログが責任を負うことのないよう免責事項についても事前に記載しておかなければなりません。

設置方法は、以下のサイトを参考にさせて頂きました!

【はてなブログ】プライバシーポリシーの掲載方法 - 理系男子のIoTライフ

ブログのヘッダータイトルを設定する

ブログの一番上にあるこれです。

f:id:mattunkeiba:20181230152758j:plain

これは、普通に設定しようとすると、上下左右40ピクセルくらい謎の白い空白ができてしまいます。

そこで、こちらのサイトのHTMLソースを参考に、設定しています。

tukinasikotonoha.hatenablog.com

 

ブログタイトルを変更したことをGoogleに伝える

www.hitoritrip.net

 

記事を書く

記事を書くにしても、ただ普通に文字打ち込んでくだけだとパッと見たときに読もうと思われなくなってしまいます。人は、無意識のうちに直感でその文章を読むか読まないか脳で決定しています。読んでもらえる記事を「効率的に」作成するには、以下のテクニックの使用が不可欠です。

 

1.Twitterのツイートを記事に埋め込む

埋め込みしたいツイートの右上にある”∨”をクリックすると「ツイートをサイトに埋め込む」というボタンがあるのでそこをクリック。

するとHTML言語で書かれた埋め込み用URLが出てくるのでそれをコピー。

記事編集時に「HTML編集」にタブを変更しそのままURLを<p>と<p>の間にコピーし、更新するだけです。

すると以下のようにツイートが表示されます。

 (注)引用は私の好きなブロガー、しゅうへいさんのツイートです。普段言えないこともブログで表現できるようになるって、素敵ですよね。

 

2.書いたものに囲みをつける 

こちらについては、以下のブログを参考にさせていただきました。

saruwakakun.com

こちらからなら自分の好きな囲みを30種類から選択して挿入することができます。

まずは、はてなブログの場合、[デザイン][レンチのアイコン][デザインCSS]と遷移し、[フッタ]に<style></style>と入力、この中に使いたい囲みデザインのCSSを貼付けます。

例)

POINT

このようにHTML言語を挿入するだけで、様々な枠を表示させることが可能になります。

 

 

 

 3.LINEのトークのような形でキャラクターにしゃべらせる

これについては、キャラクターの画像だけ用意しておいてもらえれば、以下のサイトのコードコピペで大丈夫です。

gcbgarden.com

 

さて、私のブログではまっつんと飼い猫のミーコにしゃべらせようと考えています。

現状では、まっつんの自演になってしまいますが、左右からの吹き出しを以下に入れてみます。

"まっつん″
まっつん

このブログを開設したのは僕なんですよ!

"みーこ″
みーこ

ひたすらに毒舌を吐き散らす猫が僕だよ

 

4.記事のアイキャッチ画像を作る

記事を一覧で表示したとき、SNSで記事を拡散したときに真っ先に表示されるのが、このアイキャッチ画像。

出来るだけ記事の内容にリンクしたものを自分で作成したいものです。

沢山のテンプレデザインの中からチョイスできて、素人にも操作が簡単で、無料。

そんなものを探していたら、以下のページに出会いました。

まだ私は綺麗に貼れてませんが、そこも練習で何とかなると思ってます!

 

5.文中で強調したい箇所にマーカー線を引く

これは記事が長文になればなるほど生きてくる機能だと思っています。

maroharu16.hatenablog.com

 

イメージとしてはこんな感じでオレンジに強調されます。 

 

おわりに

この記事は、私のブログで何か更新を行った際にリアルタイムで更新していきたいと思います。

つまり、この記事を見れば、このブログの構成が丸わかりという風にしたいということです!

こんな記事を書いた理由は、色んなブロガーさんのサイトを訪れる中で「このテーマかっこいいな」とか「このブログ読みやすいな」と思っても、聞かない限り”どのようにカスタマイズしたのか”を知ることができない・・・

※直接聞けばいいじゃんとか言うのやめてあげてくださいね笑

ということで、私のブログの軌跡みたいなものをここに残していこうかなと思ったわけです。

 

また初心者で役に立つ情報は少ないですが、ここからどんどんアップデートしていければと思いますのでこれからもよろしくお願いします。