STRIKE!!痛

中卒のバカでもわかるマーケティング

デジタルマーケッターを目指す「へっど」が調査・入手したマーケティング技法や 最新トレンドを発信します。時々くじけることもあるけど泣かないもん。

広告

「はてはてさてさて」ブログデザインを変えてみた、「はてなブログ」と格闘のべ24時間。

f:id:head19820903:20170504220236j:plain

5月3日。

 

新日本プロレスの「レスリングどんたく」in福岡国際センターが終了しました。 

 

 

今日のメインはチャンピオンのオカダカズチカVSチャレンジャーのバッドラックファレによるIWGPヘビー級選手権試合。

フィニッシュはオカダカズチカが必殺技のレインメーカーで3カウントを取り王座防衛に成功。

ファレのツームストーンを喰らい、バッドラックフォールをなんとか返しつつ激闘を制したオカダカズチカ選手。

腰に大ダメージを繰り返し受けながらも体重差50kg弱のファレ選手をツームストーンパイルドライバーやジャーマンスープレックスで投げ切るパワー。

耐えに耐え最後に決めるチャンピオンのレスリングに感動しました。

 

〆の言葉も心にささります。

「IWGPの闘いはキツいです。みんなが、全レスラーが、このベルトを目指すからこそ、闘いも激しくなります。激しくなるからこそ、みんなが、全力で闘うからこそ、ケガをする人も出ます。でも! プロレスラーは超人です!どんな技を食らっても立ち上がります! 最後まで諦めないのが! プロレスラーです。これからも! 全力で闘って! 皆さんに! 素晴らしい闘いを見せてくからな!! また!! このプロレス界に!! カネの雨が降るぞ!!!!」

出典:新日本プロレス試合結果http://www.njpw.co.jp/card_result/95466

 

プロレス技は危険。経年でどんどんエスカレートしていく。

オカダカズチカ選手の言葉とは別にファン心理として「刺激に耐性が出てきてしまうファンの期待へ応える?」もなくはないのでしょう。

 

さて私は19:00に仕事を終えて、なんとか今大会の後半戦から観戦することができました。

 

甲府から福岡にどうやって?と思われる方もいらっしゃると思います。

ここからのくだりは前出のブログに引き継ぎます。

www.headsamurai.com

 

新日本プロレスワールドで観戦を終え、明日は弓術と言うことで前々からやってみたかた「はてなブログのカスタマイズ」に挑戦をはじめました。

 

今回はヘッダーのデザインを変更するぞ!

 

はてなブログは「プレーン」でもある程度のデザインが出来てカスタマイズが可能なのですが、有名ブロガーのみなさんのブログを拝見していると「もっと自由に」カスタマイズしたくなってきます。

かつてHTMLは(2000年代初頭レベルで)勉強したことがあるのですが「CSS」については全くわかりません。

デザイン変更やユーザーインターフェースの改廃が容易となるように、「文章の構造」と「デザイン」を切り離すという概念は知っていますが、

「要素」「プロパティ」と言うマークアップにお手上げになってしまっていたのでした。

 

インターネット普及とともに「インターネットで収集できる情報」増えてきています。

「まずはコピペで可能なコード」や「カスタマイズの基本」を教えて頂けるブログサイトさまを探しました。

 

以下は、カスタマイズにあたり参考とさせていただいたブログサイト様です。苦労した点などをあわせて記録していきたいと思います。

 

今回カスタマイズしたこと

・ブログのヘッダー画像をが画面いっぱいに表示する

・ヘッダーに登録した画像が「ぼやける」場合の設定変更

・ヘッダー部分にデフォルトで表示されるタイトルと説明を消す

・グローバルナビを設置する

 

ブログのヘッダー画像を画面いっぱいに表示する

はてなブログはデフォルトでは横1000×縦200の画像サイズが推奨のようで、「デザイン」の「ヘッダー」から画像を選択するだけで設定できます。

 

しかし、パソコンやタブレットの画面サイズにあわせて伸縮するフルサイズのでざいんがいいかなと思いました。

 

CSSでheader要素のプロパティを変えていくのですが、一番引っかかったのは「イメージのURL」の所です。

 

はてなフォトライフを使用することで画像をアップロードして設定は出来たのですが、、、課題はつづきます。

tawashino.hateblo.jp

 

ヘッダーに登録した画像が「ぼやける」場合の設定変更

パソコンでの作業環境にひとまずあわせようと「横1600×縦200」の画像を作成しました。

「はてなフォトライフ」にアップロードしてCSSでURLを指定してみたのですが、プレビューしてみると「ぼやけ」というか「にじみ」というかきれいに表示がされません。

 

ピクセル数の設定がよくない(元画像のピクセル数と異なる)為に起こっているといくとが特定できたので「はてなフォトライフ」内の設定でデフォルトに入っているピクセル数をブランク(「0」)にしたところきれいに表示されました。

 

しかし、デフォルトの「タイトル」と「ブログ説明」はヘッダーに表示されたままです。つづく。。。。

www.task-notes.com

 

ヘッダー部分にデフォルトで表示されるタイトルと説明を消す

「header」要素にあるプロパティをあれこれいじってみたのですが、結果こちらのブログサイト様のコードで消すことが出来ました。

ヘッダー部分は「visibility: hidden」を適用ています。

※「display: none;」では消せませんでした。

 

さぁ仕上げはグローバルナビゲーションの作成です。

www.turetiru.com

 

 

グローバルナビを設置する

これまで食レポやガジェット情報、生き方・働き方など「ざっくばらん」にブログを書いてきたのですがある程度の「カテゴリ」が出来てきました。

 

ユーザビリティを考えると「カテゴリ」別にソートがかけられるとよいと思い、ヘッダーの下部分に「グローバルナビ」を作成しました。

 

chipspd.hatenadiary.jp

 

最後に

現在はスタンダードなヘッダーとナビゲーションとなっていますがいずれはもっと複雑なものにも挑戦してみたいと思います。

ブログサイトをはじめる前までは「ブログサイトサービス」は「デザインの自由度が低く縛りがある」と勘違いをしていました。

HTMLとCSSの知識が身につけばもっともっとブログ運営が楽しくなりますね。

ブログサイトのユーザーインタフェースやテンプレートデザインから一歩踏み込んだオリジナルブログサイトにしていきたいです。

 

最後までお読みいただきありがとうございました。

 

 

 


【おすすめ本】

 参考図書として作業の傍らに置いています。

「はてなブログ」のユーザーインターフェースは作業環境として「慣れ」が必要ですが、ブログは最終的には「HTML」と「CSS」で出来ているの言語の勉強が必要です。

ネット検索とAmazonのレビューで評判が良かったので、選びました。

 

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

 

 


ブログランキング参加しています!応援してもらえるとうれしいです。


人気ブログランキング

ブログランキング・にほんブログ村へ
にほんブログ村

【スポンサーリンク】