ブログをリノベーションしました!超初心者のブログカスタマイズ。

こんにちは。コンピューター用語に脳みそが溶けそうなhossyです。

全くの素人で動画を見ながらブログを作ってみて数ヶ月。

 

文字を書くことはできるけれど、それ以外がサッパリ分からなくて、

「見にくいなあ、分かりずらいなあ」
「他の人のブログのあれみたいに、どうしたらできるんだろう、、??」

とずっと思っていました。

そこで一発噴気!!
「サーバーって何??ドメイン?? 何それ美味しいの?」な状態から、ホームページをカスタマイズしてみることにしました!!

 

めーちゃくちゃ、大変だったよ。。

でもこれで、記事に集中して書くことができます!
ホームページがスッキリしたことで、わたしの頭の中もスッキリして、書きたいコンテンツがまとまったように思います。

メルマガも登録してくださった方、全然送れなくてごめんなさい!わたしのITリテラシーの低さのせいです。。
これからちゃんと情報をお届けしていきたいと思います!

せっかくなので忘れない内に、そのカスタマイズの内容を書いておこうと思います。これからブログを始める人の役にも立てれば幸いです。

 

1、勉強に使ったツール

【YouTube】

https://www.youtube.com/

 

誰もがご存知でしょうYouTube。こういうIT系のことって、文字で説明されても知識がない人には何のことか、サッパリなんですよね。。その点YouTubeなら、動画で画面を見せながら説明してくれるので、その通りに操作できるので、助かるんです。

 

【Udemy】

Udemyは、アメリカ

発のオンライン講座のプラットフォームです。一般人の講師の方が自分の得意なことを講座にして解説しているのでYouTubeとほぼ同じなのですが、YouTubeは個人が各々投稿しているので、情報が散々していたりクオリティが人によってマチマチだったりします。

個人的には、リップノイズ(息や口の中の音)が強い動画は、内容が入ってこないので見るのをやめてしまいます。

その点Udemyなら、事務局がクオリティを全てチェックしているし、講座内容が1つにまとまっていてコースとして作られています。そして何と言ってもスゴイのが、定期的に最大95%オフのセールを開催しているということです。

100講義が詰まったwebデザインのコースや、アメリカのMBA教授が教えるMBA講座が1,200円とかで売られているんですよ…!!◯ーキャンの通信講座であれば◯万円とかするのに…。webの進化ってすごいです。

 

しかも軽いコースであれば、無料のコースも多いので見て見るといいでしょう。わたしはワードプレスはここの無料動画を参考に開設しました。ユーデミー講師は世界中にいるので、日本語のコースもたくさんあります。英語でも人気のコースは字幕付きで販売されていたります。

例えばこんなコース。

Photoshopの人気オンライン講座

忙しい人のための短期集中TOEIC800点オンライン講座、特別価格で¥2400!

Webデザイン入門オンライン講座

【ココナラ】

ココナラは、自分のスキルを出品して売るマーケットプレイスで、フリーランスのスキルを売り買いすることができます。

わたしはフリーランスとしてスキルを出品する方だったのですが、依頼する方になってみると、フリーランスに直接依頼ができるって本当にありがたい!!!

自分でできるだけやってみても行き詰まって「ここ詳しい人に助けてもらえたらなー」てこと、あるじゃないですか。そんな時に、その道のプロの方に力を貸してもらえるんです!

自分にはチンプンカンプンなことでもその道のプロの方からしたら、ちょちょちょいのちょい、ですからね。いやー、助け合いの時代ですね。

 

一番助かったのは、サーバーの引っ越しをやってもらえたことでした。
色んなやり方をネットで調べても、何だかよく分からないエラーみたいなことが次々起こるんですよ。。FTPサーバー?とか見てみちゃったりして、もーなんのこっちゃ分からないですよね。笑

しかも業者にお願いすると、3万円〜とか料金がかかるのですが、それをこちらでは、なんと2,000円で。。

もうね、感謝しか思いつかないです。本当に。

もちろん得意なことがある人は、出品者として出品することも可能です。わたしはお客さんとして利用して感動して、自分のできることも出品しました!大したことではないかもしれないけど、そのスキルが欲しい人にとっては、かゆいところに手がとどくスキルなこともあるかもしれなですから。

無料会員登録はこちら

出品者の登録はこちら

2、超初心者がやったカスタマイズ

文字サイズを変更する

 

わたしはワードプレスを作った時に見た動画の人に言われた「Genesis Framework(ジェネシス・フレームワーク)」というのを、言われる通りに買ったんですね。(7千円前後したと思います。。)なんかSEOに強くて、アクセスアップにはかかせない、すごいやつとかなんとか。。

(たぶんやることをやってたらその効果は大きいのかもしれないですが、その十分な使い方も分からないようなこのブログには何の意味もなさそうなので、もっと上級になってから、その価値がわかってから購入してもよかったと思います。無料テンプレートの方が、困った時の情報は多いです。初心者にはこのテンプレートのせいで、やきもきすることが多かったです…。)

 

でこれが英語圏のテンプレートなので、無料テンプレートでもそうなのですが、国産ではなく英語用に作られているテンプレートだと、文字フォントが不自然に大きくなったり小さすぎたり、、。

フォントサイズがしっくりくるテンプレートを選べばいいだけかもしれませんが、わたしの場合はもう有料のテンプレート買っちゃってたし、どうしてもこのデザインがいい!っていうテンプレートを使いたい時もありますよね。

 

わたしのブログは異様に文字が小さかったので、文字サイズを変える方法をアレコレやってみました。でも、うまく文字サイズが変わらないんですよね。。たぶんGenesis Frameworkオリジナルのコードなのかもと。Genesis Frameworkは人気がある有名なフレームですから、英語で調べたらカスタマイズの方法はいっぱい出てくるのでしょうが、日本語でのカスタマイズ情報は少ないですね。

IT系の説明なんて日本語でも見てもチンプンカンプンなのに、英語で見て分かるわけないじゃないか!ということで、手探りで四苦八苦してフォントサイズを変えることができたので、その場所を書いておきます。

 

外観>テーマの編集で、 スタイルシート(style.css)のそれぞれ以下の場所でした。

全体の文字サイズ↓

textarea {
color: #666666;
font-family: Arial, Helvetica, Tahoma, sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 20px;
margin: 0;
padding: 0;
text-decoration: none;
#title {
font-size: 30px;
line-height: 30px;
}

タイトルの文字サイズ↓

#title a,
#title a:hover {
color: #333;
text-decoration: none;
font-weight: bold;
}

ブログの概要、説明の文字サイズ↓

#description {
font-size: 15px;
font-style: italic;
}

メニューの文字サイズ↓

#nav li a {
color: #555555;
display: block;
font-size: 14px;
position: relative;
text-decoration: none;
line-height: 22px;
border-bottom: 1px solid #e6e6e6;
margin-right: 20px;
text-transform: uppercase;

 

さらにはこれを変えてもまったくブログには反映されなくて、(タイトルフォント100とかにしても、小さいまんま。。)

ダメもとでクロームのキャッシュをクリアしたら、反映されてました。

参考にした記事はこちら。
https://love-guava.com/wordpress-css-modify-three-check-point/

 

便利な追加CSS

追加CSSにコピペするだけでカスタマイズできるという初心者にありがたい設定。うまく使えなくて利用していないが、こんな機能があるんだと希望をもらった。

参考記事:https://www.akaeho.net/wordpress-edit-css/

 

見出しのデザインを変える

これも自分のブログの気に入らない点のひとつでした。見出しをつけても、少し他の文字とサイズが大きいくらいで、どれが見出しか分かりづらい。。

見出しの文字サイズを大きくしたり、下線をつけたりして色々工夫はしてみたのですが、やっぱり他の文字に埋もれて見づらい。。

それはこちらの記事で解決しました。
http://tabibitojin.com/blog-design-headline-css/

 

しかも超初心者に優しい、YouTubeのビデオ付き。他の方法も色々調べましたが、理解できなかったですもん。

やり方は簡単。

外観>css編集で、追加CSSに使いたいタイトルのコードをコピペして入れるだけ。

わたしの場合はトップページの「最新のポスト」やそのタイトルまで見出しになっちゃいました。これは今のわたしの実力じゃあ直せないからしょうがない。と諦めていたら、「ホームページには適用しない」という文字列があるのを発見。

body:not(.home)

これをh2の上につけたら、元に戻った!!やった!!!

 

もくじをつける

他の方のブログを見ていて、もくじを押すとその該当の箇所にスキップしてそこから読めるようになっていて。

「便利!!カッコいい!!!」と思っていましたが、どうしたらそんな動きをしてくれるのか分かりませんでした。

今この機能がつけられたから、これだけ長い文章でも気にせずどんどんと書くことができます。今までは長くなると、これ以上読みづらいかなと思って、途中で切ったりしてましたから。それもそれで読みづらいですよね…。技術ってスゴイ!

この機能は「Table of Contents Plus」というプラグインでできるそうです。

このプラグインの設定方法はたくさん情報があるのですが、問題はその目次をどうやって表示させるのかが全然分かりませんでした。

一晩探し回った結果、こちらで解決。これだけのことが、初心者にはイチイチ大変なんです。。
http://co-co-wa.com/wordpress-table-of-contents-plus/#i-2

 

あとこれも、ページ内の「関連記事」とかがもくじに反映されちゃったりして、それを除外するっていう作業が必要になります。

参照記事:http://hwbase.com/archives/1005

 

「Table of Contents Plus」は”見出し”に設定された文字を、自動的にもくじに入れてくれる機能らしいので、デフォルトでタイトルとして設定されている文字を勝手にもくじに入れちゃうんですねー。

コンピューターって賢いなー。って思っていたけど、意外と単純で単細胞なやつなのかも?って思いました。そりゃそうですよね。0と1しかないんですもんね。。

 

一見IT系スマートジェントルマン?

今終わってみてまとめてみると大したことない操作だったりするのですが、わたしのようなプログラミングとかコードとか何も分からない人には、無茶苦茶大変なことでした。

イメージするならば、IT系でスマートに見えるジェントルマンを信頼していたら、無茶苦茶な動きをされて振り回されっぱなしだった感じ。

こんな感じの人?デキるっぽいのに、思った通りに仕事してくれない。。

いやー、本当に振り回されました。疲れた。

まだまだ解決していない問題もたくさんあるので、IT詳しい本物の方、いたら相談させてください。本当に脳みそ溶けそうでした!

でも自分でやってみて良かったです!未だに全然分からないですが、インターネットというものをほんとにほんの少しだけ、理解できたような気がします。

このエントリーをはてなブックマークに追加
スポンサーリンク

海外で暮らすフリーランスになる方法 無料e-book

わたしが海外で暮らすフリーランスに必要だった情報を、1冊の本にまとめました。90ページ以上の文字数たっぷりなe-bookになりました。

お申し込みはコチラ

 

 

自己紹介【hossy】

ドイツ在住。フリーランサーとして海外に暮らし始めて気づけば3年目に突入。

海外で新しい暮らしに挑戦したいフリーランサーのサポートを行っています。また海外在住を活かしたお仕事のご依頼も承ります。

● 雑誌やウェブサイトでのライティング、取材、翻訳(英語⇄日本語⇄ドイツ語)
● 留学・移住サポート、コンサルティング
●日本文化や生産物の海外PR、SNS発信

 

P.S
こんな感じの旅行記事書きたい人いますか?
観光記事なので世界中どこからでもオーケイです。https://www.travel.co.jp/guide/article/28831/

 
面接通るようお手伝いさせていただきます♪
やりたい方いたらメッセージください!
%d人のブロガーが「いいね」をつけました。