【独学でプログラミング】テックアカデミーのWebアプリケーションコースを再開。

久しぶりにプログラミングの勉強を再開します。

自分の大会がとりあえず終わって、かなり真面目にセカンドキャリアを考えなくては。。。になってきたのもあり。

まずは復習も兼ねて、以前やっていたオンラインブートキャンプ Webアプリケーションコース を最初からやり直し且つ応用でサンプルページを自分の画像やURLを入れたり、デザインを変えたりといった感じで進めていこうと思ってます。

別のブログでもちょっと書いたのですが

趣味がないならプログラミングを始めてみては？PC一台で楽しめて仕事にも活かせる！ - 人生をシンプルに☆

全くの独学って結構大変。。。

TechAcademyのざっくりとした流れ

TechAcademy [テックアカデミー] は受講後もオンライン教材を閲覧することができるのが良いところです！

メンターへ相談はできないんですが、過去のslackのチャットなどは保存しておけば見ることができます！（私は１部だけ保存していましたが他は消えてしまった。。もったいない。。）

事前準備（cloud9、github,herokuの登録など）

↓

html,cssの基礎、応用（簡単なWebページのプロフィールやお問い合わせフォームを作る）

↓

bootstrapの基礎

↓

Gitの使い方、ポートフォリオの作成

↓

Rubyの基礎

↓

Railsを使ったアプリケーション開発

• メッセージボード
• Twitterクローン
• ECサイトっぽいもの

↓

オリジナルアプリケーションを考えて作成。

ちなみに私はgitのところとTwitterがめちゃくちゃ時間がかかりました。

オリジナルアプリに関しては、締め切り3日前に使おうと思っていたSNSのAPIの規約が変更になり実現しないことが判明。。そういうわけでオリジナルアプリは完成できませんでした。。

１ヶ月でTechAcademyは完了するのか？

私は１ヶ月仕事がある日は３〜５時間、ない日は８時間くらい缶詰になってなんとかオリジナルアプリまでは質問しまくって終わった（というかほとんどメンターにやり方を聞いた）

完了自体はすると思うのですが

結構過酷なので仕事しながらの人はちょっと余裕を持って12週間コースの方がじっくりアプリケーションの開発にかける時間ができると思います！

今回は私は再勉強になるのでオリジナルアプリ以外であれば１ヶ月で終わると（多分思うんですが。。）今回は一切メンターがいないので友人やオンラインでつながってるプログラマーに色々質問しまくろうと思います。

周りに聞く人がいない人は？

私も利用しているのですがteratailという無料で登録すればエンジニアさんに相談できるというサービスがあります！スタックオーバーフローを今まで使っていたのですがteratailの方が個人的にはサイトが見やすい（気がする）なので独学で進める人は積極的にこう言ったサービスを利用するのがいいと思います（ただある程度的確な説明をしないとすげーぶった切られますが、それも修行です。質問の仕方の勉強にもなるかもです。）

まとめ

結局手を動かさなければ全然覚えないし、言語をいくら勉強しても全然ダメでした！

サンプルアプリを作ったりしていると、なんとなく流れがわかってきた（ようやく）レベルです。なので実際の現場に言っても全然役に立たないレベルです。情報系の大学に入っていたわけでもなく機械音痴でどっちかっていうと脳みそまで筋肉なんじゃないかと思ってるくらいの私でも毎日触れていると脳内に浸透していくので、とにかくエンジニアになるにはひたすら手を動かし続けるしかないですね。。

テックアカデミーは１週間無料体験ができるのでとってもお得です！

オンラインブートキャンプ 無料体験

Wimax2の速度制限が原因だった件

ポケットwifiの速度制限が問題だったようです。（チーン）

simpledancer.hatenablog.com

アップデートもし、キーアクセスチェーンも削除したけどどうもうまくいかない。 スタバにいた時はキーアクセスチェーンを削除したらうまくいったのに。。。

もしや。。。ということでググりました。

1分でわかるWiMAX2の速度制限と３つの対処法 料金プラン改定後

私は１ヶ月の制限が7GB超えていたっぽい！

Amazonプライムビデオを見すぎたようです！！！（泣）

来月から少し落ち着くのでプログラミングの勉強を再度やり直したくてこのままネットがブツブツ切れるようだったらどうしようと思っていたので、

とりあえず４月からはまた通常通りに戻る（予定）なのでちょっと一安心。

このブログも仕事先のお店のwifiで書いてます。

ポケットwifiって便利でいいわ〜と思っていたけど

速度制限ってものを全く考慮していませんでした。。

あと3日間はスタバと大阪遠征のため、ホテルのwifiに頼ります。

来月の目標はTechAcademy [テックアカデミー] のコースを（去年受講したやつ）再度挑戦して

一個アプリを作りたいです。

TechAcademy [テックアカデミー] は受講終了後もオンライン教材を見て勉強することが可能なのです！

なのでオンラインの有料系のスクールをやるならTechAcademy [テックアカデミー] がオススメです！（１週間無料体験もできます）

過去ログがアーカイブされてもう見れなくなってしまったんですが、

ちゃんと保存していれば先生とのslackのチャットも終了後見ることができます。

ただ、１ヶ月プログラミングをやるとググる能力が上がるのである程度は自分でググって解決することもできますし。

teratailとか質問サイトもあるのでそれで質問してみたりとかできますし（便利な世の中だ！）

ちなみに１ヶ月自宅で５〜７時間プログラミングやslackしてても速度制限はどうってことなかったです。（来月はプライムビデオを控えて勉強します。。）

OSのアップデートが全てを解決してくれた件

先日、こんな記事を書きました。

simpledancer.hatenablog.com

で、動くようになったんですが

時々ブツブツ切れる。。

これはルーターのせいかなと思ったんです。

でルーターも再起動させたりしてみたのですが関係なく。

いや、困ったな。。。

でも根本的な、OSアップデートしてないよね。。。

と思ったのです。

OSをアップデートしよう

windowsは最近使ってないのでわからないんですが

Mac頻繁にOSが新しいのなりますよね。

それで放置、してたんですよね。

誤作動がこわくて。

最終的にもしかしたらここかと。

そういうわけでOSをアップデートしました。

正直半日かかっちゃったんですけれど外出していたので良しとします。

正常に動作しました！！

心配な方は他の端末でOSアップデートについて色々調べてみると良いかもしれません。

以前、iPhoneのupdateをした時のアプリの誤作動がトラウマになっていたようです。。。

そういうわけで、とりあえず今の所は

アップデートとキーチェンアクセスの削除でうまくいきましたよ！ってことなので

動作が遅いMac使用中の方は試してみてください！

取り急ぎご報告でした♪

Mac使ってるけどいきなりwifiが繋がりにくくなった〜〜（泣）の解決方法です

きょう、朝他のブログ書いていた時から調子が悪かったんですが

wifiルータは正常なのに、全然ネットが繋がらなくて！

何なんだー！と思って色々調べてやっと復旧しました。

MacBookの方で繋がりにくい方は試してみてください！

 もう、せっかく書いてたのに本当に大変だったんです。。。

ありとあらゆる操作を試しました。

久しぶりにこんなにシステムをいじりましたよ。

もしMacbook繋がりにくい人がいたらやってみてください！

ちなみに私はMacbook air の11インチを使ってます〜

まずはwifiが繋がっているか確認する！ 

そもそもwifiが繋がっているかどうかを確認。 

ちなみに今池袋のスタバで作業してます。

あの、最近店員さんが「お仕事帰りですか〜？」とか話しかけてくることが増えたんですが、なんかの強化月間なのでしょうか？

若干義務的に話しかけてる感が否めないんで気になってます。スタバの方針だろうか。「お一人でいらっしゃる女性客には積極的に話しかけることでリピーターになってもらおう!」みたいな。仕事じゃなかったけど「はい、仕事です〜」って答えました。

大学生かな〜あの子。

話が脱線しました。

他のデバイスもiphoneなどあればwifiに繋がっているか確認します。

下記私はつながらなかったのですが基本的に上のブログの内容を試してみると接続できることが多いみたいです。

参考にさせていただいたブログ

Macで突然httpだけ繋がらない（httpsは繋がる）現象が・・・｜シロクジチュウ。

MacでWi-Fiの速度が出ない、繋がらないなど、調子がおかしい時に試したい5つの対処法 – OTTAN.XYZ

MacのWi-Fiが正常に繋がらない時、または速度が遅い時に試すべき方法 | gori.me（ゴリミー）

私のMacちゃんが通常に戻ったのは下記のやり方です。

support.apple.com

キーチェーンアクセスユーティリティを使って、保存されているネットワークのパスワードを削除します。

やり方 

1. Launchpadの中のキーチェーンアクセスを開きます。

   

2. 左サイドバーのシステム　を選びます。
3. そしていろんな種類がごちゃまぜになってますがAirMac ネットワークのパスワードという種類をまとめて並べます。
4. AirMac ネットワークのパスワードを全て削除します。（過去にアクセスしたwifiネットワークが羅列されてると思います）
5. 全部削除したらパソコンを再起動します。
6. 再度wifiにつなげてみます。

するとサクサク動くようになりました！

いろんな方法がありますが、「削除する」って結構ドキドキするんですよね。。システム関係疎いので。。

自分で調べて解決することで自信がついた

私は結構わからなかったらすぐ人に聞いてしまったり

放ったらかしにしちゃったりしてしまうタイプだったんですが

今回は自分でググって（時間はかかったけど）調べて解決できたので

すごく自信がつきました！

これもプログラミングやブログを書くことで検索力がついたおかげかな？なんて思ってます。

wifi繋がらないのキーチェーンアクセスを削除したら直った😂😂
呑みの誘い断ってググって自分で解決できたので、自分をほめてあげるためにワイン買って帰る！

— AcroDancerYminimal (@acro_y) 2017年3月23日

便利な紹介ツール・ヨメレバを使ってみました！

ブログにアフィリエイトリンクを貼ったりしてる人はご存知だと思いますが

ヨメレバ・カエレバ。

こういうやつ↑

他の方のブログでどうやってやるのかな〜と気になっていたもののずっとカスタマイズせずに放置していたんですが、やっと重い腰をあげました。

書籍紹介ブログパーツ ヨメレバ

ちなみに最近はRubyの勉強は滞り中。

大会終わったらまた復活しようかなと。

ヨメレバ作製法の流れ

1. 楽天、amazonのみ私は作成します。のでそれぞれのアフィリエイトのIDを取得しておきます。

2. http://yomereba.com/に移動して、取得したIDを入力します。

3. 情報を保存したらそのまま本のリンクを作成するために、紹介したい本のJanコードを調べてコピペ、貼り付け。
4. 生成されたリンクを自身のブログのhtmlに貼り付けます。

ブログ自体のcssのカスタマイズ

1. 管理>デザイン>デザインcssにカスタマイズのcssを貼ります。こちらのサイトからコピペさせていただきました！

   www.ituore.com

2. はてなブログProの方はスマホ版もカスタマイズできます！スマホマーク>記事>記事下　にコードを埋め込むだけです。

ヨメレバにするメリット 

• 複数のサービスのボタンを設置できる。
• 見た目がすっきりとしていて読み手側からも見やすい。

あたりだと思いますが、もし今普通にアフィリエイトリンクをペタッと貼ってるだけの方はチャレンジしてみてください！！

余談ですが最近世界的に有名なキャリーハンターさんというポールダンサーさんが

元Javaのプログラマーだったと知りテンションが上がりました!

ロゴジェネレーターで無料で簡単にブログのロゴを作る

ブログのヘッダー画像ってブログのイメージにつながりますよね？

「いい記事を書いていたらあまり関係ない」

という気がするようなしないような？

でも、やっぱりヘッダー画像の印象で読みたいか、読みたくないか？

とかサイトの趣向とかって出てくるような気がします。

私もいろいろいじってみたんですが（一時期文字を手書き風にしてみたり。）

先日ロゴを簡単に製作できるロゴジェネレーターの存在を知ったのでシェアしたいと思います！

ロゴジェネレーターで作る流れ

詳しいロゴの作り方は下記オススメサイトなどからジェネレーターの操作方法を確認しながら作ってみてください♪

大まかなはてなブログに貼る流れ

まずは気に入ったフォントを探す

↓

各ジェネレータの仕様にもよりますが、ロゴにしたい文字を入力する

↓

画像データで書き出す（htmlができるものもある）

はてなブログに戻って

管理画面の　デザイン>カスタマイズ>ヘッダー

で画像をアップロードします。

表示設定はタイトルロゴなので下の画像だけ表示。

試しにシンプルなやつにしてヒゲマークをつけてみました

こんな感じ。これはこちらのサイトで作りました↓

Squarespace Logo

あと別でサイトを今作ってるんですが

こういうのも簡単にできます。

これは

Logo and Graphics Generator - Cool Text

で作りました！ロゴの種類豊富です。

注意点

ロゴを作る際に日本語だと文字がうまく反映できなかったりするので

その場合は一旦メモ帳などに書いたものをコピペして貼り付けるとうまくいきました！

（日本語対応のロゴのみ！）

オススメサイト

matome.naver.jp

girlsnet.ninpou.jp

ferret-plus.com

まとめ

ちょっと調べるだけでたくさんの種類のジェネレータがありました。

ロゴを作るだけで一気にオリジナリティも出たりブログに愛着がでます！

で、作るの自体が楽しいです♪

webの知識なんてなくても簡単にできるので是非試してみてください！

3分でできた！はてなブログにインスタグラムのフィードを表示させる方法

もともとアメーバブログで作っていた個人のダンスの告知ブログを

せっかくはてなブログproにしたこともあり、はてなに変更しよう！と決めて

新たに１つブログをまた作ることにしてみました。

自分のダンスの活動用のブログなので

• 写真が多い方がいい
• フォロワーが欲しいのでインスタグラムのフィードを埋め込みたい
• お問い合わせページを作りたい

というのをまず決めて、インスタを表示する方法を調べてみました。

一番簡単な方法

まず、サイドバーに表示をさせたかったのですが、幾つか方法がありましたが

2種類やってみたのですが、一つ目の方が私はうまく表示できなかったのと

InstagramのユーザーID、アクセストークンをInstagramdeveloperから取得しなくてはならなくて結構時間がかかるかなと思ったので（もともとアプリの制作のために取得はしていたのですが）

snapwigitというサイトから作る方が恐ろしく簡単。だったのでご紹介します

SnapWidgetでフィードを埋め込む方法

1.まずSnapWidgitにアクセスします。

SnapWidget | Instagram Widget

ログインはFBのアカウント持ってたら色々入力しなくて済むので楽。

2.ログインしたら、Get Your Free Widgetを押して自分のインスタアカウント名を入れます。あと希望の設定を入れていきます。私はもともとの設定をとりあえず変えずに。

3.

表示形式が色々出てくるので

私は文章とかはいらないので写真のみの

3段表示で見やすくしたかったのでGRIDを選択しました。そしてGetwidgetをポチります。

4.そのあと貼り付け用のコードが生成されるのでそれをコピーして自分のはてなブログの　デザイン＞カスタマイズ＞サイドバー>モジュールの追加>

でHTMLを選択してコードを貼り付け→適用。

こんな感じで表示が成功しました！

表示数を増やしたければ2のLayoutの数字を変更したりすると良いです。

ITエンジニアの無料カウンセリング【ポテパンフリーランス】

参考にさせていただいたブログ

もう少し時間がかかるかなと思ったのですが、意外にもあっけなく簡単に終わりました。

参考にさせていただいたブログはこちらです↓すごくわかりやすかったです！

www.mukaikaze.net

railsチュートリアル始めました②

昨日は近所のカフェで大好きなカフェラテ飲みながらチュートリアルをやってました。

wifiあるしこじんまりしててオシャレで店員さんが丁寧。時々行くお店。

simpledancer.hatenablog.com

1章は簡単に１０分くらいで終わるかなあ〜なんて思ってたらgemfileのところでちょっと戸惑ったりサーバー接続が良くわかんなかったりでちょっと時間かかってしまいました。

railstutorial.jp

1章のgit,herokuのあたりは今割愛します。これはこれでややこしいので自分で整理するためにも別でまた書きます。

今日は2章〜のToyアプリに入っていきたいと思います。

第２章Toyアプリケーション

Railsアプリケーションの基本的な仕組みを体験するために、別のプロジェクトを作成します。 この章のおもちゃのアプリ (toyapp) では、scaffold (コラム 1.2) を使って短時間でコードを自動生成します。ただしscaffoldで自動生成したコードは非常に読みづらいので、第2章では自動生成コードの解説は行いません。その代わり、生成されたURI (いわゆるURLs)⁵ をWebブラウザで確かめるだけにします。

 では、実際にToyappをやっていきます！

まずはrails new

１章と同じように新たに rails new toy_appと　ターミナルにうちこみ、toy_appフォルダを作成して初めて行きます。

コードは全てrailsチュートリアルにあるので省略します！

Ruby on Rails チュートリアル：実例を使って Rails を学ぼう

gemfileを書き直し、bundle installをしましたが、私はうまくいかなかったので

bundle updateをしてみました。

そうするとsuccessしました。

そのあと使ったことのないBitbucket　

なるものを使うことになるのですが。。なにこれgitとどう違うの？

Bitbucketとは 

私githubは使っていたのですがbitbucketなんて初耳だし！

で、ググってみましたところ

GitHubとBitbucketの比較：Webデザイナーの業務にはBitbucketが向いている | Internet | ウェビンブログ

BitbucketはGitHubと同じ、バージョン管理ツールのリポジトリを預かってくれるホスティングサービスです。

とのことだったので、じゃあgithubでよくないか？と思ったのです。なので私はbitbucketではなくgithubでリポジトリを作ろうと思います。(だって面倒くさいんだもん。。。）と思ったら最初にbitbucketで操作してしまったので

Warning: Permanently added 'bitbucket.org,104.192.143.1' (RSA) to the list of known hosts.
Permission denied (publickey).

なんて警告が出た。からおとなしくBitbucketを使ってみます。

１章もまとめてBitbucketでリポジトリ作ったほうがよさげなので１章のappとともにやってみたいと思います！　続く。

Wordpressのバージョンをアップデートが必須だった理由

Twitterで

「いますぐwordpressを更新してください！」と流れてきたました。

https://t.co/6UiywgFcca

— AcroDancerYminimal (@acro_y) 2017年2月6日

大至急】WordPressを至急最新版に。いまちょっと検索したら世界で何十万、何百万規模でやられています。

何のこっちゃ〜？と思ったら

WordPress の脆弱性対策について

最終更新日：2017年2月7日

※追記すべき情報がある場合には、その都度このページを更新する予定です。

概要

WordPress.org が提供する WordPress は、オープンソースのCMS（コンテンツマネジメントシステム）です。
WordPress には、REST API の処理に起因する脆弱性が存在します。

本脆弱性が悪用された場合、遠隔の第三者によって、サーバ上でコンテンツを改ざんされる可能性があります。

２日ほど遅れてアップデートしました！

私自身のサイトは特に問題なく！

なぜバージョンアップが必要だったのか

問題は前のバージョン4.7.0or 4.7.1に脆弱性があり

細工したリクエストをwordpressのサーバに送り投稿内容が改ざんされる可能性があるとのことでした。

私のサイトが急にアダルトサイトとかになってたら確かに嫌かも閲覧数増えそうだけど（w）

個人のサイトが攻撃されることは稀でしょうが企業のホームページなんかだと確かに大変な損害ですもんね！

以前の意識と変わったこと

私だけかもしれませんが、前までは

「バージョンアップをしてください」って表示が出ても

放置or理由見ずに更新をしてました。

それがちゃんと公式サイトまでしっかり読んで更新するようになりました。（成長）

そんな意識の変化があったなあ〜なんて自分に感心してみました。（普通の人は当たり前にやってることかもしれないけど！）

WordpressはIT音痴にはハードルが高めだけど・・・

tabibit.net

サイトの中に経歴を入れてみましたが

レイアウトが下手だし

思うようにいかない！！！！

IT音痴だけど、本当にちょとずつちょっとずつカスタマイズできた時の喜びは

代え難い。でもイライラするけど。子育てのような楽しさ？（産んだことないけど）

地道にちょこちょこ更新します。。

話が逸れましたが

更新まだの方は自分のサイトが変な投稿されないようにバージョンアップしましょう！

simpledancer.hatenablog.com

Rails チュートリアル始めました①

最近railsから離れていたので不安になり

初心者お勧めRailsチュートリアルをやってみようと思います。

railstutorial.jp

www.railstutorial.org

Ruby on RailsチュートリアルはWeb開発者やIT起業家を目指す方向けの優れた入門書として書かれており、Rubyの基礎、HTMLとCSS、データベース、バージョン管理、開発技法などWeb開発のすべてが網羅されています。 本チュートリアルは初心者のみならず、Web開発のベテランにとっても有用です。MVCやREST、ジェネレータ、マイグレーション、ルーティング、ERBなど、Railsフレームワークのコア技術を本チュートリアルでまとめて学ぶことができます。 初心者・ベテランを問わず、Ruby on Railsチュートリアルを最後まで終えることができれば、Rails周辺のさらに高度な内容の書籍、ブログ、スクリーンキャストなどを読み解く力を身に付けられます⁴。 

 私はcloud9で開発をすることにしました。ローカル開発環境も一応整ってはいるのですが、cloud9の方が慣れたので、まずはcloud９からやってみます。

simpledancer.hatenablog.com

このrailsチュートリアルでは13章の中で３つのアプリが作れるようになっていて、まずは最初の第１章での１つ目のアプリについて勉強したことを書いていこうと思います。

まずはworkspaceを作る

cloud9で

workspace→app名→private or publicを選択→rails tutorialのアイコンを選択。

これでrailstutorialのワークスペースができました。

railsのフォルダを作成

$ rails _5.0.0.1_ new hello_app

とターミナルに入力をするとhello_appのフォルダが生成されました。

フォルダの中にはたくさんのファイルができました！

そのファイルの中のgemfileを開きます。

細かい指示はrailsチュートリアルの中に説明があります。

gemfileを置き換える

リスト 1.5:

のファイルにgemfileを置き換える。

そしてターミナルにbundle installコマンドを実行

↓

私の場合はそこから進まなかったのでbundle updateコマンドも実行しました。

rails serverを立ち上げる

私の場合はcloud9なので

rails s -p $PORT -b $IP 

を実行します。（ローカル開発だとrails s)

チュートリアルだとshareを開く、だったのですが

私の場合ターミナルの中の表示 http://0.0.0.0:8080をクリックすると

と無事立ち上がりました。

何度かrailsの演習はしてるものの勝手が違うとこれだけの作業でかなり戸惑いました。

ちなみにサーバーを切断したい場合は

Ctr+cでサーバーが切断できます。

Hello Worldを表示する

1.Applicationコントローラに

 def hello
    render html: "hello, world!"
  end

を追加する。

2.config/routes.rbファイルにを打ち込む。

 root 'application#hello'

そしてまたサーバーを立ち上げる。

表示がでました！

チュートリアルサイトではこの後gitについて触れていますがgitについては別のブログで書いてみます。未だに慣れません。。

rails自体が久しぶりなのもありで結構hello worldまで時間がかかってしまいました（泣）

引き続きtutorialの実行のブログも同時進行していきたいと思います！

Poledanceのwebsiteをwordpressで構築してます！しかし、、レイアウトがごちゃごちゃしてしまってかなり見にくい。。。こちらのカスタマイズも頑張ります♪

tabibit.net

はてなブログで目次を表示をやってみた。

今日ブログを見てもらって色々アドバイスをいただいたのですが、その中で

「目次を作ったほうがいいです」と言っていただいたのでつけてみました！

staff.hatenablog.com

目次を自動生成する

この「見たまま」記法の状態で　目次のアイコンをポチッとすると

[:contents]と記述されます。

そのあとに目次にしたい内容が自動生成されますが

内容のタイトルを必ず大見出し・中見出し・小見出しで作らないと表示してくれません。

でも、思っていた以上に簡単にできちゃいました。

 目次と言う文字を表示する

 ただ「目次」という文字を表示するにはコードをつけたさなくてはいけないようです。

kotublog.hatenablog.com

こちらのブログを参考にさせていただきました！

.table-of-contents:before {
content: "目次";
font-size: 20px;
font-weight: bold;
}

というcssを書きます。

管理画面から

PCだとデザイン>カスタマイズ＞デザインCSSの所に埋め込めば表示されます。

スマホ版だとスマホマークの方を選んで>記事＞記事上

です。

表記してみると、やはり目次があるのと無いのと印象が違いました。ちょっとわかりやすいかも。確かに本にも必ず目次がありますし。

今後の課題

• マークダウン記法でコードを書く
• プロフィールをちゃんと書く（多少のストーリー性）
• FBの連絡先追加→これに関してはちょっと保留です。Twitterでとりあえずフィードを埋め込んでるのでFBはたさないかもです。

カスタマイズもなかなかうまく思うようにいかなかったりで前途多難ですがゆるゆる進めていこうと思います。

今日はプログラミングのオンラインの勉強会で色々参考になりました！

時々こうやってダイレクトに意見を聞くのも大事ですね〜。カスタマイズに精を出しすぎてプログラミングが疎かになってるのでちょいちょい頑張ります♪

ちなみに背景色を変えてみましたが、見やすいのか見にくいのか自分でやっているとよくわからなくなってきました。。

久しぶりに数ヶ月前のブログを読んでみた。↓

私がプログラミングを始めた理由☆ - アスリート系ですがプログラミング始めました。

意外と簡単！Wordpressの見出しをカスタマイズ♪

やっとワードプレスの見出しをカスタマイズしました！（まだ完了ではありませんが）

とりあえず３パターン作ってみました。

こんな感じ。

テキストは

<h2 id="danraku2">見出し２</h2>
<h3 id="danraku3">見出し３</h3>
<h4 id="danraku4">見出し４</h4>

こういう感じになってます。

ステップ的にはとっても簡単でした！（※以前貼っていたリンクが無効になっていたので別リンクを貼ります！）

affiliate150.com

必要なのは４ステップ

step1:

2つのプラグイン

• AddQuicktag
• custum css

をインストール

↓

step2

AddQuicktagにh2,h3など必要なものを入れていく

↓

step3

外観＞カスタムCSS　に移動して自分の表示させたいcssのコードを入れていく

www.keni-customize.net

ここに１１種類の見出しのサンプルコードがあるのでそれをまずは入れてみる（色などは後で変更しましょう）

↓

step4:

cssを保存し、wordpressの記事を書く際、見出しを表示したいところで

入れたい見出し番号とquicktagsの所を変更h2,h3など。

※意外とずれてしまったり表示が外れてしまったりするので、一度ビジュアル→テキストでタグの中にちゃんと見出しの文言が入っているかどうか確認してプレビューしてから公開しましょう。

今後の課題

見出しがカスタマイズできたので

• フォントを変更して見やすくする（今微妙な明朝体？）
• サイドバーが見にくいので整理して画像を入れたり見やすくする。
• 見出しの色を変更する。
• ソーシャルのアイコンを変更する。

カスタマイズして表示出来ていくのが楽しいです。

wordpressの方がはてなブログよりもちょっと面倒くさいですが、引き続き読みやすいサイトになるように続けていきます♪

※サイトをActivello→Simplicity2にテーマを変更したら見出しが若干css崩れました。。

カスタマイズ前途多難。

tabibit.net

ナビゲーションバーを均等に配置してリンクを設置する

続き

simpledancer.hatenablog.com

さて続きです！

昨日までに見た目（css)とリンクの大元のコードはhtmlに書き込みましたので

こんな感じでできましたが、まだこの状態だと左よりになっていて、さらにリンク先が入っていないのでメニューをクリックしても何も出てきません。

まずメニューを均等に並べる

デザインCSSを変更していきます。

#menu-content > li > a{
position: relative;
display: block;
height: 100%;
width: 100%;/*ここを追加*/

line-height: 40px;/*２*/
background: #444;/*９*/
color: #fff;/*10*/
font-size: 70%;
text-decoration: none;
z-index: 2;
}

そして

#menu-content > li{
position: relative;
float: left;
height: 100%;
text-align: center;
width: 20%;/*ここを自分のカテゴリ数を考慮して%を入れる。

私の場合は100/5カテゴリ=20なので20%*/

そうすると

均等になりました！

カテゴリーの中身の変更

ヘッダ＜タイトル下

ここのhtmlを変更/追加します。

参考にさせていただいたブログはたくさんカテゴリや子カテゴリがあるのでそれを削除していきます。（私の場合必要なのは今の所５カテゴリ2子カテゴリとして）

 <ul id="menu-content">
        <li>
            <a href="１階層目のリンク">カテゴリ１ <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="２階層目のリンク">カテゴリ１-１</a></li>
                <li><a href="２階層目のリンク">カテゴリ１-２</a></li>
                <li><a href="２階層目のリンク">カテゴリ１-３</a></li>
                <li><a href="２階層目のリンク">カテゴリ１-４</a></li>
            </ul>
        </li>

こちらの内容を例えば私の場合だと

↓

<ul id="menu-content">
<li><a href="#">プロフィール</a></li>
<li><a href ="http://simpledancer.hatenablog.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA">ブログカスタマイズ</a></li>
<li>
<a href="#">プログラミング <i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="http://simpledancer.hatenablog.com/archive/category/Ruby">Ruby</a></li>
<li><a href="http://simpledancer.hatenablog.com/archive/category/JavaScript">Javascript</a></li>

のように変更します。""の中身をカテゴリーのリンク先URLをつけ、hrefタグの間にカテゴリ名を挿入します。

するとカテゴリーのボタンをクリックするとリンク先のURLに飛ぶことができます。

アドセンス張ってる方への注意点

• Googleアドセンスの上にドロップダウンメニューがかぶさってしまうと、規約違反になってしまい、広告を止められる可能性があります。特にサイドバーの上に広告を貼っている方は、被りやすいので気をつけて下さい。

ということなので気をつけながらやりましょう！

スマホ版も改良してみました！

simplelifedancer.hatenablog.com

ナビゲーションバーを配置する（工事中のため途中まで！）

３０記事ほどできてきたのでそろそろナビゲーションバーを作ろうと思います！

まず参考のサイトはこちら

いつも参考にさせていただいています。

www.yukihy.com

やり方は全てゆきひーさんのブログをそのままコピペさせていただきました。

デザイン＞デザインCSSと

デザイン>ヘッダー>タイトル下html

ここの２つにコピペコードを設置すれば反映されます！

もちろんリンクの中身とカテゴリ名は各々のブログのように書き換えます。

※ただ時間が迫ってきたので一旦中断して微妙なナビゲーションバーが設置されたままですが、この数日中にはカスタマイズ仕切れる予定、、、です。

設置自体は簡単に完了しました。

とてもわかりやすい！！

仕事に行かねばならないのでここから先はまた明日。

あ、明日の仮装大賞出てます！ポールダンスの組の１組目の方。

顔緑ですけどね！

www.ntv.co.jp