リーダーのためのライティング講座
———————————————————————–
ログインURL : http://leaderswriting.com
メールアドレス : このメールを受信しているアドレス
パスワード : y1e3bs
———————————————————————–
パスワードをお忘れになった場合は下記URLよりパスワードの
再設定をお願いいたします。
http://leaderswriting.com/forgot_passwd
Module1-1「ライティングとは○○である」
http://leaderswriting.com/course/article/1
【特典】東京国際フォーラムセミナー2020の映像
「国際フォーラムセミナー2020」の映像はこちらから見ることができます。
第一部「和佐大輔セミナー」
https://lstep.app/KCxhCB6
第二部「木坂健宣セミナー」
https://lstep.app/ksdNZsG
第三部「鈴木実歩セミナー」
https://lstep.app/WEnjEDl
【特典】KISAKA’s Historical Commentaryのお届け
【KISAKA’s Historical Commentary
〜木坂の歴史を紐解いていく〜】
特典
【ネットビジネス大百科編】
動画
https://vimeo.com/482312865/ed678d0c47
コメントした文章
https://wasakisaka.s3.amazonaws.com/nbe.pdf
【WakeUPセミナー編】
動画
https://vimeo.com/482306479/62c2fa1adb
コメントした文章
https://wasakisaka.s3.amazonaws.com/wakeup.pdf
【木坂サンタレポート編】
動画
https://vimeo.com/482308901/8322a14e93
コメントした文章
https://wasakisaka.s3.amazonaws.com/santa.pdf
【ペペロンチーノの作り方編】
動画
https://vimeo.com/482311084/4abb6ce529
コメントした文章
https://wasakisaka.s3.amazonaws.com/peperoncino.pdf
【おまけの参考文章】
License to Stealセミナー
https://wasakisaka.s3.amazonaws.com/LicensetoSteal.pdf
Stay Goldセミナー
https://wasakisaka.s3.amazonaws.com/GoldReal.pdf
特典】全国セミナーツアーその1「ゲスト講師原田翔太編」
「人を巻き込むための自己プロデュース」
http://leaderswriting.com/course/article/154
【特典】全国セミナーツアーその2「ゲスト講師吉田傑編」
世界が変わる研究所
https://www.facebook.com/groups/YOSHIDAsuguru
http://leaderswriting.com/course/article/185
【特典】全国セミナーツアーその3「ゲスト講師橋本武賢編」
http://leaderswriting.com/course/article/186
【特典】はじめの一歩セミナー
http://leaderswriting.com/course/article/189
&nbap;
【特典】顔出し、身バレせずに情報発信で成功する方法
https://wasakisaka.s3.amazonaws.com/leaders/AnonymousSuccessMethod.mp3
【特典】共感を呼ぶプロフィールの書き方
https://vimeo.com/481998971/571781c248
【特典】木坂のライティングルーティーン
http://leaderswriting.com/course/article/285
【特典】木坂の喋り方講座
http://leaderswriting.com/course/article/286
]]>
このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。
]]>
「中古のWindowsマシンを Linuxマシンに変身して快適環境 」で、快適に使っている中古ノートパソコンですが、Bluetoothが使えないのでBluetoothアダプターを購入しました。
使い慣れたキーボードをBluetoothで繋いで使おうと思ったら、購入したノートパソコンにBluetoothが搭載されていませんでした。
Linux(Ubuntu)で使えるBluetoothアダプターを検索して購入し、無事に使えるようになったのでレポートします。
ノートパソコンのUSBポートに、購入した Bluetoothドングルを挿入するだけですぐにBluetooth搭載ノートパソコンになりました。
奥さんと愛犬に迷惑がかからないように、外に出てたばこを吸っています。
そうするとiPhoneのWi-fiが切断されてしまい不便に感じていたので Wifi中継機を購入しました。
]]>
そばに置いておきたい本ってありますよね。
グーグルで検索するよりも効率良く使えてる本を紹介します。
WordPressテーマを変更する事が多くなっています。
WordPressのテーマを変更する時に、
「失敗したぁ!!」
と思うのが、WordPressテーマ固有のショートコードです。
WordPressテーマを変更する度に、ショートコードの部分も書き換えなければなりません。
投稿記事数が少ない時は、手作業で出来るかもしれませんが10年近く続けているWebサイトだと手作業で変換するわけにもいきません。
投稿記事が1,000件以上あるWebサイト。
流行りのデザインに変えたいのでWordPressテーマを変更する事になりました。
あなたなら、以前使ったショートコードの部分をどうしますか?
こんな時は、プログラムを作ってMySQLデータベースのデータを直接書き換えています。
データのバックアップととって、投稿記事で使われているショートコードを抜き出して、ショートコードに変わる HTML&CSS に変換するプログラムを作成。それから検証して終了です。
が
これって、精神的に疲れます・・・・。
そんな事が何件か続いたので、僕は最近なるべくショートコードは使わず HTML&CSS3 で書くようにしています。
WordPressテーマの洒落たショートコードと似たようなデザインにするために、Googleで検索したり本で調べます。
今、僕がよく使う本はこの2冊です。
こういう本の決めては「索引」です。
サクッと調べられる手軽さ、情報の簡潔さと使用例が書かれている事が大切です。
僕が重宝しているのはコンパクトさかな。
机のはじの方に置いておいて、手の届くところに置いてもじゃまにならない事も重要だと感じています。
あなたが良いと思ったWebサイトを見つけたら、ブラウザーでお気に入りのWebサイトを表示して、「コントロールキー」+「u」(Macならオプション・キー+u)を押してhtmlソースを表示しましょう。
htmlソースを表示してチェックするようにしていれば、HTML&CSS3に関するテクニックの多くを学べます。
お気に入りの htmlソースを viエディタに貼り付けてモディファイして勉強した時に、適切なインデントと改行をして整形してくれる便利なツールが数多くWeb上で公開されています。
これらのツールを使うとHTML&CSSの勉強がしやすくなります。
JavaScriptのライブラリを使ってパララックスを実装したけど( → https://piyo2.click/)、JavaScriptに関する基礎知識をほぼ忘れてしまっているのに気が付きました。
という事で、JavaScriptの基本の基本をおさらいしています。
<html> <body> <script type="text/javascript"> document.write("hello javascript world<br>"); </script> </body> </html>
JavaScriptの文法は二の次にして、JavaScriptを使い倒してしまいましょう。
<script>~</script> の間に JavaScript のプログラムを記述。
<!– –>ってHTMLでは、コメントアウトです。
JavaScriptでコメントアウトする時は、
1つの行内では、//を使うと、それ以降がコメントアウト。複数の行の時は/* */(入れ子はダメ)で挟んだところがコメントアウトされます。
使っちゃダメ=予約語 をチェックしましょう。
変数名や関数名で使えない予約後は次の通りです。
JavaScriptは、変数名、関数名の大文字と小文字は別の文字として扱われます。
予約語を覚える必要は無いと思いますが、変数名や関数名で使えないワードがあるという事だけ知っておいてください。
JavaScriptの特徴は、PHPやPerlのようなサーバーサイド・スクリプトと違って、クライアントサイド・スクリプトでWebブラウザ上で実行させる事を目的にしたスクリプト言語です。
有名なライブラリーをご紹介します。
これらのライブラリを使えばJavaScriptの文法を覚える必要もなく、サクサクとWebサイトが作れます。
数多くのWebサイトで使われています。小規模なWebアプリケーションで利用されています。
シンプル・軽量。高速です。仮想DOMを使っていて描画を最適化してくれます。
よく使われるスタイルがあらかじめ定義してあります。デザイン性のある高機能なWebサイトが簡単に構築できます。
レスポンシブWebデザインに対応しています。
Button や Form などの UI パーツを使えるようにしたもの。FacebookやInstagramで広く使われています。
JavaScriptの文法の細かい事を覚える時間があったら、ネットで検索して実装する方法を調べましょう。
僕は文法など細かいことを気にしすぎて手が止まってしまうよりも、力技(ちからわざ)でやりたいと思っている事を実装するようにしています。
インターネットが普及している現在、Web作成でわからない事は検索すればほぼ解決できるはずです。
お客様が望まれるWebサイトを構築する時、JavaScriptの知識が必要になる部分はそれほど多くありません。(概念などは把握しておきますが・・・。)
Webサイト構築には幅広い知識が求められる事も多いので、リサーチなどマーケティングの知識やコピーライティングの知識、できればプログラミングの知識も必要とされます。
実際に作業をする時、やりたい事を検索しながら実装し時間が空いたら基礎に立ち返るというやり方でも仕事をこなせると考えています。
そのような経験を積み重ねる事でスキルをみがき、お客様に自信を持ってよりよいアイディアを提供していきたいですね。
]]>
前回、ご紹介したように → パララックスを使ったホームページを作るときの僕の開発環境(?)と開発手順について説明します。
僕は、Linux ( Ubuntu18 )を使っています。
今回、パララックスを実装するためにデモサイトを解析する時「viエディタ」を使用しました。
Webサイトにパララックスを実装する時の僕の手順を公開します。
1 パララックスで綺麗に表示されているデモサイトを探します。(「jQuery パララックス デモ」をキーワードに検索)
というサイトが気に入ったので、このサイトの解析を行います。
2 表示されたブラウザで コントロール・キー + U を押下して、HTMLソースを表示します。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery Parallax Plugin Demo</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"></script> <script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script> <script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#nav').localScroll(800); //.parallax(xPosition, speedFactor, outerHeight) options: //xPosition - Horizontal position of the element //inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling //outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport $('#intro').parallax("50%", 0.1); $('#second').parallax("50%", 0.1); $('.bg').parallax("50%", 0.4); $('#third').parallax("50%", 0.3); }) </script> </head> <body> <ul id="nav"> <li><a href="#intro" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> <li><a href="#second" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> <li><a href="#third" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> <li><a href="#fifth" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> </ul> <div id="intro"> <div class="story">
3 HTMLソースをコピーして viエディタで解析します。
★ head部分作成した JavaScript関数を <ul id=”ほげほげ”> で呼び出しているのがわかりました。
★ 表示部分を司る cssファイルについて調べると、 style.css だけ使っている事がわかりました。この style.css も viエディタで読み込んで解析します。
★ style.css は136行。表示フォントの指定やクラスごと、idごとに背景画像(background:url())などを設定している事がわかりました。
→ ホームページ作成 HTML5、CSS3。基本的なHTMLの書き方 も参考にしてくださいネ。
4 3で解析したことを踏まえて、わからない事をGoogleで検索します。。
例)
このデモサイトでは、「Nikebetterworld Parallax Effect」というライブラリが使われている事がわかりました。ライブラリをダウンロードして解凍。
Webサイトにファイルをアップロードする前に、僕の場合はローカルマシンの Ubuntuノートパソコンに作業用のディレクトリ(フォルダ)を作成して、動作検証しています。
今回、解析したデモサイトは90行と非常に短かいので UNIX/Linux を使うメリットはあまり感じなかったかもしれません。
UNIX/Linux は、もともと研修者・プログラム開発者のために作られた優れたOSです。あなたも UNIX/Linux の使い方をマスターして、仕事をスマートにこなせるようになりましょう。
先日、パララックスを使ったホームページを作成しました。このサイトも見てくださいネ。
スクロールした時に背景だけスクロールの速度を変えたり、要素ごとに異なる速度でスクロール表示させる効果をパララックス(parallax)といいます。
勉強のためにパララックスを使ったWebサイトを作成しました。
この2つの知識が必要になります。
WordPressでパララックスを実現する時は、有料のWordPressテーマ grazioso があります。
僕はパララックスを実装する時は、HTML & CSS でトップページを作っています。
パララックスを実装したWebサイトのメリットは、訪問者に好印象・インパクトを与えられますが、一方、Webサイトが重くなるというデメリットもあります。
情報を詰め込みすぎてWebサイトが重くなりすぎないように、コンテンツの構成を考えてください。
パララックスを実装するにあたり、「Vegas2」を使用しました。
Vegas2 に関する情報は、 TRANSITIONS で取得できます。
vegas.min.css、vegas.min.css と vegas.js それから jquery-2.1.3.min.js を外部ファイルとして記述します。
<link rel="stylesheet" href="css/vegas.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/vegas.min.js"></script> <script> $(function(){ $('#ほげほげ').vegas({ slides: [ { src: 'images/mainvisual01.jpg' }, { src: 'images/mainvisual02.jpg' }, { src: 'images/mainvisual03.jpg' } ], delay: 7000, timer: false, transitionDuration: 3000 }); }); </script>
]]>
ビジネスでWebサイトを作成する時に、メンテナンスがしやすいWordPressを使う事もある思います。
WordPressのテーマを選んで、「外観」や「設定」を最適化して完了!!
だけではお客様に満足してもらえません。
HTML&CSSの知識を身に着けてお客様に感謝されるWebサイトを作れるようになりましょう。
僕はビジネスでWebサイトの作成をしていますが、WordPressを使ってWeb作成する事が多くなりました。
仕事でWebサイトを作成する時
3つのポイントを重視しています。
集客できるWebサイトは日々の更新が必要になります。
WordPressで作成したWebサイトはコンテンツを更新した時にページ内の変更だけですむ事が多いのでメンテナンスが非常に楽です。
お客様のニーズに合わせてデザインを変更する時に、CSSの知識が必要になります。
WordPressでCSSを編集する時は「Simple Custom CSS」というプラグインを使います。
このプラグインを使うと、テーマをアップデートした時でも CSSファイルが上書きされないので安心してCSSを変更する事ができます。
Simple Custom CSSについては、過去記事 → 「wordpressプラグイン僕のおすすめ6選はこれっ。 」も合わせてお読み下さい。
CSSは、覚えるのではなくどのサイトを見れば解決できるか(チートシート)知っておくことが大切です。
チートシートとは?
カンニング・ペーパーのこと。
CSS 参考になるサイト
→ 日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
CSS(Cascading Style Sheets)は、HTMLで記述されたWebページの体裁(レイアウト)を指定するための言語のこと。
CSSでは下記の事ができます。
過去記事 → ホームページ作成 HTML5、CSS3。基本的なHTMLの書き方 も合わせてお読み下さい。
ホームページが作れれば、クラウドソーシングなどで1万円から5万円程度の案件がこなせます。
スキルアップすれば、店舗や企業からの依頼を受注して独立し個人事業主になる事だってできます。
ホームページが作れれば、クラウドソーシングなどで1万円から5万円程度の案件がこなせます。
スキルアップすれば、店舗や企業からの依頼を受注して独立し個人事業主になる事だってできます。
HHTML(HyperText Markup Language)は、Webページのタイトル、見出し、段落、箇条書きなどの文章構造を記述する言語のこと。
CSS(Cascading Style Sheets)は、HTMLで記述されたWebページの体裁(レイアウト)を指定するための言語のこと。
このファイルははHTMLだとブラウザに説明するための宣言。
html要素内で使われている言語は日本語という意味。
meta要素はhead要素内に配置し、このページに関する色々な情報を記述します。
・文字コード
・ページの紹介文(概要文)
・ページに関連するキーワード
・TwitterやFacebookなどのSNSの情報
・作ったソフト
・著者
今回の場合は、「このページは文字コード utf-8 」と宣言しています。
この中に metaタグ、titleタグの書き込み、スタイルシート(CSS)の読み込み、JavaScriptの読み込みを記入。
文章の本体。
ナビゲーションと呼ばれる部分。リンク集の内容を示す見出しやリンクのリストなど。
自己完結する内容を表すセクション。記事の見出しや文章など。
汎用的なセクションを定義する。コンテンツ内においてテーマでまとめられた部分(見出しや文章など)。
まとまりの最初の部分。
一般的にそのセクションの筆者、関連ドキュメントへの陸、コピーライトなどの情報。
Webページのタイトル。
見出しとなるテキスト。h1からh6まで。
段落。
リンクを作成。
画像ファイルのURL.
CSSを適用させる部分で使う。
連絡先。
誤解を避けるための注意書きや警告、法的制限、コピーライトを表す法律用語など。
自分でホームページを作ることが出来たら・・・・。
Webデザイナーにホームページ作成を依頼すると最低でも10万円以上の制作費が請求されます。
すぐにコンテンツを更新したい時でもデザイナーにWebサイトのイメージを伝えるのに、打ち合わせが必要になり時間がかかります。
ホームページを作るスキルを活かして、クラウドソーシングで仕事を探して副収入をえたり、お店や企業から仕事を受注して収入を得て独立することも出来ます。
]]>
リダイレクト(redirect)という機能を使って出力先を変える事ができます。
パイプ(pipe)は、1つのプログラムの出力を、一時ファイルを使わずに別のプログラムの入力に結びつける1本のつなぎのことをいいます。
UNIX/Linuxにあるこれら機能のおかげで、効率よく作業が行えるようになっています。
標準出力
通常、画面に割り当てられています。
標準エラー出力
通常、画面に割り当てられています。
Ex1)
画面(標準出力)に Hello を表示する
$ echo Hello
ファイルに Hello を書き出す
リダイレクトを使って標準出力をファイルにつなぎます。(ファイルが作成される)
$ echo Hello > hello.txt
Ex2)
ファイル情報を表示
$ ls -l
ファイル情報を取得して、9カラムを基準に並べ替える
lsコマンドでファイル情報を取得し、パイプを使って sortコマンドで9カラムを基準に並べ替える。(途中でファイル出力せずにパイプを使って処理。)
$ ls -l | sort -k9
理解を深めたい時は、→ 高知大学 理工学部 情報科学教室 「Lesson7 標準入出力を理解する」が勉強になります。
コマンド > ファイル | コマンド結果をファイルへ書き込む |
コマンド < ファイル | ファイルの中身をコマンドの標準入力へ |
コマンド >> ファイル | コマンドの出力結果をファイルへ追記 |
コマンド 2> ファイル | エラー出力をファイルへ書き込む |
コマンド 2>> ファイル | ファイルにエラー出力を追記 |
コマンド > ファイル 2>&1 | ファイルに標準出力と標準エラー出力を書き込む |
コマンド >> ファイル 2>&1 | ファイルに標準出力と標準エラー出力を追記 |
コマンド << 終了文字 | 終了文字が現れるまで標準入力へ送る |
コマンド &> ファイル | 標準出力と標準エラー出力を同じファイルに書き込む |
コマンド > /dev/null 2>&1 | 表示をしない。(表示をゴミ箱へ) |
「単純で汎用的な機能を持ったコマンドを組み合わせることによって大きな機能を実現する。」
UNIXの基本的な考え方のひとつです。それを実現するために実装されたと言っても過言ではありません。
UNIX/Linuxで作業する時は、この基本思想を大切にしたいですね。
]]>