今さら聞けないHTML　2020年10月23日

WordPressでオリジナルテーマのサムネイル の設定の方法

WordPressでオリジナルテーマを作成した際に、特に何も設定をしないとこのような状態になっています。


自分で使う分にはこれではいいかもしれませんが、お客さんに納品する際にこれではカッコ悪いなぁって思ったので、サムネイルの設定について調べました。

#サムネイル用の画像を準備する
まずはサムネイルに表示する画像をアップします。
それっぽくみえるものでよいと思います。

今回はこちらの画像を準備しました。

#縦横比3:4に調整する
サムネイルの縦横比が3：４なので、切り取りしていきます。
これは自分の使いやすい

【スギちゃん風】カスタム投稿タイプの個別投稿ページにはこうやってコメントをつけるんだぜぇ〜

#背景

カスタム投稿タイプの個別投稿ページにコメント機能をつけたいと思ったのですが、
普通の投稿タイプと同様のやり方では表示されない。

そんな悩みを抱えている方のための備忘録になります。

#まずコメント機能どうやってつくるの？？

###comments.phpを作ります

“`php
　//現在の投稿に対してコメントが許可されいるかの条件分岐

//コメントがある場合ループを開始する

//コメントをリストで表示する

//コメントフォームを表示する

“`

###表示したい部分に次を記述

“`

MAMPでSSIを使ってみる

#背景
複数のWEBアプリを作成すると似たような機能がある。再利用を見据えてSSIにてファイル分割を行う

#実施
– “C:\MAMP\conf\apache\httpd.conf”の Directory “C:\MAMP\htdocs” のOptions にIncludesを追加
AllowOverrideはAllになっていることを確認

~~~conf

# Options Indexes FollowSymLinks ExecCGI
Options Indexes FollowSymLinks ExecCGI Includes
—-省略—
AllowOverride All
—-省略—

~~~

– IfModule mime_moduleにAddTypeとAddOutputFilter INCLUDESを追加

~~~conf

—-省略—
#AddType text

リンク先が正しく反映されない理由【解決事例あり】

みなさん、こんにちは。

未経験からWebエンジニア転職を目指して独学中の体育教師しろと申します。

今回は、ネット上に公開された、サイトのリンク先が正しく反映されない理由について記事にしました。
実際に、リンク先が反映されなかった私の事例を元に説明していきます。

私のサイトは最初このような状態でした。

【問題2】

ページ遷移後、トップページに戻ったら
「そのページは存在しません」と表示される。 pic.twitter.com/twM47CHpqN

— しろ＠体育教師のエンジニア転職 (@next_shiro) October 22, 2020

Twitterカードの設定方法

自分が運営しているサイトの記事をTwitterでこんな風にリンクしてみたくないですか？
↑こんな感じに。これはTwitterカードと言い、一言でいうと「画像付きリンク情報」になります。
今から、どうすればTwitterカードを設定できるのか、説明していきます。
#Twitterカードとは
Twitterカードとは、設定していない場合は次のようになります。
それに対して Twitter カードが設定されている場合は次のようになります。
![IMG_2232.png](https://qiita-i

WebView内のテキストフィールドタップ時のキーボード

WebView内のテキストフィールドを選択した時に、表示されるキーボードのタイプは何によって決まるのか調べました。今回は“`SFSafariView“`で試していますが“`WKWebView“`でも同じはずです。

## 結論
htmlの“`type“`の指定によって表示されるキーボードの種類が変わります。

“`
// 普通のキーボード

// PhonePad

“`

これ以外にもtypeに“`url“`や“`email“`を指定することで、それぞれに応じたキーボードを表示させることができます。

html & rails メモ

# はじめに

超ど初心者のメモです

## フォーム

### 新規投稿フォーム

`form_tag(“url”) do` で送った情報は`param[]` に入る

“`html
<%=form_tag("/posts/create") do%>

<% end %>
“`

`param[:content]` とかで参照する。

### 新規ユーザー登録

“`html
<%= form_tag("/users/create") do %>

ユーザー名

2020-10-22　学習記録

今日やったこと
Webの神様模写コーディング (2h)

基本情報技術者試験（キタミ式) (0.5h)

うまくいったこと
最近模写コーディングを始めて、Progateからの脱出ができそう。

うまくいかなかったこと
衝動的に何をするか決めてしまうため、もっと計画的に勉強を進める必要がある。
午後になると頭が動かない。

対策
衝動的に何かする前にやることを記録する習慣をつける。（レコーディングダイエット的な）
長い目で見てめんどくささを減らしてくれるものを優先して覚える（ショートカットとか）

【初心者向け】tableは幅100%にしながら1列目だけ幅を固定する方法

#どうも7noteです。table要素のちょいテク。

tableの子要素は幅を自動調整される特徴がありますが、どちらかというと幅を指定したい時が多いです。
そしてスマホの時には「1列目だけ幅を固定しつつも、全体は100%表示させたい」なんて方向けの記事です。

## ソース

“`index.html

1列目	2列目	3列目
1列目	2列目	3列目

“`

“`style.css
table {
table-layout: fixed; /* table要素に指定することで、幅を固定 */
width: 100%;
}
table th{
width: 200px; /* 幅を指定した要素だけ固定される。他は等倍の可変 */
}
“`

#

slick.jsを使用してページャーに数字を適用する

スライダーを使用したい時、手っ取り早くslickを使っています。便利ですよね。
ある時スライドをポップアップさせて動画を表示させる依頼がありました。
仕様としては
「ページャーには第○章と順に入れてね」
「スマホの時はページャーをドットにしてね」
というもので、やり方を調べて実装しました。以下備忘録です。

##slickでページャーを変更できる「customPaging」
「customPaging」というオプションで自由に変更できます。

“`javascript
$(‘.c5-slider’).slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
draggable: false,
arrows: true,
prevArrow: ‘前‘,
nextArrow: ‘次‘,
customPaging: function(sli

position争い〜要素が重なった時は？〜

##要素が重なった時に優先順位を決めたい！
###2つの要素にpositionをつけた時、思わぬ形で要素が重なってしまう、、
https://gyazo.com/3c01c80fad0dc299c069baf4a7376225

##原因、2つの要素にpositionをつけた時には、勝手に優先順位ができるので、優先順位を手で書き込むこと

header{
position: fixed;z-index:10;//z-index:10;を追加
text-align:center;
}

.tweets-comment{
width: 30vw;
background-color: burlywood;
position: relative;z-index:0; ;//z-index:0;を追加
}
###結論！　z-index:0;の数字が高い　上 z-index:0;の数字が低い　下になります

##直りました。。
https://gyazo.com/61361fe8cfce08d8880a2687e055813a

jQueryを使ってテキストボックスにフォーカスを当てる方法

###jQueryを使ってテキストボックスにフォーカスを当てる方法を見ていきましょう

以前に私が書いた要素の表示、非表示のコードをそのまま使っていきます。
まだ見ていない方はこちらからご覧ください。
https://qiita.com/pikarunn/items/ce8dc83d5baa4ce5fd60

###完成形はこちらです
要素を表示した時にフォーカスが当たり、カーソルを当てなくても文字を打てるようになります



以前に使ったコードはこちらです

“`javascript:header.

ユーザー認証の導入

#ユーザー認証の導入
##Basic認証
HTTP通信の規格に備え付けられている、ユーザー認証の仕組みのこと
#RailsアプリケーションにBasic認証を導入
“`java:app/controllers/application_controller.rb
class ApplicationController < ActionController::Base before_action :basic_auth (省略) private def basic_auth authenticate_or_request_with_http_basic do |username, password| username == 'admin' && passwo

Webエンジニアになるにあたっての学習方法

##【対象者】

これからWebエンジニアやってみようかなって人

##【まえがき】

初めまして、Webエンジニアになって早６年目。
Qiitaは読む専門だったのですが、ありがたいことに１年半ほど前からオンラインスクールの講師をやらせてもらってます。
その中で、「自分もそうだったなぁ」と感じることが多く、自分の今の目の前の方だけではなく
今もどこかで、独学で悩んでいるエンジニアの方の助けになればと思い、記述をしてみようと思った次第です。
これはあくまで私の主観ですので、先輩エンジニアの方やスーパーエンジニアの方は、
またそこら辺のエンジニアがなんか言ってるわ、と見逃すか、暖かい心でコメントください。

##【経歴と自己紹介】

本業は、SESでプログラム組んでます。
「エンジニアになりたいけど誰も未経験なんて雇ってくれないわ、よし！一人でやろう」
で、フリーランスで３年実務経験（笑）を積んだ後に、会社員として３年目、現在に至ります。
使用言語は今はPythonでApi作ったり、解析やったりしてます。
元々はPHPでWebサービスばっかり作ってました。
言語にこだわりは持たないタイプ。

【HTML】セレクトボックスを使ってみた

#プログラミング勉強日記
2020年10月21日
今までHTMLを勉強してきたが、セレクトボックスを使ったことがなかったので使い方をまとめる。

#セレクトボックスの基本的な書き方
　select要素でセレクトボックスを作成することができる。メニューの選択肢はselect要素内に配置するoption要素で作成する。
　select要素はname属性には部品の名前を指定し、size属性で表示行数を指定する(初期値は1)、multiple属性は複数選択を可能にする。
　option要素はvalue属性には送信される文字列を指定し、label属性は選択肢として表示されるテキストを指定し、selected属性では選択された状態を指定する。

　基本的な書き方は以下のようになる。

“`html:html
サンプル1サンプル2サンプル3

元記事を表示

【作ってみた】CSSだけで、右から左に流れる文字。簡単作成ツールも紹介！

# どうも7noteです。CSSで流れる文字の作り方。

きれいな液晶パネルが増えてきたので、電光掲示板のようなものは少し減ってきたのかな？と思いますが、電光掲示板にあるような右から左に流れる文字をCSSで再現する方法です。

**こんなやつ**


## ソース

“`index.html

次は〜〇〇駅 次は〜〇〇駅 開く扉にご注意ください。

“`

“`style.css
.text {
width : 300px; /* 枠の大きさ */
border: solid 1px; /* 枠線 */
padding: 3px; /* 枠線の内側の余白 */
overflow : hidden; /* 枠からはみ出た部分を非表示 */

元記事を表示

【ブルゾン風】WPの投稿記事をhtmlファイルで回してみたくない？

#やりたいこと

WordPressのブログの記事情報を外部サイトにも反映・表示させたい！
だがしかし、、拡張子がhtmlのファイルにそんなことができるの？？

思い悩むこと12時間…………
なんとかやり口を見つけ解決まで導き出せました！

今回やりたいことをまとめると
・WordPressの投稿情報を外部サイトでも使いたい
・htmlファイルでphpを使いたい

#環境

【サーバー】　　　Xserver
【サーバー番号】　2001（sv2001）以降

#WordPressの投稿情報を外部サイトでも使う方法

ステップは2つです。
・WP管理外でも機能を使えるようにする
・投稿記事を表示する

###WP管理外でも機能を使えるようにする

下記記述を対象のhtmlファイルの一番上にコピペしましょう。

“`php
include($_SERVER[‘DOCUMENT_ROOT’].”/wp/wp-load.php”);
“`
もしくは

“`php
include($_SERVER[‘DOCUMENT_ROOT’].”/wp/wp-blog-header.ph

元記事を表示

RailsにBootstrapを導入!!

RailsにBootstrapを導入する方法を説明致します。
手順は、とても簡単ですのでご参考にどうぞ！！
手順は、４つあります。

####手順
**1.Bootstrapのインストール
2.SCSSファイルの作成
3.JSファイルの修正
4.Rails（Puma）の再起動**

#1.Bootstrapをgemでインストール

RailsでBootstrapを使う場合は、gemを使ってインストールする方法が一般的です。
Bootstrapは内部でjQueryを利用しているので、こちらもあわせてインストールしましょう。
Gemfileに以下を追記して、bundle installを実行してみてください。

“`java:Gemfile
gem ‘bootstrap’, ‘~> 4.3.1’
gem ‘jquery-rails’
“`

“`java:ターミナル
% bundle install
“`

#2. SCSSファイルを作成

**次に、application.cssをapplication.scssというファイル名に変更します。**
これは、Bootstrapが「S

元記事を表示

【HTML/CSS基礎】インライン要素とブロック要素/widthとheight　

まずインライン要素とブロック要素と聞いて何を思い浮かべます？

僕>>width/heightが決めれたり、
横いっぱい伸びたり、隣に並んでくれたりする要素？値？でしょ！

びっくりするくらいざっくりとでしか覚えてません。。
その都度、ネットで調べて適宜対応しています。

しかし！！！

もう頭の中に入れて、調べたくない、、、
調べる時間がもったいない、、、
そんな気がするので、備忘録として残します。

アウトプットまでがインプット！！！

## 目次
###①インライン要素とブロック要素
– ①-1 それぞれの値の特徴
– ①-2 細かいところ

###②widthとheight
– ②-1 width/height: auto;
– ②-2 auto と 100%の違い

###③width指定ではみ出る
– ③-1h widthではみ出るの回避

###④番外編　画面縮小時に、flexboxで指定した要素が縮小しないのを解決

####①-1 それぞれの値の特徴

1) block
– p, div, ul, h1~h6タグの初期値
– 要素が横いっぱいにまで広がり

元記事を表示

BEM(Block Element Modifier)とは

HTMLのクラス名を好き勝手書いてしまうと、共同での開発で修正しづらいという問題が起きてしまいます。
そこで、後から改修しやすい設計にする手法の一つであるBEMについて解説していきます。

# BEMとは
Block, Element, Modifierの頭文字をとってBEMという名前になっています。

# BEMの書き方
Block, Elementはアンダースコア二つでつなぎます。
Element, Modifierはハイフン二つでつなぎます。

例:

“`qiita.css
/*Block*/
.list

/*Block, Element*/
.list__item

/*Block, Element, Modifier*/
.list__item–second
“`

…少し慣れは必要そうです！

# Block, Element, Modifierの違いについて
Block: ナビゲーションだとフォームなどの部品やヘッダー、フッターなどの大きなセクションのこと

Element: その部品を構成するための中身のこと

Modifier: 同じブロック

元記事を表示