こんにちは Tomoです。

いろいろなブログをみていると過去の記事のリンクで画像とタイトルのような組み合わせの記事を見かけます。

Bloggerで簡単にできないか見たのですが、外部のプラグインをつかったりしているのはありましたが、独自のは探せませんでした。

直接投稿に記載する

まあ、「タイトル」「リンク」「アドレス」があればなんとかなるかと思いCSSとHTMLで手動で作っていきたいと思います。

完成系は以下のようなイメージにしようと思います。

HTMLタグとCSSについて以降解説します。

HTMLタグの構成

タグの構成は以下の通りです。

    
<div class="div-blog-link">
    <a href="{リンクアドレス}">
        <div class="div-blog-link-photo">
            <img src="{画像ファイルのパス}" width="150" height="auto" >
        </div>
        <div class="div-blog-link-title">
            <span class="blog-link-title">{タイトル} </span >{
        </div>
    </a>
</div>
    

図で表すと以下の通りです。

一番外側で『div』内側に『a』タグその内側に『div』タグを２つ並べています。

一番内側のタグの『左側』に画像、『右側』にタイトルを配置します。

左右の『div』タグの両方をクリックしても画面遷移できるように『a』タグで囲んでいます。

画像やタイトルをクリックしたときに画面遷移する場合は、この『a』タグを『div』タグに変えます。ここを変える場合は後述するcssも変える必要があります。

『a』タグは、左右の『div』タグの内側に記載します。

あと、『a』タグの中に『a』タグを書かないようにしてください。

まずはHTMLタグで骨組みを作ります。

CSSスタイル

次にCSSの構成を記載します。

外側のタグから内側に向かってわかる範囲で解説します。

    
.div-blog-link {
    border: solid 3px #99CFE5;
    border-radius: 10px;
}
    

『border: solid 3px #99CFE5;』このタグは太さ３pxの青色の実践で囲み線を書いています。

『border-radius: 10px;』で丸みをつけています。

一番外側は以上です。

次に『a』タグの説明です。

    
.div-blog-link > a {
    display: flex;
}
    

『.div-blog-link > a 』これは、「.div-blog-linkのクラスの次のaタグに対してスタイルを変更します。」

画像やタイトルをクリックしたときに画面遷移する場合は、ここも『div』タグに変更する必要があります。

『display: flex;』この記述で、内側の要素（ここでは左右のdivタグ）を横に並べることができるようになります。

    
.div-blog-link-photo {
    padding: 10px;
}
    

内側の画像用のdivタグのスタイルです。余白だけを設定しています。

    
.div-blog-link-title {
    width: 100%;
    position: relative;
}
    

内側のタイトル用のdivタグのスタイルです。width: 100%;position: relative;をしていしています。

    
.blog-link-title {
    padding: 15px 10px 10px 0;
    font-size: 18px;
    font-weight: bold;
    color: #99CFE5;
}
    

「blog-link-title 」はフォント指定と余白なので省略します。

    
.div-blog-link-title::after {
    content: '続きを読む>>';
    display: inline-block;
    position: absolute;
    bottom: 10px;
    right: 0px;
    width: 100px;
    border-radius: 3px;
    box-shadow: 1px 1px 1px #ccc;
    background: #99CFE5;
    padding: 5px;
    margin-right: 10px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}
    

「.div-blog-link-title::after」はdiv-blog-link-titleのあとつく疑似要素です。

『content: '続きを読む>>'』div-blog-link-titleのあとに「続きを読む>>」を表示します。

ポイントは『position: absolute;』でdiv-blog-link-title（親要素）から下に10px 右から0pxで配置するところかな？

後の要素は、「続きを読む>>」を装飾している文言ですのでここでは省略します。

まとめ

以上で完了です。

最後にソースを記載します。

HTML

    
<div class="div-blog-link">
    <a href="{リンクアドレス}">
        <div class="div-blog-link-photo">
            <img src="{画像ファイルのパス}" width="150" height="auto" >
        </div>
        <div class="div-blog-link-title">
            <span class="blog-link-title">{タイトル} </span >{
        </div>
    </a>
</div>
    

CSS

    
.div-blog-link {
    border: solid 3px #99CFE5;
    border-radius: 10px;
}
.div-blog-link > a {
    display: flex;
}
.div-blog-link-photo {
    padding: 10px;
}
.div-blog-link-title {
    width: 100%;
    position: relative;
}
.blog-link-title {
    padding: 15px 10px 10px 0;
    font-size: 18px;
    font-weight: bold;
    color: #99CFE5;
}
.div-blog-link-title::after {
    content: '続きを読む>>';
    display: inline-block;
    position: absolute;
    bottom: 10px;
    right: 0px;
    width: 100px;
    border-radius: 3px;
    box-shadow: 1px 1px 1px #ccc;
    background: #99CFE5;
    padding: 5px;
    margin-right: 10px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}