次の投稿、前の投稿のリンク：previous_post_link、next_post_link

    <?php
      $prev_post = get_previous_post(true,'');
      $next_post = get_next_post(true,'');
    ?>
    <?php if( $prev_post || $next_post ): ?>
      <!-- post-transiton-area -->
      <ul class="post-transiton-area content">
        <?php if ($prev_post): ?>
				<li class="post-transiton-previous">
					<div class="post-image">
						<img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($prev_post->ID)) ?>" alt="<?php echo get_the_title($prev_post->ID); ?>">
					</div>
					<div class="page-title">
						<a href="<?php echo esc_url(get_permalink($prev_post->ID)); ?>">
							<?php echo get_the_title($prev_post->ID); ?>
						</a>
					</div>
				</li>
				<?php endif; ?>
        <?php if ($next_post): ?>
				<li class="post-transiton-next">
					<div class="post-image">
						<img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($next_post->ID)) ?>" alt="<?php echo get_the_title($next_post->ID); ?>">
					</div>
					<div class="page-title">
						<a href="<?php echo esc_url(get_permalink($next_post->ID)); ?>">
							<?php echo get_the_title($next_post->ID); ?>
						</a>
					</div>	
				</li>
				<?php endif; ?>
      </ul>
      <!-- /post-transiton-area -->
    <?php endif; ?>

.post-transiton-area.content{
	display: flex;
	padding: 20px 0;
	position: relative;
	width: 100%;
	list-style: none;
	@media only screen and (max-width: 767px){
		display: block;
	}
	a{
		color: #363636 !important;
	}
	li{
		flex: 1;
		@media only screen and (max-width: 767px){
			& + li{
				margin-top: 15px;
			}
		}
	}
}
.post-transiton-previous,
.post-transiton-next{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 50%;
	padding: 10px !important;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 10px;
	line-height: 1.5;
	box-shadow: 0 0 4px rgba(0,0,0,0.1);
	transition: all .5s;
	z-index: 1;
	@media only screen and (max-width: 767px){
		margin: 15px 0 0;
		width: 100%;
		max-width: 100%;
	}
	.post-image{
		overflow: hidden;
		width: 80px;
		max-width: 80px;
		height: 80px;
		border-radius: 80px;
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.page-title{
		border: 0;
		width: calc(100% - 80px);
		@media only screen and (max-width: 767px){

		}
		a:hover{
			text-decoration: none !important;
			color: #e73c7ecc !important;
			border: 0;
			font-weight: inherit;
		}
	}
	&:hover{
		box-shadow: 2px 2px 8px rgba(0,0,0,0.15);;
	}
	&::before{
		content:"";
		display:block;
		position:absolute;
		top: 50%;
		width: 8px;
		height: 8px;
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
	}
	&::after{
		position: absolute;
		font-size: 30px;
		font-family: 'Pacifico', cursive;
		color: #999;
		opacity: .2;
		z-index: 999;
	}
}
.post-transiton-previous{
	flex-direction: row-reverse;
	margin-right: 15px;
	padding-left: 25px;
	@media only screen and (max-width: 767px){
		margin-right: 0;
	}
	&::before{
		border-left: 2px solid;
		border-bottom: 2px solid;
		left: 10px !important;
		border-color: #e73c7ecc;
	}
	&:hover{
		transform: translate(-5px, 0);
	}
	.page-title{
		padding-right: 10px;
	}
	&::after{
		content: "previous";
		top: -30px;
		left: 0;
	}
}
.post-transiton-next{
	flex-direction: row;
	margin-left: 15px;
	padding-right: 20px;
	@media only screen and (max-width: 767px){
		margin-left: 0;
	}
	&::before{
		border-right: 2px solid;
		border-top: 2px solid;
         left: auto  !important;
		right: 10px !important;
		border-color: #e73c7ecc;
	}
	&:hover{
		transform: translate(5px, 0);
	}
	.page-title{
		padding-left: 10px;
	}
	&::after{
		content: "next";
		top: -30px;
		right: 0;
	}
}