デジタルと人をつなぐブログ

WEB技術

iPhone Windowsアプリ お金　投資　保険　マネーフォワード 部屋選び

  • Time Capcelを導入しようかと検討していたら・・・・

    Time Capcel生産終了

    現在売ってるもののみで終わりで、Appleはwifiルータ製品をもう作らないのだそうです。
    現在の製品は5年ほどサポートがあるのではないか？とのこと。

    Apple、Wi-FiルーターのAirMacを終了

    ルータ機能いらないけどバックアップはしたい！

    1TBSSDに換装したのはいいんですけど、なんでもかんでも保存するようになっちゃって、このパソコンぶっ壊れたら怖いなーという思いしかないんですよ・・・。
    現在、1TBの外付けポータブルディスクをTime Machineのディスクとして使っているのですが、これがすこぶる調子が悪い。
    接続しても認識しないことが多々ある・・・・。
    本体より壊れやすいバックアップというのも考えものなので、どうにかバックアップはキチンとしておきたいなーと検討していたのです。

    選択肢1 Time Capcel を買う

    色々見てみたのですが、やはり安定性がすごく高いみたいですね。
    いずれサポートは終了する製品とはいえ、今買ってしまうのもいいかなーと思うのですよ。

    選択肢2 他社製のルーターかNASを買う

    time machine対応のNASか、ルーター(USBでHDDなどを取り付けできる)を買うかー？
    こちらの難点は、いまいち対応してるのか、してないのかわかりにくいということです。
    なんかこの雑なサポートのしかたがあまり信用できないんだよなー。

    HDD + ラズパイ で自作している方もいるみたいです。
    Raspberry PI 3 でMacのTime Capsuleを自作してみた

    これいいなー。要検討です。

    選択肢3 他のMACの外部diskを保存先に指定する。

    macOS High Sierraでは、Time Machineサーバーの機能がOS標準機能として組み込まれました。設定方法を解説します。

    上記のようなことができるみたいです。それまでは2000円ぐらいのアプリを入れないとその機能は使えなかったみたいですが、新しいOSは標準搭載みたいです。
    なるほど、wifi製品の販売を終了する代わりにこういった手段を提供していくのだなと思いました。

    これはすごくちゃんとしてそうです。
    でもMac持ってないんですよ。
    新OSが入れば古くて問題ないと思いますけど、それでも高いよなぁ・・・・。

    Mac mini

    windowsでこれやらしてくれえ！　無理か。

    結局様子見です

    新しい何かが発表されるかもしれませんし、それまで壊れかけのHDDで耐えて行こうかなと思っています。

  • BootstrapでHTMLサイトを作ろう！ その1

    完成したHTMLサイトからWordpressテーマを作成する、という記事を書こうと思ったのですが、一つの記事にすると長すぎるし、事前に説明が必要なことや準備が多すぎる！
    ということで外堀を埋める作業をずっとしています。

    こちらの記事はワードプレスサイト化するための元となるHTMLサイトを作成する記事になります。
    めんどくさいのでbootstrapでチャチャっと作ろうと思っているのですが、bootstrapについての説明も必要ですよね。
    その辺も合わせて説明していくのにチャレンジしてみたいと思います。

    Bootstrapでサイトを作ろう

    Bootstrapとは

    まずBootstrapについて説明しなければなりますまい。
    Web制作をしている方は、「このCSS使い回せるようにしといたら楽だな！」などと思って実際に使いまわしていることはないでしょうか？

    それです

    BootstrapはそういったCSSの塊です。ついでにJSもついてます。
    こういう使い回しのきくCSSを集めたものを「CSSフレームワークと呼びます」

    めちゃ普及しているCSSフレームワークであるBootstrap

    Bootstrapはかなり日本ではメジャーなCSSフレームワークですのでそこら中に情報が転がっています。
    便利ですね。
    また、Bootstrapを使ったサイトであれば、修正加筆が簡単というメリットもあります。
    大規模で運営するほど、こういったフレームワークを活用することで大人数の修正でも破綻しないことが期待できます。

    メリットとデメリット

    先に紹介したように、bootstrapを知っているもの同士ではファイルの可読性が増しスムーズです。
    修正も簡単で、一から書いていると割と大規模な改修になってしまうものでも、「class1つ変えるだけ」でレイアウトを大きく変更してしまうことも可能です。そういった大規模修正であっても、CSSを全く書かなくていいこともあるというのもすごくいいですね。しかし、逆に言えばわからない人は全く使えないというのがデメリットです。学習コストが発生します。
    一回覚えてしまえば利用に関してそこまで複雑なルールはありませんので、簡単なんですけど、触れていない人は何だか仰々しく、難しいものに感じてしまうのも事実です。

    もう一つデメリットとしては、「bootstrap臭さ」が出てしまうということです。
    簡単は簡単なのですが、どこかで見たことがあるようなサイトになってしまうのです。
    運用重視で、デザインに関してはそこまで重要視していないというサイトであれば導入しない理由はありません。
    それと、設定データからカスタマイズしてしまえばこの「bootstrapっぽさ」はかなり消せると思います。

    モバイルファーストなサイトが作成できます。あとはFlexboxが登場してから、割とスマホ対応が簡単にできるようになったのでちょっと利用重要度は下がっているんですけどね。

    あと導入が簡単なので、一から書く場合はリセットCSSを準備して、配置して、みたいなサイト制作開始時の手間がかなり減ります。リセットCSSは組み込まれていますのでわざわざ適用する必要はありません。
    ちょっとクセはありますがモーダルウインドやカルーセルなども利用できますので便利です。

    classつけすぎ問題
    性質上htmlにclassがいっぱいつくのもデメリットと言えばデメリットかも。

    Bootstrapの基本的な概念について覚えよう

    こちらはbootstrap4について書いています。
    バージョンでかなりclassに差があるので注意です。

    グリッドシステム

    bootstrapの大きな特徴として「グリッドシステム」を採用していることが挙げられるでしょう。
    グリッドシステムとはサイトの横幅を12分割して考える方法のことです。

    たとえば要素を3分割したいなら、

    <div class="row">
<div class="col-4">コンテンツ1</div>
<div class="col-4">コンテンツ2</div>
<div class="col-4">コンテンツ3</div>
</div>

    こうなります。12÷3ですので、4という数値が3分割を表します。
    ４分割なら

    <div class="row">
<div class="col-3">コンテンツ1</div>
<div class="col-3">コンテンツ2</div>
<div class="col-3">コンテンツ3</div>
<div class="col-3">コンテンツ3</div>
</div>

    こなります。

    デモページ
    sample1

    このように、幅を指定したい場合は「col-?」という形で指定し、それらを囲む親要素には必ず横並びを表す「row」というclassをつけるようにしてください。

    モバイルファーストのレスポンシブ

    bootstrapでは最初から見た目の切り替わりである「ブレークポイント」が設定されています。
    このブレークポイントで、classによる表示を変えることができる仕組みを持っています。

    grid options

    Extra small
    <576px     		Small
    ≥576px     		Medium
    ≥768px     		Large
    ≥992px     		Extra large
    ≥1200px

    この5つのポイントでCSSの切り替えを行うことができます。

    例えば 「Extra small」ではサイト幅いっぱい。
    「Medium」より大きい場合は３分割、という場合は次のように指定します。

    <div class="row">
    <div class="col-12 col-md-4">コンテンツ1</div>
    <div class="col-12 col-md-4">コンテンツ2</div>
    <div class="col-12 col-md-4">コンテンツ3</div>
</div>

    デモページ
    sample2
    サンプルではスマホで全て幅いっぱいにする指定をしています。サイト幅を変えて表示を確認してください。

    上記のような仕組みはグリッドシステムだけでなく、他の指定でも応用できます。

    例えば
    「d-block」「d-inline」「d-none」
    という指定があります。
    これらはそれぞれ、ブロック要素にする、インライン要素にする、none（見えなくする）という指定です。

    これをレスポンシブの指定と組み合わせると

    <p class="d-none d-md-block">PCPCPCPC</p>
<p class="d-block d-md-none">SPSPSPSP</p>
<p>現在のサイト幅は<span class="d-inline d-md-none">SP</span>
<span class="d-none d-md-inline">PC</span>サイズです</p>

    このようなこともできます。
    デモページ
    sample３
    サイト幅を変えて表示を確認してください。

    サイトの幅を指定する。

    <!-- 通常 -->
<div class="container"></div>
<!-- ウインドウいっぱい -->
<div class="container-fluid"></div>

    デモページ
    sample2

    画像をレスポンシブ化する

    <img class="img-fluid" src="test.jpg" alt="">

    デモページ
    sample2

    フレックスボックスの細かい指定

    FLEXの細かい指定もclassで可能です。
    幅「md」より広い時は横並び、狭い時は縦になる場合です。

    <div class="container">
        <h1>Flexboxもclassで指定できる</h1>
        <div class="d-flex flex-nowrap flex-column flex-md-row">
                <div>
                        <img class="img-fluid" src="test.jpg" alt="">
                        フレックステスト
                </div>
                <div>
                        <img class="img-fluid" src="test.jpg" alt="">
                        フレックステスト
                </div>
                <div>
                        <img class="img-fluid" src="test.jpg" alt="">
                        フレックステスト
                </div>
        </div>
</div>

    デモページ
    sample4

    その他いろいろ便利です

    h1などの見出しももともとスタイルが適用されていたり、tableタグに「.table」をつけるだけで簡単にいい感じのテーブルになってくれたりします。
    フォーム関係の指定も充実していて便利なのですが、ここでは割愛します。

    指定をまとめた「チートシート」を掲載しているサイトがありますのでそちらのリンクを参照してください。
    Bootstrap 4 Cheat Sheet

    実際にサイトを作ろう！

    ではブートストラップの紹介も済みましたので、実際のサイトを作成していきたいと思いますが、ちょっと長くなったので次の記事に続きます。

    執筆中。

    TECH::CAMP（エンジニアスクール）

  • 初心者のつまづきポイント、XdomainでFTPを理解する（5分）

    当サイトで紹介しているXdomain無料サーバーでFTPソフトを利用するには？
    をまとめていますので参考にしてください。



    利用にはちょこっと設定が必要なのです。

    FTPソフトはFireZillaを利用しています。

    https://logzitsu.tlog.work/xdomein/

    サーバーレンタルの記事はこちらです。

    まずは管理画面にログイン

    Xdomain管理パネル
    管理パネルにログインしましょう。


    無料レンタルサーバー

     


    管理パネルログインをクリックし、ワードプレスサービスの管理ページに移動しましょう。

     

    設定をクリックしましょう

     

    FTP設定の部分を探してクリック！
    余談ですがphpMyadminへのログインリンクもここにありました。


    (とくに今回は触りません)

     


    こうして

     


    こうして

     

    こう！ 自動生成されたパスワードを確認する場合は編集をクリック

     

    パスワードが確認できます。
    あとはここにある情報を、FTPソフトに入力しサーバーとの接続を行ってください。

    https://logzitsu.tlog.work/ftp/

  • WEB制作環境を整えよう！

    WEB制作に必要なものまとめ

    こちらのサイトではWEBのノウハウについてまとめていますが、制作に必要な環境について書いておかないと、それぞれの環境に差があって説明しにくいことに気づきましたので、この記事でWEB制作に関するソフトなどについてまとめておきたいと思います。

    やっぱり最優先で揃えたいPC

    WEB制作でコードを書く作業はそんなに重い作業ではないのですが、デザインデータに主に「photoshop」という画像処理ソフトでデザインを利用します。
    あとは「adobe XD」とか。これも別にすごく軽いソフトではないので、
    最新版のPhotoshopがちゃんと動くのが作業PCの最低条件かと思います。

    PhotoshopがそしてXXが動かないよーとかいってるやつ！さっさと買い換えろ！
    せっかく時間を割いて勉強してるのに、色々無駄で勿体無いですよ。

    10~15万ぐらい出せばすべて解決します。
    スピードが早くなり、効率がいいのは言わずもがな、気に入ったPCで作業できるという心の問題も大きいです。

    OSはどっちがいいの？

    windowsでもMacでもどっちでもいいです。気に入った方を使ってください。
    Macは高くて低スペック、と言われがちですが軽さや筐体の丈夫さ、キーボードの打ちやすさ、画面の美しさは折り紙つきなのでそういうところを気にしてwindowsを選ぶとめっちゃ高いです。
    反面、macは一番安いノートを選んでもその辺は妥協してないと保証できます。
    あと、結構古くてもオークションなどで人気なので下取り価格が下がらないのもいいですね。
    自分は、ほぼ価値がゼロになるまで使い倒しそうな勢いですけどね。
    不満がほとんどないからしょうがない。

    どちらを選ぶかについてはどこを重要視するか、ですね。
    使い慣れたwindowsの方が効率がいいということもあるでしょう。

    Linuxはどうなの？

    サーバーでよく使われるOSですのでサーバーとかに詳しい人が使ってるイメージ。
    photoshopは動かないと思いますので、メインで使うのは難しいかもしれません。
    デザインに関わらない人なら行けるかも。

    ネット環境

    当たり前ですがネット環境は必要です。
    ソフトのダウンロードなど結構帯域を使いますので、モバイル回線のみはかなりきついかもしれません。
    光回線などの固定回線を契約しておいた方がいいでしょうね。

    WEB制作で使うソフト

    デザインソフト

    まず、デザインソフトを使用します。このサイトではあまりまだ触れられていませんが。
    デザインがメインの業務でなくても、デザインを受け取って画像を切り出す作業は必要なのでインストールは必須でしょう。

    adobeソフトなのでこちらから
    Creative Cloud
    月額有料のソフトです。
    映像を作成するソフトも含まれています。WEBも映像を組み込むような場面が多くなっていますので、そういったことを視野に入れればそんなに高くないです。
    月額利用料分くらいは頑張って稼ぎましょう。

    Photoshop

    adobeのソフトはクラウドサービスの月額制になっていますので、全てのソフトが使えるプランに登録しておいた方がいいと思います。
    Photoshopは写真の加工を行うソフトですが、WEBデザインにも利用できます。
    絵を描くソフトとしても使えますし、汎用性のある万能ソフトです。
    ワイヤー作成 → デザイン作成・画像補正・イラスト作成 → デザイン納品
    までこのソフト一本でできちゃいます。
    月額有料のソフトです。

    WEBデザインや、ワイヤー作成ソフトは色々他にもあるんですが、「画像編集」という点でどう考えてもphotoshopに勝てるソフトがないので、なかなか他のソフトが普及していない気がします。
    納品となると、相手も同じソフトを持ってる必要がありますしね。

    多分どれもphotoshopの作業ファイル形式である「psd」出力の機能を持っているのではないでしょうか。

    Illustrator

    Webデザインにおいてはさほど存在感がありませんが、イラストレーターも利用します。
    元々はイラストを作ったり、紙媒体のレイアウトを行うためのソフトです。

    ロゴやアイコンを作成する時に利用します。
    SVGという軽量でどんなに拡大しても問題ないベジェ曲線データの画像を作成できますので、そういった場合に使用します。
    とはいえ、シルエットのアイコンデータはフリー素材がかなり充実していますので、わざわざ作成する機会もやっぱりすくないですけどね。

    また、紙媒体出身のデザイナーはだいたいIllustratorのほうが得意ですので、webデザインをすべてこのソフトで行うという方もいます。
    月額有料のソフトです。

    エディタ

    HTMLやCSSはテキストデータなので、まずはこれが必要です。

    Visual Studio code

    最近使ってからメインになっていますが、最初からWeb制作に必要な機能が搭載されている感じがすごくいいです。
    Gitとかもこのソフトを使えばさほど抵抗なく利用できるのではないでしょうか。
    近くにそういった技術に詳しい人がいるとすごくいいと思いますけど。
    WinでもMacでも使えます。
    無料です。

    Visual Studio Code

    Dreamweaver

    Adobeのソフトウェアです。昔に比べるとかなーりよくなっているはずのソフトなんですけど、結局使ってないんですよね。いろんな機能がついているが、なんとなく重い印象がネックですね。
    ほかのソフトでも問題ないのでわざわざ使う必要がない、みたいな感じでしょうか・・・。
    月額有料のソフトです。

    atom

    github謹製のエディタ。
    軽くて機能拡張もでき、カスタマイズすることでどんどん自分好みのエディタになります。
    多分、別のパソコンでも環境を統一できると思うんですが、Visual Studio codeが初期状態で使いやすすぎるせいでこのソフトの出番はだいぶ減ってます。
    Atom

    ただインストールしただけだと物足りないエディタなので、いろんな記事を調べて適用できる方におすすめ。

    チャットソフト

    お客さんのやり取りや、制作者同士のやりとりで必要になってきます。

    LINE

    お客さんが使える環境にあるという一点で使う機会が多いです。
    ただし、過去データが見れなくなることが多いです。
    WEBにメッセージ履歴が残ってないので、端末を変えたりすると過去のデータが見れなくなることがあります。仕事のやり取りで使うには不安が大きすぎます。
    バックアップを撮る機能はありますが、そんなことを気にするより他のツールを使ったほうがいいでしょう
    お客さんとのやりとりはしょうがないですが、最低でも制作者同士のやりとりは他のツールで。

    チャットワーク

    月額利用料を払ってないと、部屋が5つぐらいしか作れないという制限があります。
    でも割と普及してますし、チャットソフトとしての不満はあんまりないです。

    slack

    使ったことないんですけど、チャットワークより無料による制限が少なそうなのがすごくいいですね。
    エンジニアが使ってるイメージがすごくあります。
    チャットワークは割と閉じた印象なのですが、slackはいろんなソフトと連携して面白いことが色々できるみたいです。
    機会があればちゃんと使ってこのサイトでもそういった記事を作ってみたいですね。

    プロジェクト管理

    https://logzitsu.tlog.work/task/
    この記事でも少し触れましたが、プロジェクト管理ツールを利用するのが割と一般的になりつつあります。
    複数人でTODOを共有できるソフトウェアです。

    使ってみるとわかりますが、めちゃくちゃ効率がいいです。

    trello

    有料のツールが多い中、無料でかなりのことができるツールとなっています。
    おすすめです。
    trello

    プロジェクト管理ツールに関しては会社に所属している場合はそこで使っているソフトを利用するケースが多い気がしますので、今回触れるのはこの程度にしておこうと思います。

    ブラウザ

    制作したものが実際動作するか確認が必要！
    ということでWEBブラウザーは必須です。

    Chrome

    このソフトの検証ツールに慣れすぎて、これなしでは作業ができません。
    でもJavaScriptとかの検証についてはそんなに明るくないので、その辺も調べた上記事にしてみようかなと思います。

    EDGE

    windows10のデフォルトブラウザーです。
    Windowsでないと動きませんよ。

    internet explorer 11

    もういいだろ、デフォルトから消してくれ、な「internet explorer 11」です。
    とはいえ、昔のIEと比べて、表示が異なってしまうことは少ないかな、と思います。
    Windows専用です。

    Safari

    Macのデフォルトブラウザーです。
    Windows版もありましたがそれはもうサポート切れてると思いますので気にしなくていいです。
    iOSのデフォルトブラウザーでもありますので、スマホでの動作確認もこちらで。

    Firefox

    Firefoxです。バージョンが新しくなって早くなったみたいです。
    ほとんど使ってないですけど、頑張って欲しい。

    Androidデフォルトブラウザ

    Android持ってないので今は違ったらすいません。
    デフォルトでついてるブラウザです。
    Androidスマホでの検証で必要になります。

    ブラウザまとめ

    Win、Mac、iphone、Androidスマホ
    を全部持ってないと上記の検証はできないんですよね。
    ちょっと古い端末はそんなに高くないので、一応持っておくといいかもしれません。
    持ってる人に借りて確認するのも全然ありだと思います。

    FTPソフト

    サーバーにファイルをアップロードするために必要なソフトです。
    https://logzitsu.tlog.work/ftp/
    このサイトではFilezillaを使ってます。

    レンタルサーバー

    自分の作品を公開したり、サイトをテストするために自分のサーバーを持っておくのは割と一般的な気がします。
    ドメインも持っておくといいでしょうね。
    月額費用はかかりますけどね。

    まとめ

    まとめると必要なツールは

    • パソコン
    • ネット環境
    • Adobeのツール
    • エディタ(この記事では VScodeを採用)
    • ブラウザ
    • FTPソフト
    • レンタルサーバー

    これらが揃っていれば割と場所も選ばずに活動できるということです。
    いい世の中になったなーと思います。
    そして、今後も生き残れるように決意を新たにした次第であります・

    おわり。

  • WordPress初心者マニュアル　-インストールしたらまず見よう-

    TECH::CAMP（エンジニアスクール）

    wordpressをインストールしたら見るマニュアルです

    ワードプレスをインストールしたものの、なんだかよくわからねえ。
    そんな困ってしまってる人を助けるための記事です。
    必要な部分を読んじゃってくださいね！

    まだワードプレスをインストールしたことがない！
    インストールの仕方もわからない！という人は以下の記事を参考にしてみてください。

    https://logzitsu.tlog.work/xdomein/

    ワードプレスサイトを持ってる方は以下へどうぞ。

    WordPress管理画面にログインする

    各自、ワードプレスが閲覧できるアドレスを持っていると思います。
    自分の場合は以下。
    http://logzitsu.wp.xdomain.jp/

    このアドレスの末尾に「wp-admin」をつけてアクセスしてみましょう。
    http://logzitsu.wp.xdomain.jp/wp-admin
    といった具合です。

    ワードプレスのログイン画面が表示されたと思います。
    ワードプレスインストール時に設定した、
    「ログインID」or[メールアドレス]
    そして「ログインパスワード」を入力してください。

    管理画面解説


    管理画面左にあるメニューは「管理メニュー」などと呼びます。(多分)

    今回の記事で説明するのは

    • テーマの変更方法
    • 記事の投稿方法
    • 固定ページの追加方法
    • プラグインの追加方法(contactform7)

    です。今回触るのは画像の赤で印をつけてある部分のみです。

    テーマを変更してみよう

    ワードプレスは見た目を簡単に変えられるので、HTMLがわからない人でもテーマ制作者による高品質なテーマが利用できるのが大きな利点です。
    まずはサイトの見た目を変えてみましょう!

    管理メニュー
    外観 → テーマをクリックすると上記のような画面になります。

    「新規追加」をクリックすると新たなテーマを追加する画面に移動します。
    選んで「プレビュー」するとどんなテーマかみることができますので、試してみましょう。

    上記は　Start というテーマのプレビュー画面です。
    多くのテーマ作者さんたちが提供していますので、多くのテーマから選ぶことができます。この画面から選べるものは無料で利用できます。

    気に入ったものが見つかれば、インストールしてみましょう。
    すぐに適用されるわけではありませんので、安心してインストールしてみてください。
    インストール後、「適用」することでサイトの見た目が変わります。

    テーマにより、搭載している機能が異なりますのでご注意ください。

    記事を投稿してみよう

    ワードプレスの大きな特徴として、ページ追加がとても手軽であることがあげられます。手軽にページを追加できるということは更新や記事の追加が簡単ということですので更新頻度が上がり、SEOへの効果も期待できます。

    管理メニュー
    投稿 → 新規追加

    で上記の新規投稿追加画面に移動します。
    タイトルと内容を入力すればOKです。

    ブログエディタ機能で簡単に見出しやリストなどを作成できますので、活用していい感じに読みやすい記事を作っちゃってください！

    アイキャッチを設定しよう

    記事にはアイキャッチが設定できます。
    記事内容の部分から画像を追加できるのですが、アイキャッチとして追加したものは、記事一覧で使うことができます。
    多くのテーマはこの画像を有効に利用していますので、記事にはアイキャッチを設定してあげたほうが見栄えが良くなります。必ず設定するようにしましょう。

    ワードプレスの画像追加は、画像投稿画面を表示したら、パソコンからのドラッグ&ドロップで直感的に作業できますのでそんなに迷うことはないかな、と思います。

    記事にカテゴリとタグを設定しよう。

    ワードプレスは初期状態で「カテゴリ」「タグ」を設定する機能が付いています。
    カテゴリやタグってなに？
    という方もいるかと思います。

    記事の分類わけとして認識していだければと思います。
    カテゴリ・タグの使い方は、各サイトで自由に設定できるというのが利点でもありますので説明が難しいのですが、カテゴリは記事の持つ大きな分類分けをするもので、タグは記事の特徴を細かく記載してして指定していくもの、という感じでしょうか・・・。

    ここで設定した情報は同じカテゴリ、タグを持つ記事だけを一覧として表示することができますので、ユーザーの使い勝手が上がりサイトの価値をあげることにもつながります。

    設定が全て終わったら「公開」を押すことで公開が開始されます。

    固定ページを追加してみよう

    投稿と固定ページの違いですが、ブログ記事のように日々いっぱい増えていくようなものは「投稿ページ」
    一度作成したら内容も変わらず、同じようなページもさほど増えないという性質のものを「固定ページ」にするといいです。
    例えばアバウトページやコンタクトページです。
    内容は変わることはあると思いますが、さほど頻繁ではないですし、毎日同じような
    ページが増えていくタイプのものでもありません。

    固定ページの特徴として親子関係を持たせられるという特徴があります。
    親子関係は少し処理として重いそうなので、ものすごい数が増えるような「投稿」てきなものには比較的向いていないため搭載していないのだそう。

    固定ページも「親」の設定がある以外は投稿ページとさほど変わりません。

    管理メニュー
    固定ページ → 新規追加で上記画面になります。

    やってみよう

    お問い合わせページを追加してみましょう
    – タイトル「お問い合わせフォーム」
    – 本文「お問合せはこちらかどうぞ！」

    プラグインを追加する

    いろんな機能を追加できる、プラグインを試してみましょう。
    せっかくなので、今回はサイトにコンタクトフォームを追加してみましょう。

    管理メニュー
    プラグイン → 新規追加
    で上記画面になります。右上にある検索窓から「contactform7」と入力して、富士山のアイコンの該当プラグインをインストールしてください。

    インストールできたら有効化してください。
    管理メニューに「お問い合わせ」が追加されたと思います。

    Contact Form7 の使い方

    コンタクトフォーム7プラグインを使うと、サイトに簡単にお問い合わせフォームページが追加できます。
    入門としてはすごく良いので試してみましょう。

    管理メニュー
    お問い合わせ　をクリックすると、
    最初から「コンタクトフォーム1」というものが作成されています。
    それをクリックするとフォームが編集できます。

    この画面で詳細にフォームを設定できますが、初期状態でとりあえず動きますのでこのまま使ってみましょう。

    管理者宛のメールアドレスは、インストール時に設定したEmailアドレスになっているはずです。

    ここでコピーするものはショートコードというものです。
    PHPを管理画面でそのまま使えると、セキュリティに問題があるため、ワードプレスでは「ショートコード」というものを経てプログラムを利用します。

    プラグインでは度々あります。大抵は記事に貼り付けることで動きます。
    コンタクトフォーム７ではこれを貼り付けた場所にフォームが出現し使えるようになります。

    このようにして公開すると

    フォームが生成されます！
    実際に動くか試してみて、受信できれば成功です。

    とりあえず大雑把ですがこんな感じです。

    WordPressの醍醐味な部分にはこの記事の内容を一通りやることで体験できたのではないでしょうか？
    当然ながら細かい設定は色々ありますし、プラグインを追加することでさらに便利にすることも色々できます。
    そういったことについては他の記事で随時触れて行きたいと思いますのでご期待ください。

    https://logzitsu.tlog.work/wordpress1/

    こちらを次に見るとワードプレスについてもうちょっと深く理解できるようになりますよ！

  • WordPressサイトを無料で…？できらぁっ! な「XFREE(旧Xdomain無料サーバー)」で WordPressサーバーを借りてみよう。

    2018年12月中旬に サービス名がXFREEになってます。
    おそらく基本的な使い方は変わらないです。2018/12/28 追記

    XFREEとは

    安定して優秀なサーバーとしてXSERVERが有名なのですが、その会社のドメイン提供サービス・・・・からさらに独立した無料サーバーサービスです。

    こちらのサイトは広告がついてしまうなど制限はありますが、ありがたい事に無料でサーバーを借りることができるのです。

    おためしで、そして学習用に借りるにはもってこいのサービスになっています。
    気に入ったらドメインを、そしてエックスサーバーを利用してあげてくださいね。

    XFREEの無料サーバーを借りよう

    早速借りてみましょう。
    お申し込みにはPCメールアドレスが必要ですので持っていない人は先に取得しておきましょう。

    https://www.xfree.ne.jp/

    エックスドメインはこちら

     

    サイトにアクセスし、
    グローバルメニューの「無料レンタルサーバー」へ移動しましょう。

    サイト中段の「サーバーご利用お申し込み」をクリック！

     

    「無料レンタルサーバーお申し込み」をクリック！

     

    入力欄にメールアドレスを入力してください。
    メールがおくられてきますので、メールに記載の【お申し込みURL】にアクセスし登録を継続しましょう。

     

    必要事項を入力していってください。

     

    管理画面にログインし、「無料レンタルサーバー」へ移動。

     

    サーバーIDを決めてください。入力が終わったら再度「無料レンタルサーバー」へ移動すると画面が変わっています。

     

    WordPress の部分の「利用開始する」をクリックしてください。
    クリック後またまた、「無料レンタルサーバー」をクリックしてください。

     

    WordPressサービスの管理パネル画面にログインすることができるようになっていますのでログインしてください。

     

    WordPressサービスの管理パネル


    新規インストールをクリックで、ワードプレスがインストールできちゃいます。

     


    上記の画像の通り内容を入れてください。URLと書いた部分は空欄でも大丈夫でした。
    決定し進んでいき、「確定(wordpressをインストール)」をクリックするとインストールされます。
    パスワードはインストール後表示されますのでしっかり控えておきましょう。

     

    完了です。これでワードプレスにログインできるようになります。
    お疲れ様でした。



     

    続いて「Wordpress」の使い方について解説していきたいと思います。

     

    https://logzitsu.tlog.work/wordpress-manual/

  • SEO対策についての超基本

    SEO対策の基本を学びましょう。

    SEO対策とは、検索エンジンで検索結果が適切に表示されるように設定しておくことです。
    過去、「キーワードに無関係のワードをとにかく大量に入れる」「外部リンクをとにかく設置する」などのSEO対策が取られていましたが、これらは現在逆効果であると言われています。

    なので、そんなにテクニック的なことはないです。
    上記の不自然なリンクはよく無いのですが、自然増の外部リンクは非常に有効であると言われていますので、外部リンクが自然と増える有益なコンテンツを作成するのが大切みたいです。

    まずは「googleの情報を確認しましょう」

    検索エンジン最適化（SEO）スターター ガイド

    googleに関しては、まずこちらを熟読してください！以上！

    といいたいところですが、それだとこの記事の意味が無いので、抜粋、要約してみたいと思います。
    全部を網羅しているわけでは無いので、しっかり学びたい人はちゃんと元ファイルをみてください。

    ちゃんとしたサイトになるように心がけよう

    ウェブマスター向けガイドライン（品質に関するガイドライン）

    こちらにどんなサイトにするべきか記載されています。

    基本方針

    • 検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。
    • ユーザーをだますようなことをしない。
    • 検索エンジンでの掲載位置を上げるための不正行為をしない。ランクを競っているサイトや Google 社員に対して自分が行った対策を説明するときに、やましい点がないかどうかが判断の目安です。その他にも、ユーザーにとって役立つかどうか、検索エンジンがなくても同じことをするかどうか、などのポイントを確認してみてください。
    • どうすれば自分のウェブサイトが独自性や、価値、魅力のあるサイトといえるようになるかを考えてみる。同分野の他のサイトとの差別化を図ります。

    具体的なガイドライン

    次のような手法を使用しないようにします。

    つまり、検索エンジンを騙すような不正をするな！ということみたいですね。

    Googleにインデックスしてもらうための具体的な方法

    サイトマップを送信しよう

    サイトマップというのは、そのページにどんなページがあるかを記載したものです。
    人間がみるためのものではなく検索エンジンが見るためのものです。

    ワードプレスであれば、プラグインによって存在するページから自動生成できます。
    静的なHTMLサイトでも作成するサービス・アプリを利用すれば生成できます。

    作成したサイトマップは「サーチコンソール」から送信してください。

    検索結果に必要の無いページはクロールしないように設定する

    検索結果に載せる必要の無いページをしっかり省くというのも重要みたいです。
    「robots.txt」にクロール除外情報を載せておく必要があるみたいです。

    検索エンジンがコンテンツをちゃんと見れるようにする。

    これはそんなに気にしたことないですね。
    Fetch as Google ツールをつかうことで、検索エンジンにちゃんとページが表示されているか確認できます。
    たぶんプログラムで特殊なHTML生成をしていたりすると、適切に認識されてない可能性があるから
    気をつけてね、ということを言っているんじゃないかと思っています。

    固有の正確なページタイトルを付ける

    この辺がSEO対策として言われる部分ですね。
    titleタグの中身が検索結果として表示されるので、タイトルづけは超重要です。

    • ページのコンテンツについて正確に記述する
    • 各ページに固有のタイトルを付ける
    • 簡潔でわかりやすいタイトルを使用する

    つまり、内容を的確に簡潔にタイトルに反映し、同じタイトルを複数ページで使わないようにするということですね。

    「description」メタタグを使用する

    • ページの内容を正確に要約する
    • ページごとに固有の説明を使用する

    見出しタグを使用して重要なテキストを強調する

    • 概要を書く場合を想像する
    • ページ全体で控えめに見出しを使用する

    サイトの階層を整理する

    検索エンジンによる URL の使用方法を理解する

    すいません><
    この記事は編集途中です！

  • FTPソフトの使い方を覚えよう！サイト公開のやり方

    FTPソフトとは？

    この記事はHTMLとCSSを学び終わり、サイトを作れるようになった！という方に読んでほしい記事です。
    いろんなサイトで、HTMLやCSSの使い方を覚えたかと思います。

    しかし、作れるようになったものの、実際にどうやって公開したらいいかわからない、という方を多くお見受けします。

    サイトを公開するには

    まず、公開する環境が整ったパソコンが必要です。
    そういう「公開環境の整ったマシン」をサーバーと言います。

    サーバーは自分の使っているパソコンでも作れるのですが、当然ながら電源を落としてしまったり、ネットが繋がらなくなってしまった状況ではそのサーバーで公開している内容は表示されなくなってしまいます。

    高負荷がかかるようなものは、ものすごい熱や負荷により火災の危険もあるそうです。
    電気代もかかります。

    自由に設定をいじれ、自由にできるメリットはありますが初心者がいきなり自宅でサーバーを設置するのはあまり現実的ではありません。
    そういった環境を貸し出している業者の「レンタルサーバー」を借りるのがいいでしょう。

    レンタルサーバーを借りる

    広告ありですが、無料で使いたいという方は下の記事を参考に試してみてください。
    https://logzitsu.tlog.work/xdomein/

    月額有料のサービスが多いです。無料のものは広告が出てしまったり、なんらかの機能制限があることが多いです。
    レンタル会社はいくつかありますので、そこから必要なものを選ぶといいです。

    高額のものは高性能です。
    静的なHTMLを公開するだけであれば、ものすごいアクセス数がくるとかでなければ安いところでも問題ないでしょう。

    もし、今後高性能なものに変える可能性がある、SEOをしっかりやっていきたいということであれば「ドメイン」も取得しておく必要があるでしょう。
    ドメインの設定も一癖あり、初心者が苦労するポイントでもあります。

    サーバー会社の紹介



    サーバーのレンタルは、各ページのヘルプをみながら進めてアカウントを取得してもらえばいいと思います。

    最初にくるメールにすごく重要な情報が書かれている。

    業者によって異なりますが、
    サーバーを仮取得した際にくるメールに非常に重要な情報がまとまっていますので無くさないようにしましょう
    下記は代表的な情報です。業者により、呼び名が異なりますので注意しましょう。

    Xdomainの場合

    本サイトで紹介しているXdomainのFTPを利用するための設定はこちらです。
    https://logzitsu.tlog.work/xdomain-ftp/

    具体的には

    公開サイトURL

    こちらが自分に割り当てられたアドレスです。ドメインを取得して設定した場合は別の場所になりますがとりあえずの練習はここでやるのがいいでしょう。

    管理アカウント情報

    レンタルサーバーには
    管理パネル
    サーバー管理パネル
    など複数の管理画面が存在することが多いです。ややこしいですね。
    さらにワードプレスをインストールするとワードプレスの管理画面があって初心者は大混乱ポイントでもあります。

    慣れればたいしてややこしいものではないです。

    FTP情報

    今回の記事のメインです。業者、FTPソフトで呼び名がばらばらなんですよねーこれが。
    – ホスト
    – FTPアカウント
    – パスワード
    – 公開フォルダ・初期フォルダ

    ホストとはレンタルしているサーバーの場所を表します。
    FTPアカウントとは 自分のアカウントの名前です。
    パスワードは　FTP 接続するためのパスワードになります。
    公開フォルダというのは、ここに設置したものが公開されますよ、ということです。
    試しにそのフォルダ直下に「index.html」を置いてみるとそれが表示されるはずです。
    FTP と 安全な SFTPがあるので注意。

    FTPって何？

    サーバーに接続する方法は２種類あります。
    – WEBブラウザーでみる
    – FTPソフトで接続する。

    WEBブラウザーで接続するには、メールに記載されている「公開URL」にedgeやchrome・safariで接続しサイトを表示するだけです。

    「何もアップロードされていません」というサーバーが用意したファイルが表示されているのではないでしょうか。
    しかしこの接続方法ではサイトをみることはできますが、基本的にサイト内容を書き換えたり、削除したりすることはできません。

    次にFTPでの接続です。
    ブラウザではFTP接続はできないので、専用のソフトを使う必要があります。

    WIN SCP

    filezilla

    などがあります。自分はMACですので filezilla を使っています。このソフトはwindowsでも使えます。
    ダウンロードしてインストールしましょう。
    画面はMACですが基本的な使い方は違わないはずです。

    このソフトを使うことで、公開フォルダにファイルをアップロード、削除、移動をすることができます。

    filezilla の使い方

    上のリンクからファイルをダウンロードしてfilezillaをインストールしましょう。

    サーバーに接続する

    • ホスト
    • FTPアカウント
    • パスワード
      を画像のクイック接続の部分に入力し、接続してください。

    頻繁に使うものは画像の○印をしたところから登録できますのでそこから登録してください。

    左側が自分のパソコン。
    右側がサーバー上にあるファイルになります。

    ファイルをアップロードしてみる

    <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FTPソフトの練習</title>
</head>
<body>
    <h1>FTPソフトの練習</h1>
    <p>htmlがファイルの表示が成功しました！</p>
</body>
</html>

    すでに運用しているサーバーでは安易に行わないように注意。
    新規取得サーバーでのテストを推奨します。

    上のタグは何の変哲も無いHTMLです。これをエディタで「index.html」というファイルで保存して「公開フォルダ」直下にアップロードしてください。

    その後、公開URLに接続しちゃんとこのファイルが表示されたらOKです。
    FTPソフトではファイルをアップロードできるほか、移動・削除も可能です。

    今までに作成したサイトデータをアップロード

    index.htmlが公開フォルダのすぐ下にくるように構造を作って、アップロードしてみてください。
    CSSや画像などもそのままの構造でアップロードしないと動きませんよ。

    正常に表示されたらOKです。

    うまく表示されない場合は何かがおかしいです。
    ローカルの絶対パスでファイルを参照していたとかね。
    調整してみてください。

    TECH::CAMP（エンジニアスクール）

  • 知らないとテーマが作れない！5分で学ぶwordpress テンプレートタグ一覧

    こちらの記事は随時更新したいと思います。

    テンプレートタグとは

    ワードプレスの独自タグをテンプレートタグと言います。

    通常のPHPも知っていた方がいいので
    https://logzitsu.tlog.work/wp-php/
    こちらを見てください。この記事の内容の意味がわかればギリギリなんとかなるかも。

    よく使うものを知っておきましょう。
    テンプレートタグの傾向
    get となっているものは取得。
    the となっているものは出力までしてくれます。(ehco 不要)

    構築時に必要となるもの

    テーマスタイルシートの場所（cssと画像のパス）

    <?php echo get_stylesheet_directory_uri(); ?>

    使用例

    <!-- 画像に使う場合こんな感じ -->
<img class="img-fluid" src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png">

<!-- スタイルシート読み込みはこんな感じ -->
<link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" rel="stylesheet">

<!-- JavaScript読み込みはこんな感じ -->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/script.js"></script>

    サイト情報

    // サイトのタイトル
<?php bloginfo( "name" ); ?>

// サイトのサブタイトル
<?php bloginfo( "description" ); ?>

    サイトURL

    <?php echo home_url(); ?>

    使用例

    <!-- トップへのリンク -->
<a href="<?php echo home_url(); ?>">TOPページへ</a>

    WPで必要な css / js などを出力してくれるやつ

    header.phpの「headタグ内の一番下」に追加

    <?php wp_head(); ?>

    WPで必要な htmlを出力してくれるやつ

    footer.phpの「bodyタグ内の一番下」に追加

    <?php wp_footer(); ?>

    bodyにページ別のクラスをつける

    これがついてるかついてないかで扱いやすさに雲泥の差がでますので忘れずつけましょう。

    <body <?php body_class(); ?>>

    パーツ系

    パーツを読み込む時に使います。

    <?php get_header(); ?>
<?php get_footer(); ?>
<?php get_sidebar(); ?>
<?php get_template_part( パーツの名前 ); ?>

    特定のテンプレートのみでCSS/JSの読み込み

    テンプレートのヘッダー読み込みの上あたりに足すと読み込んでくれます。
    以下はテーマフォルダ内の
    「css/custom.css」 「js/custom.js」を参照する場合です。
    最初の引数はidになるので、識別しやすいわかりやすい名前をつけるといいです。
    読み込む順番を自邸することもできますがここでは割愛。

    <?php wp_enqueue_style( 'page-css', get_stylesheet_directory_uri() . '/css/custom.css'); ?>
<?php wp_enqueue_script( 'page-script', get_stylesheet_directory_uri() . '/js/custom.js' ); ?>

    ループ関連

    メインループ(省略形)

    <?php while (have_posts()): the_post(); ?>
<?php endwhile; ?>



<?php //別の書き方
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post(); 
		//
		// 投稿がここに表示される
		//
	} 
}
?>

    サブループ(例)

    <?php
$args = array( 
'post_type' => 'post', // カスタムポスト名
'posts_per_page' => 5 // 投稿件数の指定
);
$the_query = new WP_Query($args);
if($the_query->have_posts()):
?>
<?php while ($the_query->have_posts()): $the_query->the_post(); ?>

<!-- 記事タイトル -->
<?php the_title(); ?>

<!-- 記事内容 -->
<?php the_content(); ?>

<!-- 記事リンクURL（タイトル付き） -->
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>

<!-- 日付 -->
<?php the_time("Y.m.d"); ?>

<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: //投稿がない場合 ?>

<?php endif; ?>

    ループ内で使うもの

    記事タイトル

    「ループ内で使うもの」の欄でいきなりですが、これはループ外でも動きます。

    <?php the_title(); ?>

    記事内容

    <?php the_content(); ?>

    サムネイル

    <!-- 普通に出す -->
<?php the_post_thumbnail(); ?>

<!-- サイズを指定する(独自設定可) -->
<?php the_post_thumbnail("thumbnail"); ?>
<?php the_post_thumbnail("medium"); ?>
<?php the_post_thumbnail("large");?>
<?php the_post_thumbnail("full"); ?>
<?php the_post_thumbnail("index_thumbnail");  //設定していれば任意の名前 ?>

<!-- 画像がない時になんか表示する -->
<?php 
if(has_post_thumbnail()){
the_post_thumbnail();
}else if{  ?>
<!-- 代わりの画像 -->
<img src="default.png" alt="画像設定されとらんが">
<?php } ?>

<!-- bootstrap用 -->
<?php the_post_thumbnail( 'full', array('class' => 'img-fluid') ); ?>

<!-- ファイルパスのみ出力 -->
<?php echo get_the_post_thumbnail_url (); ?>

    記事リンクURL

    <?php the_permalink(); ?>

    カスタムフィールド(ACF)の出力

    カスタムフィールドを便利に使えるプラグインを使った場合の出力です。

    advancedcustomfields

    <?php the_field('カスタムフィールド名'); ?>


//繰り返しフィールド(スライダ)
<div class="slide">
<?php if(have_rows('repeater_field_names')): ?>
<?php while(have_rows('repeater_field_names')): the_row(); ?>
<div class=""><a href="<?php the_sub_field('sub_field_names'); ?>">

<?php
$image = wp_get_attachment_image_src(get_sub_field('img_cf'), 'full');
?>
<img src="<?php echo $image[0]; ?>" alt="" />
</a></div>
<?php  endwhile;else :endif; ?>

    次の記事、前の記事

    ループ外側に設置してください。

    <!-- 個別記事 -->
<?php previous_post_link(); ?>
<?php next_post_link(); ?>

<!-- 一覧ページ -->
<?php previous_posts_link(); ?>
<?php next_posts_link(); ?>

    WP-PageNavi プラグインのページ送り

    WP-PageNavi

    <?php wp_pagenavi(); ?>

    カテゴリー

    <!-- カテゴリー -->
<?php the_category(); ?>

<!-- タグ -->
<?php the_tags(); ?>

    日付

    上の方を使うとアーカイブ一覧で同日の日付は出力されない。出力したい場合は下を利用。

    <!-- 日付 -->
<?php  the_date(); ?>

<!-- 時間 -->
<?php  the_time(); ?>

    パンクズリスト

    https://ja.wordpress.org/plugins/breadcrumb-navxt/ 
    <div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
  <?php if(function_exists('bcn_display'))
  {
   bcn_display();
  }?>
</div>

    functions.phpで使うもの

    //テーマでthumbnailをサポートする
add_theme_support( 'post-thumbnails' );

//新たに画像サイズを追加する
add_image_size( 'original-size', 500, 300,true); 

//ページ送りにclassを追加する(一覧)
add_filter( 'previous_posts_link_attributes', 'add_prev_posts_link_class' );
function add_prev_posts_link_class() {
  return 'class="prev"';
}
add_filter( 'next_posts_link_attributes', 'add_next_posts_link_class' );
function add_next_posts_link_class() {
  return 'class="next"';
}

//ページ送りにclassを追加する(個別)
add_filter( 'previous_post_link', 'add_prev_post_link_class' );
function add_prev_post_link_class($output) {
  return str_replace('<a href=', '<a class="prev" href=', $output);
}
add_filter( 'next_post_link', 'add_next_post_link_class' );
function add_next_post_link_class($output) {
  return str_replace('<a href=', '<a class="next" href=', $output);
}

    参考：https://www.nxworld.net/wordpress/wp-add-class-previous-posts-link-and-next-posts-link.html

  • 最低限知らないとヤバイ??WPで必要なPHPを30分で習得する

    ワードプレスで使うPHPを習得しましょう

    WPではそこまでPHPのスキルが求められるわけではない
    基本だけ理解して、「WP専用のタグ」を使うことができればOKです。
    最初はコピペでも動けばOK。
    PHPはどんなに汚かろうがユーザーには知るすべはないので気楽にやりましょう。

    こちらのファイルを使用します
    中身は解答するとphpのファイルが2つです。

    PHPの基本

    • かんたんな言語で、便利な命令がいっぱい用意されています。
    • 調べて必要な命令を探せると世界が広がります。
    • 環境が整ったところでないと動きません。通常のPCでは動かないのです。
    • レンタルサーバーでは簡単に動きます。
    • 「HTML」を作るための言語です。つまりユーザーが見るのは単なるHTMLです。
    • 出力結果には普通にCSSを適用できます。
    • 拡張子は「.php」
    <?php ?>

    で 囲みましょう
    利用するときはHTMLのなかに

    <?php  echo "こんちわ"; ?>

    みたいな感じのものが紛れくる感じで使われることが多いです。

    やってみよう

    1. lesson01.phpをローカルに置きブラウザで開き、動作しないことを確認しよう。
    2. lesson01.php、lesson02.phpサーバーにアップロードして動くか確認してみよう。

    FTPソフトでサーバーに接続する方法はこちらにまとめていますので参考にしてください。
    https://logzitsu.tlog.work/ftp/

    ほかのプログラムと同じだよ！基本のおさらい

    <?php ?>

    の中でないと動かないので注意です。 「lesson02.php」 に記載。

    変数が使えます

    $x = 'こんにちは';
//変数の前には「$」がつく

    コメントが使えます

    //一行だけのコメント
/*
複数行のコメント
*/

    テキスト出力

    echo 'こんにちは'.'そしてこんばんは';
/*これはとてもよく見るので覚えておきましょう
複数は.(ドット)で繋ぎます。たまに見るので覚えておきましょう。
そして文の終わりはセミコロン*/

    if文

    //変数の値を変えて動きをチェックしてみてください
$x = 20;
if($x <19 ){ echo "19より小さい".$x."です";}else{echo "19より大きい".$x."です";}

//同じ内容だが次のような書き方もある
if ($x < 19) :
    echo "19より小さい".$x."です";
else :
    echo "19より大きい".$x."です";
endif;

    for文

    //繰り返し処理を行う記述です
for($i = 0; $i < 5; $i++){
echo $i;
}

    While文

    //これも繰り返し処理です
$i = 0;
while($i < 5){ echo $i; $i++; }

    こんなところでしょうか

    if文
    for文
    While文
    あたりは、なんかそんなのやってたなーくらいの認識でいいです。最初は。

    あとはよく使うテンプレートタグを覚えて、コピペで動かしていきましょう。

    https://logzitsu.tlog.work/template-tag/

    こちらですよ。

  • WEB更新担当必見！WordPressの基礎的な概念について知ろう！

    ワードプレスをとりあえず触りたい人は次の記事を読んでからこちらに移るといいかもしれません。

    https://logzitsu.tlog.work/xdomein/

    https://logzitsu.tlog.work/wordpress-manual/

    事前理解

    基本編

    ・ワードプレスはサーバーにインストールして利用するものである。
    ・データベースと接続し利用する。
    ・データベースにはさまざまな情報が入っており、それを引き出して表示している。
    ・ワードプレスはphp データベースはMySQL を利用している。

    ・htmlを出力するプログラムなので、今まで習得してきた、htmlや、cssの知識はそのまま活かせます。
    ・繰り返し出力 が多いのでidではなくclassを使うように心がける。

    ワードプレスができること

    ワードプレスはCMSと呼ばれる、ページを簡単に作成できるシステムです。

    その他の代表的なCMSといえば、様々な会社で運営されている「ブログサービス」です。
    ワードプレスはそういった「ブログのような仕組み」を個人で作成し、カスタマイズして利用することができます。
    ブログサイトだけでなく、コーポレートサイトなどに使われることも多いです。
    一見ブログっぽくないサイトも実はワードプレスであることがよくあります。

    このシステムにより、個人でも大規模なサイトを作成できるようになったのです。

    ワードプレスってセキュリティに弱いの？

    決してセキュリティに弱いわけではありませんが、度々乗っ取り被害などが発生しているのを耳にします。
    ワードプレス、もしくはプラグインにセキュリティーホールがあるとそこをつかれます。
    最新のアップデートをすることで危険は最小限に抑えることができます。
    バージョンの自動アップデートを止めていたりすると非常に危ないです。

    ワードプレスは数多くのサイトで採用されているため、狙われやすいのです。
    知識のない人が「独自で作ったCMS」の方がセキュリティに穴があるものが多いと思います。
    しかし、他で使われていないという点で安全です。攻撃者に仕様が把握されてしまうとやりたい放題だと思いますのでご注意を。

    ワードプレスの独自の概念や単語を理解しよう。

    Thema

    ワードプレスはテーマを切り替えることにより見た目を切り替えることができます。
    ワードプレスにおける制作とは顧客のためのオリジナルテーマを作成することです。

    Themaフォルダ

    wp-content → Thema にあります。
    主に触るのはここです。
    wp-content 以外のフォルダを触ることは少ないので覚えておきましょう。

    プラグイン

    足りない機能は、「プラグイン」という形で補うことができます。
    functions.phpという、機能拡張のためのファイルがありますので、ここに命令を記載し、プラグインを使わないということもできます。
    投稿ページ（single) / 固定ページ（page）
    ワードプレスはページに２つの区分けがあります。
    ブログのようにページがどんどん増えていくものは投稿ページ。
    一度作ってしまえば内容があまり変わらないものを固定ページで作成します。
    固定ページは親子関係を作れるという特徴があります。

    カスタム投稿

    投稿ページ、固定ページのほかに投稿の仕組みを追加できます。
    functions.phpに命令を書くのですが、CPTUIというプラグインを使うと簡単にできます。

    親子関係

    親子という概念も知っておきましょう。

    図のような感じです。

    パーマリンク

    サイトのurl構造の設定のことです。
    設定の更新を忘れると正常に動かない不具合がおきることがあるので、思い出したら更新する癖をつけましょう。

    スラッグ

    ページなどを識別するための単語。投稿ページ・固定ページ・カテゴリなどなど様々なところで出てきます。URLに使われたり、とっても重要なものです。

    タイトル、コンテンツ

    記事内から入力できます。テンプレートタグに出力用のタグを記載しておくことで出力できます。

    アイキャッチ、サムネイル

    記事に設定する画像です。
    一覧ページなど、ほかのページで呼び出すことができます。

    テンプレートタグ

    ワードプレスの独自タグです。
    ワードプレスを使ってないphpでは動かないので注意。

    カスタムフィールド

    タイトル、コンテンツ以外に入力欄を使いたいことがあります。
    そういった場合に増やす入力欄です。
    デフォルトのものは使いにくいのでACFというプラグインを使うことが多いです。

    カテゴリー・タグ

    ページに分類の情報をつけることができます。検索で使えたり同一カテゴリーの一覧ページなどを作ることができます。カテゴリーとタグは非常に似ており違いもあまりないのですが、ブログをやったことをある人は感覚的にわかるのではないでしょうか。
    カテゴリーは階層を作れます。
    カスタム分類 (カスタムタクソノミー)
    カテゴリー・タグ以外の分類を追加をすることもできます。
    これもCPTUIプラグインを使うとかんたんです。
    タクソノミ：カテゴリー・タグなど
    ターム:カテゴリーにおける単語

    例：
    タクソノミー → 「フルーツ」・ターム → 「りんご・ばなな・みかん」

    ループ（メインループ、サブループ）

    繰り返し処理に用いる記述です。
    記事の出力部分などなど繰り返しっぽくないところにも使うので注意。

    サブループは条件をしっかり固めてあるので、どこに書いても同じ動きをします。
    同一ページに複数置くことも可能です。
    サイドバーの記事一覧などに使います。

    メインループは、同じ記述でもどのテンプレートに書いてあるかで違う動きをします。
    基本的にはページにひとつだけ書きます。
    こちらはページ送り機能を動かすことができます。

    Themaファイル内のファイルを見慣れよう

    テーマファイルのルール

    ・ファイル名が重要です

    など、名前が役割を表します。名前と役割を把握しておきましょう。
下の主要なテンプレート一覧を参照。
    ・ファイルの置き場所も決まってます

    テーマフォルダ直下におきます。

    style.css以外のcssや画像など、テンプレート内で用いるファイルは任意の場所でOK
    主要なテンプレートファイルと役割

    style.css

    スタイルシート。

    index.php

    基本のテンプレート。本来は投稿一覧ページとしての役割を持たせるものですが、TOPページのテンプレートでもあるので中身はいろいろです。

    パーツ用のテンプレート

    header.php
    footer.php
    sidebar.php
    文字通りヘッダーやフッターで使われるものです。

    page.php

    固定ページテンプレート。
    特定のページ専用は「page-スラッグ.php」とする。

    single.php

    固定ページテンプレート。
    カスタム投稿 専用は「single-スラッグ.php」とする。

    archive.php

    一覧ページ用テンプレート。
    カスタム投稿 専用は「archive-スラッグ.php」とする。
    category.php
    tag.php
    taxonomy.php
    タグ・ カテゴリー・タクソノミー用の一覧ファイルです。

    404.php

    ページが見つからない場合のファイル。忘れずに設置しましょう。

    テンプレートには読み込み順序があります。

    たとえば、ユーザーが投稿個別ページを表示しようとした場合に

    single-post.php がなければ
    single.php がなければ
    singler.php がなければ
    index.php

    が利用されます。
    次の表の通りです。
    どのテンプレートが使われているかはbodyに
    bodyclassが使われていればある程度推測できます。

    テンプレート階層

    TECH::CAMP（エンジニアスクール）

  • 噂の変態キーボード、Logicool k400 plusを購入しました

    デスクトップのPCのキーボードが気に入らなかった

    デスクトップのwindowsではテンキーなしで昔ならのキーのストロークが高いものを使っていたんですが、キーボードの音が結構気になるようになり、長文はあまり書きたくないなーと思っていたので、新しいキーボードを注文しました

    キーボードを選ぶときにみるところ

    個人的にテンキーはいらないです。
    ノートPCに慣れてるだけですが。

    以下は個人的なキーボードの選び方です。

    右に列があるやつは却下


    なんでかっていうとバックスペースキーを押し間違えるんですよね。効率ダダ下がりなので、こういうパソコンは絶対選ばないです。

    かっこつけて英字キーボードなんか選ばないほうがいいよ

    正直使いにくいです。
    日本語入力の切り替えわかんないし、プログラミング的なことをしてると記号の打ち方が全然わからん。
    一生英字キーボードですますならいいと思いますけどねー。

    そのほかに必要な条件

    今回はうるさいのを解消したいので、静かっぽいものを選びます。
    あとは特にないですかね。

    今回買ったキーボードの特徴

    キーボードにトラックパッドがついてます！
    でもwindowsのトラックパッドなんてたかが知れてるので、あくまで予備なものになります。

    でもペンタブと組み合わせようと思ったらなんかphotoshopの調子が悪いんですよね。
    このキーボードのせいかどうかはわかりません。少しヨスを見たいと思います。

    キーボードの使い心地について少し言っておくと、右側のキーが少し小さいですね。スペースキーも小さい。エンターキーも小さく押しにくいですね。

    でもまあ、標準的なキー配列の範囲だと思いますので、なれれば何とかなりそうです。

  • pack for vistaのサポートがいつのまにか切れてた

    pack for vistaというモリサワの超お得フォントパックが過去に存在した

    モリサワのキラーコンテンツ的なフォントであると思われる
    – リュウミン
    – 新ゴ

    がはいったパックで、windows専用で他とはことなる「ttc」ファイルであるのが特徴です。
    （なんかメイリオと仕様を合わせてあるやつらしい）

    ライセンスにそんなに厳しいしばりが内容なのですが、非常に安く手に入れることができたのです。

    インストールはめんどくさかった

    vista時代のものなのでそれ以降のOSだと、インストール時にアップデートしなければならないという仕様でした・・・。
    めんどくさいっすね。

    パソコン捨てちゃったんですけど・・・

    モリサワのライセンスインストールの厳しさを知らず、ライセンス入ったままパソコン捨てる時にHDD破壊しちゃったのです。
    これはこまった！

    サービスサイトから申請するとライセンスを消せる

    サービスサイトからフォントライセンスを消すことができるのです。
    自分がやったときはユーザー登録してないとダメでーすって言われちゃいました。
    ユーザー登録後に申請してください。

    pack for vistaのサポートは 2018年 3月までです

    残念。なんとサポートが切れていたのです。

    しかし、削除申請だけは延長されてるみたい

    http://www.morisawa.co.jp/about/news/3795
    2019年 3月末までライセンス削除は申請できるみたいですよ
    自分と同じような状態な人は急いで削除してください！

    新しいPCでインストールしたらエラーでて進まないんだけど…

    fontのCD入れたら「2008年のディスクにしてください」みたいな謎のエラーメッセージが。
    こまって色々試してたら、別ソフトのMfontスターターでインストールすることができたので同じメッセージが出た人はそちらからインストールをトライしてみてください。
    サポートは切れてますから、ダメなときは諦めるしかないんでしょうけど。

  • Samsung SSD 960で容量を増やしたMACにbootcampでwindows10を入れてみたが・・・

    https://logzitsu.tlog.work/macbookair-1tb/

    前回の記事は↑
    MAC bookの容量を増やした。

    windowsは無事に入ったものの、いくつか不具合があったのでまとめておきます。

    起動の切り替えがうまくいかない

    windows側から、Macのディスクが認識できないみたいです。
    bootcampのサポートソフトウェアから起動切り替えできないの。だめじゃん・・・。
    optionを押しながら起動して、ディスクを選択するのが公式でも推奨している方法みたいです。
    なんじゃそりゃ。

    起動が気まぐれです・・・

    windowsで再起動したはずなのに、macが起動したり、逆もあったり。
    この記事のように起動ディスク認識しなくなっちゃったりよくします。
    ハイバネーションの設定はmac win 共々切っといたほうが良さそうです。
    起動ディスク認識しないのは、まだ解決してないですね。
    macを使い続けてるとわりと発生しない気がしています。

    コントロールパネルがひらけない

    bootcampのコントロールパネルが、権限不足で動かないのです・・・。
    これはほかの方でも発生したケースの対応策を書いてある記事がありました。
    でもなんか気持ち悪いんですよね。
    あと動いたところでたいした設定はできません。

    トラックパッドのドライバが適当すぎる

    当たり前っちゃー当たり前なんですけど、トラックパッドちゃんと動かないっすね。
    動くけど、ジェスチャとか一切できない。
    公式じゃないソフトを入れるとできたんですけど、けっこう不安定な動きで個人的にはよくないなと感じたのでやめちゃいました。

    マウス使えばいいです。

    設定がめんどくさい

    macのキーボードでwindows使うのはやっぱ難しいのかなという印象を持ちました。
    カスタマイズで快適に使えるようになるんですけど、特殊な設定のキーボードって個人的にあまり好きじゃにんですよね・・・ほかのパソコンも結構さわるので。

    そんなにwindowsしか使えないソフトがない

    officeと絵を描く人ならsai ぐらいじゃないでしょうか。
    officeはネット版もあるし、ちゃんとmac版もあるんでそんなに困ることはなさそうですね。

    saiもバージョン２が開発中みたいですが、ほかにいいソフトも出てきていますのでわざわざ選ぶ必要もないかもしれません。

    ペイントツールはいろいろためしてみたんですけど、photoshopが良さそうです。
    線の手ぶれ補正がないのが結構ネックだったんですけど、ちゃんと搭載してるし、ペインターみたいな滲み水彩もなんかちゃんと機能としてあるみたいです。
    絵を描くソフトじゃないと思ってましたが、ちゃんともう「絵を描くソフト」ですよこれは・・・。
    鉛筆のブラシが入っていて(これは元から入ってたのか判断つかないんですけど)これがけっこうよくできてました。
    こまかく設定いじれるみたいなのでカスタマイズしっかりしていけば、すごく使い安くなっていきそうです。
    そもそもphotoshopの操作慣れてますからそこもいいところです。
    大体のソフトmac版あるんでmacでいいっすわ

    ライセンス代分がぁ・・・

    ライセンス買っちゃったんですけど、損したかもしれないっすね。
    でも、windows10すごくキビキビ動いていい感じなんですよね。
    きっとmacの方が最新osに対応しなくなっちゃうと思うので、この子はいずれwindowsとして動かす運命は確定しているのです(それか売る)
    だからいいのです。重い処理をしないのであればまだまだ長く使えそうな印象です。