FC2ブログ

ぶっ飛んだハンドメイドブログの復旧作業が完了しました!! イェ~イ



一年間ほど書きためてきた記事が全部ぶっ飛んだハンドメイドブログ。

一昨日やっと全記事が復活しました~♪
イェーイ!!

図4



復活にほぼ1ヶ月かかりました。長かった。。。

記事は復活したけれど、いままでいろんな方にいただいたコメントはなくなってしまったし、応援ポチとかしていただいたものはゼロになってるし、また一から出直しだな。。。


今までの残念な経緯はこちら~。

ハンドメイドブログ、副収入めざして進化中です
あ~ん、やってもうた! 大失敗! トラブル発生中! アドセンスどころじゃぁない
やった! 復活の道筋、発見できたかも♡



そうか、「cocoon」に変えてわずか1週間程度で、全部がぶっ飛んだんだった、、、



今回、ハンドメイドブログ復旧作業と並行して、いくつかブログの体裁に手を入れてみました。ちょうどいいチャンスかなーと思ったので。

転んでもタダでは起きないのだ!

ということで、今回はハンドメイドブログに加えた変更点についてのご紹介です。

因みに、ハンドメイドブログの方は、レンタルサーバーを借りて(さくらインターネット)、ワードプレス(テーマは「cocoon」)を使って書いています。



〈 広告 〉


  

ドメイン下にあったパスの削除



ぶっ飛んだ主な原因でもあったドメイン下にあったパスの削除をやりました。


もともとハンドメイドブログの記事がすべてぶっ飛んだ原因は、、、

私が利用しているさくらインターネットでワードプレスをやる場合、私が始めた頃は、独自ドメインの後ろにパス(フォルダ?)を付けなくてはなりませんでした。

つまり、、、「https://nonbilly-nickollie.work/index」となってた。 

この「/index」を消そうとしていろいろやってるうちに、ワードプレスの変更してはいけないところをつついたのが、今回ブログがぶっ飛んだ主な原因でした。


どうしてもこの「/index」を消したかったんですよね。というのも、このハンドメイドブログ、いつかはアドセンス(広告)も導入して収入源の一つにもしたかったんです。いずれは、大好きなハンドメイドについて書くこのブログ一本にしたい、、、という思いもあります。


それでいろいろ素人がつついたら、ぶっ飛んだ!!


今はさくらインターネットでは、新しいコントロールパネルから入れば、このパスを付けなくてもワードプレスができるようになっているとのこと。なので、今いいチャンス!と思い、後ろのパスを取りました。


今回はうまくできました。
ちゃんと調べてやることが重要だ!


さくらインターネットの新しいコントロールパネルについては、こちらを見てね。
↓↓
さくらインターネットのFAQの該当ページに飛びます


ということで、復活したハンドメイドブログのURL: https://nonbilly-nickollie.work

  

さらに使っているテーマ「cocoon」にいくつか変更を加える



私が今ハンドメイドブログで使っている「cocoon」はとっても使いやすいテーマ(外観)です。

テーマに変更を加えるのもとってもやりやすい。というのも、いろんな方がコピペするだけでOKのCSSのコードをブログで公開してくれているから。なので、そういう方々のブログを参考に、いくつか手を入れることにしました。

ひとつだけ注意点!
CSS変更は「子テーマ」で!!


それだけは注意してね。

そして「外観」→「テーマの編集」→「スタイルシート」のところに、変えたい部分のCSSを貼っていくだけでできてしまいます。

テーマだけでなく、他の部分を変更するのも、いろんな方のブログを参考にしてやりました。楽しかった♪


で、今回、ハンドメイドブログがもっと読みやすくなるように、手を加えた主なものは、、、

・ メニュー
・ 記事タイトルと見出し
・ 目次
・ サイドバー

の4項目です。

変更を加えたら、こんな感じの画面になりました。

図3

  

ここを変えました


  

メニュー


パソコンだと、タイトルの下「ホーム」とか「プロフィール」とか出ているところ。スマホだと下の左に「メニュー」となっているところ。そこにFont Awesomeのアイコンを入れました。

これは、「外観」→「メニュー」→「メニュー構造」にある各項目の「ナビゲーションラベル」のところにFont Awesomeの入れたいものを書き込むだけ。

図1


こちらのサイトを参考にさせていただきました。
↓↓
https://affiliate-amtam.net/font-awesome/

  

記事タイトルと見出し


各記事のタイトル(h1タグ)の下に、濃い赤の線を引きました。そして見出し(h2タグ)は左に縦に濃い赤の線。一応濃い赤をテーマの色にしようかと。。。もともとNon Billy Nick Ollieのロゴを濃い赤ししていたので。

これ、どなたのブログを参考にしたか、よく分からない。あちこち見て回ってたら分かんなくなりました。

CSSのところに、こんな感じで書きました。



/*-----h1下側に線をカスタマイズ-----*/

.article h1 {
border-bottom: solid 4px #9b072c;/*線の種類(実線) 太さ 色*/
margin-bottom: 0.8em; /*下の余白*/
}

/*-----h2左側に線をカスタマイズ-----*/

.article h2 {
border-left: solid 8px #9b072c;/*左線(実線 太さ 色)*/
}


h1、下に少し余白を入れたことで、SNSのいろんなアイコンとの間がくっつきすぎなくて、見やすくなった感じがします。

  

目次


目次はこちらのブログを参考にさせていただきました。
↓↓
https://kiokunonuma.com/cocoon-sango-list/

ただ、アイコンが少し大きくて重なってしまったりしたので、アイコンの大きさを変えています。あと目次の下に余白を入れています。太字にしたところ。



/*-----目次をカスタマイズ-----*/

.toc{
background:#F9F9F9;
border:none;
display: block;
border-top:3px solid; /*アイコンの余白用*/
border-top-color:#9b072c;
padding:10px 0 20px 0;
margin-bottom: 3em; /*目次下の余白*/
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}

.toc a{
text-decoration:none;
}

.toc ul a{
color:#555555;
font-size: 16px;
margin-right:20px;
}

.toc ul a:before{
content: '';
width: 5px;
height: 5px;
display: inline-block;
border-radius: 100%;
background: #555555;
position: relative;
left: -8px;
top: -3px;

}

.article .toc ul{
list-style: none;
margin-bottom: 0;
padding-left: 20px;
}

.toc-title:before{
font-family: FontAwesome;
content : "\f0ca";
font-size:18px;
margin-right:5px;
color:#FFF;
background-color:#9b072c;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
padding:10px; /*アイコンの余白用*/
}


  

サイドバー


サイドバーも濃い赤で線を入れることにしました。

参考にさせていただいたのはこちら。
↓↓
https://web-ashibi.net/archives/1761

で、こんな感じにしています。



/*-----サイドバーカスタマイズ-----*/
.sidebar h3 {
background: none;
font-size: 16px;
letter-spacing: 2px;
display: inline-block;
position: relative;
width: 100%;
padding: 0;
text-align: center;
}
.sidebar h3::before, .sidebar h3::after {
content: '';
position: absolute;
top: 50%;
width: 28%; /*ラインの長さ*/
border-top: 3px solid #9b072c; /*ラインの色*/
}
.sidebar h3::before {
left: 0;
}
.sidebar h3::after {
right: 0;
}




なんかね、復旧作業をしながらも、こうやっていろんな変更を加えていたら、辛いはずの復旧作業もだんだん楽しくなってきた気がする。もうすこしいろいろ手を入れたくなってきています。

ということで、今日は長々書きました。ちょっとでもどなたかの参考になれば嬉しいです。

ただcssを変更する際は、自己責任でお願いしますねー。






ランキングに参加しています。お帰りにポチっとしていただけると励みになります。コントロールキーを押しながらクリックしてくださいね。

にほんブログ村 小遣いブログ 主婦のお小遣い稼ぎへ


オススメのお小遣い稼ぎはこれ! ٩(๑❛ᴗ❛๑)۶


ポイントタウン
ポイントでお小遣い稼ぎ|ポイントタウン
一番稼げる! 大手で安心!
登録しておいて損はないです
稼ぎ方はこちら


ちょびリッチ
サイフもココロもハッピーに!ちょびリッチ
使いやすい! 対応がいい!
モニター案件多数!
今一番のお気に入り♪
稼ぎ方はこちら


ポイントインカム
2018101107562715b.png
最近注目度アップ↑中
インカムだけの高ポイントゲームも♪
ここから登録で、紹介ポイント2倍!


ショップリスト
20180906173448c98.jpg
かわいくてプチプラがたくさん
メンズ、キッズ向けも充実
ここから登録で600円もらえます


CASHb

レシートがお小遣いに変わる!
紹介コード:A9Y5X (2018/12/27まで)
稼ぎ方はこちら



〈 広告 〉






関連記事

Tag:ハンドメイドブログ ワードプレス

1 Comments

しゅりりん  

はじめまして

ブログランキングからお邪魔させていただきました。
最近お小遣いブログを始めて、すごく参考にさせていただいています。
ちょびりっち、これから登録してみますね!
それと、リンクさせていただきました。もし迷惑でなければ相互リンク希望です。
これから時々ブログのほう、お邪魔させていただきますね!
色々参考にさせていただきます♪
よろしくお願いします!

2018/10/26 (Fri) 15:07 | EDIT | REPLY |   

Post a comment

Designed by Akira.

Copyright © 私でもネットでお小遣い稼ぎできるかな? All Rights Reserved.