ぐうたらもぐうら

ゲームとおふとんが好き。

ブログ運営あれこれ（随時更新予定）

随時更新 もぐウラ話_blog management

f:id:moguura:20170129103805p:plain

2017.3.18更新
それぞれの詳細も記事にして、自分自身の備忘になるようにまとめていきたい。

ブログを作るまであれこれ

なんのブログにするか　-メインコンテンツ、ターゲットなど

どんなカテゴリを作るか　-カテゴリ＝コンテンツなど

ブログのタイトル　-メインコンテンツやターゲット、独自性、検索など

ブログユーザー名　-ブログと合うものにするか、無関係(ニックネーム)でいいか

ブログのアイコン　-ヘッダーや背景イメージ、記事内で利用するか、プロフィール

各種アカウントの取得　-はてなブログ、Twitter、ドメインなど

はてなPROにする

GoogleAdsence申請

Amazonアソシエイト申請

楽天アフィリエイト申請 

 

ブログ記事を書くあれこれ

まずは記事数を書かなきゃ始まらない

記事を書く際にやること、やらないこと

 

ブログを育てるあれこれ

見た目をいい感じに　-ヘッダー、背景、レイアウト

読みやすさをいい感じに　-サイドバー中身、見出し？*1

 

はてなブログで、画像の横に複数行の文章を表示させる方法 - もぐうらの巣

本文の幅が狭い*2

本文の文字が小さい

ブログトップページに記事を複数並べたい

・「続きを読む」でページを縮める⇒間に広告が入って見にくい

・ トップページを要求されたらリダイレクトで記事一覧へ飛ばす方法*3

だめだ、カスタマイズは30記事くらいは書いてからじゃないと。*4

カエレバでリンクをおしゃれにする⇒Amazon済、楽天はまだ申し込みもしてない

はてぶってなんぞや⇒しおりだね。

ステキブログを探す旅⇒たくさんお気に入りできてきた。

ブロガーさんと友達になりたい⇒お近づきになりたい方の読者登録とかTwitterフォローしてみたり。

 

改善具体例

2017/3/18追記

ブレスオブザワイルドのレシピを集めるためにフォーマットを頑張って作ったら思いの外アクセスされた、が、スマホで見てみたらあまりにも見にくかったので、
目に付いたものを突貫工事であれこれ改善。

 

・スマホで見るとサイドバーぐちゃぐちゃ長すぎ

⇒プロフィール的な記事、サイトポリシー的なものをそれぞれ１記事としてまとめた
⇒サイトマップ記事作成（ついでに、ゲーム以外記事とゲーム記事の整理）

 

・せっかくなのでブレスオブザワイルドカテゴリをまとめてアクセスしやすくする

⇒ナビゲーションバーにリンクを設定、サイトマップもここに
⇒フッターにもナビゲーションバーと同じリンクを設定
⇒サイドバーに「関連記事」を表示 

 

・レシピ記事が情報量が多い為長すぎて見にくい

⇒目次に表示される項目名の文字数を減らした
（代わりに項目の説明として本文に記載）
⇒大項目の終わりごとに「目次へ」のリンクを貼った
※スマホからの閲覧の場合、目次からページ内リンクで飛ぶのと、別ページに飛ぶのは体感的にはほとんど変わらないのかも。一ページ内にその情報がまとまっていることの意味がなければ適切に分けた方がいいんだろうな。PV数も広告表示回数も増えるし…と思いつつ、こんな弱小ブログでも検索でたどり着いてくれる人がいるのはある程度の情報量がまとまっているからだと思うので、分割は現時点ではしないことに。

 

・スマホで見た時の適正文字数は20〜24がせいぜい。今使用しているCONTENTSでレスポンシブルON状態だと18文字とやや大きい。普通の文章なら気にならないが、情報をまとめようと思ったり、表で見せたいと思うと大きすぎる。

⇒今からテーマをいじるのは時間がかかる、というか割と気に入っているので自作テーマも視野に入れつつ後で対応する。

 

▼取り急ぎ、記事内の表の作りをなんとかする。

・枠線太い・文字でかい
変更前<table style="font-size: 80%;" border="3">
⇒変更<table style="font-size: 60%;" border="2">


・横に並べる文字が多い
⇒どうせ改行されるなら見やすい部分で改行する（♡個数、◎）
⇒「効果」以外の補足情報は脚注で記載する
⇒同じ料理名だけど違う素材のものについて、補足メモで記載するのではなく別枠で表記（下記例：果実のキノコあえ）

 

・レシピがごちゃごちゃしていて、改行されているために複数行にわたっているのか、複数素材を使用しているのかが判別しにくい

⇒素材名の前に「・」(なかぐろ)を付記

 

変更前

料理名レシピメモ・最少材料での効果
がんばり串焼きキノコ ガンバリダケ 1個あたり：♡1個、◎ゲージ約0.25
がんばり果実のキノコあえ 果実(リンゴ・ヤシの実)
ガンバリダケ		 リンゴ1個あたり：♡2個、◎ゲージ約0.25
ヤシの実1個あたり：♡3個、◎ゲージ約0.25
がんばり甘露煮魚 ガンバリバチのハチミツ
ガンバリバス
(ガンバリダケ)		 ♡7個、◎ゲージ約1.75(ガンバリダケはなくても、たぶん同じ料理)
がんばりキノコおにぎり ガンバリダケ
ハイラル米		 ♡3個、◎ゲージ約0.25
がんばりハチツアメ ガンバリバチのハチミツ ♡2個、◎ゲージ約0.4
がんばりハチミツリンゴ リンゴ
ガンバリバチのハチミツ		 ♡5個、◎ゲージ約0.4
スタミナ野菜クリームスープ ガッツニンジン
フレッシュミルク
岩塩		 ♡8個、◎ゲージ上限+約0.4
- - -

 

変更後

料理名レシピ最少材料での効果
がんばり串焼きキノコ ガンバリダケ ♡1個
◎約0.25
がんばり果実のキノコあえ ・リンゴ
・ガンバリダケ		 ♡2個
◎約0.25
・ヤシの実
・ガンバリダケ		 ♡3個
◎約0.25
がんばり甘露煮魚 ・ガンバリバチのハチミツ
・(ガンバリ)バス
・(ガンバリダケ)		 ♡7個
◎約1.75*5
がんばりキノコおにぎり ・ガンバリダケ
・ハイラル米		 ♡3個
◎約0.25
がんばりハチツアメ ガンバリバチのハチミツ ♡2個
◎約0.4
がんばりハチミツリンゴ ・リンゴ
・ガンバリバチのハチミツ		 ♡5個
◎約0.4
スタミナ野菜クリームスープ ・ガッツニンジン
・フレッシュミルク
・岩塩		 ♡8個
◎上限+約0.4
- - -

 

プレビュー画面(スマートフォン)での比較

 

f:id:moguura:20170318044321p:plain f:id:moguura:20170318044337p:plain

 

以上

 

 

 

*1:見出しなどカスタマイズはこちらを参考にさせていただきました。

www.yukihy.com

*2:こちらを参考にさせていただきました。

www.weed.nagoya

*3:こちらを参考にさせていただきました。

iitaikotoha.hatenablog.com

*4:カスタマイズ自体時間かかるし方向性決まってないのにイロつけたらブランディング的にはむしろマイナスだし、後で修正するのにもまた時間かかるし。

でもせっかく作ったのもったいないから一応バックアップ取っておく。こんな感じ

f:id:moguura:20170207112118p:plain

============

 

▼現状の設定バックアップ：デザイン＞カスタマイズ＞デザインCSS

 

============

 

/* <system section="theme" selected="aero2"> */
@import "/css/theme/aero2/aero2.css";
/* </system> */

 

/* <system section="background" selected="CCAC95"> */
body{background:#CCAC95;}
/* </system> */

 

/* -------以下は手動追記------ */
#box2 {
float: right;
width: 300px; /* サイドバーの幅 */
}

 

/*#mainは記事自体の幅*/
#main {
float: right;
width: 600px;
}

 

/*#wrapperは記事と日付などがある左側を含めた幅*/
/*テーマによって異なる*/
/*例：#main + 140*/
#wrapper {
float: left;
width: 600px;
}

 

/*#containerは記事、サイドバーを含めた全体の幅*/
/* #wrapper + 300（サイドバー） + 20 */
#content-inner {
width: 920px;
}

 

#container {
width: 920px; /* 全体の幅 */
margin: 0 auto; /* 真ん中に表示 */
}

 


/*#entry-contentは記事本文、のフォントサイズ*/
.entry-content {
font-size:16px;
}

 

/*#entry-titleは記事タイトル*/
/*#entry-contentは記事本文、h3大見出し、h4中見出し、h5小見出し*/
.entry-title{
font-weight: bold;
font-size: 25px;
padding: 20px 10px; /* 文字から枠までの間隔、上下 左右 */
margin: 10px 0px 10px 0px;
color: #2a2a2a;
border-left: 2px solid #783c1d;
border-right: 2px solid #783c1d;
border-top: 2px solid #783c1d;
border-bottom: 2px solid #783c1d;
box-shadow: 7px 7px #783c1d;
}
.entry-content h3{
color: #000000;
background: #CCAC95;
padding: 15px 15px;
border-radius: 8px;
}
.entry-content h4{
color: #3f3f3f;
padding: 9px 15px;
background: #e6dacf;
border-top: 3px solid #CCAC95;
border-bottom: 1px solid #CCAC95;
font-size:16px;
}

/*目次のデザイン*/
.table-of-contents{
/*color:#ffffff;マーカーの色*/
/*background: #e6dacf;背景色はここから変更*/
/*padding: 45px; */
padding: 20px 10px 20px 40px !important; /*上右下左(時計回り)*/
border-radius: 5px;
border: 1px #ccc solid; /*枠*/
/*box-shadow: 0 2px 3px 0 #ddd; 影*/
}

 

============

 

▼現状の設定バックアップ：設定＞詳細設定＞検索エンジン最適化＞headに要素を追加

 

============

 

<script type="text/javascript">
if( location.href == 'http://www.moguura.com/'){
location.href='http://moguura.com/archive';
}
</script>
<noscript>
<p><a href="http://moguura.com/archive">もぐうらの巣</a></p>
</noscript>

 

============

*5:魚はハイラスバスでも、ガンバリダケはなくても、たぶん同じ料理

Copyright © 2017 ぐうたらもぐうら All rights reserved.