それは仕様です。

それは仕様です。

「それは仕様です。」は雑記ブログです! 主にIT関連・考えたこと・勉強したことをここに残しています。 「Re:ゼロから言語の再勉強中。」

それは仕様です。

【必見】はてなブログ初心者が初記事を書くまでにやった事まとめ

f:id:yantzn:20170312011434j:plain

 

はじめまして、やんです。 都内でSEをやってます!

様々な人との交流したり、自分で情報を発信したい!と思ってはじめてました。

初投稿記事になりますが、僕がこの記事を書くまでに行った環境整備やカスタマイズをまとめてみました。

僕のような、はてなブログ初心者の方の参考になればいいなぁー

Twitterのフォローお願いします!

 

2017年3月25日

記事一覧のウィンドウ幅の縮小による、サムネイル表示領域が記事の概要説明表示領域を圧迫していたので、ウィンドウ幅に合わせてサムネイル表示を一定の大きさに表示するようにCSSのソースコードを修正しました。

 

2017年4月24日

リンクの修正をしました。

 

はてなブログPROにする

「えっ!いきなり!?」って思われるかもしれません...

そうです...初心者がいきなり、はてなブログPROにしました。

「せっかく始めるならとことんやりたい!」と思ったわけですね。はい。

しかしながら、はてなブログPROにしたら何ができるのか...

はてなブログPROにしたら何ができるの?
  1.  通常3個までしか作れない複数ブログを、合計10個まで作れる。
  2.  自分だけのドメインで運営することができる。
  3.  最初からある広告を非表示にして、自分の広告を張れる。
  4.  1つのブログを複数人で管理することができる。
  5. 文中のキーワードの自動リンクをON/OFFできるようになる。
  6. 既存であるはてなのヘッダーとフッターを非表示にすることができる。
  7. 独自ドメインで運用していたはてなブログをURLを変えずに移転することができる。
  8. 写真アップロードの容量が300MB/月 → 3GB/月にアップすることができる。
  9. 簡易アクセス解析 + はてなカウンター
  10. スマホ表示をカスタマイズできる。
メリットに感じたこと

自分だけのドメインで運営することができる

hatenablog.comというドメイン名を使用せずに、自分だけのドメインにすることができる。

愛着も沸くし、自分だけというのは魅力的です。

 

最初からある広告を非表示にして、自分の広告を張れる。

ブログに広告を張って収入を得ることができるようです。

月10万円以上を得ている人も中にはいるそうですね!すごい!

僕も挑戦したい。

 

既存であるはてなのヘッダーとフッターを非表示にすることができる。

f:id:yantzn:20170310234744p:plain

 一番上に表示されているやつですね。

オリジナルのテザインと合わなかったりするので非表示にできるのは嬉しい。

カスタマイズの幅も広がる!!

 

スマホ表示をカスタマイズできる。

レスポンシブ対応済みのテーマでも十分ではあるのですが、やはり自分で表示をいじりたい!

スマホでの表示をカスタマイズすることができるのは、魅力です。

 

気になるお値段

 

f:id:yantzn:20170311002033p:plain

 

うーん。なかなかのお値段ですね。

ですが、十分にPROにするメリットもあり収益を目指したいので契約しました。

ちなみに、2年コースにしました。

【注意】 お値段の表示は、1ヶ月あたりのお値段。支払いは一括です。

 独自ドメインにする。

長く続けるのであれば、独自ドメインの方が良いかと思います。

はてなブログPROにしたので、このタイミングで独自ドメインにしました。

僕は、お名前.comでドメインを取得しました。

「.com」での取得金額が他のサイトより安く買ったのでおすすめです!

設定方法は、こちらの記事を参考にさせて頂きました。

www.mutant-tetsu.com

http://yantzn.hatenablog.com」から「http://www.yantzn.com」に変更しました。

 

 Google Search Consoleに登録する。

自分のブログがどのように検索ページに表示されるのかなどわかるツールです。

Google Search Consoleって何ができるの?

f:id:yantzn:20170310232638p:plainGoogleにどう見られているかわかる。

f:id:yantzn:20170310232638p:plainサイトへの訪問のキーワードがわかる。

f:id:yantzn:20170310232638p:plainサイトで発生している問題がわかる。

f:id:yantzn:20170310232638p:plainより早く検索結果に表示させることができる。

私もまだ勉強中ですが、簡単に説明すると上記のことが出来るようになるそうです!便利!

導入していて損はないかと思うので登録しておきましょう!

 

 ヘッダー画像を設定する。

やはり、ブログの顔となる部分になるのでしっかり設定しておきましょう。

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

www.tukinasikotonoha.com

 

 ヘッターメニューの設置をする。

ヘッダーにメニューがあるとわかりやすいですよね!

今後、カテゴリなど設置する目的で先に準備しました。

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

shiromatakumi.hatenablog.com

 

 サイドバーの共通設定

僕の設定はこんな感じです。


.hatena-module-title {
    background: #4b525F;/* モジュールの背景色*/
    color: #fff;
    font-family: 'Meta Bold';
    font-size: 19px;
    padding: 2px 20px 0;
    line-height: 38px;
    border-left: solid 6px #4b525F;/* 左ボーダーの色*/
}

CSSをデザインに貼り付けると下のような感じになります。

f:id:yantzn:20170311030108p:plain

 

 サイドバーにSNSフォローボタンを設置する。

はてなブログのフォローボタンをカスタマイズしてサイドバーに設置します。

フォロワーが増えればという淡い期待です。

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

www.ituore.com

 

 サイドバーにTwitterのタイムライン設置する。

Twitterのタイムラインを設置したいと思います。

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

route53.hatenablog.com

 

 サイドバーの一番下のモジュールを固定する。

 今後、自分の他のカテゴリの記事も読んでもらいたい目的でモジュールの固定をしたいと思います。

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

www.no-overtime-day.com

 

 トップページを記事一覧に変更する。

トップページの記事を一覧風にして、スッキリ表示させたいと思います。

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

www.bombkun.com

 

 記事一覧の表示をカスタマイズする。

カード型の表示が好きなので、カード型風にカスタマイズしてみます。

PCで表示したときのみカード型風の一覧にしたいと思います。

完成した一覧はこんな感じです。

f:id:yantzn:20170312013108p:plain

 カスタマイズはこちら。

ちょっと無駄なものもあるかと思います。

使用する方は、ご自身の環境に合わせてご使用ください。

//* 980px以上用(PC用)の記述 */
@media screen and (min-width: 980px) {

 /*記事の表示*/
 #content-inner {
     padding-top: 30px;
     max-width: 1490px;/*表示幅を広く*/
 }

 /*記事一覧の表示*/
 .archive-entry,
 .entry{
   background-color: #fff;/*背景色*/
   border-radius: 4px;
   margin-bottom: 2.5em;
   border: 1px solid #f3f3f3;/*ボーダー*/
   -webkit-box-shadow: 0 2px 5px rgba(128, 128, 128, .15);
   -moz-box-shadow: 0 2px 5px rgba(128, 128, 128, .15);
   box-shadow: 0 2px 5px rgba(138, 138, 138, .15);
   }
    
 .archive-entry .entry-thumb-link, 
 .archive-entry .archive-entry-body {
     width: 100%;
     height: 188px;
 }

 /*サムネイル*/
 .entry-thumb {
     margin: 0;
     height: auto;
     -webkit-transition: all .5s;
     transition: all .5s;
 }

 .entry-thumb:hover {
     -webkit-transform: scale(0.95);
     transform: scale(0.95);
 }


 .archive-entries {
     display: -ms-flexbox;
     display: flex;
     -ms-flex-flow: row wrap;
     flex-flow: row wrap;
     margin-top: 20px;
 }

 .page-archive #main-inner section {
     width: 47%;
height: 500px; border: 1px solid #d6d6d6; box-sizing: border-box; margin: 0 0 30px 4.16667%;
overflow: hidden; } /*次の記事を左側に表示する*/ .page-archive #main-inner section:nth-child(2n+1) { margin-left: 0; } .entry-title-link{ margin-bottom: 10px; }  /*サムネイルの表示幅*/ .page-archive .entry-thumb { display: inline-block; background-color: #ccc; background-position: center center; background-repeat: no-repeat; margin: 5px; width: 100%; height: 200px; border: 1px solid #ccc; background-size: cover; } .archive-entry .entry-thumb-link, .archive-entry .archive-entry-body { width: 100%; height: 188px; } }

 ページトップに戻るボタンを設置する。

記事が長い場合にやくに立ちそうです。あるとカッコイイかな!

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

nohack-nolife.hatenablog.com

 

 コピーライトを表示する。

はてなブログテーマ「Naked」を利用しているので、ついでにフッターにコピーライトを表示してみようと思います。

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

theme-naked.hatenablog.jp

 

まとめ

いかがでしたでしょうか。

多くの方がカスタマイズ記事をアップして頂いていたので、大変参考になりました!

しかし、まだまだ細かいカスタマイズやSEO対策は出来ていないので、今後ちょこちょこカスタマイズしていきたいです。

僕のオリジナルカスタマイズの記事も紹介できるように、勉強していこうと思います!

最後まで読んで頂き、ありがとうございます!

 

www.yantzn.com

www.yantzn.com

www.yantzn.com