【blogger】QooQのヘッダー画像の下に画像リンクを貼る方法

「 ヘッダー画像の下に画像付きのリンクを設置したい」・・・WordPressを使ってた時からずっと、考えていました。WordPress時代は結局、どうすればイイのか分からず出来ませんでした。その想いはbloggerに切り替えてからも模索していた所、遂にヘッダー画像の下に画像付きのリンクの貼り方を載せてくれている人の記事を見つけました。

この記事では、bloggerのテーマ「QooQ」のヘダー画像の下に画像付きリンクの載せ方について解説します。あなたがこの記事を読むことで、bloggerブログでヘッダー画像の画像下に載せるリンクが作れるようになります。是非、最後まで読んでくださいね。

画像付きのリンクを載せたかった

画像付きリンクを載せるメリット

画像付きリンクの設置は超簡単でした

画像の準備

/*=== article window ===*/
.article-area{
    background-color:white;/*背景色*/
}
.article-container{
    width: 90%;/*画像表示の幅*/
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    box-sizing: border-box;
    margin: 0px auto;
    padding:0px;
    text-align:center;}
.article-box{
    box-sizing:border-box;
    border:2px solid whitesmoke;/*画像の枠色*/
    width:25%;
    padding:0px;
    margin:30px 15px;/*画像周りの空白*/
    overflow:hidden;}
.article-img img{
    width:100%;
    display:block;
    object-fit:cover;
    transition-duration: 0.5s;/*ゆっくり戻る*/}
.article-img:hover img{/*マウスオーバーで拡大表示*/
    transform: scale(1.1);/*1.1倍に表示*/
    transition-duration: 0.5s;/*ゆっくり拡大*/}
/*=== smartphone ２列表示 ===*/
@media(max-width: 767px){
.article-container {
    width:100%;
    flex-wrap: wrap;/*折り返し表示（２列）*/
    justify-content:space-between;
    padding:8px;}
.article-box {
    width:45%;
    padding:0px;
    margin:8px;}
.article-img img{
    width:100%;
    padding:0;
    object-fit:cover;}}
.page-entry .article-area{display:none;}
/*=== end of article window ===*/

貼り付け方は、麺左サイドバー⇒「テーマ」⇒「カスタム」⇒「詳細設定」⇒「css追加」で簡単に張り付けることが出来ます。最後に「保存」して完了です。

HTMLの編集

今回は、４枚の画図を使うのでそれぞれの、記事のURL・画像URL・記事のタイトルを入力してください。

作成したHTMLを貼りつけます。貼りつけ箇所は<div〜の前に貼りつけます。

今回のまとめ

編集後記

あなたに感謝

いつも最後まで読んで頂きありがとうございます。このブログに関するご意見などございましたら、サイドバーのお問い合わせから連絡をお願いしますね。その他、質問や感想なども随時受け付けています。あなたの意見を聞かせて頂けると嬉しいです。よろしくお願いします。

ブログランキングに参加してます♪

　

あなたの応援に感謝します。

～この記事を書いた人～

ブログ ✕ ライティングだけで生活することを目標にブログを書いています。
知識ゼロからのスタートでしたが、ようやく【５つの自由】を手に入れる道筋が見えてきました。これからも情報発信を続けます。