以下のようにサイトを紹介する時に画像付きのリンクを見たことはありますでしょうか。
このようなHTMLを簡単に作ることができるのが、ShareHtmlを、もっと綺麗にしたメーカーです。
今回は、ShareHtmlを、もっと綺麗にしたメーカーをDokuWikiでの使い方を説明したいと思います。

簡単にできますので、試し見てください。
https://sharehtml.site/

HTMLを作成しただけでは、表示してくれないので、CSSを準備しましょう。
「ShareHtmlを、もっと綺麗にしたメーカー」でサイトを作成した時のCSSを使ってもいいのですが、
ShareHTMLの新しい形！綺麗な記事リンクHTMLを作れる超便利ウェブツール – あなたのスイッチを押すブログ に
修正版のCSSがありますので、それを使いましょう。

new-sharehtml.cssを(略)/lib/tpl/dokuwiki/css/以下に置き、style.iniで、CSSをインポートしましょう。

(略)
css/usertools.less        = screen
css/pagetools.less        = screen
css/content.less          = screen
css/my_style.css      = screen
css/new-sharehtml.css      = screen       <-  これを追加


css/mobile.less           = all
css/print.css             = print
(略)

/*-----New Share HTML----*/
 
.link-box {
	border:1px solid #e1e1e1;
	padding:10px;
	display:flex;
	margin:30px;
}
 
.link-box:hover {
	background-color:#f3f3f3;
	-webkit-transition:background-color .35s;
	transition:background-color .35s;
}
 
.img-box {
	width:25%;
	float:left;
}
 
.img-box div {
	min-height:170px;
	background-size:cover;
	background-position:center center;
}
 
.text-box {
	width:75%;
	float:left;
	padding-left:20px;
	line-height:1.7;
	margin:0;
}
 
.text-box .title {
	font-size:18px;
	font-weight:600;
	color:#428bca;
	padding:0;
	margin:0;
}
 
.text-box .description {
	font-size:15px;
	color:#333;
	padding:0;
	margin:0;
}
 
@media only screen and (max-width:479px) {
 
.img-box div {
	min-height:80px;
}
 
.text-box {
	margin-left:10px;
	line-height:1.5;
}
 
.text-box .title {
	font-size:13px;
	margin:0;
}
 
.text-box .description {
	font-size:11px;
	margin-top:5px;
}
}
 
/*-----ここまで：New Share HTML----*/

「ShareHtmlを、もっと綺麗にしたメーカー」はソースコードが公開されており、
自分のサーバに置いて、動かすこともできます。

https://github.com/manabubannai/ShareHtml

• ShareHTMLの新しい形！綺麗な記事リンクHTMLを作れる超便利ウェブツール – あなたのスイッチを押すブログ