出版物は、著者と読者の間のコミュニケーションの主要な単位です。 実践は、ほとんどすべての形式をHabréに配置できることを示しています。小さな発表と長いレビュー、インタビュー、写真レポート、イベントブロードキャスト、レッスンなどです。 多くの場合、出版物の成功はそのデザインにも依存します-快適にデザインされた資料を読むことは喜びです。 この記事では、素材の優れた設計に関する多くの有用なヒントを提供しようとします。



そして、最初のライフハックは、クリック可能なkataへの画像です。







そして、あなたはこの出版物の中にいます。 このライフハックが記事の表示にどのように影響するかはわかりませんが、見出しをクリックするよりも、写真をクリックする方がはるかに簡単です（特にタッチデバイスで）。 したがって、著者がこのライフハックを使用すると素晴らしいことです（katの前に複数の写真が存在する可能性があるため、自動的に行いません）。公開直後に記事のアドレスをコピーし、katの前の写真に添付します。

ツール

Habréで出版物を作成する形で直接テキストを書く人々を直接知っています。 ただし、サイトに自動保存機能があります（localStorageを介して動作します）にもかかわらず、どこかで資料を作成し、すべての編集を終えてHabrに転送する方が適切です。 最も便利なオプション（チームワークを含む）はGoogleDocsです。 一般に、どのテキストエディタも適していますが、タブレットの同じページで、非常に多くの場合、温かいチューブテキストが作成されます。



これらのオプションは、少なくとも3つの理由で推奨されます。



-LocalStorageに依存せず、テキストが誤って消えることはありません。どのデバイスからもアクセスできます。

-出版テキストは一気に書かれていないため、より思慮深く、完全で、全体論的であることがわかります。

-さまざまなデザインオプションの存在により、記事をそのまま表示できます。 後続の品目転送には、たとえばこのコンバータなどのコンバータを使用できます。

テキスト

「Habré」（および他のTMコンテンツプロジェクト）には、同じ形式の出版物があります-プレビュー付きの通常のエディター。 書き込みにはプレーンテキストが使用され、HTMLタグで装飾することができます。 多くの場合（特にSandboxで）、作成者がフックまたは詐欺師によってCSSスタイルを詰め込んだり、段落タグで段落を書いたり、リンクターゲットを書いたりするなどのテキストが見られます-これはすべて不要です。サイトによって解釈されます。 投稿作成フォームで数回再生してみて、プレビューボタンを使用して結果を評価することを忘れないでください。 それまでの間、いくつかのヒント。

段落

テキストが最悪の場合、1つのソリッドシートに挿入される場合です。 ランダムなホイールスクロール（またはタブレットへのずさんなタッチ）だけで、あなたはすでに読んだ場所を失っています。 テキストを小さな段落に分割し、それぞれにいくつかの文を入れます。



テキストの段落は写真で区切ることができます-これも特に関連がある場合に便利です。

見出し

サイトには、HTMLマークアップのように、H1〜H6の6つのレベルのヘッダーがあります。 実際、ほとんどの著者は少数（最大（H1）、小規模（H2）、中（H3））のみを使用していますが、残りはあまり進んでいません。 テキストを構造化するために使用します-メインセクションの最大セクションを選択し、小さな見出しを使用します-サブセクションなど。 見出しの見出しを作成しないでください。



ちなみに、ヘッダー（およびプレーンテキスト）はフォントカラータグ（CSSスタイルではなくタグ付き！）でペイントすることもできます-この機能は特に企業クライアントに好まれ、ヘッダーを企業カラーで色付けします（たとえば、この記事ではヘッダーのロゴの色があります） Habra）。 このオプションは、白黒のテキストシートの背景に対してタイトルをさらに強調するため、優れています。

例：

<h4><font color="#cc0000">Irony-</font></h4>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果：

アイロニーヘッダー

参照資料

長いリンクをパブリケーションのテキストに直接挿入しないでください-それらを任意の単語に添付してください。 比較する：

UFOについてのGoogle-www.google.com/?gfe_rd=cr&ei=V_GiVc6KOLCr8wf5zoDgBQ&gws_rd=ssl#newwindow=1&q=%D0%BD%D0%BB%D0%BE



UFOについてのGoogle

記事で使用されている資料へのリンクを挿入することを怠らないでください-Habréの出版物、Wikipediaの記事など-記事が最大限の利益をもたらす場合に適しています。必要な情報はすべて著者によって事前に慎重に収集されるため、読者はその後検索エンジンを登る必要はありません。 これとカルマのプラス記号は、残念なことではありません。

特別なタグ

必ずサイトで利用可能なタグを調べてください-それらの中には多くの便利なものがあります。 たとえば、記事で珍しい略語を使用している場合、abbrタグを使用してその意味を解読してみませんか？ いかにクールかをご覧ください。

 <abbr title="   "></abbr>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果：



KDPV

また、ソースタグとコードタグの違いを感じる人はほとんどいません。 ソースは構文強調表示付きのブロック要素を挿入し、コードは行要素（基本的には等幅フォント）を挿入します。 したがって、コードタグに複数行のコードを挿入しても意味がありません。メインテキストとマージすると見苦しくなります。 しかし、ソースは反対です。



行と列を組み合わせる機能など、テーブルのサポートがあることを誰もが知っているわけではありません。 テーブルのフレームの厚さや背景色を設定することはできませんが、テーブル内では同じフォーマットの画像とテキストを使用できます-責任を持ってアプローチすれば、美しくなります。 はい、写真付きのテーブルを挿入できると誰かが言うでしょうが、この方法ではインデックスが作成されず、その中の何かを変更することはより困難になります。



他のタグがいっぱい：他のユーザーに言及するため（トラッカーで気付くため）、インタラクティブなTwitterカードを挿入するためなど

ネタバレ

別に言及したい別の特別なタグ。 ネタバレは記事の一部の情報を隠すために使用されますが、同時にクリック後にアクセスできるようにするためにも使用されます。

画像

画像に関しては、次の2つの機能を知る必要があります。

• Habrahabr / Geektimes / Megamindのすべての画像は、画像を保存するための特別なリソースであるHabrastorageサービスに保存されます。 外部サイトから写真を挿入しても、Habrastorageにリロードされます。数年たっても利用可能です。 サービスに写真を注ぐ-それは非常に便利です。
  
  
• すべての大きな画像は、CSSを使用して自動的にスケーリングされます-そのため、サイトのレイアウトはなくなりません。 つまり、FullHDスクリーンショットを挿入できますが、ほとんど何も表示されません。画像のフルバージョンへのリンクを書き込んで画像をクリックできるようにするのが面倒ではありません。

KDPVの選択

この出版物で使用される最初の画像はKDPVであり、注意を引くための画像またはカタの前の画像でもあります。 名前が示すように、この画像には大きな使命があります。潜在的な読者が出版物のフィードを見るときに注目を集めることです。 そして、それがこの写真を使うべき理由です-もしそれがなければ、あなたの出版物はスクロール時に「失われる」可能性が非常に高いです。 キャットの前の写真に興味をそそられたので、この出版物に複数回来たことを認めなければなりませんか？



出版物の運命は、多くの場合、KDPVの選択、そのコメントの雰囲気に依存します。 ブランドロゴほど退屈なものはありません。注目を集めるために、より明るくてジューシーなものを使用してください。 ユーモアとミームは歓迎されますが、すべてが適度であるべきです-誰もがミームに飽きていて、あなた自身がそれがあまり適切でないことを理解しているなら-別の写真を探してください。 「写真のためだけに行った」や「写真でさえこの投稿を保存できませんでした」などのコメントが何度もありました。



良い例： おっぱいあり 、 おっぱいなし 。



パブリケーションサイクルを書いている場合、katの前に同じ画像を使用するのが理にかなっています。そのサイクルの前のパブリケーションが好きな人は、新しいパートに入る可能性があります。

スクリーンショット

Macユーザーの場合、すべてがシンプルです。SteveJobs自身が、「CMD + Shift + 4 + Space」の組み合わせを使用して、影付きのウィンドウの美しいスクリーンショットを作成するように命じました。 WindowsおよびLinuxユーザーの場合、膨大な数のさまざまなユーティリティとメソッドがあります-あなたの裁量で。





「CMD + Shift + 4 +スペース」の組み合わせを押した後のOS Xのスクリーンショット。 署名-斜体+フォントの色= "99999"



いくつかのニュアンスがあります。

• スクリーンショットが非常に大きい場合、ほとんどの場合、パブリケーションに完全には収まりません。この場合、クリック可能にする方が簡単です。そのため、画像のサムネイルをクリックすると、完全なスクリーンショットが開きます。 これは、構築によって行われます。
  
  
  
  

   <a href="original"><img src="preview"></a>
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  写真がクリック可能であることをテキストまたは署名で署名することを忘れないでください。
  
  
• ウィンドウの一部のスクリーンショットを挿入すると、高い確率でスクリーンショットにテキストが表示され、記事のように白黒である可能性があります。 この場合、スクリーンショットはテキストとマージされる可能性があるため、画像をテキストから明確に分離するフレームに画像を作成するのに面倒ではありません。 Photoshopでは、これは数回クリックするだけです：レイヤー設定>ストローク。

フレームなしの画像、align = "center"



JPEGスクリーンショットとPNG写真を挿入しないでください-これはコメントで無視されません。 同様に、ひどい品質の写真（ジャッカルスケールで3点以上）は使用しないでください。

テキストの折り返し

記事で小さな画像（幅300〜400ピクセル未満）を使用すると、画像の両側に空の領域ができます。 それらを取り除くには、必要に応じて、値をleft、center、またはrightに設定したalign属性で画像を登録できます。 後で複数の改行を避けるには、clear属性を使用します。



また、画像の幅と高さの属性を設定することもできます-特に、出版テキストのアイコンをピクセルに揃えたい完璧主義者の場合。

その他のヒント

• サイトで利用可能なタグを確認してください。 同じ記事をさまざまな方法でフォーマットできます。 Habréの記事がポートフォリオの一部としてあなたのためにあるなら、美しい結果に少し時間を費やすのが面倒ではありません。
  
  
• 他のユーザーがパブリケーションをフォーマットする方法に注意してください。 ほぼ毎日、このために多くの例が公開されています。
  
  
• インデントに注意してください。 異なるオブジェクトの場合、それらは異なります-ヘッダーには1つのインデントがあり、コードのある画像またはタグは異なります。 出版物に余分な改行があり、写真がテキストに「貼り付いている」場合はugいです。
  
  
• スペルマシン/タイポグラファーを使用します。 ハイフン、引用符、ドットなど -それはあなたの裁量です。 しかし、エラーを好む人はほとんどいません-少なくともブラウザが強調していることを修正してください。
  
  
• そして最も重要なのは、プレビューを使用することです。 サイトに繰り返し、未完成の出版物を掲載しました。 システムマーキング （ゲームに同意）または写真なし。 せいぜい、彼らは修正のためにドラフトコピーで出版物を隠すことができたが、機能しないリンクはソーシャルネットワークに行くことができた。 また、公開後の記事は最上部に表示されません-最初の公開時の場所に表示されます。 最悪の場合、これはコメントの議論の焦点を変えました-あなたはそれを必要としますか？ そのため、素材を外のどこかで準備することをお勧めしますが、このアプローチでも、一度カットする前に7回測定する必要があります。
  
  

終わり

いくつかのヒント（かなりわかりやすい）を共有しましたが、出版物にとって最も重要なことは、それを面白くすることであることを忘れないでください。 面白くない場合、デザインは保存されません。 しかし同時に、美しくデザインされた出版物を読むことは常に喜びです。 この場合、無理をしないことが重要です。すべてが適度に良好です。



出版物のデザインに関する推奨事項を書いてください-ここに最も価値のあるヒントを追加します。