サイトデザインを変更しました。

小説サイト新装にあたって、HTML・CSS・PHP・著作権の覚え書き

テンプレートの手入れ(カスタマイズ)中心に、ハマってめっちゃ調べたことや、これはポイント! と思ったことを並べます。再び何か作る時の自分宛です。

色々なページを見たので、出典は分からなくなってしまいましたm(_ _)m
手書きメモやページソースから起こすので、思い込みによる改変はしてないはずです。
ファイル形式はHTML5+CSS3、サーバーはPHPが使える、という環境でのお話です。

サイトはこれです → 空の箱庭 – 創作小説サイト
テンプレートはここのを使っています → Template Party

スポンサーリンク

HTML

★上から順に読み込まれる!

  • head内では、文字コードの指定を一番上にするべし。titleの方が上に来てると文字化けするかも
  • スクリプトの実行は、ページ最下部がベスト。(テンプレートはそうなっている) 途中に置いて、そこで時間がかかると、ページの読み込みが中断する

★headの中身は何を書く?

  • メタキーワードは、Googleは見てないらしいから不要!(ブログでも書くのやめよう・・・!)
  • 著者情報、コピーライト、も見られてないらしい(使用ツールの関係で入っちゃう場合は、そっとしておきましょう。無理に消すと規約に引っ掛かるかも)
  • メタ説明はindexだけに置いた(他のページは検索に乗らないだろうし、ブログみたいに記事一覧で表示されることもないし)
  • ビューポートは必須らしい(レスポンシブの場合は、だったと思う)

文章を並べているだけの、SNSで積極的に拡散とかも(今のところ)考えていないサイトなので、メタタグも本当に最低限です。
気になる方は空の箱庭 – 創作小説サイトのページソースを見てみてください。(コピペはやめてね。テンプレート配布元の規約にも触れるので)

CSS

★後から指定した要素が、先に指定した要素を上書きする

  • つまり書く順序も意味がある、ということ
  • 基本的な指定は上、特別な指定ほど下に書くべし

★ブロック要素のセンタリング方法?

  • margin: 0 auto ; と指定する(0は任意の上下余白幅に変えてよし)

★リスト(ul)を使って、パンくずナビやページ一覧を作るには?

  • ul のli について display: inline; と指定する
  • li の後ろ(前)に、”>”や”/”を付けるように、うまいこと指定する(後ろなら li:after に対して指定する)

★@mediaの閉じカッコを、間違って消さないように!!

  • ふたつ閉じカッコが並んでいて、片方が余計に見えても、それは落とし穴である。要素の閉じカッコと@メディアの閉じカッコが並んでいるのである
  • 消すと、閉じカッコ以降にある別の@メディアの指定が、無効になってしまう

★慣れるしかない決まりごとや文脈いろいろ

  • パディング=要素内の余白、マージン=他要素との間隔
  • ブロック要素の大きさを指定する%は、親要素に対する割合である
  • 余白の数字を並べる順番(2つ:上下/左右、3つ:上/左右/下、4つ:上から時計回り)

PHP

★拡張子が.htmlでも、PHPファイルとして読む方法
.htaccess(エイチティーアクセス)ファイルに、コードを書くそうです。結局やらなかったので、必要時にまた調べる。

★外部ファイルを呼び出す方法
PHPにおいては、2種類の関数がある。

  • includeは、ファイルが見つからなくても先へ行く
  • requireは、処理が止まっちゃう

→includeのほうが使い勝手が良い

★エラーメッセージで出る行番号の件

  • その行以前に原因がある場合あり:構文エラーの場合、ここまで読んだけど分からなかった! と、離れた行番号を言ってくるみたい。
  • この行のこの部分がワカラン、と具体的に言ってくる場合は、行番号=エラー部位の場合が多い。

★エラーは閉じタグ/カッコ/記号の抜けがほとんど(私の場合)
例:メールフォームにて

  1. HTMLソースの合間にあった閉じカッコ( <?php } ?> ってやつ)を、うっかり消した
  2. 一番行末で構文エラー

※使用したメールフォームはこれ → PHP多機能メールフォーム フリー(無料)版 – PHP工房(コメントが分かりやすい、項目のカスタマイズ自在。中級者以上向きかも)

★メールフォームの迷惑メール・スパム対策
配布サイトの説明ページが分かりやすかった。 → メールフォームにおける迷惑メール、スパムメール対策 – PHP工房

これを参考にして、

  • 送信内容確認画面表示
  • リファラチェック
  • 送信完了ページへのリダイレクト

を設定した。必須項目は設定してない。(感想とか送る敷居を下げたい)

テンプレートの著作権

今回、Template Partyのテンプレートを大幅に改変しましたが(特に小説・日記の本文ページ)、この場合の著作権は?
→あくまで原作者に著作権がある!

  • 靴やカバンを買ったような発想(0円だけど)。いくらデコったり色塗ったりしても、自分のオリジナルになる訳ではない。

 

以上、覚え書きでした。
参考にされる方は自己責任でよろしくお願いしますm(_ _)m

コメント

スポンサーリンク