WordPressの質問（q10255357）の続

質問

クライアント側の3番についてお聞きしたいのですが、1週間で質問をリセットする場合こちらは必要なくなるのでしょうか？
データベースの容量から考えて定期的に質問を削除するように考えております。
4番の画像ファイルというのは画像、動画、PDF それぞれにあったタグに Javascript で変更するということでしょうか？

サーバー側のコードは bbs_que_list.php を想定しております。

※最新コード
https://wandbox.org/permlink/a5reYrjPHQnrGXXi

回答No.36

dell_OK · ベストアンサー

・見落としておりました申し訳ありません。

当時のfunctions.phpをそのまま使ってもだめです。
途中で、以下の変更が入りましたよね。
ここは変更しておいてください。
$result['items'][] = ['title' => $row->title, 'img1' => $url, 'type' => $type, 'url' => home_url('質問みる?'.$row->unique_id)];

・console に書いてあるエラーの読み方が分からず教えて頂きたいです。

どのようなエラーが出ていますか。

お礼

こちらが最新の回答になります。
質問の期限が切れてしまいました、下記のリンクからアドバイスよろしくお願い致します。

https://okwave.jp/qa/q10271965.html

補足

A.回答ありがとうございます。
過去の回答は見たつもりだったのですが変更点が抜けておりました申し訳ありません…
Uncaught ReferenceError: group_id is not defined　と書かれておりエラー文を調べようと思ったのですが、該当箇所が分からずどこを修正すべきなのか分かりませんでした。

※表示されているエラー文
➀jQuery.Deferred exception: group_id is not defined ReferenceError: group_id is not defined
at add (http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e8%b3%aa%e5%95%8f%e4%b8%80%e8%a6%a7%e8%a1%a8%e7%a4%ba%e7%94%bb%e9%9d%a2/:130:32)
at HTMLDocument.<anonymous> (http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e8%b3%aa%e5%95%8f%e4%b8%80%e8%a6%a7%e8%a1%a8%e7%a4%ba%e7%94%bb%e9%9d%a2/:118:9)
at e (http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js?ver=6.5.5:2:30005)
at t (http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js?ver=6.5.5:2:30307) undefined

➁Uncaught ReferenceError: group_id is not defined
at add (雑談掲示板　質問一覧表示画面/:130:32)
at HTMLDocument.<anonymous> (雑談掲示板　質問一覧表示画面/:118:9)
at e (jquery.min.js?ver=6.5.5:2:30005)
at t (jquery.min.js?ver=6.5.5:2:30307)

※該当ページ
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e8%b3%aa%e5%95%8f%e4%b8%80%e8%a6%a7%e8%a1%a8%e7%a4%ba%e7%94%bb%e9%9d%a2/

回答No.35

dell_OK

・理由をお聞きしたいのですが、ソースコードに CSS の内容が表示されるからでしょうか？

スタイルはCSSで指定するのが一般的だからです。
OKWAVEでもYahoo!でもHTML内のstyle属性は使っていません。
その理由はいろいろあると思います。

ひとつにはスタイルシートが反映されなくなることが考えられます。
例えば、以下のようなHTMLがあったとします。
－－－－
<style>
div {
border: solid;
width: 200px;
}
</style>
<div style="height: 100px;width: 100px;"></div>
－－－－
このdivの横幅は100pxと200pxのどちらになると思いますか。
実際に試していただければすぐにわかりますが、100pxです。
なぜなら要素に直接記述されたスタイルが最優先だからです。
ではなぜこれが問題なのかと言うと、
デザインを変更したくなった時に、
HTMLとCSSのどちらを変更しなければいけないのかがすぐにわからないからです。
サイズはHTMLに直接書いているからHTMLだな、とわかるのは、
自分自身がやっている現在進行形の時だけです。
幾日かたつとどちらかわからなくなるかも知れません。
でも、デザインに関するスタイルはすべてCSSで記述する、としておけば、
デザイン変更はCSSの変更でことたりる、ことになります。
但し、デザイン変更にかかる作業がHTMLタグにまで及ぶようでしたらこの限りではありません。

補足

A.解説ありがとうございます。
CSS を編集する際に分かりずらいからということですね。
Javascript が優先させるということは初めて知りました覚えておきます。

回答No.34

dell_OK

・➂のnullバイト攻撃対策でも可能でしょうか？

これでは対策できないと思います。

補足

回答ありがとうございます。
その他の方法も調べてみたのですが対策を見つけることができておりません…
何か良い方法などありますでしょうか…？

回答No.33

dell_OK

・'img1' => $url の $url はどこからきているのでしょうか？

回答No.16の　functions.php　のここです。
$url = $upload_dir['baseurl'].'/attach/'.$info['basename'];

最新のコードには、この回答のコードが反映されていないようですね。

・'title' => $row->title についてタイトルにもリンクを付与したい場合はどのように書けばよいのでしょうか？

タイトルにもとのことですが、
画像とタイトルをまとめてaタグでくくる方法でもいいですか。

目的物はこんな感じです。
<div class="image-card-wrap" style="display: inline-block;">
<a href="～/質問みる?～">
<div class="image-thumbnail-card">
<img src="～" style="height: 150px; width: 260px;"></div>
<div class="image-title-link">
</div>
</a>
</div>

改めて見てみると、ＨＴＭＬ内に　style　があるのはあまりよくない気がします。
style="display: inline-block;"
style="height: 150px; width: 260px;"
これらはＣＳＳに任せてみてはどうでしょうか。

それでと、aタグをこの位置に挿入すれば、画像とタイトルの両方がリンククリックの対象になります。

for (let idx = 0; idx < json.items.length; idx++) {
count++;
const item = json.items[idx];
const imageCardWrap = document.createElement("div");
imageCardWrap.classList.add("image-card-wrap");
imageCardWrap.style.display = "inline-block";
const link = document.createElement("a");
link.href = item.url;
const imageThumbnailCard = document.createElement("div");
imageThumbnailCard.classList.add("image-thumbnail-card");
if (item.type == "img") {
const img = document.createElement("img");
img.style.height = "150px";
img.style.width = "260px";
img.src = item.img1;
imageThumbnailCard.appendChild(img);
} else if (item.type == "video") {
const video = document.createElement("video");
video.style.height = "150px";
video.style.width = "260px";
video.src = item.img1 + "#t=0.1";
imageThumbnailCard.appendChild(video);
} else if (item.type == "iframe") {
const iframe = document.createElement("iframe");
iframe.style.height = "150px";
iframe.style.width = "260px";
iframe.src = item.img1;
imageThumbnailCard.appendChild(iframe);
} else {
const img = document.createElement("img");
img.style.height = "150px";
img.style.width = "260px";
img.src = "../wp-content/themes/sample_theme/images/alternative.png";
imageThumbnailCard.appendChild(img);
}
link.appendChild(imageThumbnailCard);
const imageTitleLink = document.createElement("div");
imageTitleLink.classList.add("image-title-link");
imageTitleLink.textContent = truncate(item.title, 20);
link.appendChild(imageTitleLink);
imageCardWrap.appendChild(link);
$(".image-inline-player").append(imageCardWrap);
}

・画像のリンクを作成するコードについてお聞きしたいのですが、セキュリティ処理（ファイル名の命名）等はどのように引き継げばよいのでしょうか？

回答No.16の　functions.php　のコードを反映していただければ、画像のＵＲＬが参照できるようになります。

補足

Q.タイトルにもとのことですが、
画像とタイトルをまとめてaタグでくくる方法でもいいですか。

A.回答ありがとうございます。
画像とタイトルの組み合わせで表示しているため他の要素を巻き込む心配がなく、まとめてくくる方法で良さそうです。

Q.改めて見てみると、ＨＴＭＬ内に　style　があるのはあまりよくない気がします。
style="display: inline-block;"
style="height: 150px; width: 260px;"
これらはＣＳＳに任せてみてはどうでしょうか。

A.アドバイスありがとうございます。
理由をお聞きしたいのですが、ソースコードに CSS の内容が表示されるからでしょうか？

Q.それでと、aタグをこの位置に挿入すれば、画像とタイトルの両方がリンククリックの対象になります。

A.修正ありがとうございます、勉強になりました。

※最新コード
https://wandbox.org/permlink/PLTJs0rRtzUJLQMX

※修正コード
/* 雑談掲示板　一覧表示画面本体定義 */
.image-inline-player .image-card-wrap {
width:260px; /* 枠の横幅 */
margin: 23px 0px 23px 19px; /* 枠のスペース */
vertical-align:top; /* 上端に揃える */
word-wrap:break-word; /* 文字を改行し枠内に収める */
display:inline-block; /* <li>要素を横に並べる */
/* display:inline; */
zoom:1;
}

/* 雑談掲示板　一覧表示画面の画像配置位置 */
.image-inline-player .image-card-wrap .image-thumbnail-card {
height: 150px; /* 画像の高さ */
width: 260px; /* 画像の横幅 */
}

Q.回答No.16の　functions.php　のコードを反映していただければ、画像のＵＲＬが参照できるようになります。

A.見落としておりました申し訳ありません。
修正してみたのですが console に書いてあるエラーの読み方が分からず教えて頂きたいです。
解決策をとして、functions.php 183行目の function bbs_que_list_items() を使うために bbs_que_list.php 15行目のコードを下記のように変更するのではないかと考えております。

function bbs_que_list_items() {
var count = 0;
$(function() {
add()
$(window).on("scroll", function() {
if ($(window).scrollTop() + $(window).height() >= $("html").height()) {
add()
}
})
});
}

※最新コード
https://wandbox.org/permlink/qujMvCXPkHZDzXbi

回答No.32

dell_OK

最新コードを見てみました。
https://wandbox.org/permlink/8xsQr2Z5pfPKipXn
ＵＲＬにテーマフォルダを記述されていますね。
../wp-content/themes/sample_theme/images/alternative.png

スタンプ画像の時に言った方がよかったのかも知れませんが、
素材を置くのはアップロードフォルダが一般的かと思っていますし、
テーマフォルダに置かない方がいいと私は思っています。

その理由のひとつ目はテーマを変更した時に簡単に使えなくなってしまう。
質問者さまのサイトの場合はテーマを変更することはないと思うのであまり関係がないかも知れませんね。

理由のふたつ目はテーマフォルダを公開する危険性です。
どこかにそんな情報があるかと思いましたが見つけられなかったので、
通常は気にしなくてもいいのかも知れません。
もしくはなにかしら対策があってそれをしておけばいいのだと思います。
ですがテーマフォルダが公開されると直接アクセスされやすくなるのは確かだと思います。

https://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/
４０４エラーページが表示される。
これはいいと思います。

https://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/
エラーになる。

https://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/functions.php
エラーになる。

WordPressで作られた事例を探していくつか見てみました。
同じようなエラーが出るサイトもあるし、
真っ白でなにも表示されないサイトもある中、
テーマフォルダがわからない（わかりにくい、テーマフォルダを使っていない）サイトもあって、
直接アクセスを断念しましたが、何かしら対策されているように思います。

私が直接アクセスしようと試みたのは、
アクセスして表示されたページのソースからstyle.cssを探す方法です。
すると　～/themes/テーマフォルダ/style.css　が見つかるので、
簡単にテーマフォルダを見つけることができます。

上記で「テーマフォルダがわからない」と言ったのは、
style.cssが見つけられなかったサイトです。
このファイルは名前も配置も自由なので、
ここからテーマフォルダを見つけられなくするのは簡単かと思います。

なんにしても、エラーになるのはよくない気がしますし、
セキュリティを重視される質問者さまにとっては、
攻撃されやすいのも気になると思いますので、
どのような対策方法があるのかわかりませんが、
最終的には対応された方がいいのではないでしょうか。

補足

A.アドバイスありがとうございます。
色々と調べたところ複数対策がありそうです。
dell_ok さんがおっしゃられているのに当てはまるのは➂のnullバイト攻撃対策でも可能でしょうか？

➀WordPressに外部からアクセスできないようにする
https://baigie.me/officialblog/2020/01/28/wordpress-security/

➁ランサムウェアなどの外部からの攻撃対策をレンタルサーバーで行う
https://pilotz.jp/column/rentalserver-security/

➂ファイルパスを遡られてもテキストファイルにしかアクセスできないようにする
https://qiita.com/oouaioi/items/58aaf4c1d079bac96931

回答No.31

dell_OK

最新コードをいただいて、試してみました。

・「*」の意味について調べてみたのですが、すべての要素にスタイルを適用すると書かれており意味がよく分からずそのまま書いております。
初めは書き間違えではないかと考えておりました。

そうですね。
この「*」はなんの意味があってこの人が書いたのかわかりませんね。
質問者さまがやられているようにコメントでいいと思います。
/* display:inline; */
もしかしたら、
「display:inline-block;」でやってだめなときにこっちをつかうつもりで書き残していたのかもしれないですね。

補足

Q.もしかしたら、
「display:inline-block;」でやってだめなときにこっちをつかうつもりで書き残していたのかもしれないですね。

A.回答ありがとうございます。コメントという認識で修正いたします。

回答No.30

dell_OK

・回答する方が見る画面のコードではないかと思うのですが、無限スクロールで表示されたコンテンツとどのように結びつくのでしょうか？

回答する方が見る画面のＵＲＬの生成です。
リンクにはこのＵＲＬが必要だと思いますが、
無限スクロールはともかく、
そのコンテンツをクリックしてどこへ行くのですか。

補足

Q.回答する方が見る画面のＵＲＬの生成です。
リンクにはこのＵＲＬが必要だと思いますが、
無限スクロールはともかく、
そのコンテンツをクリックしてどこへ行くのですか。

A.回答ありがとうございます。
説明不足で申し訳ありません。PHPでリンクを生成するのは理解できたのですが、PHP で生成したコードを Javascript に結び付ける方法が分からない状態です。
3点アドバイスお聞きしたいです。

➀$url = home_url('質問表示画面?'.$row->unique_id); から 'url' => home_url('質問みる?'.$row->unique_id) に変化させたことから Javascript で url を使い表示させることまでは理解できるのですが、
'img1' => $url の $url はどこからきているのでしょうか？

➁'title' => $row->title についてタイトルにもリンクを付与したい場合はどのように書けばよいのでしょうか？

➂画像のリンクを作成するコードについてお聞きしたいのですが、セキュリティ処理（ファイル名の命名）等はどのように引き継げばよいのでしょうか？

※修正後のコード
function bbs_que_list_items()
{
global $wpdb;
$count = $_POST['count'];
$sql = 'SELECT * FROM sortable LIMIT %d,10';
$query = $wpdb->prepare($sql, $count);
$rows = $wpdb->get_results($query);
$result = [];
foreach ($rows as $row) {
$result['items'][] = ['title' => $row->title, 'img1' => $url, 'type' => $type, 'url' => home_url('質問みる?'.$row->unique_id)];
}
echo json_encode($result);
exit;
}

※PHPで表示していた際のコード
$upload_dir = wp_upload_dir();

foreach ($rows as $row) {
$url = home_url('質問表示画面?'.$row->unique_id);
$pattern = $upload_dir['basedir'].'/attach/'.$row->ID.'_0.*';
$files = glob($pattern);
if (empty($files)) {
$view = '<img src="ダミー画像パス">';
} else {
$info = pathinfo($files[0]);
$attach_url = $upload_dir['baseurl'].'/attach/'.$info['basename'];
$ext = $info['extension'];
switch ($ext) {
case 'jpeg':
case 'png':
$view = '<img style="height: 50px;" src="'.$attach_url.'">';
break;
case 'mp4':
$view = '<video style="height: 50px;" src="'.$attach_url.'">';
break;
case 'pdf':
$view = '<iframe style="height: 50px;" src="'.$attach_url.'"></iframe>';
break;
default:
$view = '';
break;
}
}
}

※旧コード
https://wandbox.org/permlink/dDGUOAVWQx4l71lL

回答No.29

dell_OK

・Javascript で出力することばかり考えておりました。リンクは PHP でも可能なんですね…

そうではありません。
JavaScriptで出力してかまいません。
私が言いたかったのは、
リンクに限ってのことではありません。
もともとはJavaScriptでこんな風になっていたではないですか。
content =
"<div>" + item.id + "</div>" +
"<div>" + item.title + "</div>";

このようにHTMLを記述すると、
期待している予定の出力を手で書いた、
<div>ID</div>
<div>タイトル</div>
と似ていてわかりやすいと思います。

まずこの方法で完成するまでやって、
完成したらdocument.createElement()にしてくださいという話しです。
いまからこのページに関してこの手順に戻す必要はありません。
今後、新しいページを作るときの話しです。

でも、いまからでもいつでもすることは、
していただいたように、手でＨＴＭＬを書いてみることです。
これを私は目的物と読んでいます。
そしてそれをブラウザで表示してみて、期待通りであることを確認します。
これが最も大切な作業だと私は思っています。
ここがしっかりしていれば、あとはそのままを出力するだけなのですからね。

それから、PHPでもJavaScriptでもその場に応じたプログラムから出力してみます。
PHPはおそらくそのＨＴＭＬにならった見た目のコードになると思います。
JavaScriptでも直接ＨＴＭＬを記述すればそうです。
ただJavaScriptにはほかにもいろいろな記述方法があり、
その手順はＨＴＭＬを記述するよりも困難になってきます。

const divId = document.createElement("div");
divId.textContent = "ID";
～.appendChild(divId);
const divTitle = document.createElement("div");
divTiltle.textContent = "タイトル";
～.appendChild(divTitle);
このような書き方で、
<div>ID</div>
<div>タイトル</div>
を簡単にイメージできればそれでかまいませんが、
なかなか簡単なことではないと思いますので、お願いした次第です。

補足

Q.期待している予定の出力を手で書いた、
<div>ID</div>
<div>タイトル</div>
と似ていてわかりやすいと思います。

完成したらdocument.createElement()にしてくださいという話しです。

A.解説ありがとうございます。理解することが出来ました、以後こちらの方法で書くように気を付けます。

Q.していただいたように、手でＨＴＭＬを書いてみることです。
これを私は目的物と読んでいます。
そしてそれをブラウザで表示してみて、期待通りであることを確認します。

それから、PHPでもJavaScriptでもその場に応じたプログラムから出力してみます。
PHPはおそらくそのＨＴＭＬにならった見た目のコードになると思います。
JavaScriptでも直接ＨＴＭＬを記述すればそうです。
ただJavaScriptにはほかにもいろいろな記述方法があり、
その手順はＨＴＭＬを記述するよりも困難になってきます。

A.アドバイスありがとうございます。
確かにまず HTML で書いてそれらに合わせた PHPやJavaScript のコードを書く方が分かりやすいですね。
Javascript はコード記述が増える為 PHP を優先したという点も理解できました。

回答No.28

dell_OK

・コンテンツを囲っているグレーの外枠になります。

ということは、
<div id="feed4-layout">
<div class="image-inline-player">
<div class="image-card-wrap">
</div>
ここですね。
</div>

ここは厳密なフッターではないので、そのまま記述していただければいいと思います。
<div id="feed4-layout">
<div class="image-inline-player">
<div class="image-card-wrap">
</div>
<div>
　　追加したいコンテンツ
</div>
</div>

厳密ではないにしても、フッターと似たような存在なので、
すぐには表示されません。
無限スクロールが本当に無限であれば、絶対に表示されません。
ですが、データがつきた時はスクロールが終わるので、
その時にようやく表示されると思います。
無限スクロールと言っても、
本当は無限ではないサイトが多いと思います。
本当に無限にするには、データがつきた時に、
先頭のデータに戻って表示するなどしないとできないと思います。
本当に無限にすると、フッターのようなものは表示できないので、
本当に無限にする必要はありません。
ただ、フッターのようなものをフロートさせて、
ブラウザの下部に表示することはできるような気がします。
WordPressは独自のフッター機能があるので、
それを無視、または、使用しないというとりきめで、
その表示したいコンテンツを表示するのもいいと思います。
その場合は、上記のＨＴＭＬの位置ではなくなると思います。
いかんせん、どのようなものをどう表示したいのか、
私には見えていないので、この話しが筋違いかも知れないです。

補足

A.アドバイスありがとうございます。
デザインを色々考えておりました、回答が遅れてしまい申し訳ありません。
フッターは別途用意して、無限スクロールの左上に質問掲示板に投稿されたコンテンツの中から mp4の動画のみ横スクロールで5個ランダムで表示させたいです。
画像のみの方が平等性があると思うのですがページの回転率が下がるのではないかと感じました。

回答No.27

dell_OK

・流れに沿うと Javascript で生成する方が自然だと思いました。

そうですね。
私もそう思います。
ただスクリプト内に直接 https://www.irasuto.cfbx.jp/ を書くことはさけたいと思っています。
なぜなら、ローカル環境でのテストにふさわしくないからです。
ローカル環境では http://localhost/ のようになる必要があるため直接書きたくないわけです。
WordPressのPHPではこの部分を home_url() で書いたり、
wp_upload_dir() で代替え画像ファイルをおいているであろうフォルダを参照できます。
ですが、JavaScriptではこのようなことができません。
なので、相対的なフォルダを参照して書くことになると思います。
おそらくこれで表示できると思います。
img.src = "../wp-content/uploads/代替え画像.jpeg";

画像の用意をしていただき、
そのファイル名でここを調整してください。

補足

Q.ただスクリプト内に直接 https://www.irasuto.cfbx.jp/ を書くことはさけたいと思っています。
なぜなら、ローカル環境でのテストにふさわしくないからです。
ローカル環境では http://localhost/ のようになる必要があるため直接書きたくないわけです。
WordPressのPHPではこの部分を home_url() で書いたり、
wp_upload_dir() で代替え画像ファイルをおいているであろうフォルダを参照できます。

A.解説ありがとうございます、そのような考えがあったんですね。
PHP でフォルダを隠して参照させることは頭にありませんでした勉強になります。
コード修正いたしました。

※最新コード
https://wandbox.org/permlink/8xsQr2Z5pfPKipXn

回答No.26

dell_OK

・「*」の意味について調べてみたのですが

私の問いかけは「*」ではありませんでした。
参考サイトのどの部分をどうコピーして手を加えたのかわかりませんが、
あまりいい手の加え方ではなかったように思います。
指摘したかったのは、「inline-block;」です。
これはプロパティの値として記述するものです。
ですがそのプロパティは記述されておらず値だけが記述されています。
その値から記述されているべきプロパティは「display」です。
前行にプロパティが記述されているかと思いましたが、ありません。
word-wrap:break-word; /* 文字を改行し枠内に収める */
inline-block;*display:inline;*zoom:1 /* <li>要素を横に並べる */
参考サイトを改めてみると、以下に類似の記述を見つけました。
コメントがあるのでもとにしたと思われる、ひとつめ。
　word-wrap:break-word; ←文字を改行し枠内に収める
　display:inline-block;*display:inline;*zoom:1 ←<li>要素を横に並べる
行の始まりが「inline-block」なのでもとにしたと思われる、ふたつめ。
　word-wrap:break-word;display:
　inline-block;*display:inline;*zoom:1
質問者さまのコードはこのふたつがまざっているような感じです。
ふたつめの方は、改行位置がよくなくて、
前行にプロパティ「display:」が書かれて、
次行に値「inline-block;」が書かれています。
どうもひとつめの前行と、ふたつめの次行がまざったのが質問者さまのコードです。
なので「inline-block;」が半端な値として存在しています。
これをブラウザが表現しようとする時に、
エラーにするか無視するか「display」だろうと判断するかはわかりませんが、
動作不定の原因になりかねません。
参考サイトの書き方がよくないのは「;」ごとに改行していないことです。
なのでこのようなミスを見つけにくくなっているように思います。
参考サイトの最初のその部分はこうです。
.yt-shelf-grid-item{width:175px;margin-right:10px;vertical-align:top;word-wrap:break-word;display:inline-block;*display:inline;*zoom:1}
これをコメント説明した時点でこのサイトの統一性がなくなっています。
せめてこう書いておいて欲しかったです。
　display:inline-block; ←<li>要素を横に並べる
　*display:inline; ←<li>要素を横に並べる
　*zoom:1 ←<li>要素を横に並べる
ひとつのサイトで同じようなものが何度も書かれている場合、
差異があることが多いので気を付けてください。
差異そのものがミス（参考サイト側の責）であったり、
ミスを誘導するような記述（参考する側の責）であったりします。

補足

Q.指摘したかったのは、「inline-block;」です。
これはプロパティの値として記述するものです。
ですがそのプロパティは記述されておらず値だけが記述されています。
その値から記述されているべきプロパティは「display」です。
質問者さまのコードはこのふたつがまざっているような感じです。

A.アドバイスありがとうございます。
プロパティが前行のコードから分断されていることに教えて頂き気が付きました。
以下の2つが記述されていることに違和感は覚えたのですが、どちらかを選択すべきですね。

display:inline-block;
display:inline;

Q.ひとつのサイトで同じようなものが何度も書かれている場合、
差異があることが多いので気を付けてください。
差異そのものがミス（参考サイト側の責）であったり、
ミスを誘導するような記述（参考する側の責）であったりします。

A.アドバイスありがとうございます。
似た意味の記述が繰り返し書かれていた場合は気を付けるように致します。