サルガオが止まらない。

猿顔な僕が、好きな事を書いていく雑記ブログ。

ブログカスタマイズ面白過ぎ!カスタムとタイトル画像の作り方紹介!

f:id:monkey-pt-28:20170928182344p:plain

ども。

サルガオです。

はてなブロガーの皆さん。

突然ですが、カスタムしてますか?

はてなブログの魅力の1つのでもブログのカスタマイズ。

今日は僕がしているカスタマイズを紹介します。

僕が作ったわけでも何でもないんですけどね。

人様が作られたものを使用している、ただそれだけである。

では、いくぞ!

 

スポンサーリンク

 

カスタマイズしてる?

カスタマイズの方法

はてなブログでは、ダッシュボード⇒デザインで3つの事が変えられます。

1つ目はデザインテーマ。

これは、ブログ全体のデザインテーマをどの様にするかというもの。

2つ目はパソコンで見た時に表示されるブログのカスタマイズ。

これは、パソコン表示時のデザイン等を自由に変更できるというもの。

3つ目は、スマートフォンで見た時に表示されるブログのカスタマイズ。

この3を変えていくことで、ブログの見た目などを変えることができます。

 

デザインテーマの選定方法と僕の選んだテーマ

まず、ダッシュボードへ。

はてなブログ ダッシュボード

「デザイン」を選択。

 

はてなブログ ダッシュボード

左側のパレットみたいな絵を選択。これが「デザインテーマ」。

下にずらっと公式テーマが並んでいる。

この中から気に入った物を選んでいく。

公式テーマでも十分素晴らしい物は多い。

が、僕は公式テーマではない。

ずーっと下にスクロールしていくと、「テーマストアでテーマを探す」が出てくるので、クリック。

下の図である。↓

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

これね。

 

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

そしたら、テーマストアに飛びます。

右側に「公式テーマ」があるが、左から2番目の「人気順」を選択。

すると、公式以外のテーマも表示される。

公式以外のテーマだからといって、やばいもんかというと、そんなこたぁない。

むしろ、公式の物よりも魅力的なデザインが豊富。

 

はてなブログ テーマ

この中から、この記事作成中人気ランキング1位だったものがある。

「Brooklyn」である。

僕はこのテーマを使用している。

シンプルであり、後に述べるカスタマイズがしやすいのである。

今回はとりあえず、これでもう少し説明を。

このテーマをクリック。

 

はてなブログ ブルックリン テーマ

このテーマが大きく表示され、右側に「プレビューしてインストール」と表示されているので、これをクリック。

 

はてなブログ テーマ インストール

すると、「適用するブログを選択」と表示され、適用できるブログ名も表示される。

適用したいブログをクリック。

 

はてなブログ テーマ プレビュー

そうすると、テーマを適用したプレビュー画面が表示される。

これで気に入れば、「このテーマをインストール」をクリックでインストール完了となる。

 

これで、あなたのブログも、マジ卍あげぽよチョベリグオシャンティーブログに早変わりするのだ!

マジ卍!マジ卍!

すみません、使ってみたかっただけなんです。

ちなみに、このテーマを作成したすごすぎる方のブログはこちら。

シャレオツなブログでございます。

www.notitle-weblog.com

運営者はシロマ様でございます。

本当大感謝なのです。

参考にさせて頂いたページはこちら。

www.notitle-weblog.com

ありがたや・・・ 

 

パソコンでの表示

続いて、実際にブログのカスタマイズをしていきます。

テーマ変更で全体の見た目や設定を変えて、次にカスタマイズって感じです。

このテーマに変えることで、カスタマイズもしやすいようです。

カスタマイズのポイントとしては、HTMLコード、CSSコードというものを使用するという点です。

このコードを打ち込む(コピペ)ことで自由自在にブログを変えていくことができるのです。

なんやそれー!聞いたことないでー!知らんがなー!

って方も大丈夫!

だって僕も、福山雅治演じるガリレオの湯川先生ぐらい「さっぱりわからない」ままですから。

んでも、コードをコピペすれば、あれこれいじれるんです。

もちろん、シロマ様のような賢者のおかげだと言うことを忘れずにね。

 

さて、やってみましょう。

カスタマイズ実践開始

 

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

先ほどの「デザイン」の画面でスパナマークの「カスタマイズ」を選択。

すると、上記の様な画面になります。

青枠の背景画像、背景色も自由に変えられますが、僕はここは変えていません。

なるべく見やすい背景にしたいので、初期設定のままです。

他の、「ヘッダ」~「デザインCSS」までをコードを打ち込んだりしていきます。

 

ヘッダ

タイトル画像を選ぶもしくは作る

まず、タイトル画像です。

自分の撮った画像や、描いた絵なんかでも良いです。

ここは、僕作りました。

何で作ったかというと、これ。

picky-pics.com

このサイト上で画像を作って、保存できるってもんです。

もちろん、無料。

そして直感的に操作でき、簡単なんです。

どうやって作るかというと、まず、アカウント登録します。

はてなブログ タイトル画像

僕はTwitterで登録しています。

んで、登録したらこんなページに。

はてなブログ タイトル画像

>をクリックして以下の素材を表示させる。

はてなブログ タイトル画像

この中から、「facebookカバー」を選択。

はてなブログのタイトル画像の大きさに最もぴったりのサイズだからです。

んで、選択したら、次の画面に移ります。

はてなブログ タイトル画像

僕はシンプルな物を作りたかったので白紙を選択しました。

ここらはお好みでどうぞ。

「白紙」を選択して、「OK」をクリック。

はてなブログ タイトル画像

こんな画面になります。

右側に、「レイアウト」、「素材」、「文字」、「写真を追加」って項目があります。

「レイアウト」では以下の様な感じで様々なレイアウトが選択できます。

はてなブログ タイトル画像

上のは1フレーム。

はてなブログ タイトル画像 作成

これは2フレームです。

んで、一回白紙に戻しまして、次は「素材」をいじってみましょう。

 

はてなブログ タイトル画像 作る

赤枠の「素材」をクリックし、青枠の「背景」の色を黒にしてみました。

色々な色が選べます。

また、緑枠内の「図形」を選ぶと下の画像の右側のように様々な選択肢が出てきます。

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

図形を選んだ時点で「円」と「吹き出し」が自動で出てきました。

一旦白紙に戻して、次はテキストの追加を。

はてなブログ タイトル画像 テキスト赤枠の「文字」を選ぶと、「テキスト」が6つほど出てくるので、一番上の「テキスト」をドラッグして白紙の上へ。

はてなブログ タイトル画像 シンプル

んでドラッグして持ってきた「テキスト」(点線で囲まれてる奴)をダブルクリックで編集できます。

はてなブログ タイトル画像 作成

編集。

んで次。

はてなブログ タイトル画像 フォント

フォントや文字サイズ、文字色、位置など変更。

いよいよ画像として保存します。

はてなブログ タイトル画像 作り方

赤い矢印の下の「できたデザインを書き出す」をクリック。

はてなブログ タイトル画像

真ん中の「画像に書き出し」を選んだら画像ファイル(PNG)として保存されます。

これで完成!

 

タイトル画像を選択

できあがったら画像を選択。

はてなブログ タイトル画像 無料

「ファイルを選択」

はてなブログ タイトル画像

位置を調整し、「適用」で適用される。

が、1つ注意。

以下の、「変更を保存する」を選んで保存していないと変更しても反映されないので要注意。

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

注意してね。

 

タイトル下・記事・フッタ・デザインCSS

これらをクリックすると空欄があるので、そこにはHTMLコードを入力します。

NO TITLE様やカスタマイズを紹介しているブログ・サイトからコピペさせてもらうと良いです。

※くれぐれも、ブログカスタマイズの前にバックアップを取っておいたり、コードを変更するときにはテキストドキュメントなどに保存しておきましょう!

※更に言えば、コピペしたコードはどこからコピペしたのか、コピペしたらどういったカスタマイズになるのかもメモしておくと後でわかりやすいです!

 

サイドバー

ここも色々編集できます。

f:id:monkはてなブログ サイドバー カスタマイズ

「サイドバー」クリックで、色々なモジュールが出ます。

「モジュールを追加」で追加できます。

はてなブログ モジュール

プロフィール欄とかもやりたいように変更できます。

 

※サイドバー含め、ちょこちょこ「変更を保存する」はしておきましょう!

 

スマホ表示

さぁ、最後にスマホ表示です。

僕がコピペさせて頂いたのはこちら!

hitsuzi.hatenablog.com

こどみすさんのブログ、「ひつじの雑記帳」でございます。

その中でもこちらの記事を参考にさせて頂きました。

hitsuzi.hatenablog.com

フラットなスマホデザインで、シャレオツなのである。

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

「デザイン」で「スマホ」を選択。

「アクセントカラー」~「詳細設定」まであります。

アクセントカラー

ここでは、文字などの色が変えられます。

どういうことかというと、以下の様な感じ。

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

オレンジをアクセントカラーにしているが、実際にブログで表示される内容で、赤枠の部分などがオレンジ色で表示されるのだ。

 

ヘッダ

ブログアイコン、タイトル画像を決めます。パソコン版と一緒。

タイトル下も、コードのコピペでOK!

ちなみに、コードを入力する空欄の上にこんな案内がある。

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

PC表示とスマホ表示を別にしたいなら、「スマートフォン用にHTMLを設定する」を選んでおこう。

記事

記事上・記事下コピペでOK!

 

フッタ

これははてなPROの方限定で変更ができるようになっている。

 

詳細設定

スマホも、パソコンの表示も一緒でいいやって方は、「詳細設定」でレスポンシブデザインにしておこう。

はてなブログ スマホ レスポンシブ

 

まとめ

・はてなブログはカスタマイズができる

・カスタマイズちょー楽しい

・素晴らしい方々からコードをコピペさせて頂いてカスタマイズする

・僕は、PC用は必見!はてなブログのカスタマイズを一気に紹介する - NO TITLE

、スマホ用は【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

・色々注意が必要!

 

以上でございます。

カスタマイズ、してみよう!

といっても、本当多くの方々のおかげでカスタマイズができる事に感謝!

皆さん、ありがとうございます!

今日はここらで!

これも参考にしてみてね。ぜひとも。zehitomo!

www.monkey-pt.com

www.monkey-pt.com

 

それでは、さよならいおーん。

 

スポンサーリンク