DokuWikiで情報発信

個人での情報発信や社内での情報共有に便利なDokuWikiを紹介するサイトです。

ユーザ用ツール

サイト用ツール


サイドバー

目次

DokuWikiを理解

DokuWikiの構築

よく確認するページ

Action disabled: source
· 最終更新: 2018/11/23 by oreda admin



「ShareHtmlを、もっと綺麗にしたメーカー」でサイトリンクを作る



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

サイトリンク例

「ShareHtmlを、もっと綺麗にしたメーカー」でHTMLを作る

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


CSSの準備

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

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

(略)/lib/tpl/dokuwiki/style.ini
(略)
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-sharehtml.css
/*-----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を、もっと綺麗にしたメーカー」を作る

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

https://github.com/manabubannai/ShareHtml


参考




· 最終更新: 2018/11/23 by oreda admin

ページ用ツール