デザイン
少しだけ知識は必要になることになりますが…
ブログサイトのダッシュボードにデザインという項目があると思います。
あの
このデザインでは
・デザインテーマ
・カスタマイズ
・スマートフォン
のデザインを変えることが出来ます
では、実際にやってみましょう
設定するブログを選びます
ダッシュボードを開きます
左側の一覧で上から３項目目でマイブログのリストの中から設定したいブログを選ぶか
画面右側のマイブログからデザインを変えたいブログを開きます
（メインブログや、ブログが１つの場合はそのままで大丈夫です）
デザイン
ダッシュボードにある
デザインをクリック
デザインテーマ
上の方にある３つのアイコンがあると思うのですが
パレットの所(デザインテーマ）にアンダーバーが来ていると
ブログサイトの公式テーマが左側の欄にサンプル的に画像が出て来ていると思います
選択（クリック）するとプレビューされると思うので
お試しになれますね
テーマストア
公式テーマの他に一番下にスクロールしますと
テーマストアでテーマを探す
と言う場所があるのですが
ここをクリックしで進むと、より多くのデザインのテーマを選ぶことが出来ます
あのテーマストアで
気に入ったテーマをクリックすると、詳細が見れます
レスポンシブデザインであれば記載がされていると思います
※レスポンシブデザインとは
PCなどの大きな画面で見ている時のデザインと、スマホなどの小さな画面で見る時で違う事は良くあると思います。
PC向けの画面を全体を映し過ぎて、文字が小さくなってしまったり
部分的に映ってしまい余白が大きくなってしまったりして
見にくかったり、デザインが崩れてしまったりしますよね。
スマホが普及する前は、PC画面用に作ればよかったのですが
いまやユーザーのほとんどはスマホで見ていたりします。
どちらで見られたりしても、それぞれの端末に合わせた見やすいデザインに
自動で設定してくれる優れものなのです
上記の理由からレスポンシブデザインの方が良いかなぁーと思いますね
他にも作者さんによる説明だったり
部分的に設定（カスタム）する方法だったり
実際に使われている方々の利用例を見ることが出来ますよ
自分はコチラのHaruniを使っていました
このテーマストアのページ内にもアレンジするためのCSSとか書いてありますが
作者さんのサイトの方にもいろいろ機能追加の為の
HTMLやSCCのコードを紹介してくれていて、けっこうはてなブログをカスタムできるようになりますね
変更する手順を説明してくれるサイトを作っていてくれてたりしますよ
気に入ったら、右側にある
プレビューしてインストール
を押して導入してみましょう
プレビューが開きますので、気に入ったら
「このテーマをインストール」
をクリック
カスタマイズ
基本はPCページのデザインを細かく設定していけます
スパナマークのカスタマイズをクリック
・背景画像
・背景色
・ヘッタ
・記事
・サイドバー
・フッタ
・デザインCSS
の項目があり、ブログのデザインを設定していけます
背景画像 背景色
専門的な知識がなくても
背景画像 と 背景色
は変えられると思います
<スポンサーリンク>
ヘッダ
タイトルに画像を入れたりすることが出来ます。
タイトル下にデザインや便利機能を
HTMLを書き込むことで、付けたすことが出来ます
自分のブログで例えると、ここの部分のデザインが作れます
記事
記事内に、ほかのSNSと連携できるボタンなどを配置することが出来ます
ここも
記事上や
記事下に
HTMLを用いて
いろいろデザインや機能をつけ足すことが出来ます
こんな感じ
SNSでのシェア機能や、広告などの機能を足すことが出来ますね
パンくずリストとは
PCなどのデータの場所を表示してくれる欄があると思うのですが
PC ▷ Cディスク ▷ドキュメント ▷ピクチャ・・・・
みたいな表示です
ブログや、ウエッブサイトも階層があるので
これを表示するか？しないか？の設定です
サイドバー
PCの画面ですと メイン画面の横に
プロフィール や 検索 や リンクなどの
表示をするか しないか
その他の物を追加することも可能です
フッタ
ページの一番下に
ブログのどのページを開いても表示される場所を作ります
サイトの案内やブログ内で使われる画像などの許可を受けた際に、著作権者の許可を明示しておくなど、明示しておくのによく使われています
デザインCSS
HTMLよりも大きなデザインを変えることが出来るのがCSSです
自分で作れる人もいるのですが
無料のCSSや 有料のCSSもありますが
それを入手しコピペするだけでも
大きくデザインを変えることが出来ます
スマートフォン
スマートフォン版専用のデザインを変えることが出来ます
内容はPC版とほぼ同じ項目ですが
詳細設定に
□レスポンシブデザイン
のチェックボックスが現れると思います
レスポンシブデザインに対応しているテーマを使った方の場合
チェックボックスにチェックを入れてみてください
PC版で整えたデザインが、スマートフォン版にも変化が起きたと思います
設定が終わったら必ず上にある
【変更を保存する】をクリックしましょう
これで、反映されます
（これをしないで、終わらすと設定したものが水の泡になります）
設定などいったん終了です
これで基本的な設定は終わりです
拘りたい人は、もっといろいろ出来るのですがとりあえず記事がないと始まらないので１０～２０記事くらい、ブログを楽しんでみてくださいね
少し時間たったころに
また設定に関する説明ブログを書いてみたいと思います
コメント