リンクボックス

タイトル

解説

<style>
a.st-flexbox-link,
a.st-flexbox-link:visited{
	text-decoration:none;
	color:inherit;
}
.st-header-flexbox {
	text-align: center;
	width: 80%;
}
.st-header-flexbox p:last-child {
	margin-bottom:0;
}
.st-header-flextitle {
	font-weight:bold;
	color:#fff;
	line-height:1.3;
	margin-bottom:10px;
}
.st-header-flextitle .fa{
	margin-right:7px;
}
.st-header-flexwrap {
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden;
	background-position: 50% 50%;
	background-size:cover;
	position: relative;
  	z-index: 0;
}
.st-header-flexwrap.st-blur::before {
	content: '';
	position: absolute;
	top: -5px;
	bottom: -5px;
	left: -5px;
	right: -5px;
	background: inherit;
	filter: blur(5px);
	transition: filter 0.3s ease;
	z-index: -1;
}
.st-header-flexwrap.st-blur:hover::before {
	filter: blur(0);
}
</style>
<a href="http://searchdesk.com" style="text-decoration:none;">
  <div class="st-header-flexwrap st-blur" style="height:auto;width:100%;box-sizing:border-box;background-color:#ccc;border-radius: 0px;border: solid #ccc 1px;background-image: url('http://reform-ifuji.jp/wp-content/uploads/2018/11/book-decor-decorative-plant-48012.jpg');padding:20px;margin-bottom:0px;">
    <div class="st-header-flexbox">
      <p class="st-header-flextitle" style="font-size:200%;color:#fff;text-shadow:1px 1px 1px #424242;">タイトル</p>解説
    </div>
  </div>
</a>

<?php
$link="http://searchdesk.com";
$image="http://reform-ifuji.jp/wp-content/uploads/2018/11/book-decor-decorative-plant-48012.jpg";
$title="タイトル";
$subTitle="解説";
?>
<style>a.st-flexbox-link,a.st-flexbox-link:visited{text-decoration:none;color:inherit;}.st-header-flexbox {text-align: center;width: 80%;}.st-header-flexbox p:last-child {margin-bottom:0;}.st-header-flextitle {font-weight:bold;color:#fff;line-height:1.3;margin-bottom:10px;}.st-header-flextitle .fa{margin-right:7px;}.st-header-flexwrap {display:flex;justify-content:center;align-items:center;overflow:hidden;background-position: 50% 50%;background-size:cover;position: relative;z-index: 0;}.st-header-flexwrap.st-blur::before {content: '';position: absolute;top: -5px;bottom: -5px;left: -5px;right: -5px;background: inherit;filter: blur(5px);transition: filter 0.3s ease;z-index: -1;}.st-header-flexwrap.st-blur:hover::before {filter: blur(0);}</style>
<?= '<a href="' . $link . '" class="st-flexbox-link" rel="nofollow">'; ?>
  <?= '<div class="st-header-flexwrap st-blur" style="height:auto;width:100%;box-sizing:border-box;background-color:#ccc;border-radius: 0px;border: solid #ccc 1px;background-image: url(' . $image . ');padding:20px;margin-bottom:0px;">'; ?>
    <div class="st-header-flexbox">
      <p class="st-header-flextitle" style="font-size:200%;color:#fff;text-shadow:1px 1px 1px #424242;"><?= $title; ?></p><?= $subTitle; ?>
    </div>
  </div>
</a>

<?php /* ↓↓↓リンクボックス↓↓↓ */ ?>
<?php
$link="http://searchdesk.com";
$image="http://reform-ifuji.jp/wp-content/uploads/2018/11/book-decor-decorative-plant-48012.jpg";
$title="タイトル";
$subTitle="解説";
?>
<style>a.st-flexbox-link,a.st-flexbox-link:visited{text-decoration:none;color:inherit;}.st-header-flexbox {text-align: center;width: 80%;}.st-header-flexbox p:last-child {margin-bottom:0;}.st-header-flextitle {font-weight:bold;color:#fff;line-height:1.3;margin-bottom:10px;}.st-header-flextitle .fa{margin-right:7px;}.st-header-flexwrap {display:flex;justify-content:center;align-items:center;overflow:hidden;background-position: 50% 50%;background-size:cover;position: relative;z-index: 0;}.st-header-flexwrap.st-blur::before {content: '';position: absolute;top: -5px;bottom: -5px;left: -5px;right: -5px;background: inherit;filter: blur(5px);transition: filter 0.3s ease;z-index: -1;}.st-header-flexwrap.st-blur:hover::before {filter: blur(0);}</style>
<?= '<a href="' . $link . '" class="st-flexbox-link" rel="nofollow">'; ?><?= '<div class="st-header-flexwrap st-blur" style="height:auto;width:100%;box-sizing:border-box;background-color:#ccc;border-radius: 0px;border: solid #ccc 1px;background-image: url(' . $image . ');padding:20px;margin-bottom:0px;">'; ?><div class="st-header-flexbox"><p class="st-header-flextitle" style="font-size:200%;color:#fff;text-shadow:1px 1px 1px #424242;"><?= $title; ?></p><?= $subTitle; ?></div></div></a>
<?php /* ↑↑↑リンクボックス↑↑↑ */ ?>