Vintage-code.(ヴィンテージ コード)

Vintage code.

(ヴィンテージ コード)

プロフィール欄の超簡単な作成方法 【ブログのサイドバーを、カスタマイズ】

HTML / css を駆使して、デザインで遊んでいる、神木剛(かみきごう)です。

 

プログラミングを少し覚えたので、既存の設定ではなく カスタマイズしたい心境です。

まさに、これがプログラミングの醍醐味!なのですが、ハマり過ぎ…笑

WordPress や有料版ではないので、そろそろ限界です)

 

では、作成方法に参ります。

 

html をコピペで、作る方法

はてな では、記事を書く際に「見たままモード」で書いた記事が、 「自動で HTML 」に変更されるので、これを利用して作成します。

 

まず「見たままモード」に、 プロフィールにしたい画像をアップします。

任意の大きさに、マウスでドラッグして変更。

 f:id:vintage-code001:20191113160900p:plain

 

任意の大きさに変更したら、見たままモード → HTML 編集に、切り替えます。


f:id:vintage-code001:20191113160945p:plain

 

こんな感じで、コードが生成されていると思います。

このコードを、 <center>  </center>で囲みます。※ HTML 中央寄せ コード。

 

実際には、

HTML

<center> ここにコピペ </center>

 

f:id:vintage-code001:20191119014942p:plain


この状態で、見たままモードに切り替えると、画像が中央寄せされます。←確認してみて下さい。

 

確認ができたら、再び HTML 編集画面に戻り、コードをコピーして、 
デザイン > カスタマイズ > サイドバー > モジュールを追加 > HTML
、先ほどコピーした HTML コードを貼り付けます。

 

f:id:vintage-code001:20191113161500p:plain

 

最後に、「適用」「変更を保存」ボタンを忘れずに。


これで、脱・デフォルトです😊

私は、はてな ID もコピーして中央寄せ、今まで使っていたプロフィール欄のモジュールは、文章用に使用しています。

 

他にも、 CSS や空白を入れて中央寄せする方法もありますが、
これが一番簡単で、綺麗に仕上がると思います👍

 

良かったら、作ってみて下さい♪ (*^^*)

  f:id:vintage-code001:20191113151045j:plain

 

 

はてな無料ブログで、トップページに記事を一覧表示させる方法

 

こんにちは、神木剛(かみきごう)です。 

前回の続き...ということで、はてなブログでトップページに記事を一覧表示できないか探した所...ありました。 

 

はてなブログの記事一覧(アーカイブ)の表示件数を変更する方法(PC版) - ミニマム コラム

トップページに記事を一覧表示する方法と、表示数を変更する方法が書かれています。

 

私は、

  1. デザイン変更
  2. 一覧記事の変更
  3. トップページに設定

という流れで、code 紹介と併せて 進めて参りたいと思います。

 

 

アーカイブページ、デザインの変更

はてなブログでは、

自分のブログURL /archive」と検索すると、アーカイブ(記事一覧)画面が表れます。 まず、ご覧ください。


デザイン変更で、参考にさせて頂いたのは、

cqs4live.hateblo.jp

 

私は、以下のように設定しております。 

See the Pen アーカイブページのデザイン by Gou Kamiki (@vintage_code_01) on CodePen.

 

 

次に、記事一覧数を変更します。

 ここから冒頭で紹介させて頂いたブログ、ミニマム コラム さんを参考にして参ります。

 

デザイン > カスタマイズ > フッター にコードを貼り付けます。

私はコードの5行目の数字を7に変更し、トップページに表示される記事一覧の数を7に変更しています。

コードの中ほどにある「これ以前の記事を表示する」の記述を変更すればボタン名を変更できます。

  

枠線を消すカスタマイズも実装済みです。

ボタン・デザインをアレンジしています。 

See the Pen トップページの記事一覧数を変更する方法 by Gou Kamiki (@vintage_code_01) on CodePen.

 

 

最後に、トップページを記事一覧に設定します。

はてなブログの管理ページから、

設定 → 詳細設定 と進み、「headに要素を追加」欄に以下のコードを貼り付けます。

  1.  「設定」-「詳細設定」ー「headに要素を追加」に以下のソースを貼り付ける
  2. 赤字の部分を自分のURLに変更する
  3. 青字の部分を自分のブログタイトルに変更する
  4. 「変更する」ボタンを押すのを忘れずに(ページの一番下にあります)

  

code

<script type="text/javascript">

if( location.href == '自分のブログURL/'){

location.href='自分のブログURL/archive';

}

</script>

<noscript>

<p><a href="自分のブログURL/archive">ブログ名</a></p>

</noscript>

 

設定できた時の高揚感が、たまらないですよね 😄!

有志の方に感謝いたします。ありがとうございました!

 

 

f:id:vintage-code001:20191110175408p:plain

 

 

追記:記事一覧を変更すると

カテゴリーページが表示されないエラーが発生したので、コードを削除しました。

今後の課題...