WebこれだけノートWebこれだけノートホームTipsHTMLで作成したページに画像入りリンクカードを手動で実装する2024-05-08Webページ内に参考サイトや関連する内部のページにリンクを設置する際に多く使われるブログカードはブログサービスやCMSのエディタからだと簡単に設置が可能。HTMLで書いたオーソドックスなWebページで、同じようなEmbedカード風の表示をしようとすると少しばかり手間が発生することになります。非表示ページ内に画像付きリンカードをHTML&CSSで実装させるリンクカードのスタイルシートカード挿入か所へ記載するHTMLWordPress内で使うとスタイルが崩れる場合ページ内に画像付きリンカードをHTML&CSSで実装させるここでは、そんな少しの手間はかかりますがHTMLとCSSを使ってページ内へ画像付きのリンクを作成してみることにします。次のリンクは当サイトのトップページを対象にしたリンクカードの設置例。WebこれだけノートWebサイトの作成と公開、維持管理に必要な知識について、基本からすべて習得することが難しいHTMLやCSSの戸惑いがちな事例をポイントごとに分かりやすくピックアップしてまとめています。表示させるページに適応させるスタイルシート(CSS)とHTMLへの記載方法は次の通りになります。リンクカードのスタイルシート既存のスタイルシートへ次の通りリンクカードのスタイルを書き加えます。*/}最初に、表示枠のデザインを定義し、続いて左側に表示する画像、タイトル、ディスクリプションについてそれぞれのサイズや配置を指定しています。2か所で!importantを使っていますが、これはWordPress内で使ったときの対応ですので、純粋なHTMLページではなくても大丈夫かと思われます。スマホ画面で表示する際にディスクリプションンに使うテキスト文を省略するため行数を指定して「まるめ」をしています。カード挿入か所へ記載するHTMLリンクカードのHTMLは次のように記述しています。class="linkcard_text">ディスクリプション。href="https://リンク先のURL.html"></a></div>赤のマーカー部分をリンク先のページに見合う形に編集して使います。タイトルとディスクリプションにはpタグを使っていますが、気になる場合は別のタグへ変更しても良いでしょう。WordPressの標準Embedカードをブラウザの開発者モードでチェックしてみると同じくpタグが使われているようです。今回作成したリンクカード(ブログカード)は、CMSを使わないHTMLページ向けに用意したものですが、WordPressの投稿ページや固定ページでも利用が可能です。WordPressでこのリンクカードを表示させると、使用しているテーマやプラグイン、あるいは標準の機能によってデザイン補正のため自動的にカード内にpタグが付加されてしまうことがあります。この場合、タイトルやテキスト文の表示位置が意図した配置よりずれてしまうため対策が必要です。このpタグの自動挿入を停止させるには子テーマのfunction.phpへ次のコードを追加します。'wpautop');なお、function.phpは重要なファイルですのでトラブル回避のため、ローカルにバックアップを取り編集前の状態へ回復させる手段を確保してから編集する必要があります。:Tips分かりやすいテーブルを使った表の作成サイドバーの新着記事表示を再開することにした記事中のテキストリンク手前に見出しのようなラベルをつけてみるでかポチWebサイトこそ個人における最高の自己表現の手段との考えのもと、その実現に必要な情報関連の知識や身近な情報などをまとめています。詳しいプロフィールはこちら。