ドラクエ10ブログも書いてます

はてなブログ設定 初心者おすすめ やっておきたいカスタマイズ 其の5  ゲームブロガーなり方道標 #8

目次

デザイン

少しだけ知識は必要になることになりますが…

ブログサイトダッシュボードデザインという項目があると思います。

あののアイコン画像あの
検索するとはてなブログで使える HTML や CSSを配布してくれてる方(サイト)がありますので。コピペして貼り付けるだけで、プログラムの知識が深くなくてもデザインを変えることが出来ますよ

 

このデザインでは

・デザインテーマ

・カスタマイズ

・スマートフォン

のデザインを変えることが出来ます

では、実際にやってみましょう

設定するブログを選びます

ダッシュボードを開きます

左側の一覧で上から3項目目でマイブログのリストの中から設定したいブログを選ぶ

画面右側のマイブログからデザインを変えたいブログを開きます

(メインブログや、ブログが1つの場合はそのままで大丈夫です)

デザイン

ダッシュボードにある

デザインをクリック

デザインテーマ

上の方にある3つのアイコンがあると思うのですが

パレットの所(デザインテーマ)にアンダーバーが来ていると

ブログサイトの公式テーマが左側の欄にサンプル的に画像が出て来ていると思います

選択(クリック)するとプレビューされると思うので

お試しになれますね

テーマストア

公式テーマの他に一番下にスクロールしますと

テーマストアでテーマを探す

と言う場所があるのですが

ここをクリックしで進むと、より多くのデザインのテーマを選ぶことが出来ます

あののアイコン画像あの
私のおすすめは、レスポンシブデザインのテーマですね!

テーマストア

気に入ったテーマをクリックすると、詳細が見れます

レスポンシブデザインであれば記載がされていると思います

 

※レスポンシブデザインとは

PCなどの大きな画面で見ている時のデザインと、スマホなどの小さな画面で見る時で違う事は良くあると思います。

PC向けの画面を全体を映し過ぎて、文字が小さくなってしまったり

部分的に映ってしまい余白が大きくなってしまったりして

見にくかったり、デザインが崩れてしまったりしますよね。

スマホが普及する前は、PC画面用に作ればよかったのですが

いまやユーザーのほとんどはスマホで見ていたりします。

どちらで見られたりしても、それぞれの端末に合わせた見やすいデザインに

自動で設定してくれる優れものなのです

上記の理由からレスポンシブデザインの方が良いかなぁーと思いますね

 

他にも作者さんによる説明だったり

部分的に設定(カスタム)する方法だったり

実際に使われている方々の利用例を見ることが出来ますよ

自分はコチラのHaruniを使っていました

 

このテーマストアページ内にもアレンジするためのCSSとか書いてありますが

作者さんのサイトの方にもいろいろ機能追加の為の

HTMLやSCCのコードを紹介してくれていて、けっこうはてなブログをカスタムできるようになりますね

 

変更する手順を説明してくれるサイトを作っていてくれてたりしますよ

Minimal Green
Minimal Green
Minimal Greenはてなブログテーマ『Minimal Green』のデモブログ。はてなブログカスタマイズや、HTML、CSSなどについて書いています。

 

気に入ったら、右側にある

プレビューしてインストール

を押して導入してみましょう

 

プレビューが開きますので、気に入ったら

「このテーマをインストール」

をクリック

カスタマイズ

基本はPCページのデザインを細かく設定していけます

スパナマークのカスタマイズをクリック

・背景画像

・背景色

・ヘッタ

・記事

・サイドバー

・フッタ

・デザインCSS

の項目があり、ブログのデザインを設定していけます

背景画像 背景色

専門的な知識がなくても

背景画像 背景色

は変えられると思います

<スポンサーリンク>

ヘッダ

タイトルに画像を入れたりすることが出来ます。

 

タイトル下にデザインや便利機能を

HTMLを書き込むことで、付けたすことが出来ます

自分のブログで例えると、ここの部分のデザインが作れます

記事

記事内に、ほかのSNSと連携できるボタンなどを配置することが出来ます

ここも

記事上

記事下

HTMLを用いて

いろいろデザインや機能をつけ足すことが出来ます

こんな感じ

SNSでのシェア機能や、広告などの機能を足すことが出来ますね

パンくずリストとは

PCなどのデータの場所を表示してくれる欄があると思うのですが

PC ▷ Cディスク ▷ドキュメント ▷ピクチャ・・・・

みたいな表示です

ブログや、ウエッブサイトも階層があるので

これを表示するか?しないか?の設定です

サイドバー

PCの画面ですと メイン画面の横に

プロフィール や 検索 や リンクなど

表示をするか しないか

その他の物を追加することも可能です

フッタ

ページの一番下に

ブログのどのページを開いても表示される場所を作ります

サイトの案内やブログ内で使われる画像などの許可を受けた際に、著作権者の許可を明示しておくなど、明示しておくのによく使われています

デザインCSS

HTMLよりも大きなデザインを変えることが出来るのがCSSです

 

自分で作れる人もいるのですが

無料のCSSや 有料のCSSもありますが

それを入手しコピペするだけでも

大きくデザインを変えることが出来ます

スマートフォン

スマートフォン版専用デザインを変えることが出来ます

内容はPC版とほぼ同じ項目ですが

詳細設定

□レスポンシブデザイン

のチェックボックスが現れると思います

 

レスポンシブデザインに対応しているテーマを使った方の場合

チェックボックスにチェックを入れてみてください

 

PC版で整えたデザインが、スマートフォン版にも変化が起きたと思います

 

設定が終わったら必ず上にある

【変更を保存する】をクリックしましょう

これで、反映されます

これをしないで、終わらすと設定したものが水の泡になります

設定などいったん終了です

これで基本的な設定は終わりです

拘りたい人は、もっといろいろ出来るのですがとりあえず記事がないと始まらないので10~20記事くらい、ブログを楽しんでみてくださいね

 

少し時間たったころに

また設定に関する説明ブログを書いてみたいと思います

ポチっと応援お願いします(*´▽`*)

あの日のブルプロブログに来てくれて

ありがとっ!(*'▽')


人気ブログランキング

 

ゲーム中心ですが、ブログやYouTubeの使い方など説明してます

コメント

コメントする

目次
閉じる